Search completed in 1.04 seconds.
event/target - Archive of obsolete content
create objects that broadcast events. users of the object can listen to the events using the standard on() and once() functions. usage many objects in the sdk can broadcast events. for example, a panel instance emits an show event when the panel is shown. with this module you can create your own objects that emit events. ...
...he events using the standard on() and once() functions. usage many objects in the sdk can broadcast events. for example, a panel instance emits an show event when the panel is shown. with this module you can create your own objects that emit events. this module provides an exemplar event
target object, that implements an interface for adding and removing event listeners of a specific type. event
target is the base class for all objects in sdk on which events are emitted. ...
... a panel instance emits an show event when the panel is shown. with this module you can create your own objects that emit events. this module provides an exemplar event
target object, that implements an interface for adding and removing event listeners of a specific type. event
target is the base class for all objects in sdk on which events are emitted. also see the tutorial on implementing event
targets to get started with this api. instantiation it's easy to create event
target objects, no special arguments are required. const { event
target } = require("sdk/event/
target"); let
target = event
target(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmyevent... will be auto registered for associated 'messa...
...And 14 more matches
MouseEvent.relatedTarget - Web APIs
the mouseevent.related
target read-only property is the secondary
target for the mouse event, if there is one. ...
... the mouseevent.related
target read-only property is the secondary
target for the mouse event, if there is one. ...
... the mouseevent.related
target read-only property is the secondary
target for the mouse event, if there is one. ...
...And 14 more matches
Comparison of Event Targets - Web APIs
event
targets it's easy to get confused about which
target to examine when writing an event handler. this article should clarify the use of the
target properties. there are five
targets to consider: property defined in purpose event.
target dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.current
target dom event interface the event
target whose eventlisteners are currently being processed. as the event capturing and bubbling occurs, this value changes. event.related
target dom mouseevent interface identifies a secondary
target for the event. ...
... call that triggered this event, eg: element.dispatchevent(event) event.current
target dom event interface the event
target whose eventlisteners are currently being processed. as the event capturing and bubbling occurs, this value changes. event.related
target dom mouseevent interface identifies a secondary
target for the event. event.explicitoriginal
target event.webidl if the event was re
targeted for some reason other than an anonymous boundary crossing, this will be set to the
target before the re
targeting occurs. for example, mouse events are re
targeted to their parent node when they happen over text nodes (bug 185889), and in that case .
target will show the parent and .explicitoriginal
target will show the text node. unlike .originalt...
... the event was re
targeted for some reason other than an anonymous boundary crossing, this will be set to the
target before the re
targeting occurs. for example, mouse events are re
targeted to their parent node when they happen over text nodes (bug 185889), and in that case .
target will show the parent and .explicitoriginal
target will show the text node. unlike .original
target, .explicitoriginal
target will never contain anonymous content. event.original
target event.webidl the original
target of the event, before any re
targetings. see anonymous content#event_flow_and_
targeting for details. event.composed
target event.webidl the original non-native
target of the event before composition from shadow dom. ...
...And 13 more matches
Creating Event Targets - Archive of obsolete content
this tutorial describes the use of low-level apis. these apis are still in active development, and we expect to make incompatible changes to them in future releases. the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event
targets. for example, you can listen to the tabs module's ready event or the panel object's show event. with the sdk, it's also simple to implement your own event
targets. this is especially useful if you want to build your own modules, either to organize your add-on better or to enable other developers to reuse your code. if you use the sdk's event framework for your event
targets, users of your module can listen for events using the sdk's standard event api. in this tutorial we'll create part ...
...getbookmarkuri(aitemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; exports.main = function() { bookmarkservice.addobserver(bookmarkobserver, false); }; exports.onunload = function() { bookmarkservice.removeobserver(bookmarkobserver); } try running this add-on, adding and visiting bookmarks, and observing the output in the console. modules as event
targets we can adapt this code into a separate module that exposes the sdk's standard event interface. to do this we'll use the event/core module. 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 bookmarkser...
... export its own event api. this consists of three functions: on(): start listening for events or a given type once(): listen for the next occurrence of a given event, and then stop removelistener(): stop listening for events of a given type the on() and once() exports delegate to the corresponding function from event/core, and use bind() to pass the exports object itself as the
target argument to the underlying function. the removelistener() function is implemented by calling the underlying off() function. we can use this module in the same way we use any other module that emits module-level events, such as tabs. for example, we can adapt "index.js" as follows: var bookmarks = require("./bookmarks"); function logadded(uri) { console.log("added: " + uri); } function logvi...
...And 11 more matches
AudioParam.setTargetAtTime() - Web APIs
the larger this value is, the slower the transition will be. ...
...the larger this value is, the slower the transition will be. ...
...the larger this value is, the slower the transition will be. ...
...And 10 more matches
EventTarget.addEventListener() - Web APIs
the event
target method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the
target. common
targets are element, document, and window, but the
target may be any object that supports events (such as xmlhttprequest). addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the event
target on which it's called. syntax
target.addeventlistener(type, listener [, options]);
target.addeventlistener(type, listener [, usecapture]);
target.addeventlistener(type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters type a case-sensitive string representing the event type to listen for. listener the object that receives a notifi...
...bject implementing the eventlistener interface, or a javascript function. see the event listener callback for details on the callback itself. options optional an options object specifies characteristics about the event listener. the available options are: capture a boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any event
target beneath it in the dom tree. once a boolean indicating that the listener should be invoked at most once after being added. if true, the listener would be automatically removed when invoked. passive a boolean that, if true, indicates that the function specified by listener will never call preventdefault(). if a passive listener does call preventdefault(), the user agent will do nothing othe...
...roving scrolling performance with passive listeners to learn more. mozsystemgroup a boolean indicating that the listener should be added to the system group. available only in code running in xbl or in the chrome of the firefox browser. usecapture optional a boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any event
target beneath it in the dom tree. events that are bubbling upward through the tree will not trigger a listener designated to use capture. event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. the event propagation mode determines the order in which elements receive the e...
...And 9 more matches
EventTarget.removeEventListener() - Web APIs
options optional an options object that specifies characteristics about the event listener. ...
... options optional an options object that specifies characteristics about the event listener. ...
... options optional an options object that specifies characteristics about the event listener. ...
...And 9 more matches
EventTarget - Web APIs
event
target is a dom interface implemented by objects that can receive events and may have listeners for them. element, document, and window are the most common event
targets, but other objects can be event
targets, too. for example xmlhttprequest, audionode, audiocontext, and others. many event
targets (including elements, documents, and windows) also support setting event handlers via onevent properties and attributes. ...
...ting event handlers via onevent properties and attributes. ...
...nt handlers via onevent properties and attributes. ...
...And 8 more matches
XMLHttpRequestEventTarget - Web APIs
xmlhttprequestevent
target is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest. ...
...n an object that will handle events for an xmlhttprequest. ...
...ect that will handle events for an xmlhttprequest. ...
...And 7 more matches
preferences/event-target - Archive of obsolete content
enables add-ons to listen to change events to the system-wide settings. these are the same preferences that are exposed to users in the about:config page. preferences/service gives you full access to the preferences system. you can also use the simple-prefs module to access just the preferences for your own add-on and expose them to the user in the add-on manager. ...
...ss to the preferences system. you can also use the simple-prefs module to access just the preferences for your own add-on and expose them to the user in the add-on manager. globals constructor prefs
target(options) parameters options : object required options: name type branchname string by default this is "", the root. ...
... use the simple-prefs module to access just the preferences for your own add-on and expose them to the user in the add-on manager. globals constructor prefs
target(options) parameters options : object required options: name type branchname string by default this is "", the root. ...
...And 6 more matches
XRInputSource.targetRaySpace - Web APIs
the read-only xrinputsource property
targetrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the
target ray in the virtual space. its native origin tracks the position of the origin point of the
target ray, and its orientation indicates the orientation of the controller device itself. these values, interpreted in the context of the input source's
targetraymode, can be used both to fully interpret the device as an input source. <<<--- needs diagram showing
targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. ...
...troller device itself. these values, interpreted in the context of the input source's
targetraymode, can be used both to fully interpret the device as an input source. <<<--- needs diagram showing
targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let
targetrayspace = xrinputsource.
targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's
target ray in virtual space. ...
...osition and orientation in virtual space, use the gripspace property. syntax let
targetrayspace = xrinputsource.
targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's
target ray in virtual space. the native origin of the returned xrspace is located at the point from which the
target ray is emitted, and the orientation of the space indicates the direction in which the
target ray is pointing. usage notes all input sources—regardless of their
targetraymode—have a valid
targetrayspace. ...
...And 6 more matches
XRTargetRayMode - Web APIs
the webxr device api enumerated type xr
targetraymode describes the method by an input controller's
targeting ray is being produced.
targeting may be done by looking at the
target using a gaze-tracking system, pointing at the
target with a hand controller, glove, or motion-tracking system, or by tapping or clicking on the
target using a finger on a screen or with a mouse. typically a
target ray is drawn from the source of the
targeting system along the
target ray in the direction in which the user is looking or pointing. the style of the ray is generally up to you, as is the method for indicating the endpoint of the ray. the
targeted point or object might be indicated by drawing a shape or highlighting the
targeted surface or object. ...
... screen or with a mouse. typically a
target ray is drawn from the source of the
targeting system along the
target ray in the direction in which the user is looking or pointing. the style of the ray is generally up to you, as is the method for indicating the endpoint of the ray. the
targeted point or object might be indicated by drawing a shape or highlighting the
targeted surface or object. a
target ray emitted by a hand controller. 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. values gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is looking. ...
...ting the
targeted surface or object. a
target ray emitted by a hand controller. 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. values gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is looking. the
target ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking. screen the direction of the
target ray is indicated using a tap on a touch screen, mouse, or other tactile input device. tracked-pointer
targeting is being performed using a handheld device or hand-tracking system which the user points in the direction of the
target. ...
...And 6 more matches
Event.currentTarget - Web APIs
the current
target read-only property of the event interface identifies the current
target for the event, as the event traverses the dom. it always refers to the element to which the event handler has been attached, as opposed to event.
target, which identifies the element on which the event occurred and which may be its descendant. syntax var currentevent
target = event.current
target; value event
target examples event.current
target is interesting to use when attaching the same event handler to several elements. ...
...ers to the element to which the event handler has been attached, as opposed to event.
target, which identifies the element on which the event occurred and which may be its descendant. syntax var currentevent
target = event.current
target; value event
target examples event.current
target is interesting to use when attaching the same event handler to several elements. ...
...ched, as opposed to event.
target, which identifies the element on which the event occurred and which may be its descendant. syntax var currentevent
target = event.current
target; value event
target examples event.current
target is interesting to use when attaching the same event handler to several elements. ...
...And 5 more matches
:target - CSS: Cascading Style Sheets
the :
target css pseudo-class represents a unique element (the
target element) with an id matching the url's fragment. /* 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> ...
...e</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. ...
...2">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. isn't that delightful?</p> css p:
target { background-color: gold; } /* add a pseudo-element inside the
target element */ p:
target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the
target element */ p:
target i { color: red; } result pure-css lightbox you can use the :
target pseudo-class to create a lightbox without using any javascript. this te...
...And 4 more matches
EventTarget() - Web APIs
the event
target() constructor creates a new event
target object instance. syntax var myevent
target = new event
target(); parameters none. return value an instance of the event
target object. ...
... the event
target() constructor creates a new event
target object instance. syntax var myevent
target = new event
target(); parameters none. return value an instance of the event
target object. ...
... the event
target() constructor creates a new event
target object instance. syntax var myevent
target = new event
target(); parameters none. return value an instance of the event
target object. ...
...And 3 more matches
EventTarget.dispatchEvent() - Web APIs
return value the return value is false if event is cancelable and at least one of the event handlers which received event called event.preventdefault(). otherwise it returns true. ...
... return value the return value is false if event is cancelable and at least one of the event handlers which received event called event.preventdefault(). otherwise it returns true. ...
... return value the return value is false if event is cancelable and at least one of the event handlers which received event called event.preventdefault(). otherwise it returns true. ...
...And 3 more matches
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
when a url points at a specific piece of a document, it can be difficult for the user to notice. find out how you can use some simple css to draw attention to the
target of a url and improve the user's experience. picking a
target the pseudo-class :
target is used to style the
target element of a url containing a fragment identifier. for example, the url http://developer.mozilla.org/en/docs/using_the_:
target_selector#example contains the fragment identifier #example. in html, identifiers are found as the values of either id or name attributes, since the two share the same namespace. thus, the example url would point to the heading "example" in this document. suppose you wish to style any h2 element that is the
target of a url, but do not want any other kind of element to get a
target style. t...
...ontains the fragment identifier #example. in html, identifiers are found as the values of either id or name attributes, since the two share the same namespace. thus, the example url would point to the heading "example" in this document. suppose you wish to style any h2 element that is the
target of a url, but do not want any other kind of element to get a
target style. ...
...ement that is the
target of a url, but do not want any other kind of element to get a
target style. this is simple enough: h2:
target { font-weight: bold; } it's also possible to create styles that are specific to a particular fragment of the document. this is done using the same identifying value that is found in the uri. 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. ...
...And 3 more matches
new.target - JavaScript
the new.
target pseudo-property lets you detect whether a function or constructor was called using the new operator. in constructors and functions invoked using the new operator, new.
target returns a reference to the constructor or function. in normal function calls, new.
target is undefined. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new.
target description the new.
target syntax consists of the keyword new, a dot, and the identifier
target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. ...
...you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new.
target description the new.
target syntax consists of the keyword new, a dot, and the identifier
target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. the new.
target pseudo-property is available in all functions. in class constructors, it refers to the constructed class. ...
...a dot, and the identifier
target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. the new.
target pseudo-property is available in all functions. in class constructors, it refers to the constructed class. in ordinary functions, it refers to the function itself, assuming it was invoked via the new operator; otherwise new.
target is undefined. in arrow functions, new.
target is inherited from the surrounding scope. examples new.
target in function calls in normal function calls (as opposed to constructor function calls), new.
target is undefined. this lets you detect whether a function was called with new as a constructor. ...
...And 3 more matches
nsIEventTarget
implement this interface in order to support receiving events from other threads. ...
...implement this interface in order to support receiving events from other threads. ...
... this flag specifies the synchronous mode of event dispatch, in which the dispatch() method does not return until the event has been processed. note: passing this flag to dispatch may have the side-effect of causing other events on the current thread to be processed while waiting for the given event to be processed. methods dispatch() dispatches an event to this event
target. this function may be called from any thread, and it may be called re-entrantly. void dispatch( in nsirunnable event, in unsigned long flags ); parameters event the event to dispatch. flags the dispatch flags modifying the event. exceptions thrown ns_error_unexpected indicates that the thread is shutting down and has finished processing events, so...
...And 2 more matches
ResizeObserverEntry.target - Web APIs
examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. ...
...ed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. ...
...roportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the
target property of each entry — entry.
target.style.borderradius. ...
...And 2 more matches
XRInputSource.targetRayMode - Web APIs
the read-only xrinputsource property
targetraymode indicates the method by which the
target ray for the input source should be generated and how it should be presented to the user. syntax let raymode = xrinputsource.
targetraymode; value a domstring taken from the xr
targetraymode enumerated type, indicating which method to use when generating and presenting the
target ray to the user. the possible values are: gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is looking. the
target ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking. screen the direction of the
target ray is indicated using a tap on a touch screen, mouse, or other tactile input device. tracked-pointer targ...
... user is looking. the
target ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking. screen the direction of the
target ray is indicated using a tap on a touch screen, mouse, or other tactile input device. tracked-pointer
targeting is being performed using a handheld device or hand-tracking system which the user points in the direction of the
target. the
target ray extends from the hand (or the object in the hand) in the
targeted direction. the direction is determined using platform-specific rules, though if no such rules exist, the direction is chosen by assuming the user is pointing their index finger straight out from their hand. ...
...or hand-tracking system which the user points in the direction of the
target. the
target ray extends from the hand (or the object in the hand) in the
targeted direction. the direction is determined using platform-specific rules, though if no such rules exist, the direction is chosen by assuming the user is pointing their index finger straight out from their hand. usage notes the input source's
targetrayspace indicates the position and orientation of the
target ray, and can be used to determine where to render the ray. example this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null
targetrayspace. inputs which have a value for this property represent inputs that project a
target ray outward from the user. for each such input, t...
...And 2 more matches
Event.target - Web APIs
the
target property of the event interface is a reference to the object onto which the event was dispatched. it is different from event.current
target when the event handler is called during the bubbling or capturing phase of the event. syntax const the
target = someevent.
target; value event
target example the event.
target property can be used in order to implement event delegation. ...
...t. syntax const the
target = someevent.
target; value event
target example the event.
target property can be used in order to implement event delegation. ...
...he event.
target property can be used in order to implement event delegation. // make a list const ul = document.createelement('ul'); document.body.appendchild(ul); const li1 = document.createelement('li'); const li2 = document.createelement('li'); ul.appendchild(li1); ul.appendchild(li2); function hide(evt) { // e.
target refers to the clicked <li> element // this is different than e.current
target, which would refer to the parent <ul> in this context evt.
target.style.visibility = 'hidden'; } // attach the listener to the list // it will fire when each <li> is clicked ul.addeventlistener('click', hide, false); specifications specification status comment domthe definition of 'event.
target' in that specification. living standard dom4the defini...
...efer to the parent <ul> in this context evt.
target.style.visibility = 'hidden'; } // attach the listener to the list // it will fire when each <li> is clicked ul.addeventlistener('click', hide, false); specifications specification status comment domthe definition of 'event.
target' in that specification. living standard dom4the definition of 'event.
target' in that specification. obsolete document object model (dom) level 2 events specificationthe definition of 'event.
target' in that specification. obsolete initial definition ...
TouchEvent.targetTouches - Web APIs
the
targettouches read-only property is a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same
target element as the current
target element. syntax var touches = touchevent.
targettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same
target element as the current
target element. example this example illustrates the touchevent object's touchevent.
targettouches property. ...
...lement. syntax var touches = touchevent.
targettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same
target element as the current
target element. example this example illustrates the touchevent object's touchevent.
targettouches property. the touchevent.
targettouches property is a touchlist object that includes those tps that are currently touching the surface and started on the element that is the
target of the current event. as such, the
targettouches list is a strict subset of the touches list. ...
...event.
targettouches property. the touchevent.
targettouches property is a touchlist object that includes those tps that are currently touching the surface and started on the element that is the
target of the current event. as such, the
targettouches list is a strict subset of the touches list. in following code snippet, the function compares the length of the touches list to the the length of the
targettouches list and returns true if the lengths are the same and returns false otherwise. function touches_in_
target(ev) { // return true if all of the touches are within the
target element; // otherwise return false. ...
...trict subset of the touches list. in following code snippet, the function compares the length of the touches list to the the length of the
targettouches list and returns true if the lengths are the same and returns false otherwise. function touches_in_
target(ev) { // return true if all of the touches are within the
target element; // otherwise return false. return (ev.touches.length == ev.
targettouches.length ? true : false); } specifications specification status comment touch events – level 2 draft non-stable version. touch events recommendation initial definition. ...
Makefile - targets
this article lists possible
targets provided by the makefile.
target name description build default
target. compile firefox, thunderbird, etc check standalone shell unit test invoked directly by make configure launch the configure program to define headers and and attributes for the
target build machine. ...
... build default
target. compile firefox, thunderbird, etc check standalone shell unit test invoked directly by make configure launch the configure program to define headers and and attributes for the
target build machine. ...
...ll unit test invoked directly by make configure launch the configure program to define headers and and attributes for the
target build machine. ...
DownloadTarget
a download
target object represents the
target of a download, for example a file in the global downloads directory, or a file in the system temporary directory. method overview promise refresh() properties attribute type description exists read only boolean indicates whether or not the
target file exists. this is a dynamic property, which is updated when the download is completed or when the download.refresh() method is called. you can use this instead of using file system calls to check for the existence of the file in order to reduce io overhead. path read only string the path of the
target file. partfilepath read only string the path of the ".part" file containing the data downloaded so far, or null to d...
...m calls to check for the existence of the file in order to reduce io overhead. path read only string the path of the
target file. 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. size read only number the size of the
target file, in bytes, or zero if the download has not yet been completed. it is possible for this property to have a non-zero value even if the
target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. for single-file downloads, this property's value will always match the actual...
...ired to check the file directly. methods refresh() updates the state of a finished, failed, or canceled download based on the current state as indicated by the file system. if the download is in progress or has been finalized, this method does nothing and returns a resolved promise. 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. promise refresh(); parameters none. promise resolves to undefined when the state of the download has been updated. promise can be rejected with never. ...
InputEvent.getTargetRanges() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
...nition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
KeyframeEffect.target - Web APIs
the
target property of a keyframeeffect interface represents the element or pseudo-element being animated. it may be null for animations that do not
target a specific element. it performs as both a getter and a setter, except with animations and transitions generated by css. syntax var
targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect(
targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.
target; // assigns keyframes a new
target keyframes.
target = new
targetelement; value an element, csspseudoelement, or null. ...
... syntax var
targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect(
targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.
target; // assigns keyframes a new
target keyframes.
target = new
targetelement; value an element, csspseudoelement, or null. ...
...bbit 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. working draft editor's draft. ...
SVGAElement.target - Web APIs
the svgaelement.
target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a
target window, frame, pane into which a document is to be opened when a link is activated. this property is used when there are multiple possible
targets for the ending resource, like when the parent document is a mlti-frame html or xhtml document. syntax mylink.
target = 'value'; value an svganimatedstring indicating the ending resource
target that opens the document when the link is activated. sample values can be found here example the code is taken from the "svgaelement example code" ... var linkref = document.queryselector('a'); linkref.
target ='_blank'; ... specifications specification status comment scalable vector graphics (svg)...
... recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...ndation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Touch.target - Web APIs
summary returns the element (event
target) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. note that if the
target element is removed from the document, events will still be
targeted at it, and hence won't necessarily bubble up to the window or document anymore. if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the
target. syntax var el = touchpoint.
target; return value el the
target element of the touch object. example this example illustrates how to access the touch object's touch.
target property. ...
...ly bubble up to the window or document anymore. if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the
target. syntax var el = touchpoint.
target; return value el the
target element of the touch object. example this example illustrates how to access the touch object's touch.
target property. the touch.
target property is an element (event
target) on which a touch point is started when contact is first placed on the surface. in following simple code snippet, we assume the user initiates one or more touch contacts on the source element. when the touchstart event handler for this element is invoked, each touch point's touch.
target property is accessed via the event's touchevent.
targettouches list. // re...
...vent handler for this element is invoked, each touch point's touch.
target property is accessed via the event's touchevent.
targettouches list. // register a touchmove listener for the 'source' element var src = document.getelementbyid("source"); src.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. touch events recommendation initial definition. ...
target - SVG: Scalable Vector Graphics
the
target attribute should be used when there are multiple possible
targets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser. ...
...tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org"
target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org"
target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org"
target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank |...
.... if it does not exist, it is created (the same as '_blank', except that it now has a name). the name must be a valid xml name [xml11], and should not start with an underscore (u+005f low line character), to meet the requirements of a valid browsing context name from html. specifications specification status comment scalable vector graphics (svg) 2the definition of '
target' in that specification. candidate recommendation removed the _replace value. scalable vector graphics (svg) 1.1 (second edition)the definition of '
target' in that specification. recommendation initial definition ...
Event.explicitOriginalTarget - Web APIs
the explicit original
target of the event. (mozilla-specific) if the event was re
targeted for some reason other than an anonymous boundary crossing, this will be set to the
target before the re
targeting occurs. for example, mouse events are re
targeted to their parent node when they happen over text nodes (see bug 185889), and in that case current
target will show the parent and explicitoriginal
target will show the text node. explicitoriginal
target differs from original
target in that it will never contain anonymous content. example this property can be used with <command> to get the event details of the original object calling the command. ...
...des (see bug 185889), and in that case current
target will show the parent and explicitoriginal
target will show the text node. explicitoriginal
target differs from original
target in that it will never contain anonymous content. example this property can be used with <command> to get the event details of the original object calling the command. function mycommand(ev) { alert(ev.explicitoriginal
target.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. defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org d...
FocusEvent.relatedTarget - Web APIs
the focusevent.related
target read-only property is the secondary
target, depending on the type of event: event name
target related
target blur the event
target losing focus the event
target receiving focus (if any). focus the event
target receiving focus the event
target losing focus (if any) focusin the event
target receiving focus the event
target losing focus (if any) focusout the event
target losing focus the event
target receiving focus (if any) note that many elements can't have focus, which is a common reason for related
target to be null. related
target may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.related
target is a similar property for mouse events. syntax s...
...losing focus (if any) focusout the event
target losing focus the event
target receiving focus (if any) note that many elements can't have focus, which is a common reason for related
target to be null. related
target may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.related
target is a similar property for mouse events. syntax second
target = focusevent.related
target specifications specification status comment ui eventsthe definition of 'focusevent.related
target' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'focusevent.related
target' in that specification. obsolete initial definition. ...
IntersectionObserverEntry.target - Web APIs
the intersectionobserverentry interface's read-only
target property indicates which
targeted element has changed its amount of intersection with the intersection root. syntax var
target = intersectionobserverentry.
target; value the intersectionobserverentry's
target property specifies which element previously
targeted by calling intersectionobserver.observe() experienced a change in intersection with the root. example in this simple example, each
targeted element's opacity is set to its intersectionratio. ...
...rverentry.
target; value the intersectionobserverentry's
target property specifies which element previously
targeted by calling intersectionobserver.observe() experienced a change in intersection with the root. example in this simple example, each
targeted element's opacity is set to its intersectionratio. function intersectioncallback(entries) { entries.foreach(function(entry) { entry.
target.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.
target' in that specification. working draft initial definition ...
targetX - SVG: Scalable Vector Graphics
the
targetx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given
target pixel in the input image. the leftmost column of the matrix is column number zero. the value must be such that: 0 <=
targetx < orderx. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given
target pixel in the input image. specifications specification status comment filter effects module level 1the definition of '
targetx' in that specification. working draft no change scalable vector...
... value indicates the positioning in horizontal direction of the convolution matrix relative to a given
target pixel in the input image. specifications specification status comment filter effects module level 1the definition of '
targetx' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
targetx' in that specification. recommendation initial definition ...
targetY - SVG: Scalable Vector Graphics
the
targety attribute determines the positioning in vertical direction of the convolution matrix relative to a given
target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <=
targety < ordery. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given
target pixel in the input image. specifications specification status comment filter effects module level 1the definition of '
targety' in that specification. working draft no change scalable vector graphics (...
...is value indicates the positioning in vertical direction of the convolution matrix relative to a given
target pixel in the input image. specifications specification status comment filter effects module level 1the definition of '
targety' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
targety' in that specification. recommendation initial definition ...
OS TARGET
os_
target is typically the output of the 'uname -s' command on the
target platform. the following list is not complete as any platform could have its own os_
target. winnt linux darwin android sunos freebsd openbsd netbsd os2 beos irix64 aix hp-ux dragonfly skyos riscos nto osf1 ...
nsIDOMEventTarget
dom/interfaces/events/nsidomevent
target.idlscriptable this interface is the interface implemented by all event
targets in the document object model. inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) see the event
target documentation. ...
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object. 1.0 66 introduced gecko 1.9.1 inherits from: nsidomevent
target last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user. onerror nsidomeventlistener a javascript function object that gets invoked if the operation fails to complete due to an error. onload nsidomeventlistener a javascript function object that gets invoked when the operation is successfully completed. onloadend nsidomeventlistener a javascript function...
Event.originalTarget - Web APIs
the original
target of the event before any re
targetings. (mozilla-specific) in presence of xbl anonymous content this will be the anonymous node the event originally fired on. see anonymous content#event_flow_and_
targeting for more details. note: original
target may also be native anonymous content (see bug 208427), in which case it's useless for non-privileged code. see also comparison of event
targets example need an example that makes sense here specification this is a mozilla-specific property. defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org dom level 2 events ...
HTMLFormElement.target - Web APIs
the
target property of the htmlformelement interface represents the
target of the form's action (i.e., the frame in which to render its output). syntax string = htmlformelement.
target htmlformelement.
target = string example myform.
target = document.frames[1].name; specifications specification status comment html living standardthe definition of 'htmlformelement:
target' in that specification. living standard ...
targetElement - Web APIs
the svganimationelement.
targetelement property refers to the element which is being animated. if no
target element is being animated (for example, because the href attribute specifies an unknown element), the value returned is null. syntax var
targetelement = someelement.
targetelement; specifications specification status comment svg animations level 2the definition of 'svganimationelement.
targetelement' in that specification. editor's draft added null as return value in case that no
target element is being animated. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimationelement.
targetelement' in that specification. recommendation initial definition ...
XMLHttpRequestEventTarget.onabort - Web APIs
syntax xmlhttprequest.onabort = callback; values callback is the function to be executed when the transaction is aborted. example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //.. ...
XMLHttpRequestEventTarget.onload - Web APIs
syntax xmlhttprequest.onload = callback; values callback is the function to be executed when the request completes successfully. it receives a progressevent object as its first argument. the value of this (i.e. the context) is the same xmlhttprequest this callback is related to. ...
XMLHttpRequestEventTarget.onprogress - Web APIs
syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed. event event.loaded the amount of data currently transfered. event.total the total amount of data to be transferred. ...
viewTarget - SVG: Scalable Vector Graphics
the view
target attribute indicates the
target object associated with the view. only one element is using this attribute: <view> usage notes value <xml-name> default value none animatable no <xml-name> this value specifies the name of the object associated with the view. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'view
target' in that specification. recommendation initial definition ...
Index - Web APIs
ns, web animations api the animation.currenttime property of the web animations api returns and sets the current time value of the animation in milliseconds, whether running or paused. 66 animation.effect api, animation, experimental, property, reference, web animations, effect, web animations api the animation.effect property of the web animations api gets and sets the
target effect of an animation. the
target effect may be either an effect object of a type based on animationeffectreadonly, such as keyframeeffect, or null. 67 animation.finish() api, animation, finish, interface, method, reference, web animations, waapi, web animations api the finish() method of the web animations api's animation interface sets the current playback time to the end ...
...f the audioparam interface represents the maximum possible value for the parameter's nominal (effective) range. 173 audioparam.minvalue api, audio, audioparam, property, reference, web audio api, minvalue the minvalue read-only property of the audioparam interface represents the minimum possible value for the parameter's nominal (effective) range. 174 audioparam.set
targetattime() api, audioparam, method, reference, web audio api, set
targetattime the set
targetattime() method of the audioparam interface schedules the start of a gradual change to the audioparam value. this is useful for decay or release portions of adsr envelopes. 175 audioparam.setvalueattime() api, audioparam, method, reference, web audio api, setvalueattime the setva...
...s, when it receives a message that cannot be deserialized. 369 broadcastchannel.postmessage() api, broadcast channel api, broadcastchannel, experimental, html api, method, reference the broadcastchannel.postmessage() sends a message, which can be of any kind of object, to each listener in any browsing context with the same origin. the message is transmitted as a message event
targeted at each broadcastchannel bound to the channel. 370 broadcastchannel: message event communication, event, eventsource, reference, events, message, messaging the message event is fired on a broadcastchannel object when a message arrives on that channel. 371 broadcastchannel: messageerror event event the messageerror event is fired on a broadcastchannel ob...
...And 99 more matches
Inputs and input sources - Web APIs
r provides support for a variety of kinds of input devices. in this guide, we'll look at how to use webxr's input device management features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment. inputs in webxr fundamentally, inputs in webxr fall into two basic categories:
targeting and actions.
targeting is the specification of a point in space by the user's input. this may involve the user simply tapping on a spot on the screen, tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wear...
...s clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. ...
...osition and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. input device types webxr supports a variety of different types of devices to handle
targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both
targeting and selection. motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion tracking and
targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both
targeting and selection. squeezable triggers or glove grip pads to provide squeeze actions. voice comm...
...And 61 more matches
Using IndexedDB - Web APIs
is to add success and error handlers: request.onerror = function(event) { // do something with request.errorcode! }; request.onsuccess = function(event) { // do something with request.result! }; which of the two functions, onsuccess() or onerror(), gets called? if everything succeeds, a success event (that is, a dom event whose type property is set to "success") is fired with request as its
target. once it is fired, the onsuccess() function on request is triggered with the success event as its argument. otherwise, if there was any problem, an error event (that is, a dom event whose type property is set to "error") is fired at request. this triggers the onerror() function with the error event as its argument. the indexeddb api is designed to minimize the need for error handling, so you're ...
...s generated with a call to indexeddb.open(), so request.result is an instance of idbdatabase, and you definitely want to save that for later. your code might look something like this: var db; var request = indexeddb.open("mytestdatabase"); request.onerror = function(event) { console.log("why didn't you allow my web app to use indexeddb?!"); }; request.onsuccess = function(event) { db = event.
target.result; }; handling errors as mentioned above, error events bubble. error events are
targeted at the request that generated the error, then the event bubbles to the transaction, and then finally to the database object. if you want to avoid adding error handlers to every request, you can instead add a single error handler on the database object, like so: db.onerror = function(event) { // gen...
...it indicates that the version of the database stored on the disk is greater than the version that you are trying to open. ...
...And 32 more matches
Intersection Observer API - Web APIs
historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. as the web has matured, the need for this kind of information has grown. intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled. ...
...ntersection 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 is asked to watch a
target for the very first time typically, you'll want to watch for intersection changes with regard to the element's closest scrollable ancestor, or, if the element isn't a descendant of a scrollable element, the vi...
...or intersection changes with regard to the element's closest scrollable ancestor, or, if the element isn't a descendant of a scrollable element, the viewport. to watch for intersection relative to the root element, specify null. whether you're using the viewport or some other element as the root, the api works the same way, executing a callback function you provide whenever the visibility of the
target element changes so that it crosses desired amounts of intersection with the root. the degree of intersection between the
target element and its root is the intersection ratio. this is a representation of the percentage of the
target element which is visible as a value between 0.0 and 1.0. creating an intersection observer create the intersection observer by calling its constructor and passing ...
...And 28 more matches
Multi-touch interaction - Web APIs
s application is available on github. the source code is available on github and pull requests and bug reports are welcome. example this example demonstrates using the touchstart, touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe. ...
...his example demonstrates using the touchstart, touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe. define touch
targets the application uses <div> elements to represent four touch areas. <style> div { margin: 0em; padding: 2em; } #
target1 { background: white; border: 1px solid black; } #
target2 { background: white; border: 1px solid black; } #
target3 { background: white; border: 1px solid black; } #
target4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired. // log eve...
...s. the touchend and touchcancel event types use the same handler. 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. the code does not include error handling, or vertical moving. note that the threshold for pinch and zoom movement detection is application specific (and device dependent). // this is a very basic ...
...And 26 more matches
Multi-touch interaction - Web APIs
having a single event model for pointers can simplify creating web sites, applications and provide a good user experience regardless of the user's hardware. pointer events have many similarities to mouse events but they support multiple simultaneous pointers such as multiple fingers on a touch screen. ...
...ode, using pointer events with different multi-touch interactions. a live version of this application is available on github. the source code is available on github; pull requests and bug reports are welcome. example this example demonstrates using pointer events' various event types (pointerdown, pointermove, pointerup pointercancel, etc.) for different multi-touch interactions. ...
...a live version of this application is available on github. the source code is available on github; pull requests and bug reports are welcome. example this example demonstrates using pointer events' various event types (pointerdown, pointermove, pointerup pointercancel, etc.) for different multi-touch interactions. define touch
targets the application uses <div> to define three different touch
target areas. ...
...And 23 more matches
nsIDOMEvent
if the event can bubble the value is true, else the v...
...if the event can bubble the value is true, else the value is false. read o...
...if the event can bubble the value is true, else the value is false. read only. ...
...And 16 more matches
nsIEventListenerService
0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/eventlistenerservice;1. 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. ...
...ey 2.4) implemented by: @mozilla.org/eventlistenerservice;1. 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. ...
...emented by: @mozilla.org/eventlistenerservice;1. 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. ...
...And 16 more matches
Proxy - JavaScript
the proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. description a proxy is created with two parameters:
target: the original object which you want to proxy handler: an object that defines which operations will be intercepted and how to redefine intercepted operations. ...
...roxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. description a proxy is created with two parameters:
target: the original object which you want to proxy handler: an object that defines which operations will be intercepted and how to redefine intercepted operations. ...
...define fundamental operations for that object. description a proxy is created with two parameters:
target: the original object which you want to proxy handler: an object that defines which operations will be intercepted and how to redefine intercepted operations. ...
...And 16 more matches
StringView - Archive of obsolete content
idx + 2] - 128 << 6) + achars[nidx + 3] - 128 : npart > 223 && npart < 240 && nidx + 2 < nlen ? /* three bytes */ (npart - 224 << 12) + (achars[nidx + 1] - 128 << 6) + achars[nidx + 2] - 128 : npart > 191 && npart < 224 && nidx + 1 < nlen ? ...
... /* three bytes */ (npart - 224 << 12) + (achars[nidx + 1] - 128 << 6) + achars[nidx + 2] - 128 : npart > 191 && npart < 224 && nidx + 1 < nlen ? ...
... - 128 : npart > 191 && npart < 224 && nidx + 1 < nlen ? ...
...And 15 more matches
Meta programming - JavaScript
tal language operations (e.g. property lookup, assignment, enumeration, function invocation, etc). with the help of these two objects you are able to program at the meta level of javascript. proxies introduced in ecmascript 6, proxy objects allow you to intercept certain operations and to implement custom behaviors. for example, getting a property on an object: let handler = { get: function(
target, name) { return name in
target?
target[name] : 42 } } let p = new proxy({}, handler) p.a = 1 console.log(p.a, p.b) // 1, 42 the proxy object defines a
target (an empty object here) and a handler object, in which a get trap is implemented. here, an object that is proxied will not return undefined when getting undefined properties, but will instead return the number 42. additional example...
...when getting undefined properties, but will instead return the number 42. additional examples are available on the proxy reference page. terminology the following terms are used when talking about the functionality of proxies. handler placeholder object which contains traps. traps the methods that provide property access. (this is analogous to the concept of traps in operating systems.)
target object which the proxy virtualizes. it is often used as storage backend for the proxy. invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the
target. invariants semantics that remain unchanged when implementing custom operations are called invariants. if you violate the invariants of a handler, a typeerror will be...
... available traps available to proxy objects. see the reference pages for detailed explanations and examples. handler / trap interceptions invariants handler.getprototypeof() object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof getprototypeof method must return an object or null. if
target is not extensible, object.getprototypeof(proxy) method must return the same value as object.getprototypeof(
target). handler.setprototypeof() object.setprototypeof() reflect.setprototypeof() if
target is not extensible, the prototype parameter must be the same value as object.getprototypeof(
target). handler.isextensible() object.isextensible() reflect.is...
...And 15 more matches
Object.assign() - JavaScript
the object.assign() method copies all enumerable own properties from one or more source objects to a
target object. it returns the
target object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.assign(
target, ...sources) parameters
target the
target object — what to apply the sources’ properties to, which is returned after it is modified. sources the source object(s) — objects containing the properties you want to apply. return value the
target object. description properties in the
target object are overwritten by properties in the sources if they have the same key. later sources' prop...
...therefore it assigns properties, versus copying or defining new properties. ...
...therefore it assigns properties, versus copying or defining new properties. this may make it unsuitable for merging new properties into a prototype if the merge sources contain getters. ...
...And 15 more matches
Window.open() - Web APIs
a new window, and the specified resource is loaded into it. syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded. this can be a path or url to an html page, image file, or any other resource that is supported by the browser. if the empty string ("") is specified as url, a blank page is opened into the
targeted browsing context. windowname optional a domstring specifying the name of the browsing context (window, <iframe> or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowname. this name can be used as the
target for the
target attribute of <a> or <form> elements. the name should not ...
... it will not have access back to the originating window (via window.opener — it returns null). in addition, the window.open() call will also return null, so the originating window will not have access to the new one either. this is useful for preventing untrusted sites opened via window.open() from tampering with the originating window, and vice versa. note that when noopener is used, nonempty
target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab. this is supported in modern browsers including chrome, and firefox 52+. see rel="noopener" for more information and for browser compatibility details, including information about ancillary effects. noreferrer if this feature is set, the request to load the content loca...
...r window. */ } else { windowobjectreference.focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the focus() method. there would be no need to re-create the window or to reload the referenced resource. */ }; } </script> (...) <p><a href="http://www.spreadfirefox.com/"
target="promotefirefoxwindowname" onclick="openffpromotionpopup(); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window. the purpose of the return false in the code is to cancel default action of the link: if the onclick event handler is...
...And 14 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
sending data from unprivileged document to chrome an easy way to send data from a web page to an extension is by using custom dom events. in your extension's browser.xul overlay, write code which listens for a custom dom event. here we call the event myextensionevent. 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. the data from the web page (unprivileged code) will be the values of attribute1 and attribute2. to trigger the ...
...e to privileged code, adding 'true' to the end of your event listener in your privileged chrome code will allow the message to be received. document.addeventlistener("message", function(e) { yourfunction(e); }, false, true); sending data from chrome to unprivileged document to "answer" the web page (e.g., return code), your extension can set an attribute or attach child elements on the event
target element (<myextensiondataelement/> in this example). you can optionally clean up the created element, or create it once when the web page loads then re-use it each time. another option is to send a return event from the extension to the web page. this can be done using the same principle as the above example. there is only one extension, but there can be many active web pages. so to trigger th...
...page loads then re-use it each time. another option is to send a return event from the extension to the web page. this can be done using the same principle as the above example. there is only one extension, but there can be many active web pages. so to trigger the right event on the right page we have to tell the extension which page to call. the information we need for that is contained in evt.
target.ownerdocument. we can extend the above example with some data transfer from the extension to the web page. in the following code sample 2 methods are combined: setting an extra attribute in the original event
target element, and creating a new event message with a new event
target element. for this to work we need to define the original
target element globally. we need a new event trigger in the...
...And 13 more matches
Pointer events - Web APIs
us and touch surfaces, extensions to the existing pointing device event models are needed. pointer events address that need. pointer events are dom events that are fired for a pointing device. they are designed to create a single dom event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). the pointer is a hardware-agnostic device that can
target a specific set of screen coordinates. having a single event model for pointers can simplify creating web sites and applications and provide a good user experience regardless of the user's hardware. however, for scenarios when device-specific handling is desired, pointer events defines a pointertype property to inspect the device type which produced the event. the events needed to handle generic ...
... a pointertype property to inspect the device type which produced the event. the events needed to handle generic pointer input are analogous to mouse events (mousedown/pointerdown, mousemove/pointermove, etc.). consequently, pointer event types are intentionally similar to mouse event types. additionally, a pointer event contains the usual properties present in mouse events (client coordinates,
target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. in fact, the pointerevent interface inherits all of the mouseevent properties, thus facilitating the migration of content from mouse events to pointer events. terminology active buttons state the condition when a pointer has a non-zero value for the buttons property. f...
... moved. digitizer a sensing device with a surface that can detect contact. most commonly, the sensing device is a touch-enabled screen that can sense input from an input device such as a pen, stylus, or finger. some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse. hit test the process the browser uses to determine a
target element for a pointer event. typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media. pointer a hardware-agnostic representation of input devices that can
target a specific coordinate (or set of coordinates) on a screen. examples of pointer input devices are mouse, pen/stylus, and touch contacts. pointer capture ...
...And 13 more matches
Bytecode Descriptions
a string). implements: strict equality comparison. format: jof_ic lt, gt, le, ge stack: lval, rval ⇒ (lval op rval) relative operators (<, >, <=, >=). pop two values, compare them, and push the boolean result. the comparison may perform conversions that call .tostring()/.valueof() methods and can throw. implements: relational operators: evaluation. format: jof_ic instanceof stack: value,
target ⇒ (value instanceof
target) the instanceof operator. this throws a typeerror if
target is not an object. it calls
target[symbol.hasinstance](value) if the method exists. on success, the result is always a boolean value. format: jof_ic in stack: id, obj ⇒ (id in obj) the in operator. push true if obj has a property with the key id. otherwise push false. this throws a typeerror if obj is not...
...dition. more fundamentally, the result of evaluating x-- is tonumeric(old value of x), a value that the sequence getlocal "x"; one; sub; setlocal "x" does not give us. format: jof_ic other expressions globalthis stack: ⇒ this push the global this value. not to be confused with the globalthis property on the global. this must be used only in scopes where this refers to the global this. new
target stack: ⇒ new.
target push the value of new.
target. the result is a constructor or undefined. this must be used only in scripts where new.
target is allowed: non-arrow function scripts and other scripts that have a non-arrow function script on the scope chain. implements: getnew
target. dynamicimport stack: moduleid ⇒ promise dynamic import of the module specified by the string value on the t...
... the new function inherits the current environment chain. used to create most js functions. notable exceptions are arrow functions and derived or default class constructors. the function indicated by funcindex must be a non-arrow function. implements: instantiatefunctionobject, evaluation for functionexpression, and so on. format: jof_object lambdaarrow operands: (uint32_t funcindex) stack: new
target ⇒ arrowfn push a new arrow function. new
target matters only if the arrow function uses the expression new.
target. it should be the current value of new.
target, so that the arrow function inherits new.
target from the enclosing scope. (if new.
target is illegal here, the value doesn't matter; use null.) the function indicated by funcindex must be an arrow function. format: jof_object setfunname ...
...And 12 more matches
URLs - Plugins
uniform resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets. plug-ins can request and receive the data associated with urls of any type that the browser can handle, including http, ftp, news, mailto, and gopher. the table below summarizes urls supported by gecko. in addition, gecko may support urls not listed on this table. ...
...formation servers) locates wais databases and their documents. wysiwyg placed before another url; displays a page that javascript has updated using document.write. for more information, see rfc 3986, "uniform resource identifier (uri): generic syntax", and the iana uri scheme registry. getting urls posting urls getting urls to retrieve a url and display it on a specified
target page, use the npn_geturl, npn_geturlnotify, and npp_urlnotify functions. this section describes the methods and procedures used for getting the url and displaying the page. the plug-in uses the npn_geturl function to ask the browser to display data retrieved from a url in a specified
target window or frame, or deliver it to the plug-in instance in a new stream. this is the way that plug-ins prov...
...synchronous: it returns immediately and only later handles the request, such as displaying the url or creating the stream for the instance and writing the data. for this reason as well, calling npn_geturlnotify may be more useful than npn_geturl; the plug-in is notified upon either successful or unsuccessful completion of the request. nperror npn_geturl(npp instance, const char *url, const char *
target); the instance parameter represents the current plug-in instance. the url parameter is the url of the request, which can be of any type, including http, ftp, news, or mailto. the
target parameter represents the destination where the url will be displayed, a window or frame. if
target refers to the window or frame containing the plug-in instance, it is destroyed and the plug-in may be unloaded. ...
...And 12 more matches
Signaling and video calling - Web APIs
e. this lets us send signaling messages using this same server, instead of needing a separate server. let's take a look which changes we need to make to the chat server support webrtc signaling. this is in the file chatserver.js. first up is the addition of the function sendtooneuser(). as the name suggests, this sends a stringified json message to a particular username. function sendtooneuser(
target, msgstring) { var isunique = true; var i; for (i=0; i<connectionarray.length; i++) { if (connectionarray[i].username ===
target) { connectionarray[i].send(msgstring); break; } } } this function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user. the parameter msgstring is a stringified jso...
...connectionarray is a websocket object, so we can just call its send() method directly. our original chat demo didn't support sending messages to a specific user. the next task is to update the main websocket message handler to support doing so. 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 property. if that property is present, it specifies the username of the client to which the message is to be sent, an...
...'ll call the callee. the callee responds to the offer with an answer message, also containing an sdp description. 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". name the sender's username.
target the username of the person to receive the description (if the caller is sending the message, this specifies the callee, and vice-versa). sdp the sdp (session description protocol) string describing the local end of the connection from the perspective of the sender (or the remote end of the connection from the receiver's point of view). at this point, the two participants know which codecs an...
...And 12 more matches
Debugging on Mac OS X
field. add "-p profilename", where profilename is the name of a profile you created previously. repeat that to also add the argument "-no-remote". also in the "arguments" panel, you may want to add an environment variable moz_debug_child_process set to the value 1 to help with debugging e10s. select "build" from the left of the scheme editor window, and check that there is nothing listed under
targets (otherwise it may cause problems when you try to run the executable for debugging since you will get build errors). click "close" to close the scheme editor. at this point you can run the application from xcode, and when you pause or hit breakpoints it should show open the correct source file at the correct line. setting up lldb lldb is the debugger xcode provides/uses. one important issu...
...d when you pause or hit breakpoints it should show open the correct source file at the correct line. setting up lldb lldb is the debugger xcode provides/uses. one important issue that the mozilla .lldbinit file fixes is that by default some breakpoints will be listed as "pending", and xcode will not stop at them. if you don't include the mozilla's .lldbinit, you must at least put settings set
target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb. the .lldbinit file in the source tree imports many useful mozilla specific lldb settings, commands and formatters into lldb, but you may need to take one of the following steps to make sure this file is used. if you are using lldb on the command line (independently of xcode) and you will al...
...ters into lldb, but you may need to take one of the following steps to make sure this file is used. if you are using lldb on the command line (independently of xcode) and you will always run it from either the top source directory, the object directory or else the dist/bin subdirectory of the object directory, then adding the following setting to your $home/.lldbinit is sufficient: settings set
target.load-cwd-lldbinit true however, if you will run lldb from a different directory, or if you will be running it indirectly by debugging in xcode (xcode always runs lldb from "/"), then this setting will not help you. instead, add the following to your $home/.lldbinit: # this automatically sources the mozilla project's .lldbinit as soon as lldb # starts or attaches to a mozilla app (that's in an o...
...And 11 more matches
IAccessibleRelation
other-licenses/ia2/accessiblerelation.idlnot scriptable this interface gives access to an object's set of relations. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) method overview [propget] hresult localizedrelationtype([out] bstr localizedrelationtype ); [propget] hresult n
targets([out] long n
targets ); [propget] hresult relationtype([out] bstr relationtype ); [propget] hresult
target([in] long
targetindex, [out] iunknown
target ); [propget] hresult
targets([in] long max
targets, [out, size_is(max
targets), length_is( n
targets)] iunknown
targets, [out] long n
targets ); methods localizedrelationtype() returns a localized version of the relation type. [propget] hresult localizedrelationtype( [out] bstr loca...
...relationtype() returns the type of the relation. [propget] hresult relationtype( [out] bstr relationtype ); parameters relationtype the strings returned are defined @ref grprelations "in this section of the documentation". return value s_ok. ...
...get ); [propget] hresult
targets([in] long max
targets, [out, size_is(max
targets), length_is( n
targets)] iunknown
targets, [out] long n
targets ); methods localizedrelationtype() returns a localized version of the relation type. [propget] hresult localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok. n
targets() returns the number of
targets() for this relation. [propget] hresult n
targets( [out] long n
targets ); parameters n
targets return value s_ok. relationtype() returns the type of the relation. [propget] hresult relationtype( [out] bstr relationtype ); parameters relationtype the strings returned are defined @ref grprelations "in this section of the documentation". return value s_ok. ...
...And 11 more matches
DevTools API - Firefox Developer Tools
a way to register and access developer tools in firefox. in terms of user interface, each registered tool lives in its own tab (we call one tab a panel). these tabs are located in a box we call a toolbox. a toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked). a toolbox (and all the tools it contains) is linked to a
target, which is the object the tools are debugging. a
target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…). in terms of code, each tool has to provide a tooldefinition object. a definition is a js light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of...
...e tool definition object or the id of the tool to unregister. registertheme(themedefinition) registers a new theme. parameters: themedefinition {themedefinition} - an object that contains information about the theme. unregistertheme(theme) unregisters the given theme. parameters: theme {themedefinition|string} - the theme definition object or the theme identifier. showtoolbox(
target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given
target either by creating a new one or activating an existing one. parameters:
target {
target} - the
target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window...
...reviously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see hosttype for details. hostoptions {object} - an options object passed to the selected host. see hosttype for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(
target) fetch the toolbox object for the given
target. parameters:
target {
target} - the
target the toolbox is debugging. return value: toolbox object or undefined if there's no toolbox for the given
target.. closetoolbox(
target) closes the toolbox for given
target. parameters:
target {
target} - the
target of the toolbox that should be closed. return value: a promise that is fulfi...
...And 11 more matches
event/core - Archive of obsolete content
the event/core module allows the creation of apis to broadcast and subscribe to events. usage many modules in the sdk can broadcast events. for example, the tabs module emits an open event when a new tab is opened. also see the tutorial on implementing event
targets to get started with this api. ...
... the event/core module allows the creation of apis to broadcast and subscribe to events. usage many modules in the sdk can broadcast events. for example, the tabs module emits an open event when a new tab is opened. also see the tutorial on implementing event
targets to get started with this api. ...
...of apis to broadcast and subscribe to events. usage many modules in the sdk can broadcast events. for example, the tabs module emits an open event when a new tab is opened. also see the tutorial on implementing event
targets to get started with this api. ...
...And 10 more matches
HTML Drag and Drop API - Web APIs
ype has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged. dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged item enters a valid drop
target. (see specifying drop
targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection
target. dragleave ondragleave …a dragged item leaves a valid drop
target. dragover ondragover …a dragged item is being dragged over a valid drop
target, every few hundred milliseconds. dragstart ondragstart …the u...
...(see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os. interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitemlist. the dragevent interface has a constructor and one datatransfer property, which is a datatransfer object. ...
...o-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. ...
...And 10 more matches
SVGSVGElement - Web APIs
o control the time of redraw on visual rendering devices. ...
...l the time of redraw on visual rendering devices. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 10 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
o 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; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it. everything else specifies details about the gradient mask itself. applying the svg effect to (x)html is accomplished by assigning the
target class defined above to an elem...
...p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it. everything else specifies details about the gradient mask itself. 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. ut enim ad minim veniam. </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. </p> the above ...
...psum 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. </p> the above example would be rendered with the mask applied to it. example: clipping this example demonstrates using svg to clip html content. notice that even the clickable areas for links are clipped. <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. ut enim ad minim veniam. </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. </p> <button onc...
...And 10 more matches
ui/frame - Archive of obsolete content
indow. so there are three cases to consider: sending messages from a frame script to the main add-on code sending messages from the main add-on code to all instances of a frame, across all browser windows sending messages from the main add-on code to a single instance of a frame, attached to a specific browser window in all cases, postmessage() takes two arguments: the message itself and a
targetorigin. the
targetorigin argument can be either the uri of the document hosted by the
target, or the wildcard "*". if you use the uri, then the message will only be dispatched to the window whose document matches that uri. if you know the
target uri, you should use it, as this is more secure: it prevents another window from intercepting messages that were intended for someone else. from frame to...
...ssage will only be dispatched to the window whose document matches that uri. if you know the
target uri, you should use it, as this is more secure: it prevents another window from intercepting messages that were intended for someone else. from frame to add-on to send a message from a frame script to the add-on, use window.parent.postmessage(). this takes two arguments, the message itself and a
target origin. if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { ...
...new frame({ url: "./city-info.html", onmessage: (e) => { console.log("new city: " + e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); from add-on to all frames to send a message from the add-on code to all frames, attached to all open browser windows, you can use frame.postmessage(). ...
...And 9 more matches
Install Manifests - Archive of obsolete content
ever, as it might attract spam. note: the id property is optional in a webextension. if you do not provide an id, the add-ons site will generate an id for your add-on automatically. examples <em:id>extensionname@example.org</em:id> <em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id> name the name of the add-on; intended for display in the ui. examples <em:name>my extension</em:name>
targetapplication an object specifying an application
targeted by this add-on. this means that the add-on will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application ids and valid min/maxversions for them see valid application versions for add-on developers), from the minimum version (<em:minversion>) up to and including the maximum version ...
...ensive list of application ids and valid min/maxversions for them see valid application versions for add-on developers), from the minimum version (<em:minversion>) up to and including the maximum version (<em:maxversion>). however, while <em:maxversion> is a required property, it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:
targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minversion, and maxversion are all required. note: extensions compatible with firefox 3.5 should specify a maxversion of 3.5.*, so that they are...
... compatible with firefox 3.5 should specify a maxversion of 3.5.*, so that they are automatically compatible with security and stability updates. for firefox 3.0, a maxversion of 3.0.* should be used. extensions compatible only with firefox or thunderbird 2 should specify a maxversion of 2.0.0.*. ...
...And 9 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. ...
...or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. ...
...ed for creating fields that are not part of objects public api. 80 core/promise implementation of promises to make asynchronous programming easier. 81 dev/panel enables you to extend the firefox developer tools. 82 event/core the event/core module allows the creation of apis to broadcast and subscribe to events. 83 event/
target create objects that broadcast events. 84 frame/hidden-frame creates firefox frames (i.e. xul <iframe> elements) that are not displayed to the user. 85 frame/utils provides helper functions for working with platform internals like frames and browsers. 86 fs/path provides access to the local filesystem with the nodejs path...
...And 9 more matches
Menu - Archive of obsolete content
, it will reflect the changes. isshowing boolean true if the menu is currently visible and false otherwise. read-only. items array an array of menuitems in the menu. read-only. methods add(items) clear() contexton(node) hide() insertbefore(newitems,
target) item(
target) popupon(node) remove(
target) replace(
target, newitems) reset() set(items) show(anchornode) add(items) adds items to the menu. the position at which the items are added is at jetpack's discretion. this method and set() are the recommended methods of adding ...
...ms a single menuitem or an array of menuitems. clear() removes all items from the menu, even items not added by the feature. contexton(node) binds the menu to a given node as its context menu. parameters node the menu is attached to this node, which may be either a raw dom node or a dom node wrapped by jquery. hide() hides the menu if it is showing. insertbefore(newitems,
target) inserts new items before an existing item. parameters newitems a single menuitem or an array of menuitems.
target indicates the existing item. see
targets. if no such
target exists, the position at which the items are added is at the discretion of jetpack. item(
target) returns an item in the menu. the item may be modified. if the menu is hidden, it will reflect th...
...uitems.
target indicates the existing item. see
targets. if no such
target exists, the position at which the items are added is at the discretion of jetpack. item(
target) returns an item in the menu. the item may be modified. if the menu is hidden, it will reflect the changes when it is next shown. if the menu is visible, it will reflect the changes immediately. parameters
target indicates the existing item. see
targets. return value a menuitem object, or null if no such
target exists. popupon(node) binds the menu to a given node. the menu will be shown when the node is left-clicked. parameters node the menu is attached to this node, which may be either a raw dom node or a dom node wrapped by jquery. remove(
target) removes an item from the menu. ...
...And 9 more matches
Index
ags" which are objects, typically strings, which have multiple actions such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. ...
... such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. the first level hyperlinks would only implement anchor() and anchor
target(). the anchors would all reference the image object. the anchor
targets would reference the second level accessible hyperlink objects. none of the iaccessibleaction methods would be implemented on the first level hyperlink objects. the second level hyperlink objects would implement the iaccessibleaction methods. their anchors would also reference the image object and their anchor
targets would reference urls or the objects that would be activated. this use case demon...
... getimagesize this content is now available at nsiaccessibleimage.getimagesize(). ...
...And 9 more matches
Drag Operations - Web APIs
e (or format) of the data, and the data's value. the format is a type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a type and the data. during the drag, in an event listener for the dragenter and dragover events, you use the data types of the data being dragged to check whether a drop is allowed. for instance, a drop
target that accepts links would check for the type text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's types property returns a list of mime-type like domstrings, such as text/plain or image/jpeg. you can also create your own types. the most commonly used types are listed in the article recommended drag types. a drag ...
...he drag data's types property returns a list of mime-type like domstrings, such as text/plain or image/jpeg. you can also create your own types. the most commonly used types are listed in the article recommended drag types. a drag may include data items of several different types. this allows data to be provided in more specific types, often custom types, yet still provide fallback data for drop
targets that do not support more specific types. it is usually the case that the least specific type will be normal text data using the type text/plain. this data will be a simple textual representation. to set a drag data item within the datatransfer, use the setdata() method. it takes two arguments: the type of data and the data value. for example: event.datatransfer.setdata("text/plain", "text to d...
...ent.datatransfer.cleardata("text/uri-list"); the type argument to the cleardata() method is optional. if the type is not specified, the data associated with all types is removed. if the drag contains no drag data items, or all of the items have been subsequently cleared, then no drag will occur. setting the drag feedback image when a drag occurs, a translucent image is generated from the drag
target (the element the "dragstart" event is fired at), and follows the user's pointer during the drag. this image is created automatically, so you do not need to create it yourself. however, you can use setdragimage() to specify a custom drag feedback image. event.datatransfer.setdragimage(image, xoffset, yoffset); three arguments are necessary. the first is a reference to an image. this reference w...
...And 9 more matches
Pinch zoom gestures - Web APIs
om each other. a live version of this application is available on github. the source code is available on github; pull requests and bug reports are welcome. example in this example, you use the pointer events to simultaneously detect two pointing devices of any type, including fingers, mice, and pens. ...
...s are welcome. example in this example, you use the pointer events to simultaneously detect two pointing devices of any type, including fingers, mice, and pens. the pinch in (zoom out) gesture, which moves the two pointers toward each other, changes the
target element's background color to lightblue. the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the
target element's background color to pink. define touch
target the application uses <div> to define the pointers'
target areas. <style> div { margin: 0em; padding: 2em; } #
target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases. this application uses...
...var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup. the handler for pointerup is used for the pointercancel, pointerout and pointerleave events since these four events have the same semantics in this application. 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. el.onpointerup = pointerup_handler; el.onpointercancel = pointerup_handler; el.onpointerout = pointerup_handler; el.onpointerleave = poin...
...And 9 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...And 9 more matches
Notes on HTML Reflow - Archive of obsolete content
, and is one of the following: initial, for the very first time that the frame hierarchy is flowed. in this case, a frame knows that there is no residual state that can be used to simplify geometry computation. incremental, when something in the frame tree changes; for example, when more content is read from the network, or some script manipulates the dom. an incremental reflow is
targeted at a single frame in the frame hierarchy. 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. resize, when the containing boundary for the frame hierarchy changes. during a resize reflow, the...
...e that none of the frame's internal state (e.g., a text frame's text) has changed; instead, a top-down change in the layout constraints has occurred. stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font size. dirty, when a container frame has consolidated several individual incremental reflows that have been
targeted at its child frames. initial, incremental, resize, and style change reflows may each be performed as an immediate "global" reflow from the presentation shell: an initial reflow is performed when the presentation shell is initialized to flow the shell's initial frame hierarchy. incremental reflows are dispatched en masse when the presentation shell's incremental reflow queue...
...ge; e.g., because the user resized the shell's window. a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font. a dirty reflow is never performed directly from the presentation shell. instead, a dirty reflow is detected when an incremental reflow reaches its
target frame , described below. reflow metrics the reflow metrics object, nshtmlreflowmetrics, is used to propagate information from child frames back to the parent. for example, the dimensions of each child frame of an unconstrained <div> would be passed back to the <div>'s frame via the nshtmlreflowmetrics object. incremental reflow although all of the reflow in gecko attempts to re-use as ...
...And 8 more matches
nsIFile
ding variant] changing the leaf name of a nsifile does not affect the underlying filesystem. it only changes what this nsifile references. native code only! nativepath acstring this attribute exposes the full path of the nsifile. [native character encoding variant] the value of this attribute is a platform-specific file path. read only. native code only! native
target acstring this attribute exposes the full
target of the nsifile - the full path with any symbolic links dereferenced. [native character encoding variant] the value of this attribute is a platform-specific file path. read only. native code only! parent nsifile this attribute returns the parent nsifile for this nsifile. the parent will be null when this nsifile...
... on some platforms, the value of nsifile.path may be insufficient to uniquely identify the file on the local file system. the persistent descriptor is intended to be used whenever a nsifile needs to be serialized to disk and later recovered. this string is not intended for display to users. note: the value of the followlinks attribute is not encoded in the persistent descriptor.
target astring this attribute exposes the full
target of the nsifile - the full path with any symbolic links dereferenced. accessor to the string path. the native version of these strings are not guaranteed to be a usable path to pass to nspr or the c stdlib. there are problems that affect platforms on which a path does not fully specify a file because two volumes can have the same name ...
...ent directory to copy the file into. if this parameter is null, then the parent directory of the file will be used. newname this parameter allows you to specify a new leaf name for the file to be copied. this parameter may be empty, in which case the current leaf name will be used. exceptions thrown ns_error_file_destination_not_dir if the "newparentdir" is not a directory. ns_error_file_
target_does_not_exist indicates that the current file path does not exist. it is not possible to copy a file that does not exist. ns_error_file_already_exists indicates that there is already a file named "newname" in the destination directory. copytofollowinglinks() this method copies a source file to a new location if it does not already exist. this method is identical to copyto() except that an...
...And 8 more matches
Document - Web APIs
in the page's url and create new elements in the document. ...
...age's url and create new elements in the document. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 8 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
... the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
... the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
...And 8 more matches
SVG documentation index - SVG: Scalable Vector Graphics
3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes: 4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types. this article lists these types along with their syntax and descriptions of what they're used for. 5 linking guide, svg the
target attribute on the svg <a> element doesn't work in mozilla firefox 1.5. when svg documents are embedded within a parent html document using the tag: 6 namespaces crash course svg, xml as an xml dialect, svg is namespaced. it is important to understand the concept of namespaces and how they are used if you plan to author svg content. versions of svg viewers prior to the release ...
... of the four possible forms an arabic glyph represents. 26 ascent deprecated, needsexample, svg, svg attribute the ascent attribute defines the maximum unaccented height of the font within the font coordinate system. 27 attributename needscompattable, svg, svg attribute the attributename attribute indicates the name of the css property or attribute of the
target element that is going to be changed during an animation. 28 attributetype deprecated, needscompattable, svg, svg attribute the attributetype attribute specifies the namespace in which the
target attribute and its associated values are defined. 29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source o...
... rendered. 96 glyphref deprecated, svg, svg attribute the glyphref attribute represents the glyph identifier, the format of which is dependent on the format of the given font. 97 gradienttransform svg, svg attribute the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the
target coordinate system (i.e., userspaceonuse or objectboundingbox). this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. 98 gradientunits needscompatta...
...And 8 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
sion string split by periods, some examples: 2.0 1.0b1 3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version format was used: major.minor.release.build[+] where only digits were allowed. the toolkit version format supports the firefox version format but allows greater flexibility. ...
... but allows greater flexibility. how applications determine compatibility when installing add-ons applications look at the
targetapplication entries in the add-on's install.rdf. an entry must exist with an id matching the id of the application. additionally the minversion and maxversion of this entry must be a range that includes the version of the running application. if the application has a
targetapplication entry but it is for an incompatible version then the application will retrieve updated compatibility information from the add-on's updateurl. ...
... exist with an id matching the id of the application. additionally the minversion and maxversion of this entry must be a range that includes the version of the running application. if the application has a
targetapplication entry but it is for an incompatible version then the application will retrieve updated compatibility information from the add-on's updateurl. if the install.rdf contains any
targetplatform entries then the platform of the currently running application must be listed or the installation will be rejected. firefox 3 note in applications based on gecko 1.9 you can also use a
targetapplication entry with an id toolkit@mozilla.org and minversion and maxversion that match the toolkit version of the running application. this allows you to say that your add-on will install into...
...And 7 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
nsion/ chrome manifest chrome/ #registered in the chrome content package #run with privileges locale package skin package figure 1: chrome packages and chrome registration (fixme: not really explicit and not a figure) cross-package overlays the “overlay” technique introduced in chapter 3 required the use of the xul-overlay instruction in the xul document that is the overlay
target. ...
... figure 2: invoking a cross-package overlay (fixme: not really explicit and not a figure) conclusion this has been a brief introduction to chrome that probably leaves a lot of unanswered questions. ...
...- brief description displayed in add-on manager --> <em:description>my first extension.</em:description> <!-- name of extension's primary developer. ...
...And 7 more matches
Extensions - Archive of obsolete content
link displays items to open the link in a new window or tab and to save or bookmark the link. an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context menus depending on what type of element was the
target of the context menu, only one context menu is used and items that don't apply to that type of element are hidden from the menu as needed. thus, you can add items to the firefox context menu by overlaying this single menu. this context menu has the id 'contentareacontextmenu'. in this example, a single item is added to the end of the firefox context menu. <popup id="contentareacontextmenu"> <me...
...nit function should be called within the handler for the load event so that the popupshowing event handler is hooked up before it would be opened by the user. in this example, the thumbnailsshowhideitems function will be called when the popup is about to be shown. ...
...he popupshowing event handler is hooked up before it would be opened by the user. in this example, the thumbnailsshowhideitems function will be called when the popup is about to be shown. this function retrieves the menuitem with the id 'thumbnail-show' that was added by the extension and hides it if an image was not the
target of the context menu. the popupnode property of the document holds the
target of the context menu. ...
...And 7 more matches
Table Reflow Internals - Archive of obsolete content
table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body). the initial chunk of an xml doc is loaded. the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the
target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the
target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts wh...
...inline frames) if there is truncation (it can't fit in the space and can't split). this is just a convience mechanism. kinds of reflows initial - reflowee's first reflow must be of this type (reflower's responsibility). resize - reflowee gets a change in available space only. similar to initial, except it can reoccur. incremental - has a reflow path (tree) where each node has a command with a
target frame, reflow command types are: dirty - something changed inside a
target (e.g. it gains, loses children) style changed - a
target changed stylisticly (recall, size is a style property) content changed - a
target's content changed (e.g. a text run) user defined - currently only used for fixed positioned frames kinds of reflows incremental reflow (continued) reflower not allowed to change a...
...children) style changed - a
target changed stylisticly (recall, size is a style property) content changed - a
target's content changed (e.g. ...
...And 7 more matches
GlobalEventHandlers.onpointerdown - Web APIs
jects. this is functionally equivalent to the mousedown event when generated due to user activity with a mouse or mouse-compatible device. if the pointerdown event isn't canceled through a call to preventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work. you can also use addeventlistener() to add a listener for pointerdown events. syntax
target.onpointerdown = downhandler; var downhandler =
target.onpointerdown; value a function to handle the pointerdown event for the
target element, document, or window. it receives as input the pointerevent describing the pointerdown event. example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. jav...
...to handle the pointerdown event for the
target element, document, or window. it receives as input the pointerevent describing the pointerdown event. example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. ...
...he
target element, document, or window. it receives as input the pointerevent describing the pointerdown event. example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. ...
...And 7 more matches
HTMLLinkElement - Web APIs
inherits all of the properties and methods of the htmlelement interface. ...
...s all of the properties and methods of the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 7 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
previewcolor = function updatepreviewcolor() { this.preview_color.style.backgroundcolor = this.color.getcolor(); }; /*************************************************************************/ // update input elements /*************************************************************************/ colorpicker.prototype.inputchangehue = function inputchangehue(e) { var value = parseint(e.
target.value); this.sethue(value); this.updatehuepicker(); }; colorpicker.prototype.inputchangesaturation = function inputchangesaturation(e) { var value = parseint(e.
target.value); this.color.setsaturation(value); e.
target.value = this.color.saturation; this.updateslv(); }; colorpicker.prototype.inputchangevalue = function inputchangevalue(e) { var value = parseint(e.
target.value); ...
...his.updatehuepicker(); }; colorpicker.prototype.inputchangesaturation = function inputchangesaturation(e) { var value = parseint(e.
target.value); this.color.setsaturation(value); e.
target.value = this.color.saturation; this.updateslv(); }; colorpicker.prototype.inputchangevalue = function inputchangevalue(e) { var value = parseint(e.
target.value); this.color.setvalue(value); e.
target.value = this.color.value; this.updateslv(); }; colorpicker.prototype.inputchangelightness = function inputchangelightness(e) { var value = parseint(e.
target.value); this.color.setlightness(value); e.
target.value = this.color.lightness; this.updateslv(); }; colorpicker.prototype.inputchangered = function inputchangered(e) { var value = parseint(e.
target.value); this.color.setby...
...lue; this.updateslv(); }; colorpicker.prototype.inputchangelightness = function inputchangelightness(e) { var value = parseint(e.
target.value); this.color.setlightness(value); e.
target.value = this.color.lightness; this.updateslv(); }; colorpicker.prototype.inputchangered = function inputchangered(e) { var value = parseint(e.
target.value); this.color.setbyname('r', value); e.
target.value = this.color.r; this.setcolor(this.color); }; colorpicker.prototype.inputchangegreen = function inputchangegreen(e) { var value = parseint(e.
target.value); this.color.setbyname('g', value); e.
target.value = this.color.g; this.setcolor(this.color); }; colorpicker.prototype.inputchangeblue = function inputchangeblue(e) { var value = parseint(e.
target.value); this.color.set...
...And 7 more matches
pointer-events - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...lobal values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; the pointer-events property is specified as a single keyword chosen from the list of values below. values auto the element behaves as it would if the pointer-events property were not specified. in svg content, this value and the value visiblepainted have the same effect. none the element is never the
target of pointer events; however, pointer events may
target its descendant elements if those descendants have pointer-events set to some other value. in these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. svg only (experimental for html) visiblepainted svg only (experimen...
... may
target its descendant elements if those descendants have pointer-events set to some other value. in these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. svg only (experimental for html) visiblepainted svg only (experimental for html). the element can only be the
target of a pointer event when the visibility property is set to visible and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. visiblefill svg only. ...
...And 7 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
not allowed author author of the current document or article. link link not allowed bookmark permalink for the nearest ancestor section. not allowed link not allowed canonical preferred url for the current document. link not allowed not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the
target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document. not allowed annotation annotation help link to context-sensitive help. link link link icon icon representing the current document. external resource not allowed not allowed li...
...renced document. link link link nofollow indicates that the current document's original author or publisher does not endorse the referenced document. not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate
target attribute value). not allowed annotation annotation noreferrer no referer header will be included. additionally, has the same effect as noopener. 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...
...attribute value). not allowed annotation annotation noreferrer no referer header will be included. additionally, has the same effect as noopener. 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). not allowed annotation annotation pingback gives the address of the pingback server that handles pingbacks to the current document. external resource not allowed not allowed preconnect specifies that the user agent should preemptively connect to the
target resource's origin. external resource not allowed not allowed pre...
...And 7 more matches
Tamarin build documentation - Archive of obsolete content
6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo. the work for that fix also included some changes to the configure.py default behavior to decouple the --
target switch from sdk choice: there is a new switch, --mac-sdk, that selects the 10.4u, 10.5 or 10.6 sdk. its options are '104u', '105' or '106' (note: no '.') if you don't pass the --mac-sdk switch you will get no sdk in your build. if you pass '--mac-sdk=104u' you will also get gcc/g++ 4.0. if you pass '--mac-sdk=105' or '--mac-sdk=106' you will get the gcc/g++ default for the machine you're b...
...tions are '104u', '105' or '106' (note: no '.') if you don't pass the --mac-sdk switch you will get no sdk in your build. if you pass '--mac-sdk=104u' you will also get gcc/g++ 4.0. if you pass '--mac-sdk=105' or '--mac-sdk=106' you will get the gcc/g++ default for the machine you're building on. example call to build on an x86_64 machine with the 10.5 sdk: $ ../configure.py --mac-sdk=105 --
target=x86_64-darwin if asc is not set, you will need to add asc.jar to the utils directory in tamarin-redux (bug 631641). download ftp://ftp.mozilla.org/pub/js/tamarin/builds/asc/latest/asc.jar put it in utils/ building tamarin for android 2.3.3 on mac public sdk/ndk setup to build tamarin for android you will need an sdk/ndk. the setup procedure below creates an android sdk/ndk entirely f...
...(gnu make 3.80 does not work. nor does any other brand of make.) setup: if you normally work in a cygwin mounted place (eg /home/user/..
...And 6 more matches
NPN_GetURL - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary asks the browser to create a stream for the specified url. syntax #include <npapi.h> nperror npn_geturl(npp instance, const char* url, const char*
target); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any type, such as http, ftp, news, or mailto.
target name of the
target window or frame, or one of the following special
target names. values: _blank or _new: load the link in a new blank unnamed window. safest
target, even though, when used with a mailto or news url, this creates an extra blank the browser instance. _self or _current: load the...
...use with npn_geturl() only if you want to terminate the plug-in. _parent: load the link into the immediate <frameset> parent of the plug-in instance's document. if the plug-in instance's document has no parent, the default is _self. ...
...u want to terminate the plug-in. _parent: load the link into the immediate <frameset> parent of the plug-in instance's document. if the plug-in instance's document has no parent, the default is _self. _top: load the link into the plug-in instance window. the default is _self, if the plug-in instance's document is already at the top. use for breaking out of a deep frame nesting. if the
target is null, the browser creates a new stream and delivers the data to the current instance regardless of the mime type of the url. in general, if a url works in the location box of the browser, it works here, except for the _self
target. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible value...
...And 6 more matches
UI pseudo-classes - Learn web development
in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states. prerequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements. ...
...ard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. ...
... these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful
targetting conditions that you can take advantage of. we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional:
targets required or optional form controls. :valid and :invalid, and :in-range and :out-of-range:
target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range. :enabled and :disabled, and :read-only and :read-write:
target enabled or disabled form controls (e.g. with the disabled html attribute set), and read-write or read-only form control...
...And 6 more matches
nsIAccessibleRelation
accessible/public/nsiaccessiblerelation.idlscriptable this interface gives access to an accessibles set of relations. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: be carefull, do not change constants until atk has a structure to map gecko constants into atk constants. method overview nsiaccessible get
target(in unsigned long index); nsiarray get
targets(); attributes attribute type description relationtype unsigned long returns the type of the relation. read only.
targetscount unsigned long returns the number of
targets for this relation. read only. constants constant ...
...gned long returns the type of the relation. read only.
targetscount unsigned long returns the number of
targets for this relation. read only. constants constant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a
target object. relation_controller_for 0x02 this object is interactive and controls some attribute of a
target object. relation_label_for 0x03 this object is label for a
target object. relation_labelled_by 0x04 this object is labelled by a
target object. if the accessible has an nsiaccessible.name() , you can ge...
...to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an nsiaccessible. relation_member_of 0x05 this object is a member of a group of one or more objects. ...
...And 6 more matches
Type conversion
ry.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...
..., [ { "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.
... // 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. note that the following table does not contain environment dependent types (ctypes.long, etc.).
target type source type ctypes.int16_t ctypes.int8_t ctypes.uint8_t ctypes.short ctypes.uint16_t ctypes.uint8_t ctypes.unsigned_short ctypes.short ctypes.int8_t ctypes.uint8_t ctypes.int16_t ct...
...And 6 more matches
Element - Web APIs
through the xulelement interface, also implement element. ...
... the xulelement interface, also implement element. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 6 more matches
HTMLFormElement - Web APIs
on of—aspects of the form, as well as access to its component elements. ...
...aspects of the form, as well as access to its component elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 6 more matches
RequestDestination - Web APIs
enumerated type contains the permitted values for a request's destination. these string values indicate potential types of content that a request may try to retrieve. values "" the default value of destination is used for destinations that do not have their own value. navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more. ...
...es for a request's destination. these string values indicate potential types of content that a request may try to retrieve. values "" the default value of destination is used for destinations that do not have their own value. navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more. "audio" the
target is audio data. ...
...s of content that a request may try to retrieve. values "" the default value of destination is used for destinations that do not have their own value. navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more. "audio" the
target is audio data. "audioworklet" the
target is data being fetched for use by an audio worklet. "document" the
target is a document (html or xml). "embed" the
target is embedded content. "font" the
target is a font. "image" the
target is an image. "manifest" the
target is a manifest. "object" the
target is an object. "paintworklet" the
target is a paint worklet. "report" the
target is a report. "script" the
target is a script. "serviceworker" the
target is a service worker. "sharedworker" the...
...And 6 more matches
SVGTSpanElement - Web APIs
the svgtspanelement interface represents a <tspan> element. ...
... the svgtspanelement interface represents a <tspan> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 6 more matches
SVGTextElement - Web APIs
textelement interface corresponds to the <text> elements. ...
...ent interface corresponds to the <text> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 6 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
... the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
... the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
...And 6 more matches
window.postMessage() - Web APIs
dded within it. 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"). window.postmessage() provides a controlled mechanism to securely circumvent this restriction (if used properly). ...
... 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"). window.postmessage() provides a controlled mechanism to securely circumvent this restriction (if used properly). broadly, one window may obtain a reference to another (e.g., via
targetwindow = window.opener), and then dispatch a messageevent on it with
targetwindow.postmessage(). the receiving window is then free to handle this event as needed. the arguments passed to window.postmessage() (i.e., the “message”) are exposed to the receiving window through the event object. syntax
targetwindow.postmessage(message,
targetorigin, [transfer]);
targetwindow a reference to the window that will receive the message. methods for obtaining such a refere...
...nt window), window.parent (to reference the parent window from within an embedded <iframe>), or window.frames + an index value (named or numeric). message data to be sent to the other window. the data is serialized using the structured clone algorithm. this means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself. ...
...And 6 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
ame as the global lang attribute. ping a space-separated list of urls. when the link is followed, the browser will send post requests with the body ping to the urls. typically for tracking. referrerpolicy how much of the referrer to send when following the link. see referrer-policy for possible values and their effects. rel the relationship of the linked url as space-separated link types.
target where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>). the following keywords have special meanings for where to load the url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _...
... url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). if no ancestors, behaves as _self. 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". type hints at the linked url’s format with a mime type. no built-in functionality. obsolete attributes charsetobsolete since html5 hinted at...
...ality. obsolete attributes charsetobsolete since html5 hinted at the character encoding of the linked url. note: this attribute is obsolete and should not be used by authors. use the http content-type header on the linked url. coordsobsolete since html5 used with the shape attribute. a comma-separated list of coordinates. nameobsolete since html5 was required to define a possible
target location in a page. in html 4.01, id and name could both be used on <a>, as long as they had identical values. note: use the global attribute id instead. revobsolete since html5 specified a reverse link; the opposite of the rel attribute. deprecated for being very confusing. shapeobsolete since html5 the shape of the hyperlink’s region in an image map. note: use the <area> element f...
...And 6 more matches
HTTP Index - HTTP
l) is the underlying protocol of the world wide web. http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d. 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. each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. 9 mime types (iana media types) content-type, guide, http, mime types, meta, request header, response header, application/javascript, applica...
... browser detection using the user agent compatibility, http, web development serving different web pages or services to different browsers is usually a bad idea. the web is meant to be accessible to everyone, regardless of which browser or device they're using. there are ways to develop your website to progressively enhance itself based on the availability of features rather than by
targeting specific browsers. 13 compression in http guide, http, compression compression is an important way to increase the performance of a web site. for some documents, size reduction of up to 70% lowers the bandwidth capacity needs. over the years, algorithms also got more efficient, and new ones are supported by clients and servers. 14 configuring servers for ogg med...
...ective, http, reference, security, font, source the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. 83 csp: form-action csp, content-security-policy, directive, http, security, action, form, form-action the http content-security-policy (csp) form-action directive restricts the urls which can be used as the
target of a form submissions from a given context. 84 csp: frame-ancestors ancestors, csp, content-security-policy, directive, frame, http, security, frame-ancestors the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. 85 csp: frame-src csp, content-secur...
...And 6 more matches
JavaScript Daemons Management - Archive of obsolete content
, // optional |*| "perform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "
target": document.createelement("p"), "create": function () { // build letters list this.
target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.
target }; this.lett...
... nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.
target }; this.letters.push(oletter); oletter.index = this.numletters; oletter.elem.style.position = "relative"; oletter.val = oletter.elem.textcontent; this.numletters++; this.
target.appendchild(ospan); } }, "perform": function (nindex, nlength, bbackw) { for (var oletter, nletter = 0; nletter < this.letters.length; nletter++) { oletter = this.letters[nletter]; if (nlength < nindex && this.clock + this.delta < this.interval) { clock += this.delta; return; } this.clock = 0; oletter.elem.textcontent = nindex / nlength - ...
...ers[nletter]; if (nlength < nindex && this.clock + this.delta < this.interval) { clock += this.delta; return; } this.clock = 0; oletter.elem.textcontent = nindex / nlength - oletter.index / this.numletters >= 0 ? ...
...And 5 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
riety of ways you can install extensions and themes from web pages, including direct linking to the xpi files and using the installtrigger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...g to the xpi files and using the installtrigger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...igger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...And 5 more matches
Tabbed browser - Archive of obsolete content
see tabbrowser for getbrowserfortab(). note that the code above does not work inside of the electrolysis (e10s) enabled tabs. opening a url in the correct window/tab there are methods available in chrome://browser/content/utilityoverlay.js that make it easy to open url in tabs such as openuilinkin and openuilink. openuilinkin( url, where, a...
...eneric removetab method, which accepts a xul tab element as its single parameter. changing active tab this moves one tab forward (to the right). gbrowser.tabcontainer.advanceselectedtab(1, true); this moves one tab to the left. gbrowser.tabcontainer.advanceselectedtab(-1, true); detecting page load see also code snippets:on page load function examplepageload(event) { if (event.original
target instanceof components.interfaces.nsidomhtmldocument) { var win = event.original
target.defaultview; if (win.frameelement) { // frame within a tab was loaded. win should be the top window of // the frameset. if you don't want do anything when frames/iframes // are loaded in this web page, uncomment the following line: // return; // find the root document: ...
...k to be run every time a document loads. // note that this includes frames/iframes within the document gbrowser.addeventlistener("load", examplepageload, true); }, false); ... // when no longer needed gbrowser.removeeventlistener("load", examplepageload, true); ... ...
...And 5 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
age, the name of the package as it appears in the client registry, and the version, which can be expressed as a number or as an installversion object. 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. verifying the
target the first thing the installation script does when it's executed is to check that there is adequate disk space for the software to be installed, where the verifydiskspace function is called as a condition of the main installation block that starts at line 24). // this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get ...
... spaceavailable = filegetdiskspaceavailable(dirpath); spacerequired, the other expected input to the verifydiskspace function, is given as 17311 kilobytes on line 19. inside the function, the two sizes are compared and if the available space is larger than the required space, the installation proceeds. adding files and directories (full of files) to the install once you have verified that the
target can accomodate the software to be installed and initialized the actual installation, you must add files and directories to the installation in order to have them installed. in the browser.xpi install script, the files are added in lines 26-41: err = adddirectory("program", "6.0.0.2000110807", "bin", // jar source folder ...
...are to be installed and initialized the actual installation, you must add files and directories to the installation in order to have them installed. ...
...And 5 more matches
Building accessible custom components in XUL - Archive of obsolete content
spreadsheet_focus function, which is registered as a handler for the focus event. ...
...<code> <window id="accjax" title="accjax s...
...<code> <window id="accjax" title="accjax spreadsheet" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:x2="http://www.w3.o...
...And 5 more matches
CustomizableUI.jsm
e(); void endbatchupdate(aforcedirty); widgetgroupwrapper createwidget(awidgetspecification); void destroywidget(awidgetid); widgetgroupwrapper getwidget(awidgetid); array getunusedwidgets(awindow); array getwidgetidsinarea(aareaid); array getwidgetsinarea(aareaid); string getareatype(aareaid); domelement getcustomize
targetforarea(aareaid, awindow); void reset(); void undoreset(); void removeextratoolbar(); object getplacementofwidget(awidgetid); bool iswidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, aformatargs, adef); void hidepanelfornode(anode); bool isspecialwid...
...lbar or menu panel) an area is. this is useful if you have a widget that needs to behave differently depending on its location. note that widget wrappers have a convenience getter property (areatype) for this purpose. parameters aarea the id of the area whose type you want to know return value type_toolbar or type_menu_panel depending on the area, null if the area is unknown. ...
...dget that needs to behave differently depending on its location. note that widget wrappers have a convenience getter property (areatype) for this purpose. parameters aarea the id of the area whose type you want to know return value type_toolbar or type_menu_panel depending on the area, null if the area is unknown. getcustomize
targetforarea() obtain the dom node that is the customization
target for an area in a specific window. areas can have a customization
target that does not correspond to the node itself. in particular, toolbars that have a customization
target attribute set will have their customization
target set to that node. this means widgets will end up in the customization
target, not in the dom node with the id that corresponds to the area id. this is useful because it lets ...
...And 5 more matches
SpiderMonkey Build Documentation
ce version 28, threadsafe builds are the default, and should work out of the box on all posix platforms. hence, the following instructions should only be relevant if you're on windows or compiling an older version of spidermonkey. the mozillabuild batch file you used to open your shell (e.g. start-shell-msvc2013.bat or start-shell-msvc2013-x64.bat) determines whether the compiler toolchain will
target 32-bit or 64-bit builds. to create a 64-bit build, note that you must configure with --
target=x86_64-pc-mingw32 --host=x86_64-pc-mingw32. since the posix nspr emulation is not available for windows, a working version of nspr must be available to your build. the easiest option is to configure with --enable-nspr-build. this configure option builds the in-tree version of nspr which is probably what...
...piling compiler. that tends to be easier with clang as clang has cross-compiling support built in. you may need other libraries though. for example on debian linux you'll need the following to cross compile from x86_64 to x86. ...
... for example on debian linux you'll need the following to cross compile from x86_64 to x86. ...
...And 5 more matches
Components.utils.exportFunction
like a normal web page script. a function exported from privileged to less-privileged code can be called from the less privileged code's context. the function has access to its surrounding closure just as if it were being called in the privileged context. ...
... options : object optional parameter that supplies additional options. ...
...able as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor. this includes add-on sdk content scripts. to understand what happens if the functions you export accept arguments, see exporting functions that take arguments below. syntax components.utils.exportfunction(func,
targetscope[, options]); parameters func : function the function to export.
targetscope : object the object to attach the function to. this does not have to be the global window object: it could be any other object in the
target window, or an object created by the caller. options : object optional parameter that supplies additional options. the following options are currently defined: defineas: determines the name of the function in
targetscope. if this is omitted, you n...
...And 5 more matches
GlobalEventHandlers.ondragend - Web APIs
a global event handler for the dragend event. syntax var dragendhandler =
targetelement.ondragend; return value dragendhandler the dragend event handler for element
targetelement. example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler. ...
...t
targetelement. example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler. ...
...bal 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.current
target.style.border = "dashed"; ev.datatransfer.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.current
target.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getda...
...And 5 more matches
GlobalEventHandlers.ondragenter - Web APIs
a global event handler for the dragenter event. syntax var dragenterhandler =
targetelement.ondragenter; return value dragenterhandler the dragenter event handler for element
targetelement. example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler. ...
...
targetelement. example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler. ...
...bal 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.current
target.style.border = "dashed"; ev.datatransfer.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.current
target.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getda...
...And 5 more matches
GlobalEventHandlers.ondragexit - Web APIs
the globaleventhandler.ondragexit property is an event handler for the dragexit event. the ondragexit event is a gecko specific event listener. if you are building a drag-and-drop feature for a website please see the ondragleave event listener instead. syntax var dragexithandler =
targetelement.ondragexit; return value dragexithandler the dragexit event handler for element
targetelement. example this example demonstrates using the ondragexit attribute handler to set an element's dragexit event handler. ...
...nt
targetelement. example this example demonstrates using the ondragexit attribute handler to set an element's dragexit event handler. ...
...bal 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.current
target.style.border = "dashed"; ev.datatransfer.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.current
target.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getda...
...And 5 more matches
GlobalEventHandlers.ondragleave - Web APIs
a global event handler for the dragleave event. syntax var dragleavehandler =
targetelement.ondragleave; return value dragleavehandler the dragleave event handler for element
targetelement. example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler. ...
...
targetelement. example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler. ...
...d 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.current
target.style.border = "dashed"; ev.datatransfer.setdata("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.current
target.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatran...
...And 5 more matches
HTMLAnchorElement - Web APIs
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/event
target"
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">event
target</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
... 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">event
target</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=...
..." 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" stro...
...And 5 more matches
HTMLAreaElement - Web APIs
ritance) for manipulating the layout and presentation of <area> elements. ...
... for manipulating the layout and presentation of <area> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
HTMLButtonElement - Web APIs
o has available to it by inheritance) for manipulating <button> elements. ...
...ailable to it by inheritance) for manipulating <button> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
HTMLInputElement - Web APIs
r manipulating the options, layout, and presentation of <input> elements. ...
...lating the options, layout, and presentation of <input> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
HTMLMediaElement - Web APIs
mlvideoelement and htmlaudioelement elements both inherit this interface. ...
...lement and htmlaudioelement elements both inherit this interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
HTMLScriptElement - Web APIs
its element receives an error event; otherwise, it receives a load event. ...
...ent receives an error event; otherwise, it receives a load event. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
Timing element visibility with the Intersection Observer API - Web APIs
nt becomes hidden or visible, such as when the user switches tabs in their browser. the intersection observer api doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. therefore, we need to pause our timers while the page is tabbed out; hence this event listener. next we set up the options for the intersectionobserver which will monitor
target elements (ads, in our case) for intersection changes relative to the document. the options are configured to watch for intersections with the document's viewport (by setting root to null). we have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. and the threshold is set to an array con...
...options are configured to watch for intersections with the document's viewport (by setting root to null). we have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. and the threshold is set to an array containing the values 0.0 and 0.75; this will cause our callback to execute whenever a
targeted element becomes completely obscured or first starts to become unobscured (intersection ratio 0.0) or passes through 75% visible in either direction (intersection ratio 0.75). the observer, adobserver, is created by calling intersectionobserver's constructor, passing in the callback function, intersectioncallback, and our options. we then call a function buildcontents(), which we'll define lat...
...ll, or you might do it differently or using a different time interval. handling document visibility changes let's take a look at the handler for the visibilitychange event. our script receives this event when the document itself becomes visible or invisible. the most important scenario here is when the user switches tabs. since intersection observer only cares about the intersection between the
targeted elements and the intersection root, and not the tab's visibility (which is a different issue entirely), we need to use the page visibility api to detect these tab switches and disable our timers for the duration. function handlevisibilitychange() { if (document.hidden) { if (!previouslyvisibleads) { previouslyvisibleads = visibleads; visibleads = []; previouslyvisiblead...
...And 5 more matches
ProcessingInstruction - Web APIs
the processinginstruction interface inherits methods and properties from node. ...
... the processinginstruction interface inherits methods and properties from node. ...
...processinginstruction interface inherits methods and properties from node. ...
...And 5 more matches
SVGCircleElement - Web APIs
the svgcircleelement interface is an interface for the <circle> element. ...
...circleelement interface is an interface for the <circle> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGEllipseElement - Web APIs
provides access to the properties of <ellipse> elements. ...
...s access to the properties of <ellipse> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGLineElement - Web APIs
f <line> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGPathElement - Web APIs
gpathelement interface corresponds to the <path> element. ...
...ment interface corresponds to the <path> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGPolygonElement - Web APIs
polygon> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGPolylineElement - Web APIs
olyline> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGRectElement - Web APIs
f <rect> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGTextPathElement - Web APIs
helement interface corresponds to the <textpath> element. ...
... interface corresponds to the <textpath> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
SVGTextPositioningElement - Web APIs
y svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...telement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 5 more matches
TouchEvent - Web APIs
tacts with a touch-sensitive surface changes. this surface can be a touch screen or trackpad, for example. the event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth. touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and
target element. lists of touches are represented by touchlist objects. <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...
.... lists of touches are represented by touchlist objects. ...
...t="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" stro...
...And 5 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...context.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...And 5 more matches
WebGLRenderingContext.bufferData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...And 5 more matches
XRSession: select event - Web APIs
le no interface xrinputsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the select event. ...
...ld react to them, see primary actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the select event. the handler fetches the pose representing the
target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray(). ...
...s and input sources. examples the following example uses addeventlistener() to set up a handler for the select event. the handler fetches the pose representing the
target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray(). ...
...And 5 more matches
XRSession: squeeze event - Web APIs
interface xrinputsourceevent event handler property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the squeeze event. the handler fetches the pose representing the
target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandlesqueezewithray(). this code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends. xrsession.addeven...
...nsform to a function called myhandlesqueezewithray(). this code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends. ...
...hray(). this code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends. ...
...And 5 more matches
ARIA: grid role - Accessibility
ray.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.
target.dataset.row, 10), parseint(event.
target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.
target.dataset.row, 10), parseint(event.
target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.
target.dataset.row, 10) + 1, parseint(event.
target.dataset.col, 10)); break; case "arrowup": moveto(parseint(event.
target.da...
...arget.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.
target.dataset.row, 10), parseint(event.
target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.
target.dataset.row, 10) + 1, parseint(event.
target.dataset.col, 10)); break; case "arrowup": moveto(parseint(event.
target.dataset.row, 10) - 1, parseint(event.
target.dataset.col, 10)); break; case "home": if (event.ctrlkey) { var i = 0; var result; do { var j = 0; var result; do { result = moveto(i, j); j++; } while (result == false); i++; } while (result == false); } else { moveto(parseint(event.
target.dataset.row, 10), 0); ...
... moveto(parseint(event.
target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var result; do { var j = maxcol; do { result = moveto(i, j); j--; } while (result == false); i--; } while (result == false); } else { moveto(parseint(event.
target.dataset.row, 10), document.queryselector('[data-row="' + event.
target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.
target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { res...
...And 5 more matches
Border-image generator - CSS: Cascading Style Sheets
rmanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.
target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermoti...
...e) === 'boolean') this.state = state === false ? ...
...tate === false ? ...
...And 5 more matches
Color picker tool - CSS: Cascading Style Sheets
previewcolor = function updatepreviewcolor() { this.preview_color.style.backgroundcolor = this.color.getcolor(); }; /*************************************************************************/ // update input elements /*************************************************************************/ colorpicker.prototype.inputchangehue = function inputchangehue(e) { var value = parseint(e.
target.value); this.sethue(value); this.updatehuepicker(); }; colorpicker.prototype.inputchangesaturation = function inputchangesaturation(e) { var value = parseint(e.
target.value); this.color.setsaturation(value); e.
target.value = this.color.saturation; this.updateslv(); }; colorpicker.prototype.inputchangevalue = function inputchangevalue(e) { var value = parseint(e.
target.value); ...
...his.updatehuepicker(); }; colorpicker.prototype.inputchangesaturation = function inputchangesaturation(e) { var value = parseint(e.
target.value); this.color.setsaturation(value); e.
target.value = this.color.saturation; this.updateslv(); }; colorpicker.prototype.inputchangevalue = function inputchangevalue(e) { var value = parseint(e.
target.value); this.color.setvalue(value); e.
target.value = this.color.value; this.updateslv(); }; colorpicker.prototype.inputchangelightness = function inputchangelightness(e) { var value = parseint(e.
target.value); this.color.setlightness(value); e.
target.value = this.color.lightness; this.updateslv(); }; colorpicker.prototype.inputchangered = function inputchangered(e) { var value = parseint(e.
target.value); this.color.setby...
...lue; this.updateslv(); }; colorpicker.prototype.inputchangelightness = function inputchangelightness(e) { var value = parseint(e.
target.value); this.color.setlightness(value); e.
target.value = this.color.lightness; this.updateslv(); }; colorpicker.prototype.inputchangered = function inputchangered(e) { var value = parseint(e.
target.value); this.color.setbyname('r', value); e.
target.value = this.color.r; this.setcolor(this.color); }; colorpicker.prototype.inputchangegreen = function inputchangegreen(e) { var value = parseint(e.
target.value); this.color.setbyname('g', value); e.
target.value = this.color.g; this.setcolor(this.color); }; colorpicker.prototype.inputchangeblue = function inputchangeblue(e) { var value = parseint(e.
target.value); this.color.set...
...And 5 more matches
HTML documentation index - HTML: Hypertext Markup Language
the size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. if css
targets the element with properties impacting the width, css takes precedence. 50 html attribute: step attribute, attributes, constrain validation, step valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, the step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. ...
...erence in html, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element. 224 link types: dns-prefetch attribute, html, link, link types, reference the dns-prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the
target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin. 225 link types: manifest app, attribute, html, link, link types, manifest, reference the manifest keyword for the rel attribute of the <link> element indicates that the
target resource is a web app manifest. 226 link types: ...
...e rel attribute of the <link> element provides a declarative way to preemptively fetch a module script and its dependencies, and store them in the document's module map for later evaluation. ...
...And 5 more matches
Reflect.construct() - JavaScript
the static reflect.construct() method acts like the new operator, but as a function. it is equivalent to calling new
target(...args). it gives also the added option to specify a different prototype. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.construct(
target, argumentslist[, new
target]) parameters
target the
target function to call. argumentslist an array-like object specifying the arguments with which
target should be called. new
target optional the constructor whose prototype should be used. see also the new.
target operator. if new
target is not present, its value defaults to
target. r...
... description reflect.construct() allows you to invoke a constructor with a variable number of arguments. ...
... description reflect.construct() allows you to invoke a constructor with a variable number of arguments. ...
...And 5 more matches
WeakRef - JavaScript
a weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector. in contrast, a normal (or strong) reference keeps an object in memory. when an object no longer has any strong references to it, the javascript engine's garbage collector may destroy the object and reclaim its memory. ...
...tor may destroy the object and reclaim its memory. if that happens, you can't get the object from a weak reference anymore. note: please see the avoid where possible section below. correct use of weakref takes careful thought, and it's best avoided if possible. constructor weakref() creates a new weakref object. instance methods weakref.prototype.deref() returns the weakref object's
target object, or undefined if the
target object has been reclaimed. avoid where possible correct use of weakref takes careful thought, and it's best avoided if possible. it's also important to avoid relying on any specific behaviors not guaranteed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any given javascript engine. any behavior you obse...
...ke they are unreachable (e.g., in closures, or inline caches). different javascript engines may do these things differently, or the same engine may change its algorithms across versions. complex factors may lead to objects being held alive for unexpected amounts of time, such as use with certain apis. notes on weakrefs some notes on weakrefs: if your code has just created a weakref for a
target object, or has gotten a
target object from a weakref's deref method, that
target object will not be reclaimed until the end of the current javascript job (including any promise reaction jobs that run at the end of a script job). that is, you can only "see" an object get reclaimed between turns of the event loop. this is primarily to avoid making the behavior of any given javascript engine's garba...
...And 5 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
neighboring pixel values to produce a resulting pixel value. each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. ...
...pixel values to produce a resulting pixel value. each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. ...
... note in the above formulas that the values in the kernel matrix are applied such th...
...And 5 more matches
content/mod - Archive of obsolete content
le 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. window : nsidomwindow the window to be modified. detachfrom(modification, window) function removes attached modification from a given window. if window is not specified, modification is removed from all the windows it's being attached to. 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 } = requ...
...ll 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); // ... ...
...e").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ... detachfrom(style, window); parameters modification : object the modification we want to remove from the
target window : nsidomwindow the window to be modified. if window is not provided modification is removed from all
targets it's being attached to. ...
...And 4 more matches
Drag and Drop Example - Archive of obsolete content
sn't handle it and just ignores it, but we can still retrieve it with the dom's getattribute function. we need this so that we know what type of element to create when dragging. next, we'll define the two listener objects. first, the listobserver which needs a function to handle the start of the drag. ...
...we'll use the value of this attribute as the data of the drag. the boardobserver will need three functions, getsupportedflavours, ondragover and ondrop. the ondrop function will grab the data from the drag session and create a new element of the appropriate type. ...
...we'll use the value of this attribute as the data of the drag. the boardobserver will need three functions, getsupportedflavours, ondragover and ondrop. the ondrop function will grab the data from the drag session and create a new element of the appropriate type. ...
...And 4 more matches
Anonymous Content - Archive of obsolete content
n any explicit children found underneath the insertion point are relocated to any other insertion points that match. again, if all the children cannot be relocated, then the anonymous content is destroyed. [editor's note: should there be an api for retrieving insertion points, for dynamically creating new insertion points, or for removing insertion points? perhaps on elementxbl?] event flow and
targeting flow and
targeting across scopes dom events can fire on anonymous
targets just as they can on explicit
targets. as long as the event flows within the same scope, it is no different from the behavior outlined in the dom level 2 events specification. events flow through the final transformed content model after all elements have been repositioned through the usage of children tags. whenever ...
...s within the same scope, it is no different from the behavior outlined in the dom level 2 events specification. events flow through the final transformed content model after all elements have been repositioned through the usage of children tags. whenever events flow from an anonymous element in a bound element's scope to the bound element itself, one of two actions occurs. either the event is re
targeted so that the bound element becomes the
target, or the event is stopped and flow proceeds to the next phase. whenever an event is re
targeted, the
target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: original
target. the action taken (re
target vs. stop) is specific to the event type. in...
...nt becomes the
target, or the event is stopped and flow proceeds to the next phase. whenever an event is re
targeted, the
target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: original
target. the action taken (re
target vs. stop) is specific to the event type. in general, ui events are re
targeted and mutation events are stopped. exceptions to the rule are noted below. focus and blur events when a focus or blur event crosses a scope boundary, the bound element is checked to see if it is focusable (i.e., if the user agent would normally fire a focus or blur event on the element). if the bound element is focusable, then the event is re
targeted. if not, then the event is stopped. if anony...
...And 4 more matches
Client-side storage - Learn web development
is handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). ...
...what data items the objectstore will contain objectstore.createindex('title', 'title', { unique: false }); objectstore.createindex('body', 'body', { unique: false }); console.log('database setup complete'); }; this is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. here we first grab a reference to the existing database from e.
target.result (the event
target's result property), which is the request object. this is equivalent to the line db = request.result; inside the onsuccess handler, but we need to do this separately here because the onupgradeneeded handler (if needed) will run before the onsuccess handler, meaning that the db value wouldn't be available if we didn't do this. we then use idbdatabase.createobjectstore() ...
... time a new note is added while (list.firstchild) { list.removechild(list.firstchild); } // open our object store and then get a cursor - which iterates through all the // different data items in the store let objectstore = db.transaction('notes_os').objectstore('notes_os'); objectstore.opencursor().onsuccess = function(e) { // get a reference to the cursor let cursor = e.
target.result; // if there is still another data item to iterate through, keep running this code if(cursor) { // create a list item, h3, and p to put each data item inside when displaying it // structure the html fragment, and append it inside the list const listitem = document.createelement('li'); const h3 = document.createelement('h3'); const para = document.crea...
...And 4 more matches
Makefile - variables
s that should be copied into the exported namespace directory. extra_components nsdefaultclh.manifest, javascript xpcomm files extra_dso_libs extra_dso_ldopts extra_js_modules extra_pp_components xpcomm files to pre-process before installation. 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. global_deps a list of common dependencies (makefile.in, autoconf.mk) that will force rebuilding. libobjs have_dtrace sun microsystem's dynamic tracing environment is available. ...
... force rebuilding. libobjs have_dtrace sun microsystem's dynamic tracing environment is available. local_includes allow use of moz_objdir in .mozconfig with older gnu gcc on beos. module module_name no_dist_install inhibit generating and copying exports/install
targets into $(moz_objdir)/dist/install. .ns_printing objs obj_suffix filename suffix to use when writing object files. module instructs the build system where to install exported headers. simple_programs suppress_default_rules inhibit processing of makefile tier targ...
... build recursively. parallel_dirs a list of subdirectories to build recursively that may be built concurrently. static_dirs subdirectories containing static makefiles that are not autogenerated. test_dirs a list of directories containing test makefiles tool_dirs a list of directories to process makefile 'tool'
targets in. moz_ variable description moz_auto_deps moz_build_app moz_build_projects build multiple projects in the same sandbox. dest=$(moz_objdir)/$project moz_current_project moz_debug moz_enable_xremote moz_...
...And 4 more matches
Download
download is started. hasprogress read only boolean indicates whether this download's progress property is able to report partial progress while the download proceeds, and whether the value in totalbytes is relevant. this depends on the saver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully, the
target file will be opened or executed automatically. launcherpath string local file path of the application to be used to launch the
target file, or null if the file should be launched with the default application associated with the contenttype property or the extension of the
target file. onchange function this can be set to a function that is called after other pro...
.... stopped read only boolean indicates that the download never started, has been completed successfully, failed, or has been canceled. this property becomes false when a download is started for the first time, or when a failed or canceled download is restarted. succeeded read only boolean this propery is true if the download has been completed successfully.
target read only download
target target of this download. totalbytes read only number when hasprogress is true, this indicates the total number of bytes to be transferred before the download finishes; this value can be zero if the file is empty. note: this property's value may not match the actual final size of the downloaded file if the download is encoded during the net...
... of this download. totalbytes read only number when hasprogress is true, this indicates the total number of bytes to be transferred before the download finishes; this value can be zero if the file is empty. note: this property's value may not match the actual final size of the downloaded file if the download is encoded during the network transfer. you can use the download
target.size property to get the actual size of the completely-downloaded file once the download has succeeded. when hasprogress is false, this property is always zero. trytokeeppartialdata boolean indicates whether any partially downloaded data should be retained, to use when restarting a failed or canceled download. the default is false. whether partial data can actual...
...And 4 more matches
IAccessibleHyperlink
ags" which are objects, typically strings, which have multiple actions such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. ...
... such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. the first level hyperlinks would only implement anchor() and anchor
target(). the anchors would all reference the image object. the anchor
targets would reference the second level accessible hyperlink objects. none of the iaccessibleaction methods would be implemented on the first level hyperlink objects. the second level hyperlink objects would implement the iaccessibleaction methods. their anchors would also reference the image object and their anchor
targets would reference urls or the objects that would be activated. this use case demon...
...ects that would be activated. this use case demonstrates that in some cases there is no need for iaccessiblehyperlink to derive from iaccessibleaction. as a result it may be removed in a later version of the idl and it is suggested that implementations should not rely on the inheritance. method overview [propget] hresult anchor([in] long index, [out] variant anchor ); [propget] hresult anchor
target([in] long index, [out] variant anchor
target ); [propget] hresult endindex([out] long index ); [propget] hresult startindex([out] long index ); [propget] hresult valid([out] boolean valid ); methods anchor() returns an object that represents the link anchor, as appropriate for the link at the specified index. [propget] hresult anchor( [in] long index, [out] variant anchor ); paramete...
...And 4 more matches
nsIWebBrowserPersist
d files and directories. this flag does nothing for failed upload operations to remote servers. persist_flags_autodetect_apply_conversion 16384 let the webbrowserpersist decide whether the incoming data is encoded and whether it needs to go through a content converter, for example to decompress it. persist_flags_append_to_file 32768 append the downloaded data to the
target file. this can only be used when persisting to a local file. persist_flags_force_allow_cookies 65536 force relevant cookies to be sent with this load even if normally they wouldn't be. persist_state_ready 1 persister is ready to save data. persist_state_saving 2 persister is saving data. persist_state_finished 3 persister has finished ...
... responsible for cleaning up partially written files or directories. this has the same effect as calling cancel with an argument of ns_binding_aborted. void cancelsave(); parameters none. savechannel() save a channel to a file. it must not be opened yet. void savechannel( in nsichannel achannel, in nsisupports afile ); parameters achannel the nsichannel to save to a file. afile
target local file. this may be a nsilocalfile object or an nsiuri object with a file scheme. savedocument() save the specified dom document to file and optionally all linked files (for example images, css, js & subframes). do not call this method until the document has finished loading! void savedocument( in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string ...
... document has finished loading! void savedocument( in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn ); parameters adocument document to save to file. some implementations of this interface may also support nsnull to imply the currently loaded document. afile
target local file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). adatapath path to directory where uris linked to the document are saved or nsnull if no linked uris should be saved. this may be a nsilocalfile object or an nsiuri object with a file scheme. aoutputcontenttype the desired mime type format to save the docu...
...And 4 more matches
Mail and RDF
he details of rdf resource factories will be left to rdf documentation for now.) from an rdf resource, it is possible to queryinterface() to the appropriate mail/news object, and then access information from there. for example, the folder pane needs to display the number of messages in the inbox. ...
...ctories will be left to rdf documentation for now.) from an rdf resource, it is possible to queryinterface() to the appropriate mail/news object, and then access information from there. for example, the folder pane needs to display the number of messages in the inbox. information for this column is queried when the tree's rdf template calls the folder datasource's get
target() method. ...
... folder pane needs to display the number of messages in the inbox. information for this column is queried when the tree's rdf template calls the folder datasource's get
target() method. the query's
target is the resource named mailbox://alecf@pop.myisp.com/inbox and the property node is named http://home.netscape.com/nc-rdf#totalmessages. this is basically what happens, behind the scenes: var
target = rdf.getresource("mailbox://alecf@pop.myisp.com/inbox"); var property = rdf.getresource("http://home.netscape.com/nc-rdf#totalmessages"); var resultnode = datasource.get
target(
target, property, true); in the folder datasource's get
target(),
target would be queryinterfaced to a nsimsgfolder. to get the total messages, the datasource would then call nsimsgfolder.gettotalmessages(). f...
...And 4 more matches
DataTransfer.clearData() - Web APIs
. if this parameter is an empty string or is not provided, the data for all types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. 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. ...
...ment, drag it to the drop zone and then release the selection to move the element. ...
...ninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #
target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('
target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.
...And 4 more matches
DataTransfer.setData() - Web APIs
eturn value void example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. ...
..., 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.current
target.style.border = "dashed"; // set the drag's format and data. ...
...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.current
target.style.border = "dashed"; // set the drag's format and data. ...
...And 4 more matches
Element: mouseenter event - Web APIs
e css :hover pseudo-class. examples the mouseover documentation has an example illustrating the difference between mouseover and mouseenter. mouseenter the following trivial example uses the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. ...
...nd mouseenter. mouseenter the following trivial example uses the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mouse
target'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible. ...
...oted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mouse
target'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible. ...
...And 4 more matches
Element: mouseleave event - Web APIs
dler or reaches the root. examples the mouseout documentation has an example illustrating the difference between mouseout and mouseleave. mouseleave the following trivial example uses the mouseenter event to change the border on the <div> when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. ...
...ouseleave. mouseleave the following trivial example uses the mouseenter event to change the border on the <div> when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mouse
target'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...ed to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mouse
target'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...And 4 more matches
HTMLAudioElement - Web APIs
and inherits properties and methods from, the htmlmediaelement interface. ...
...rits properties and methods from, the htmlmediaelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
HTMLBaseElement - Web APIs
of the properties and methods as described in the htmlelement interface. ...
...properties and methods as described in the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
HTMLVideoElement - Web APIs
ts that all the browsers you need to support are covered. ...
...all the browsers you need to support are covered. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
RTCPeerConnection - Web APIs
tion, and close the connection once it's no longer needed. ...
...d close the connection once it's no longer needed. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" f...
...And 4 more matches
SVGAnimateElement - Web APIs
teelement interface corresponds to the <animate> element. ...
...t interface corresponds to the <animate> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGAnimateMotionElement - Web APIs
ent interface corresponds to the <animatemotion> element. ...
...rface corresponds to the <animatemotion> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGAnimateTransformElement - Web APIs
interface corresponds to the <animatetransform> element. ...
...ce corresponds to the <animatetransform> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGAnimationElement - Web APIs
, svganimatemotionelement and svganimatetransformelement. ...
...matemotionelement and svganimatetransformelement. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGDefsElement - Web APIs
gdefselement interface corresponds to the <defs> element. ...
...ment interface corresponds to the <defs> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGFEConvolveMatrixElement - Web APIs
interface corresponds to the <feconvolvematrix> element. ...
...ce corresponds to the <feconvolvematrix> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGFEFuncAElement - Web APIs
caelement interface corresponds to the <fefunca> element. ...
...t interface corresponds to the <fefunca> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGFEFuncBElement - Web APIs
cbelement interface corresponds to the <fefuncb> element. ...
...t interface corresponds to the <fefuncb> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGFEFuncGElement - Web APIs
cgelement interface corresponds to the <fefuncg> element. ...
...t interface corresponds to the <fefuncg> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGFEFuncRElement - Web APIs
crelement interface corresponds to the <fefuncr> element. ...
...t interface corresponds to the <fefuncr> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGForeignObjectElement - Web APIs
nobject> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGGElement - Web APIs
the svggelement interface corresponds to the <g> element. ...
...element interface corresponds to the <g> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGGeometryElement - Web APIs
ed and stroked. this includes paths and the basic shapes. ...
...troked. this includes paths and the basic shapes. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGImageElement - Web APIs
mageelement interface corresponds to the <image> element. ...
...ent interface corresponds to the <image> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGLinearGradientElement - Web APIs
nt interface corresponds to the <lineargradient> element. ...
...face corresponds to the <lineargradient> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGRadialGradientElement - Web APIs
nt interface corresponds to the <radialgradient> element. ...
...face corresponds to the <radialgradient> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGSetElement - Web APIs
svgsetelement interface corresponds to the <set> element. ...
...ement interface corresponds to the <set> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGSwitchElement - Web APIs
tchelement interface corresponds to the <switch> element. ...
...nt interface corresponds to the <switch> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGTextContentElement - Web APIs
gtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...ement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
SVGUseElement - Web APIs
svguseelement interface corresponds to the <use> element. ...
...ement interface corresponds to the <use> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 4 more matches
WebGLRenderingContext.bufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...And 4 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using these methods. ...
... or three-dimensional texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using these methods. ...
...s before using these methods. ...
...And 4 more matches
WebGL best practices - Web APIs
ixels covered by a maximized browser window. e.g. (window.innerwidth * devicepixelratio) * (window.innerheight * window.devicepixelratio) 3) the per-pixel vram budget is (1) divided by (2), and is a constant. this constant should generally be portable among systems. mobile devices typically have smaller screens than powerful desktop machines with large monitors. re-compute this constant on a few
target systems to get a reliable estimate. now adjust all internal caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, computed by this constant multiplied by the number of pixels covered by the current browser window. this requires estimating the number of bytes consumed by each texture, for example. the cap also must typically be updated as the browser window resize...
...ur a processing pass that will temporarily switch gl progams internally, causing a pipeline flush. (pipelines are formalized explicitly in vulkan[1] et al, but are implicit behind-the-scenes in opengl and webgl. pipelines are more or less the tuple of shader program, depth/stencil/multisample/blend/rasterization state) in webgl: ... ...
...nes are more or less the tuple of shader program, depth/stencil/multisample/blend/rasterization state) in webgl: ... useprogram(prog1) <pipeline flush> bindframebuffer(
target) drawarrays() bindtexture(webgl_texture) teximage2d(htmlvideoelement) drawarrays() ... behind the scenes in the browser: ... ...
...And 4 more matches
XRPose.transform - Web APIs
by calling xrframe.getpose(). syntax let posetransform = xrpose.transform; value an xrrigidtransform which provides the position and orientation of the xrpose relative to the xrframe to which this xrpose is aligned. this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
... value an xrrigidtransform which provides the position and orientation of the xrpose relative to the xrframe to which this xrpose is aligned. this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
...ters. it determines the
targeted object by passing the event frame's pose into a function called find
targetusingray(), then dispatches the event differently depending on the user's handedness; this is done by comparing the value of the xrinputsource property handedness to a value in the variable user.handedness. if the source is a controller in the user's primary hand, a function is called on the
targeted object called primaryaction(); otherwise, it calls the
targeted object's offhandaction() function. ...
...And 4 more matches
XRSession: selectend event - Web APIs
is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the
target ray's pose is obtained using getpose(). if the
target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the...
...tion is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the
target object and the current
target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. xrsession.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. ...
...And 4 more matches
XRSession: selectstart event - Web APIs
is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the
target ray's pose is obtained using getpose(). if the
target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the...
...tion is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the
target object and the current
target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. xrsession.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. ...
...And 4 more matches
XRSession: squeezeend event - Web APIs
on is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the
target ray's pose is obtained using getpose(). if the
target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of th...
...ion is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the
target object and the current
target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. xrsession...
...c). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. ...
...And 4 more matches
XRSession: squeezestart event - Web APIs
on is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the
target ray's pose is obtained using getpose(). if the
target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of th...
...ion is called with the
target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the
target object and the current
target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. xrsession...
...c). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final
target ray pose's transform. ...
...And 4 more matches
FinalizationRegistry.prototype.register() - JavaScript
the register() method registers an object with a finalizationregistry instance so that if the object is garbage-collected, the registry's callback may get called. syntax registry.register(
target, heldvalue, [unregistertoken]); parameters
target the
target object to register. heldvalue the value to pass to the finalizer for this object. this cannot be the
target object. unregistertoken optional a token that may be used with the unregister method later to unregister the
target object. if provided (and not undefined), this must be an object. if not provided, the
target cannot be unregistered. return value undefined. notes see the avoid where possible and notes on cleanup callbacks sections of the finalizationregistry page for important caveats. examples using register the follo...
...y be used with the unregister method later to unregister the
target object. if provided (and not undefined), this must be an object. if not provided, the
target cannot be unregistered. return value undefined. notes see the avoid where possible and notes on cleanup callbacks sections of the finalizationregistry page for important caveats. ...
...r method later to unregister the
target object. if provided (and not undefined), this must be an object. if not provided, the
target cannot be unregistered. return value undefined. notes see the avoid where possible and notes on cleanup callbacks sections of the finalizationregistry page for important caveats. ...
...And 4 more matches
Function.prototype.bind() - JavaScript
new function is called. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax let boundfunc = func.bind(thisarg[, arg1[, arg2[, ...argn]]]) parameters thisarg the value to be passed as the this parameter to the
target function func when the bound function is called. the value is ignored if the bound function is constructed using the new operator. when using bind to create a function (supplied as a callback) inside a settimeout, any primitive value passed as thisarg is converted to object. if no arguments are provided to bind , or if the thisarg is null or undefined, the this of the executing scope is treated ...
...unction with the specified this value, and initial arguments (if provided). description the bind() function creates a new bound function, which is an exotic function object (a term from ecmascript 2015) that wraps the original function object. calling the bound function generally results in the execution of its wrapped function. a bound function has the following internal properties: [[bound
targetfunction]] the wrapped function object [[boundthis]] the value that is always passed as this value when calling the wrapped function. [[boundarguments]] a list of values whose elements are used as the first arguments to any call to the wrapped function. [[call]] executes code associated with this object. invoked via a function call expression. the arguments to the internal method are a this...
... values whose elements are used as the first arguments to any call to the wrapped function. [[call]] executes code associated with this object. invoked via a function call expression. the arguments to the internal method are a this value and a list containing the arguments passed to the function by a call expression. when a bound function is called, it calls internal method [[call]] on [[bound
targetfunction]], with following arguments call(boundthis, ...args). where boundthis is [[boundthis]], args is [[boundarguments]], followed by the arguments passed by the function call. a bound function may also be constructed using the new operator. doing so acts as though the
target function had instead been constructed. the provided this value is ignored, while prepended arguments are provided to th...
...And 4 more matches
handler.getPrototypeOf() - JavaScript
the handler.getprototypeof() method is a trap for the [[getprototypeof]] internal method. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(obj, { getprototypeof(
target) { ... } }); parameters the following parameter is passed to the getprototypeof() method. this is bound to the handler.
target the
target object. return value the getprototypeof() method must return an object or null. description interceptions this trap can intercept these operations: object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof invariants i...
... value the getprototypeof() method must return an object or null. description interceptions this trap can intercept these operations: object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof invariants if the following invariants are violated, the proxy will throw a typeerror: getprototypeof() method must return an object or null. ...
...rcept these operations: object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof invariants if the following invariants are violated, the proxy will throw a typeerror: getprototypeof() method must return an object or null. if
target is not extensible, object.getprototypeof(proxy) method must return the same value as object.getprototypeof(
target). ...
...And 4 more matches
Proxy() constructor - JavaScript
the proxy() constructor is used to create proxy objects. syntax new proxy(
target, handler) parameters
target a
target object to wrap with proxy. it can be any sort of object, including a native array, a function, or even another proxy. handler an object whose properties are functions that define the behavior of the proxy when an operation is performed on it. description use the proxy() constructor to create a new proxy object. this constructor takes two mandatory arguments:
target is the object for which you want to create the proxy handler is the object that defines the custom behavior of the proxy. an empty handler will create a proxy that behaves, in almost all respects, exactly like the
target. by defining any of a set group of functions on the handler object, you can cust...
... want to create the proxy handler is the object that defines the custom behavior of the proxy. an empty handler will create a proxy that behaves, in almost all respects, exactly like the
target. by defining any of a set group of functions on the handler object, you can customise specific aspects of the proxy's behavior. for example, by defining get() you can provide a customised version of the
target's property accessor. handler functions this section lists all the handler functions you can define. handler functions are sometimes called traps, because they trap calls to the underlying
target object. handler.apply() a trap for a function call. handler.construct() a trap for the new operator. handler.defineproperty() a trap for object.defineproperty. handler.deleteproperty() a trap ...
... handler.isextensible() a trap for object.isextensible. handler.ownkeys() a trap for object.getownpropertynames and object.getownpropertysymbols. handler.preventextensions() a trap for object.preventextensions. handler.set() a trap for setting property values. handler.setprototypeof() a trap for object.setprototypeof. ...
...And 4 more matches
Creating a status bar extension - Archive of obsolete content
extension identification information certain information is needed so firefox can uniquely ident...
...extension identification information certain information is needed so firefox can uniquely identify your extension. ...
... the extensions window. em:description a short, one-line description of the extension. this text is also displayed in the extensions window. em:creator the author's name. homepageurl the url of a web site the user can visit to get information about the extension, or to look for updates. this is not a required field, but including it is a nice thing to do. ...
...And 3 more matches
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
n localizing an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension. download the sample updating the install manifest the first step is to revise the extension's install manifest to indicate that it can be installed in thunderbird and sunbird. ...
...with the article, or to use it as a basis for your own extension. download the sample updating the install manifest the first step is to revise the extension's install manifest to indicate that it can be installed in thunderbird and sunbird. ...
...hunderbird and sunbird. ...
...And 3 more matches
handler.enumerate() - Archive of obsolete content
return value an iterator object. description the handler.enumerate method is a trap for for...in statements. ...
... return value an iterator object. description the handler.enumerate method is a trap for for...in statements. ...
... return value an iterator object. description the handler.enumerate method is a trap for for...in statements. ...
...And 3 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
3 digital certificate cryptography, glossary, security a digital certificate is a data file that binds a publicly known cryptographic key to an organization. 114 distributed denial of service attack, ddos, denial of service, glossary, intro, security a distributed denial-of-service (ddos) is an attack in which many compromised systems are made to attack a single
target, in order to swamp server resources and block legitimate users. 115 dos attack glossary, security dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests. 116 doctype browser, codingscripting, doctype, glossary, html, intro in html, the doctype is the required "<!doctype html>" prea...
... hypertext glossary, web, webmechanics hypertext is text that contains links to other texts, as opposed to a single linear flow like in a novel. 210 i18n beginner, credibility, glossary, internationalization, openpractices, i18n i18n (from "internationalization", a 20-letter word) is the best practice that enables products or services to be readily adapted to any
target culture. 211 iana glossary, infrastructure iana (internet assigned numbers authority) is a subsidiary of icann charged with recording and/or assigning domain names, ip addresses, and other names and numbers used by internet protocols. 212 icann glossary, infrastructure icann (internet corporation for assigned names and numbers) is an international nonprof...
...namespace codingscripting, glossary, operating system namespace is a context for identifiers, a logical grouping of names used in a program. within the same context and same scope, an identifier must uniquely identify an entity. 283 native codingscripting, glossary a native application has been compiled to run on the hardware/software environment that comprises the
targeted architecture. 284 navigation directive csp, http, security csp navigation directives are used in a content-security-policy header and govern to which location a user can navigate to or submit a form to, for example. 285 netscape navigator browser, glossary, navigation, netscape, netscape navigator netscape navigator or netscape was a leading browser in ...
...And 3 more matches
Getting started with CSS - Learn web development
lly check that you've typed everything correctly. you can continue to work in styles.css locally, or you can use our interactive editor below to continue with this tutorial. the interactive editor acts as if the css in the first panel is linked to the html document, just as we have with our document above. styling html elements by making our heading red we have already demonstrated that we can
target and style an html element. we do this by
targeting an element selector — this is a selector that directly matches an html element name. to
target all paragraphs in the document you would use the selector p. to turn all paragraphs green you would use: p { color: green; } you can
target multiple selectors at once, by separating the selectors with a comma. if i want all paragraphs and all list...
...square. adding a class so far we have styled elements based on their html element names. this works as long as you want all of the elements of that type in your document to look the same. most of the time that isn't the case and so you will need to find a way to select a subset of the elements without changing the others. the most common way to do this is to add a class to your html element and
target that class. in your html document, add a class attribute to the second list item. your list will now look like this: <ul> <li>item one</li> <li class="special">item two</li> <li>item <em>three</em></li> </ul> in your css you can
target the class of special by creating a selector that starts with a full stop character. add the following to your css file: .special { color: orange; fon...
... that you want to have the same look as this list item. for example, you might want the <span> in the paragraph to also be orange and bold. try adding a class of special to it, then reload your page and see what happens. sometimes you will see rules with a selector that lists the html element selector along with the class: li.special { color: orange; font-weight: bold; } this syntax means "
target any li element that has a class of special". if you were to do this then you would no longer be able to apply the class to a <span> or another element by simply adding the class to it; you would have to add that element to the list of selectors: li.special, span.special { color: orange; font-weight: bold; } as you can imagine, some classes might be applied to many elements and you don't wan...
...And 3 more matches
Introduction to events - Learn web development
ndler function, you'll see a parameter specified with a name such as event, evt, or simply e. this is called the event object, and it is automatically passed to event handlers to provide extra features and information. ...
...so, in this example, we are setting a random background color on the button, not the page. ...
...so, in this example, we are setting a random background color on the button, not the page. note: you can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. ...
...And 3 more matches
Introduction to cross browser testing - Learn web development
ws for cross browser testing all of this cross browser testing business may sound time consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. if you are working on a large project, you should be testing it regularly, to make sure that new features work for your
target audience, and that new additions to the code don't break old features that were previously working. if you leave all the testing to the end of a project, any bugs you uncover will be a lot more expensive and time consuming to fix than if you uncover them and fix them as you go along. the workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (t...
...so want to know how much time you have to develop the site — what is their deadline, and how much are they going to pay you for your work? we won't go into much detail about this, but cross-browser issues can have a serious effect on such planning. once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the
target audience — what browsers, devices, etc. will the
target audience for this site be using? the client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. if not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries ...
...orth america. the site should work entirely in the last few versions of the most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari. it should also provide an acceptable experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your
target testing platforms, you should go back and review the required featureset and what technologies you are going to use. for example, if the e-commerce site owner wants a webgl-powered 3d tour of each product built into the product pages, they will need to accept that this just won't work in ie versions before 11. you'd have to agree to provide a version of the site without this feature to users of o...
...And 3 more matches
Downloads.jsm
ies of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration. 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, a
target, [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. private work on downloads that were started from a private browsing window. all work on both downloads.
...downloads. properties attribute type description error read only constructor constructor for a downloaderror object. when you catch an exception during a download, you can use this to verify if ex instanceof downloads.error, before reading the exception properties with the error details. example (using task.jsm): try { yield downloads.fetch(sourceuri,
targetfile); } catch (ex if ex instanceof downloads.error && ex.because
targetfailed) { console.log("unable to write to the
target file, ignoring the error."); } methods createdownload() creates a new download object. promise<download> createdownload( object aproperties ); parameters aproperties provides the initial properties for the newly created download. this matches the seria...
...with the following properties: url: string containing the uri for the download source. isprivate: optional indicates whether the download originated from a private window. if omitted, the download is public. referrer: optional string containing the referrer uri of the download source. can be omitted or null if no referrer should be sent or the download source is not http.
target: string containing the path of the
target file. alternatively, may be an nsifile, a download
target object, or an object with the following properties: path: string containing the path of the
target file. saver: optional string representing the class of the download operation. if omitted, defaults to "copy". alternatively, may be the serializable representation of a downloadsaver ...
...And 3 more matches
WebRequest.jsm
headers are available. this is a good place to listen if you want to cancel the request. opt_extrainfospec values name description "blocking" make the browser wait until the listener returns. use this if you want to cancel the request. see some examples of canceling requests. listener argument name type description url string
target of the request. windowid number the id of the window making the request, as an outerwindowid. parentwindowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. onbeforesendheaders this event is triggered befo...
... wait until the listener returns. use this if you want to redirect the request or modify request headers. see examples of redirecting and modifying request headers. "requestheaders" include request headers in the argument passed to the listener. see modifying headers for an example using this. listener argument name type description url string
target of the request. windowid number the id of the window making the request, as an outerwindowid. parentwindowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. method string the http method to be used ...
...ied version here. note that you can't pass "blocking" for this event, so you can't modify or cancel the request from this event: it's informational only. opt_extrainfospec values name description "requestheaders" include request headers in the argument passed to the listener. listener argument name type description url string
target of the request. windowid number the id of the window making the request, as an outerwindowid. parentwindowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. method string the http method to be used ...
...And 3 more matches
mozIJSSubScriptLoader
nted by: @mozilla.org/moz/jssubscript-loader;1. 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. method overview jsval loadsubscript(in string url, in object
targetobj optional, in string charset optional); jsval loadsubscriptwithoptions(in string url, in object options); methods loadsubscript() synchronously loads and executes the script from the specified url. as of gecko 8.0, scripts are loaded from the startup cache where possible. the loaded script is executed with the principal associated with the
target object. any top-level funct...
...ring url, in object options); methods loadsubscript() synchronously loads and executes the script from the specified url. as of gecko 8.0, scripts are loaded from the startup cache where possible. the loaded script is executed with the principal associated with the
target object. any top-level functions or variables created by the loaded script via var are created as properties of the
targetobj
target object (but things declared via let and const are not). ...
...pt from the specified url. as of gecko 8.0, scripts are loaded from the startup cache where possible. the loaded script is executed with the principal associated with the
target object. any top-level functions or variables created by the loaded script via var are created as properties of the
targetobj
target object (but things declared via let and const are not). additionally, properties of the
targetobj
target object can be referred to as variables in the loaded script. if the script returns a value, it will be returned by this method. ...
...And 3 more matches
nsIDownloadManager
in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) implemented by: @mozilla.org/download-manager;1. ...
...nce is invalid, the download directory falls back to the default. read only. constants constant value description download_notstarted -1 the download has not been started yet. download_downloading 0 the download is in the process of being downloaded. download_finished 1 download completed including any processing of the
target file. download_failed 2 the download failed due to error. download_canceled 3 the user canceled the download. download_paused 4 the download is currently paused. download_queued 5 the download is in the queue but is not presently downloading. download_blocked_parental 6 the download has been blocked, either by parental co...
...in the queue but is not presently downloading. download_blocked_parental 6 the download has been blocked, either by parental controls or the virus scanner determining that a file is infected and cannot be cleaned. download_scanning 7 the download is being scanned by a virus checking utility. download_dirty 8 a virus was detected in the download. the
target will most likely no longer exist. download_blocked_policy 9 windows specific: request was blocked by zone policy settings. (see bug 416683) download_type_download 0 the download type used by adddownload. is the type for a "generic file download" according to the .idl file. methods adddownload() creates an nsidownload and adds it to the list of activities b...
...And 3 more matches
nsIParentalControlsService
er. implemented by: @mozilla.org/parental-controls-service;1. ...
...ice;1. 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 a
target); boolean requesturioverride(in nsiuri a
target, [optional] in nsiinterfacerequestor awindowcontext); boolean requesturioverrides(in nsiarray a
targets, [optional] in nsiinterfacerequestor awindowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's parental controls restrictions include the blocking of all file downloads. read only. ...
... constants constant value description epclog_urivisit 1 this log entry type represents an access to web content. epclog_filedownload 2 this log entry type represents a file download. methods log() logs an application specific parental controls event. void log( in short aentrytype, in boolean aflag, in nsiuri asource, in nsifile a
target optional ); parameters aentrytype the type of event to log. see the constants for allowed values. aflag pass true if the event was blocked or false if it was allowed. asource the uri source of the subject content. a
target optional the location to which the content was saved if it was not blocked. requesturioverride() requests that a blocked uri be allowed through parental control f...
...And 3 more matches
Theme Packaging
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. see the install.rdf reference for more information: em:id em:version em:type em:
targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an updateurl. sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http:/...
...addons.mozilla.org website, it may not include an updateurl. ...
...ns="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 versions. ...
...And 3 more matches
CDATASection - Web APIs
hat cdata sections should not be used within html; they only work in xml. ...
...a sections should not be used within html; they only work in xml. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
DataTransfer.setDragImage() - Web APIs
this image is created automatically, so you do not need to create it yourself. however, if a custom image is desired, the datatransfer.setdragimage() method can be used to set the custom image to be used. the image will typically be an <image> element but it can also be a <canvas> or any other visible element. the method's x and y coordinates define how the image should appear relative to the mouse pointer. these coordinates define the offset into the image where the mouse cursor should be. ...
...f that file is present, it will be used as the drag image and if that file is not present, the browser will use its default drag image. ...
...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("drag...
...And 3 more matches
Document: drag event - Web APIs
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: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable
target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref. on the dragged elem dragged = event.
target; // make it half transparent event.
target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.
target.style.opacity = ""; }, false); /* ...
...ener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref. ...
...5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.
target.style.opacity = ""; }, false); /* events fired on the drop
targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop
target when the draggable element enters it if (event.
target.classname == "dropzone") { event.
target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop
target when the draggable element leaves it if (event.
target.classname == "dropzone") { event.
target.style.background = ""; } }, false); document.
...And 3 more matches
HTMLBRElement - Web APIs
epresents a html line break element (<br>). it inherits from htmlelement. ...
...s a html line break element (<br>). it inherits from htmlelement. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLBodyElement - Web APIs
from the regular htmlelement interface) for manipulating <body> elements. ...
... regular htmlelement interface) for manipulating <body> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLCanvasElement - Web APIs
ce also inherits the properties and methods of the htmlelement interface. ...
...inherits the properties and methods of the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLDListElement - Web APIs
e to it by inheritance) for manipulating definition list (<dl>) elements. ...
...by inheritance) for manipulating definition list (<dl>) elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLDataElement - Web APIs
lso has available to it by inheritance) for manipulating <data> elements. ...
...available to it by inheritance) for manipulating <data> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLDataListElement - Web APIs
o it by inheritance) to manipulate <datalist> elements and their content. ...
...inheritance) to manipulate <datalist> elements and their content. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLDivElement - Web APIs
also has available to it by inheritance) for manipulating <div> elements. ...
... available to it by inheritance) for manipulating <div> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLEmbedElement - Web APIs
it does not address earlier, non-standardized version of the interface. ...
... not address earlier, non-standardized version of the interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLFieldSetElement - Web APIs
nce) for manipulating the layout and presentation of <fieldset> elements. ...
... manipulating the layout and presentation of <fieldset> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLHRElement - Web APIs
also has available to it by inheritance) for manipulating <hr> elements. ...
...s available to it by inheritance) for manipulating <hr> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLHeadElement - Web APIs
all of the properties and methods described in the htmlelement interface. ...
...he properties and methods described in the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLHeadingElement - Web APIs
<h6>. it inherits methods and properties from the htmlelement interface. ...
...t inherits methods and properties from the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLHtmlElement - Web APIs
n document by reading the value of the document.documentelement property. ...
...nt by reading the value of the document.documentelement property. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLIFrameElement - Web APIs
e) for manipulating the layout and presentation of inline frame elements. ...
...anipulating the layout and presentation of inline frame elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLImageElement - Web APIs
, providing the properties and methods used to manipulate image elements. ...
...ing the properties and methods used to manipulate image elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLLIElement - Web APIs
also has available to it by inheritance) for manipulating list elements. ...
...s available to it by inheritance) for manipulating list elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLLabelElement - Web APIs
. it inherits methods and properties from the base htmlelement interface. ...
...erits methods and properties from the base htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLLegendElement - Web APIs
ments. it inherits properties and methods from the htmlelement interface. ...
...t inherits properties and methods from the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMapElement - Web APIs
nheritance) for manipulating the layout and presentation of map elements. ...
...ce) for manipulating the layout and presentation of map elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMediaElement.onencrypted - Web APIs
this interface inherits from the extendableevent interface. ...
...erface inherits from the extendableevent interface. ...
...tion: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
this interface inherits from the extendableevent interface. ...
...erface inherits from the extendableevent interface. ...
...tion: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMenuElement - Web APIs
lso has available to it by inheritance) for manipulating <menu> elements. ...
...available to it by inheritance) for manipulating <menu> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMenuItemElement - Web APIs
has available to it by inheritance) for manipulating <menuitem> elements. ...
...lable to it by inheritance) for manipulating <menuitem> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMetaElement - Web APIs
all of the properties and methods described in the htmlelement interface. ...
...he properties and methods described in the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLMeterElement - Web APIs
itance) for manipulating the layout and presentation of <meter> elements. ...
...for manipulating the layout and presentation of <meter> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLModElement - Web APIs
ritance) for manipulating modification elements, that is <del> and <ins>. ...
... for manipulating modification elements, that is <del> and <ins>. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLOListElement - Web APIs
s available to it by inheritance) for manipulating ordered list elements. ...
...ble to it by inheritance) for manipulating ordered list elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLObjectElement - Web APIs
ut and presentation of <object> element, representing external resources. ...
...resentation of <object> element, representing external resources. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLOptGroupElement - Web APIs
nce) for manipulating the layout and presentation of <optgroup> elements. ...
... manipulating the layout and presentation of <optgroup> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLOptionElement - Web APIs
ements and inherits all classes and methods of the htmlelement interface. ...
...nd inherits all classes and methods of the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLOutputElement - Web APIs
ement) for manipulating the layout and presentation of <output> elements. ...
...or manipulating the layout and presentation of <output> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLParagraphElement - Web APIs
htmlelement object interface it inherits) for manipulating <p> elements. ...
...ment object interface it inherits) for manipulating <p> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLParamElement - Web APIs
ir of a key and a value that acts as a parameter for an <object> element. ...
...key and a value that acts as a parameter for an <object> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLPictureElement - Web APIs
cture> html element. it doesn't implement specific properties or methods. ...
...tml element. it doesn't implement specific properties or methods. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLPreElement - Web APIs
it by inheritance) for manipulating a block of preformatted text (<pre>). ...
...heritance) for manipulating a block of preformatted text (<pre>). ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLProgressElement - Web APIs
nce) for manipulating the layout and presentation of <progress> elements. ...
... manipulating the layout and presentation of <progress> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLQuoteElement - Web APIs
quoting elements, like <blockquote> and <q>, but not the <cite> element. ...
... elements, like <blockquote> and <q>, but not the <cite> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLSelectElement - Web APIs
perties and methods of other html elements via the htmlelement interface. ...
...and methods of other html elements via the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLShadowElement - Web APIs
nterface represents a <shadow> html element, which is used in shadow dom. ...
... represents a <shadow> html element, which is used in shadow dom. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLSourceElement - Web APIs
o has available to it by inheritance) for manipulating <source> elements. ...
...ailable to it by inheritance) for manipulating <source> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLSpanElement - Web APIs
interface, but without implementing any additional properties or methods. ...
...e, but without implementing any additional properties or methods. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLStyleElement - Web APIs
of the objects used to manipulate specified css properties using the dom. ...
...bjects used to manipulate specified css properties using the dom. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableCaptionElement - Web APIs
available to it by inheritance) for manipulating table caption elements. ...
...le to it by inheritance) for manipulating table caption elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableCellElement - Web APIs
ntation of table cells, either header or data cells, in an html document. ...
...of table cells, either header or data cells, in an html document. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableColElement - Web APIs
it inheritance) for manipulating single or grouped table column elements. ...
...itance) for manipulating single or grouped table column elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableElement - Web APIs
r manipulating the layout and presentation of tables in an html document. ...
...lating the layout and presentation of tables in an html document. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableRowElement - Web APIs
e) for manipulating the layout and presentation of rows in an html table. ...
...anipulating the layout and presentation of rows in an html table. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTableSectionElement - Web APIs
ation of sections, that is headers, footers and bodies, in an html table. ...
... sections, that is headers, footers and bodies, in an html table. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTemplateElement - Web APIs
t interface enables access to the contents of an html <template> element. ...
...ace enables access to the contents of an html <template> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTextAreaElement - Web APIs
hods for manipulating the layout and presentation of <textarea> elements. ...
... manipulating the layout and presentation of <textarea> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTimeElement - Web APIs
lso has available to it by inheritance) for manipulating <time> elements. ...
...available to it by inheritance) for manipulating <time> elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTitleElement - Web APIs
inherits all of the properties and methods of the htmlelement interface. ...
...s all of the properties and methods of the htmlelement interface. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLTrackElement - Web APIs
a text track containing information such as closed captions or subtitles. ...
...rack containing information such as closed captions or subtitles. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLUListElement - Web APIs
available to it by inheritance) for manipulating unordered list elements. ...
...e to it by inheritance) for manipulating unordered list elements. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
HTMLUnknownElement - Web APIs
interface, but without implementing any additional properties or methods. ...
...e, but without implementing any additional properties or methods. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
IntersectionObserver.IntersectionObserver() - Web APIs
to ensure it's syntactically correct, the thresholds are checked to ensure that they're all in the range 0.0 and 1.0 inclusive, and the threshold list is sorted in ascending numeric order. if the threshold list is empty, it's set to the array [0.0]. syntax var observer = new intersectionobserver(callback[, options]); parameters callback a function which is called when the percentage of the
target element is visible crosses a threshold. the callback receives as input two parameters: entries an array of intersectionobserverentry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold. observer the intersectionobserver for which the callback is being invoked. options optional an optional ...
... options optional an optional object which customizes the observer. if options isn't specified, the observer uses the document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback). you can provide any combination of the following options: root an element or document object which is an ancestor of the intended
target, whose bounding rectangle will be considered the viewport. any part of the
target not visible in the visible area of the root is not considered visible. rootmargin a string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the syntax is approximately the same as that for the cs...
...the syntax is approximately the same as that for the css margin property; see the root element and root margin in intersection observer api for more information on how the margin works and the syntax. the default is "0px 0px 0px 0px". threshold either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed
target. ...
...And 3 more matches
MouseEvent - Web APIs
based on mouseevent, including wheelevent and dragevent. ...
...t="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" stro...
...="#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/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 mouse...
...And 3 more matches
SVGClipPathElement - Web APIs
lippath> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGComponentTransferFunctionElement - Web APIs
rface used by the component transfer function interfaces. ...
...ed by the component transfer function interfaces. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGCursorElement - Web APIs
<cursor> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGDescElement - Web APIs
gdescelement interface corresponds to the <desc> element. ...
...ment interface corresponds to the <desc> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEBlendElement - Web APIs
ndelement interface corresponds to the <feblend> element. ...
...t interface corresponds to the <feblend> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEColorMatrixElement - Web APIs
ent interface corresponds to the <fecolormatrix> element. ...
...rface corresponds to the <fecolormatrix> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEComponentTransferElement - Web APIs
terface corresponds to the <fecomponenttransfer> element. ...
...corresponds to the <fecomponenttransfer> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFECompositeElement - Web APIs
ement interface corresponds to the <fecomposite> element. ...
...terface corresponds to the <fecomposite> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEDiffuseLightingElement - Web APIs
interface corresponds to the <fediffuselighting> element. ...
...e corresponds to the <fediffuselighting> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEDisplacementMapElement - Web APIs
interface corresponds to the <fedisplacementmap> element. ...
...e corresponds to the <fedisplacementmap> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEDistantLightElement - Web APIs
nt interface corresponds to the <fedistantlight> element. ...
...face corresponds to the <fedistantlight> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEDropShadowElement - Web APIs
ment interface corresponds to the <fedropshadow> element. ...
...erface corresponds to the <fedropshadow> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEFloodElement - Web APIs
odelement interface corresponds to the <feflood> element. ...
...t interface corresponds to the <feflood> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEGaussianBlurElement - Web APIs
nt interface corresponds to the <fegaussianblur> element. ...
...face corresponds to the <fegaussianblur> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEImageElement - Web APIs
geelement interface corresponds to the <feimage> element. ...
...t interface corresponds to the <feimage> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEMergeElement - Web APIs
geelement interface corresponds to the <femerge> element. ...
...t interface corresponds to the <femerge> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEMergeNodeElement - Web APIs
ement interface corresponds to the <femergenode> element. ...
...terface corresponds to the <femergenode> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEMorphologyElement - Web APIs
ment interface corresponds to the <femorphology> element. ...
...erface corresponds to the <femorphology> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEOffsetElement - Web APIs
telement interface corresponds to the <feoffset> element. ...
... interface corresponds to the <feoffset> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFEPointLightElement - Web APIs
ment interface corresponds to the <fepointlight> element. ...
...erface corresponds to the <fepointlight> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFESpecularLightingElement - Web APIs
nterface corresponds to the <fespecularlighting> element. ...
... corresponds to the <fespecularlighting> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFESpotLightElement - Web APIs
ement interface corresponds to the <fespotlight> element. ...
...terface corresponds to the <fespotlight> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFETileElement - Web APIs
ileelement interface corresponds to the <fetile> element. ...
...nt interface corresponds to the <fetile> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFETurbulenceElement - Web APIs
ment interface corresponds to the <feturbulence> element. ...
...erface corresponds to the <feturbulence> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGFilterElement - Web APIs
<filter> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGGradientElement - Web APIs
by svglineargradientelement and svgradialgradientelement. ...
...neargradientelement and svgradialgradientelement. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGGraphicsElement - Web APIs
ements whose primary purpose is to directly render graphics into a group. ...
...hose primary purpose is to directly render graphics into a group. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGMPathElement - Web APIs
pathelement interface corresponds to the <mpath> element. ...
...ent interface corresponds to the <mpath> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGMaskElement - Web APIs
f <mask> elements, as well as methods to manipulate them. ...
... elements, as well as methods to manipulate them. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGMetadataElement - Web APIs
aelement interface corresponds to the <metadata> element. ...
... interface corresponds to the <metadata> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGPatternElement - Web APIs
rnelement interface corresponds to the <pattern> element. ...
...t interface corresponds to the <pattern> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGScriptElement - Web APIs
lement interface corresponds to the svg <script> element. ...
...nterface corresponds to the svg <script> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGStopElement - Web APIs
gstopelement interface corresponds to the <stop> element. ...
...ment interface corresponds to the <stop> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGStyleElement - Web APIs
element interface corresponds to the svg <style> element. ...
...interface corresponds to the svg <style> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGSymbolElement - Web APIs
bolelement interface corresponds to the <symbol> element. ...
...nt interface corresponds to the <symbol> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
SVGTitleElement - Web APIs
itleelement interface corresponds to the <title> element. ...
...ent interface corresponds to the <title> element. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 3 more matches
WebGL2RenderingContext.bindBufferRange() - Web APIs
offset a glintptr specifying the starting offset. size a glsizeiptr specifying the amount of data that can be read from the buffer. ...
... offset a glintptr specifying the starting offset. size a glsizeiptr specifying the amount of data that can be read from the buffer. ...
... offset a glintptr specifying the starting offset. size a glsizeiptr specifying the amount of data that can be read from the buffer. ...
...And 3 more matches
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. ...
... a gl.invalid...
...And 3 more matches
Window - Web APIs
onably pertain to a tab pertains to the window instead. <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. domp...
...ified in dom parsing and serialization. image used for creating an htmlimageelement. option used for creating an htmloptionelement. staticrange read only returns a staticrange() constructor which creates a staticrange object. worker used for creating a web worker. xmlserializer converts a dom tree into xml or html source. properties this interface inherits properties from the event
target interface and implements properties from the windoworworkerglobalscope and windoweventhandlers mixins. note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below. window.closed read only this property indicates whether the current window is closed or not. window.console read only returns a reference to the cons...
...e orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation. window.pkcs11 formerly provided access to install and remove pkcs11 modules. window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog. methods this interface inherits methods from the event
target interface and implements methods from windoworworkerglobalscope and event
target. window.alert() displays an alert dialog. window.blur() sets focus away from the window. window.cancelanimationframe() enables you to cancel a callback previously scheduled with window.requestanimationframe. window.cancelidlecallback() enables you to cancel a callback previously scheduled with window.req...
...And 3 more matches
XMLHttpRequest - Web APIs
oing. xmlhttprequest is used heavily in ajax programming. ...
...lhttprequest is used heavily in ajax programming. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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/xmlhttprequestevent
target"
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,monospa...
...And 3 more matches
content - CSS: Cascading Style Sheets
l. on ::before and ::after, if normal is specified, computes to none. ...
...on typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <
target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<
target> = <
target-counter()> | <
target-counters()> | <
target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient...
...)> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...And 3 more matches
<base>: The Document Base URL element - HTML: Hypertext Markup Language
dom interface htmlbaseelement attributes this element's attributes include the global attributes. if either of the following attributes are specified, this element must come before other elements with attribute values of urls, such as <link>’s href attribute. href the base url to be used throughout the document for relative urls. absolute and relative urls are allowed.
target a keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit
target attributes. the following keywords have special meanings: _self (default): show the result in the current browsing context. _blank: show the result in a new, unnamed browsing context. _parent: show the result in the parent browsi...
...the current one, if the current page is inside a frame. if there is no parent, acts the same as _self. _top: show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). if there is no parent, acts the same as _self. usage notes multiple <base> elements if multiple <base> elements are used, only the first href and first
target are obeyed — all others are ignored. in-page anchors links pointing to a fragment in the document — e.g. <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. open g...
...ed. for example: given <base href="https://example.com"> ...and this link: <a href="#anchor">anker</a> ...the link points to https://example.com/#anchor. open graph open graph tags do not acknowledge <base>, and should always have full absolute urls. ...
...And 3 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission form
target image, submit browsing context for form submission height image same as height attribute for <img>; vertical dimension list almost all value of the id attribute of the <datalist> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value ...
...e the submit input type for more information. formenctype valid for the image and submit input types only. see the submit input type for more information. formmethod valid for the image and submit input types only. see the submit input type for more information. formnovalidate valid for the image and submit input types only. see the submit input type for more information. form
target valid for the image and submit input types only. see the submit input type for more information. height valid for the image input button only, the height is the height of the image file to display to represent the graphical submit button. see the image input type. id global attribute valid for all elements, including all the input types, it defines a unique identifier (id) which mu...
...as well as firefox 50 and later. however, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative. methods the following methods are provided by the htmlinputelement interface which represents <input> elements in the dom. also available are those methods specified by the parent interfaces, htmlelement, element, node, and event
target. checkvalidity() immediately runs the validity check on the element, triggering the document to fire the invalid event at the element if the value isn't valid. reportvalidity() returns true if the element's value passes validity checks; otherwise, returns false. select() selects the entire content of the <input> element, if the element's content is selectable. for elements with no selecta...
...And 3 more matches
handler.construct() - JavaScript
the handler.construct() method is a trap for the new operator. in order for the new operation to be valid on the resulting proxy object, the
target used to initialize the proxy must itself have a [[construct]] internal method (i.e. new
target must be valid). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...sulting proxy object, the
target used to initialize the proxy must itself have a [[construct]] internal method (i.e. new
target must be valid). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { construct: function(
target, argumentslist, new
target) { } }); parameters the following parameters are passed to the construct() method. this is bound to the handler.
target the
target object. argumentslist the list of arguments for the constructor. new
target the constructor that was originally called, p above. return value the construct method must return an object. descript...
...d is a trap for the new operator. interceptions this trap can intercept these operations: new proxy(...args) reflect.construct() invariants if the following invariants are violated, the proxy will throw a typeerror: the result must be an object. examples trapping the new operator the following code traps the new operator. ...
...And 3 more matches
handler.defineProperty() - JavaScript
the handler.defineproperty() method is a trap for object.defineproperty(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { defineproperty: function(
target, property, descriptor) { } }); parameters the following parameters are passed to the defineproperty() method. this is bound to the handler.
target the
target object. property the name or symbol of the property whose description is to be retrieved. descriptor the descriptor for the property being defined or modified. return value the defineproperty() method must return a boolean indicating whether or not the pro...
...n indicating whether or not the property has been successfully defined. description the handler.defineproperty() method is a trap for object.defineproperty(). ...
...terceptions this trap can intercept these operations: object.defineproperty() reflect.defineproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be added, if the
target object is not extensible. a property cannot be added as or modified to be non-configurable, if it does not exists as a non-configurable own property of the
target object. a property may not be non-configurable, if a corresponding configurable property of the
target object exists. if a property has a corresponding
target object property then object.defineproperty(
target, prop, descriptor) will not throw an exception. in strict mode, a false return value from the defineproperty() handler will throw a typeerror exception. examples trapping of defineprop...
...And 3 more matches
handler.ownKeys() - JavaScript
the handler.ownkeys() method is a trap for reflect.ownkeys(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { ownkeys: function(
target) { } }); parameters the following parameter is passed to the ownkeys() method. this is bound to the handler.
target the
target object. return value the ownkeys() method must return an enumerable object. description the handler.ownkeys() method is a trap for reflect.ownkeys(). interceptions this trap can intercept these operations: object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() i...
...these operations: object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of ownkeys() must be an array. the type of each array element is either a string or a symbol. ...
...ject.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of ownkeys() must be an array. the type of each array element is either a string or a symbol. the result list must contain the keys of all non-configurable own properties of the
target object. ...
...And 3 more matches
href - SVG: Scalable Vector Graphics
">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference. ...
...ed as a url reference. value <url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the
target of this animation element and which therefore will be modified over time. the url must point to exactly one
target element which is capable of being the
target of the given animation element. if the url points to multiple
target elements, if the given
target element is not capable of being a
target of the given animation element, or if the given
target element is not part of the current document, then the animation element will not affect any
target element. however, the animation element will still operate n...
...iven animation element, or if the given
target element is not part of the current document, then the animation element will not affect any
target element. however, the animation element will still operate normally with regard to its timing properties. specifically, timeevents are dispatched and the animation element can be used as syncbase in an identical fashion to when the url refers to a valid
target element. if the href attribute or the deprecated xlink:href attribute is not provided, then the
target element will be the immediate parent element of the current animation element. if both xlink:href and href are specified, the value of the latter attribute is used. ...
...And 3 more matches
Interacting with page scripts - Archive of obsolete content
// 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. instead, you need to use the global cloneinto() function to clone the object into the page script's scope. cloneinto() creates a structured clone of the object in the
target context, and returns a reference to the clone. you can then assign that to a property of the
target window, and the page script can access it. here's an example. the "main.js" opens the local file "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript })...
... so content scripts can't directly share objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. ...
... objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. ...
...And 2 more matches
Downloading Files - Archive of obsolete content
method, passing it a url to download and an nsifile instance representing the local file name/path. 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 browser window that the url // we are downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache ...
...rowser window that the url // we are downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. 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", ...
...if, and only if, the url is not // related to a window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewin...
...And 2 more matches
Forms related code snippets - Archive of obsolete content
/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. ...
....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 = o
target; 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"; oincr...
..."); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); o
target.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = o
target.offsetleft + "px"; otable.style.top = (o
target.offsettop + o
target.offsetheight) + "px"; o
target.parentnode.insertbefore(otable, o
target); }; ...
...And 2 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
ls firefox how to install it. ...
...use the dist_files variable in the makefile to t...
... other makefiles have completed. other topics adding data files to your extensions in some cases, you may wish to include additional files in your extension that don't belong in the chrome/ subdirectory. examples might be database files or xml schemas. this can be achieved by adding a custom step to your makefile that copies the files from the source tree into the extension's
target directory. copying data files into
target directory let's say that you have some data files containing statistical information that you want to include in your extension and make available to your components. you've placed these files, which have the extension .txt, into a stats/ subdirectory under your extension directory in the source tree. the following makefile rule can be used ...
...And 2 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t r...
...and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="d...
...and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="does_not_exist" onerror="alert('xss')"> fo...
...And 2 more matches
Offering a context menu for form controls - Archive of obsolete content
lcontextmenu-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. ...
.../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. ...
...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. ...
...And 2 more matches
Connecting to Remote Content - Archive of obsolete content
ata in other formats, for example json, html and plain text. in this section we'll look into the xml and json communication mechanisms. 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, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode. you can see that an instance of the xmlhttprequest class is created and it holds all functionality for making a request. we create this instan...
...e xmlhttprequest class is created and it holds all functionality for making a request. we create this instance using xpcom instead of the usual way (new xmlhttprequest()) because this way works both in chrome and non-chrome code. following initialization, onload and onerror handlers are registered to a callback function to handle the response returned from the remote server. in both cases aevent.
target is an nsixmlhttprequest. in the onload callback function, the responsetext parameter contains the server response as text. if the response is an xml document, the responsexml property will hold an xmldocument object that can be manipulated using dom methods. sometimes the server doesn't specify an xml content-type header, which is necessary for the xml parsing to happen automatically. you can us...
...other applications. assume we need to parse the following data: {"shops": [{"name": "apple", "code": "a001"}, {"name": "orange"}], "total": 100} when the onload callback function is called, the response text is converted into a js object using the parse method. you can then use this object like any other javascript objects in your code. request.onload = function(aevent) { let text = aevent.
target.responsetext; let jsobject = json.parse(text); window.alert(jsobject.shops[1].name); // => "orange" window.alert(jsobject.total); // => 2; }; the javascript object can also be serialized back with the stringify method. let string = json.stringify(jsobject); xml content xml is possibly the most popular data interchange format. let's assume that the xml returned from remote ser...
...And 2 more matches
cached - Archive of obsolete content
read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...And 2 more matches
checking - Archive of obsolete content
read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...And 2 more matches
error - Archive of obsolete content
read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...And 2 more matches
noupdate - Archive of obsolete content
read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...And 2 more matches
obsolete - Archive of obsolete content
read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...read only. type string the type of event. read only. ...
...And 2 more matches
progress - Archive of obsolete content
read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. ...
...read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. ...
...read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. ...
...And 2 more matches
ValueChange - Archive of obsolete content
type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
...And 2 more matches
popuphidden - Archive of obsolete content
type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
...And 2 more matches
popuphiding - Archive of obsolete content
type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
...And 2 more matches
popupshown - Archive of obsolete content
type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
...And 2 more matches
NPN_PostURL - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary posts data to a url. syntax #include <npapi.h> nperror npn_posturl(npp instance, const char *url, const char *
target, uint32 len, const char *buf, npbool file); parameters the function has the following parameters: instance pointer to the current plug-in instance. url url of the request, specified by the plug-in.
target display
target, specified by the plug-in. if null, pass the new stream back to the current plug-in instance regardless of mime type. for values, see npn_geturl. len length of the buffer buf. buf path to local temporary file or data buffer that contains the data to post. temporary file is delete...
...uf, then delete the file. false: post the raw data in buf. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_posturl works similarly to npn_geturl, but in reverse. npn_geturl reads data from the url and either displays it in the
target window or delivers it to the plug-in. npn_posturl writes data from a file or buffer to the url and either displays the server's response in the
target window or delivers it to the plug-in. if the
target parameter is null, the new stream is passed to the plug-in regardless of mime type. when you use npn_posturl to send data to the server, you can handle the response in several different ways by...
...you can get the data and save it in a file or use it in a program. ...
...And 2 more matches
Game distribution - Game development
you can distribute your newly created game into the wild. this includes hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like google play or the ios app store. benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and
target multiple devices. this can range from low-end smartphones or tablets, through laptops and desktop computers, to smart tvs, watches or even a fridge if it can handle a modern enough browser. you don't need to have separate teams to work on the same title
targeting different platforms with only one code base to worry about. you can spend more time and money on promotion and monetization. instant ...
...s fully multiplatform. trying to compete with desktop games directly is very difficult. you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels. many html5 games will
target different market segments than native desktop games, e.g. simple time killer games to be played while on the move rather than huge immersive experiences. such games are often designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need. saying this, desktop platforms can be used for distribution q...
...th two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need. saying this, desktop platforms can be used for distribution quite easily with the availability of wrappers that can help you prepare native builds of your game see packaging games. it's also nice to provide desktop controls for your games even if you're mostly
targeting mobile. players are enjoying your games on any platform available, and desktop is one of them. plus, it is usually easier to build and test the game first on desktop, and then move on to debugging mobile. publishing the game there are three main options when it comes to publishing a game: self-hosting publishers stores remember that the name of your game should be unique enough to be ...
...And 2 more matches
Square tilemaps implementation: Scrolling maps - Game development
in our demo the shifting amount is stored in the offsetx and offsety variables. var offsetx = -this.camera.x + startcol * map.tsize; var offsety = -this.camera.y + startrow * map.tsize; with these values in place, the loop that renders the map is quite similar to the one used for rendering static tilemaps. the main difference is that we are adding the offsetx and offsety values to the
target x and y coordinates, and these values are rounded, to avoid artifacts that would result from the camera pointing at positions with floating point numbers. for (var c = startcol; c <= endcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + ...
...you can take a look at a live demo, and see its source code. there's a...
...you can take a look at a live demo, and see its source code. there's another demo available, that shows how to make t...
...And 2 more matches
CSS selectors - Learn web development
there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to style. in this article and its sub-articles we'll run through the different types in great detail, seeing how they work. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how css selectors work in detail. ...
...rst part of a css rule. it is a pattern of elements and other terms that tell the browser which html elements should be selected to have the css property values inside the rule applied to them. the element or elements which are selected by the selector are referred to as the subject of the selector. in earlier articles you met some different selectors, and learned that there are selectors that
target the document in different ways — for example by selecting an element such as h1, or a class such as .special. in css, selectors are defined in the css selectors specification; like any other part of css they need to have support in browsers for them to work. the majority of selectors that you will come across are defined in the level 3 selectors specification, which is a mature specification, ...
...entire rule is deemed invalid. h1, ..special { color: blue; } types of selectors there are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. in this article's subarticles we will look at the different groups of selectors in more detail. ...
...And 2 more matches
React interactivity: Events and state - Learn web development
you type, but your browser will log the word "typing!" to the javascript console, so we know our event listener is attached to the input. in order to change the input’s value, we have to use our handlechange() function to update our name state. to read the contents of the input field as they change, you can access the input’s value property. ...
...our browser will log the word "typing!" to the javascript console, so we know our event listener is attached to the input. in order to change the input’s value, we have to use our handlechange() function to update our name state. to read the contents of the input field as they change, you can access the input’s value property. we can do this inside handlechange() by reading e.
target.value. ...
... to read the contents of the input field as they change, you can access the input’s value property. we can do this inside handlechange() by reading e.
target.value. e.
target represents the element that fired the change event — that’s our input. so, value is the text inside it. you can console.log() this value to see it in your browser’s console. ...
...And 2 more matches
Makefiles - Best practices and suggestions
thin sources to shift platform logic into your source code. if a unit test is platform specific write your makefile so it can be used on all platforms but only do work on the specific hardware or class of hardware. for classes of hardware (unix/windows) place your makefile in a subdirectory, unix/makefile.in always include dependencies when creating a
target initial make call should always be the workhorse: build, generate, deploy, install, etc. all subsequent make calls must become a nop unless sources or dependencies change or have been removed. incorrect dependencies will contribute to wasted cycles and can contribute to circular dependencies. directory dependencies do not use directories as a dependency...
...tial make call should always be the workhorse: build, generate, deploy, install, etc. all subsequent make calls must become a nop unless sources or dependencies change or have been removed. incorrect dependencies will contribute to wasted cycles and can contribute to circular dependencies. directory dependencies do not use directories as a dependency for generated
targets, ever. any activity within a directory will alter inodes forcing
targets to always be stale. for ex, individual unit tests would invalidate all prior test activity whenever a test touched a timestamp file in the directory to signal success. parallel make: add an explicit timestamp dependency (.done) that make can synchronize threaded calls on to avoid a ...
...estamp dependency (.done) that make can synchronize threaded calls on to avoid a race condition. ...
...And 2 more matches
Communicating with frame scripts
er in an add-on, a good way to do that is to prefix messages with your add-on's id. after the name, you can pass detailed data as a string or a json-serializable object, and after that you can pass any objects it wants to pass to content as cpows. 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 from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() api. ...
...ge listener using the message manager's addmessagelistener() api. the message passed to the listener is an object containing the following properties: name string containing the message name. sync boolean declaring whether the message was send synchronously or aynchronously. data the json object passed as the second parameter to sendasyncmessage().
target the xul <browser> element from which this message was sent. 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(messa...
...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-extension-message" false object { details: "they clicked", tag: "div" } <xul:browser anonid="initialbrowser" ... > {
target: <div#searchcontainer> } if your code requires access to a window (for examp...
...And 2 more matches
smartcard-insert
typeread only domstring the type of event. ...
... typeread only domstring the type of event. ...
... typeread only domstring the type of event. ...
...And 2 more matches
smartcard-remove
typeread only domstring the type of event. ...
... typeread only domstring the type of event. ...
... typeread only domstring the type of event. ...
...And 2 more matches
IME handling guide
mozilla::imestatemanager imestatemanager looks for a textcomposition instance whose native ime context is same as the widget' which dispatches the widget event. if there is no proper textcomposition instance, it creates the instance. and it sends the event to the textcomposition instance. note...
... widget (or textcomposition) must not be nullptr text ecompositioncommitasis n/a (must be empty) nobody nullptr none ecompositioncommit commit string widget (or textcomposition) nullptr none presshell presshell receives the widget events and decides an event
target from focused document and element. then, it sends the events and the event
target to imestatemanager. mozilla::imestatemanager imestatemanager looks for a textcomposition instance whose native ime context is same as the widget' which dispatches the widget event. if there is no proper textcomposition instance, it creates the instance. and it sends the event to the textcomposition instance. note that all instances of textcomposition are managed by imestatemanager. when an ins...
...eated, it's registered to the list. when composition completely ends, it's unregistered from the list (and released automatically). mozilla::textcomposition textcomposition manages a composition and dispatches dom compositionupdate events. when this receives an ecompositionchange, ecompositioncommit or ecompositioncommitasis event, it dispatches the event to the stored node which was the event
target of ecompositionstart event. therefore, this class guarantees that all composition events for a composition are fired on same element. when this receives ecompositionchange or ecompositioncommit, this checks if new composition string (or committing string) is different from the last data stored by the textcomposition. if the composition event is changing the composition string, the textcompositio...
...And 2 more matches
Localizing XLIFF files for iOS
l store your copy of the github repo and navigate there in your terminal. enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it. translating the xliff file open the firefox-ios.xliff file in your favorite text editor. in the <file> tag, add the
target-language attribute with your locale code as the value (e.g.,
target-language="xx-xx"). be aware that there may be many <file> tags within one xliff document. each <file> tag requires the
target-language attribute with your locale code as the value (e.g.,
target-language="xx-xx"). strings are located within <trans-unit> tags. source english strings are contained in <source> child tags. here is an...
...e> tag requires the
target-language attribute with your locale code as the value (e.g.,
target-language="xx-xx"). strings are located within <trans-unit> tags. source english strings are contained in <source> child tags. 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. go through the full xliff page adding <
target></
target> below each <source> tag set to help you to identify strings that need to be translated. do not delete the <source> tag sets. ...
...add to bookmarks"> <source>add to bookmarks</source> </trans-unit> your translations must be contained inside <
target> child tags. go through the full xliff page adding <
target></
target> below each <source> tag set to help you to identify strings that need to be translated. do not delete the <source> tag sets. <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> <
target>your_translation_here</
target> </trans-unit> provide translations of the strings in the <source> tag sets by placing their translations in the <
target> tag sets beneath them. keep in mind the following sets of characters that need to remain untranslated: $(some_text_here) is a variable format, %1$@ is another variable format. <note> tags contain localizer notes from developers and...
...And 2 more matches
Scroll-linked effects
if it is, then it triggers an animation to "snap" the scroll posit...
...if it is, then it triggers an animation to "snap" the scroll position to the top of the div. as this animation is driven by jav...
...if it is, then it triggers an animation to "snap" the scroll position to the top of the div. as this animation is driven by javascript on the brow...
...And 2 more matches
nss tech note1
required, the pointer must point to a null-terminated array of templates. the syntax of these templates is identical for both decoders, except where noted. 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. void* dest is a pointer to the
target area. this is where the decoder stores its output. the type is undefined as it is completely dependent on the content of the decoder templates.† this typically points to a struct that is described (or partially described) by the templates. prarenapool* arena is a pointer to an nspr arena pool. this is the arena pool from which the decoder will allocate memory as needed. decoder templates : ...
...ven if additonal templates are passed in an array. when only one template is needed, you do not need a null template to terminate the array. offset† . this field does not apply to all template types. it is only needed if the template instructs the decoder to save some data, such as for primitive component types, or for some modifiers where noted.when needed, it tells the decoder where in the
target data to save the current component. it is normally relative to the dest argument passed to the decoder. if templates are nested, the offset applies to the location of the current component within the
target component, typically the decoded sequence. sub† . this field does not apply to all template types. if kind contains the sec_asn1_inline or sec_asn1_pointer modifiers, then it must point t...
...tional as part of a sequence, this must be the last template in the template array. sec_asn1_inline: recurse into the specified subtemplate to continue processing. this is typically used for sec_asn1_sequence or sec_asn1_choice definitions, which always need to be the first template in a template array of their own. sec_asn1_pointer: similar to sec_asn1_inline, except that the memory in the
target will be allocated dynamically and a pointer to the dynamically allocated memory will be stored in the dest struct at the offset. this requires that the subtemplate contains a non-zero size field. sec_asn1_group: can only be used in conjunction with a sec_asn1_set or sec_asn1_sequence. it tells the decoder that the component is an asn.1 set of or sequence of respectively. you can also use the m...
...And 2 more matches
nsIDOMMouseScrollEvent
nt. method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis. read only. constants constant value description horizontal_axis 1 the horizontal (x) axis. ...
...ect. void initmousescrollevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in long axis ); parameters typearg the type of event. must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the created event can be canceled. viewarg the nsidomabstractview in which the event occur...
... altkeyarg true if the alt key was down when the event occurred, otherwise false. shiftkeyarg true if the shift key was down when the event occurred, otherwise false. ...
...And 2 more matches
nsIDOMWindowUtils
vas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode a
target, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void...
...sible). will throw a dom security error if called without universalxpconnect privileges. void disablenontestmouseevents( in boolean adisable ); parameters adisable if true, disable all non synthetic test mouse events on all windows. otherwise, enable them. dispatchdomeventviapresshell() dispatches aevent via the nsipresshell object of the window's document. the event is dispatched to a
target, which should be an object which implements nsicontent interface (#element, #text, etc). cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. note: event handlers won't get aevent as parameter, but a similar event. also, aevent should not be reused. boolean dispatchdomeventviapresshell( in nsido...
... should be an object which implements nsicontent interface (#element, #text, etc). cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. note: event handlers won't get aevent as parameter, but a similar event. also, aevent should not be reused. boolean dispatchdomeventviapresshell( in nsidomnode a
target, in nsidomevent aevent, in boolean atrusted ); parameters a
target aevent atrusted return value boolean to show if the event was successful elementfrompoint() retrieve the element at point ax, ay in the window's document. nsidomelement elementfrompoint( in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout ); parameters ax ...
...And 2 more matches
WebIDL bindings
[func="myclass::stuffenabled"] attribute long onlyhereifenabled; }; the function is invoked with two arguments: the jscontext that the operation is happening on and the jsobject for the global of the object that the property will be defined on if the function returns true. in particular, in the xray case the jscontext is in the caller compartment (typically chrome) but the jsobject is in the
target compartment (typically content). this allows the method implementation to select which compartment it cares about in its checks. the above idl would also require the following c++: class myclass { static bool stuffenabled(jscontext* cx, jsobject* obj); }; if specified on an interface as a whole, then lookups for the interface object for this interface on a dom window will only find it if th...
...c++ function is passed a js::handle<jsobject*>. so the c++ in this case would look like this: class myclass { static bool myconditionalinterfaceenabled(jscontext* cx, js::handle<jsobject*> obj); }; just like in the interface member case, the jscontext is in the caller compartment but the jsobject is the actual object the property would be defined on. in the xray case that means obj is in the
target compartment (typically content) and cx is typically chrome. this extended attibute can be specified together with [chromeonly], and [pref]. if more than one of these is specified, all conditions will need to test true for the interface or interface member to be exposed. binding code will include the headers necessary for a [func], unless the interface is using a non-deafault heder file. if a n...
... you will need to add a defaultimpl annotation to the descriptor for the parent interface in bindings.conf. the value of the annotation is the c++ class to use as the parent for js-implemented descendants; if defaultimpl is not specified, the nativetype will be used. for example, consider this interface that we wish to implement in javascript: [jsimplementation="some-contract"] interface myevent
target : event
target { attribute eventhandler onmyevent; void dispatchtheevent(); // sends a "myevent" event to this event
target } the implementation would look something like this, ignoring most of the xpcom boilerplate: function myevent
targetimpl() { } myevent
targetimpl.prototype = { // qi to nsidomglobalpropertyinitializer so we get init() called on us. queryinterface: xpcomutils.generateq...
...And 2 more matches
Drawing and Event Handling - Plugins
her a plug-in is windowed or windowless by the way you define the plug-in itself. a windowed plug-in is drawn into its own native window (or portion of a native window) on a web page. a windowed plug-in is opaque, hiding the part of the page beneath its display window. this type of plug-in determines when it draws itself. a windowless plug-in does not require a native window. it is drawn in a
target called a drawable, which corresponds to either the browser window or an off-screen bitmap. a drawable can be defined in several ways, depending on the platform. windowless plug-ins can be opaque or transparent. a windowless plug-in draws itself only in response to a paint message from the browser. for information about the way html determines plug-in display mode, see using html to display plug...
...r transparent. a windowless plug-in draws itself only in response to a paint message from the browser. for information about the way html determines plug-in display mode, see using html to display plug-ins. note: windowless plug-ins were not supported on the x window system platform prior to gecko 1.9 alpha 7 (bug 137189). the npwindow structure when a plug-in is loaded, it is drawn into a
target area. this
target is either the windowed plug-in's native window, or the drawable of a windowless plug-in. the npwindow structure represents either the native window or a drawable. this structure contains information about coordinate position, size, the state of the plug-in (windowed or windowless), and some platform-specific information. note: when a plug-in is drawn to a window, the plug-in i...
...lues should not be modified by the plug-in. the cliprect field defines the clipping rectangle of the plug-in in a coordinate system where the origin is the top-left corner of the drawable or window. the browser calls npp_setwindow whenever the drawable changes. for windowless plugins, a cliprect of 0,0,0,0 signals that the plugin is not visible. the type field indicates the npwindow type of the
target area: npwindowtypewindow: windowed plug-in. the window field holds a platform-specific handle to a window. npwindowtypedrawable: windowless plug-in. the window field holds a platform-specific handle to a drawable, as follows: windows: hdc mac os: pointer to np_port structure. unix/x11: not used. (the drawable is provided in the paint message. see below.) in both cases, the ...
...And 2 more matches
AudioBufferSourceNode - Web APIs
m disk, use a audioworkletnode to implement its playback. ...
...use a audioworkletnode to implement its playback. ...
...ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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...
...And 2 more matches
BaseAudioContext - Web APIs
the baseaudiocontext interface of the web audio api acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively. you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. a baseaudiocontext can be a
target of events, therefore it implements the event
target interface. ...
...events, therefore it implements the event
target interface. ...
...therefore it implements the event
target interface. ...
...And 2 more matches
BroadcastChannel - Web APIs
channel. note: this feature is available in web workers. ...
.... note: this feature is available in web workers. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" fi...
...And 2 more matches
Comment - Web APIs
e character sequence '--' cannot be used within a comment. ...
...ter sequence '--' cannot be used within a comment. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
DataTransfer.items - Web APIs
ms being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and types properties. ...
...the list is empty. example this example shows the use of the items and types properties. ...
... example this example shows the use of the items and types properties. ...
...And 2 more matches
DataTransfer.types - Web APIs
uded no data, this list will be empty. if any files are included in the drag operation, then one of the types will be the string files. example this example shows the use of the types and items properties. ...
...the string files. example this example shows the use of the types and items properties. ...
... example this example shows the use of the types and items properties. ...
...And 2 more matches
DataTransferItemList.add() - Web APIs
item whose kind is "plain unicode string" and whose type is equal to the specified type parameter. example this example shows the use of the add() method. ...
...paragraph ...</p>", "text/...
...rop 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...
...And 2 more matches
DataTransferItemList.clear() - Web APIs
own. syntax datatransferitemlist.clear(); parameters none. return value undefined example this example shows the use of the clear() method. ...
...paragraph ...</p>", "t...
... 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...
...And 2 more matches
DataTransferItemList.remove() - Web APIs
idstateerror the drag data store is not in read/write mode, so the item can't be removed. example this example shows the use of the remove() method. 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...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/ur...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getas...
...And 2 more matches
Document.createProcessingInstruction() - Web APIs
createprocessinginstruction() generates a new processing instruction node and returns it. the new node usually will be inserted into an xml document in order to accomplish anything with it, such as with node.insertbefore. syntax pinode = document.createprocessinginstruction(
target, data) parameters pinode is the resulting processinginstruction node. ...
... createprocessinginstruction() generates a new processing instruction node and returns it. the new node usually will be inserted into an xml document in order to accomplish anything with it, such as with node.insertbefore. syntax pinode = document.createprocessinginstruction(
target, data) parameters pinode is the resulting processinginstruction node. ...
... processing instruction node and returns it. the new node usually will be inserted into an xml document in order to accomplish anything with it, such as with node.insertbefore. syntax pinode = document.createprocessinginstruction(
target, data) parameters pinode is the resulting processinginstruction node.
target is a string containing the first part of the processing instruction (i.e., <?
target … ?>) data is a string containing any information the processing instruction should carry, after the
target. ...
...And 2 more matches
Document.createTouchList() - Web APIs
...]]]); parameters touches zero or more touch objects. note: firefox also accepts an array of touch objects. return value list a touchlist object containing the touch objects specified by the touches parameter. example this example illustrates using the document.createtouchlist() method to create touchlist objects. ...
... array of touch objects. return value list a touchlist object containing the touch objects specified by the touches parameter. example this example illustrates using the document.createtouchlist() method to create touchlist objects. in following code snippet, some touch objects are created for the
target element and those touch points are then used to create some touchlist objects. ...
...value list a touchlist object containing the touch objects specified by the touches parameter. example this example illustrates using the document.createtouchlist() method to create touchlist objects. in following code snippet, some touch objects are created for the
target element and those touch points are then used to create some touchlist objects. ...
...And 2 more matches
Element.msZoomTo() - Web APIs
nt to its specified coordinate with animation. zoomed elements can expose their zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with mszoomto. this proprietary method is specific to internet explorer and microsoft edge. syntax element.mszoomto(arguments); parameters args[in] type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the
target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, horizontally. contenty[in]: the y-coordinate of the content that is the
target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, vertically. viewportx[in]: the alignment point of the viewport. the scroll/zoom operation attempts to align this p...
...on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none"). ...
...ements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none"). ...
...And 2 more matches
Element: paste event - Web APIs
formation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. ...
...vent.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. ...
... will not affect the document's contents. ...
...And 2 more matches
Element.setCapture() - Web APIs
example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
... example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
... example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
...And 2 more matches
Event - Web APIs
vent interface represents an event which takes place in the dom. an event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by apis to represent the progress of an asynchronous task. it can also be triggered programmatically, such as by calling the htmlelement.click() method of an element, or by defining the event, then sending it to a specified
target using event
target.dispatchevent(). there are many types of events, some of which use other interfaces based on the main event interface. event itself contains the properties and methods which are common to all events. 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 "att...
...se other interfaces based on the main event interface. event itself contains the properties and methods which are common to all events. 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 event
target.addeventlistener(), and this generally replaces using the old html event handler attributes. further, when properly added, such handlers can also be disconnected if needed using removeeventlistener(). note: one element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (for exampl...
...bble a historical alias to event.stoppropagation(). setting its value to true before returning from an event handler prevents propagation of the event. event.cancelable read only a boolean indicating whether the event is cancelable. event.composed read only a boolean indicating whether or not the event can bubble across the boundary between the shadow dom and the regular dom. event.current
target read only a reference to the currently registered
target for the event. this is the object to which the event is currently slated to be sent. it's possible this has been changed along the way through re
targeting. event.deeppath an array of dom nodes through which the event has bubbled. event.defaultprevented read only indicates whether or not the call to event.preventdefault() canceled t...
...And 2 more matches
Geolocation.clearWatch() - Web APIs
the geolocation.clearwatch() method is used to unregister location/error monitoring handlers previously installed using geolocation.watchposition(). syntax navigator.geolocation.clearwatch(id); parameters id the id number returned by the geolocation.watchposition() method when installing the handler you wish to remove. ...
...arwatch() method is used to unregister location/error monitoring handlers previously installed using geolocation.watchposition(). syntax navigator.geolocation.clearwatch(id); parameters id the id number returned by the geolocation.watchposition() method when installing the handler you wish to remove. ...
...er location/error monitoring handlers previously installed using geolocation.watchposition(). syntax navigator.geolocation.clearwatch(id); parameters id the id number returned by the geolocation.watchposition() method when installing the handler you wish to remove. ...
...And 2 more matches
Geolocation.watchPosition() - Web APIs
. error optional an optional callback function that takes a geolocationpositionerror object as an input parameter. options optional an optional positionoptions object that provides configuration options for the location watch. return value an integer id that identifies the registered handler. the id can be passed to the geolocation.clearwatch() to unregister the handler. ...
...positionerror object as an input parameter. options optional an optional positionoptions object that provides configuration options for the location watch. return value an integer id that identifies the registered handler. the id can be passed to the geolocation.clearwatch() to unregister the handler. ...
...ameter. options optional an optional positionoptions object that provides configuration options for the location watch. return value an integer id that identifies the registered handler. the id can be passed to the geolocation.clearwatch() to unregister the handler. ...
...And 2 more matches
GlobalEventHandlers.onanimationstart - Web APIs
the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...And 2 more matches
HTMLDocument - Web APIs
ethods and properties that are specific to html documents. ...
...nd properties that are specific to html documents. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
HTMLElement - Web APIs
ile others implement it via an interface that inherits it. ...
...rs implement it via an interface that inherits it. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
Recommended Drag Types - Web APIs
, use the text/plain type. the second data parameter should be the dragged string. 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. it is recommended to always add data of the text/plain type as a fallback for applications or drop
targets that do not support other types, unless there is no logical text alternative. always add this text/plain type last, as it is the least specific and shouldn’t be preferred. note: in older code, you may find text/unicode or the text types. these are equivalent to text/plain, and will store and retrieve plain text data. dragging links dragged hyperlinks should include data of two types: text/u...
...during the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. note that the instanceof operator is used here as the mozgetdataat() method will return an nsisupports that needs t...
...ta("text/plain", imageurl); note the mozgetdataat() method is used for non-textual data. as some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images. dragging nodes nodes and elements in a document may be dragged using the application/x-moz-node type. the data for the type should be a dom node. this allows the drop
target to receive the actual node where the drag was started from. note that callers from a different domain will not be able to access the node even when it has been dropped. you should always include a text/plain alternative for the node. dragging custom data you can also use other types that you invent for custom purposes. strive to always include a text/plain alternative, unless the dragged objec...
...And 2 more matches
IDBDatabase - Web APIs
, access data, or open anything outside of a transaction. ...
... data, or open anything outside of a transaction. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="#...
...And 2 more matches
IDBOpenDBRequest - Web APIs
ributes. note: this feature is available in web workers. ...
... note: this feature is available in web workers. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="#4d4e...
...And 2 more matches
IDBRequest - Web APIs
brequest. note: this feature is available in web workers. ...
.... note: this feature is available in web workers. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="#4...
...And 2 more matches
MouseEvent.initMouseEvent() - Web APIs
once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. ...
...as it is deprecated. instead use specific event constructors, like mouseevent(). the page on creating and triggering events gives more information about the way to use these. syntax event.initmouseevent(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button, related
target); parameters type the string to set the event's type to. possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout. canbubble whether or not the event can bubble. sets the value of event.bubbles. cancelable whether or not the event's default action can be prevented. sets the value of event.cancelable. view the event's abstractview. you should pa...
...event. sets the value of mouseevent.ctrlkey. altkey whether or not alt key was depressed during the event. sets the value of mouseevent.altkey. shiftkey whether or not shift key was depressed during the event. sets the value of mouseevent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button. ...
...And 2 more matches
Node - Web APIs
de type that cannot have children will throw an exception. ...
...that cannot have children will throw an exception. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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...
...And 2 more matches
SVGAElement - Web APIs
flects the ping attribute, containing a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. svgaelement.referrerpolicy see htmlanchorelement.referrerpolicy. svgaelement.rel see htmlanchorelement.rel. svgaelement.rellist see htmlanchorelement.rellist. svgaelement.
target read only it corresponds to the
target attribute of the given element. svgaelement.text is a domstring being a synonym for the node.textcontent property. svgaelement.type is a domstring that reflects the type attribute, indicating the mime type of the linked resource. methods this interface has no methods but inherits methods from its parent, svggraphicselement. example in the example ...
... it corresponds to the
target attribute of the given element. svgaelement.text is a domstring being a synonym for the node.textcontent property. svgaelement.type is a domstring that reflects the type attribute, indicating the mime type of the linked resource. methods this interface has no methods but inherits methods from its parent, svggraphicselement. example in the example below, the
target attribute of the <a> element is set to _blank and when the link is clicked, it logs to notify whether the condition is met or not. ...
...lects the type attribute, indicating the mime type of the linked resource. methods this interface has no methods but inherits methods from its parent, svggraphicselement. example in the example below, the
target attribute of the <a> element is set to _blank and when the link is clicked, it logs to notify whether the condition is met or not. ...
...And 2 more matches
SVGElement - Web APIs
in the svg language derive from the svgelement interface. ...
...svg language derive from the svgelement interface. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
ServiceWorkerGlobalScope - Web APIs
e service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage. additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent event
target, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. <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 mee...
... from windowtimers, windowbase64, and windoweventhandlers. ...
...ndowtimers, windowbase64, and windoweventhandlers. ...
...And 2 more matches
Text - Web APIs
xt objects back into a single node for each block of text. ...
...ts back into a single node for each block of text. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
Using Touch Events - Web APIs
lementation-specific manner (for example, too many touch points are created). the touch interface represents a single contact point on a touch-sensitive device. the contact point is typically referred to as a touch point or just a touch. a touch is usually generated by a finger or stylus on a touchscreen, pen or trackpad. a touch point's properties include a unique identifier, the touch point's
target element as well as the x and y coordinates of the touch point's position relative to the viewport, page, and screen. the touchlist interface represents a list of contact points with a touch surface, one touch point per contact. thus, if the user activated the touch surface with one finger, the list would contain one item, and if the user touched the surface with three fingers, the list length wo...
... surface changes. the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface, releasing a touch point and canceling a touch event. this interface's attributes include the state of several modifier keys (for example the shift key) and the following touch lists: touches - a list of all of the touch points currently on the screen.
targettouches - a list of the touch points on the
target dom element. changedtouches - a list of the touch points whose items depends on the associated event type: for the touchstart event, it is a list of the touch points that became active with the current event. for the touchmove event, it is a list of the touch points that have changed since the last event. for the touchend event, it is...
...touch's end, or the time lapse between two consecutive taps intended to create a double-tap gesture. the directionality of a swipe (for example left to right, right to left, etc.) is another factor to consider. the touch list(s) an application uses depends on the semantics of the application's gestures. for example, if an application supports a single touch (tap) on one element, it would use the
targettouches list in the touchstart event handler to process the touch point in an application-specific manner. if an application supports two-finger swipe for any two touch points, it will use the changedtouches list in the touchmove event handler to determine if two touch points had moved and then implement the semantics of that gesture in an application-specific manner. browsers typically dispatch ...
...And 2 more matches
WebGL2RenderingContext.copyBufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...And 2 more matches
WheelEvent - Web APIs
ction of a wheel event is implementation-defined. thus, a wheel event doesn't necessarily dispatch a scroll event. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction. therefore, do not rely on delta* properties to get the content's scrolling direction. ...
...llleft and scrolltop of the
target in the scroll event. ...
...t="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" stro...
...And 2 more matches
XMLDocument - Web APIs
rithms behave differently with the two types of documents. ...
...ehave differently with the two types of documents. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...And 2 more matches
Specificity - CSS: Cascading Style Sheets
les which are composed of different sorts of css selectors. how is specificity calculated? specificity is a weight that is applied to a given css declaration, determined by the number of each selector type in the matching selector. when multiple declarations have equal specificity, the last declaration found in the css is applied to the element. specificity only applies when the same element is
targeted by multiple declarations. as per css rules, directly
targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has no effect on the specificity. selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before). class se...
...s you need the latter to override the former. in this case, you could set certain styles in your global css file as !important, thus overriding inline styles set directly on elements. <div class="foo" style="color: red;">what color am i?</div> .foo[style*="color: red"] { color: firebrick !important; } many javascript frameworks and libraries add inline styles. using !important with a very
targeted selector is one way to override these inline styles. b) overriding high specificity #someelement p { color: blue; } p.awesome { color: red; } how do you make awesome paragraphs always turn red, even ones inside #someelement? without !important, the first rule will have more specificity and will win over the second rule. how to override !important a) add another css rule with !importan...
...ity replaced with zero. this chunk of css ... div:where(.outer) p { color: orange; } div p { color: blueviolet; } #no-where-support { margin: 0.5em; border: 1px solid red; } #no-where-support:where(*) { display: none !important; } ... when used with the following html ... <div id="no-where-support"> ⚠️ your browser doesn't support the <code><a href="/docs/web/css/:where"
target="_top">:where()</a></code> pseudo-class. </div> <div class="outer"> <p>this is in the outer div.</p> <div class="inner"> <p>this text is in the inner div.</p> </div> </div> ... appears on the screen like this: form-based specificity specificity is based on the form of a selector. in the following case, the selector *[id="foo"] counts as an attribute selector for the purpose of ...
...And 2 more matches
Writing forward-compatible websites - Developer guides
ther feature or object must also exist or not exist. don't ua-sniff this is really a particularly common instance of assuming that one feature (the presence of a particular substring in the user agent (ua) string) implies something about the presence or absence of other features. if you have to ua-sniff, only sniff for past browser versions if you have to resort to ua sniffing, only use it to
target past browser versions of particular browsers. first, have a default code path that runs in unknown browsers and in the current and future versions of browsers you are testing with. then, if the default code path doesn't work in past versions of particular browsers and the breakage cannot be detected by sniffing for the absence of certain features your default code path uses, it's ok to add hacks ...
...wser versions of particular browsers. first, have a default code path that runs in unknown browsers and in the current and future versions of browsers you are testing with. then, if the default code path doesn't work in past versions of particular browsers and the breakage cannot be detected by sniffing for the absence of certain features your default code path uses, it's ok to add hacks that are
targeted to old versions of particular browsers by sniffing for those old browser versions. for the purpose of this piece of advice, "current" means the most recent version of a browser you have tested. for example, if you have tested that your default code path runs properly in firefox aurora but firefox beta and the latest release have a bug that make your default code path fail, it is ok to treat th...
...ometimes browsers implement a given feature slightly differently. if you have a single code path that works in all the top engines, it means that you are either using features where browser behavior has already converged or, if the behavior hasn't quite converged yet, your code works regardless of which engine's behavior standards turn out to uphold. ...
...And 2 more matches
<input type="range"> - HTML: Hypertext Markup Language
y impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, form
target, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width. any of these attributes, if included, will be ignored. examples while the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. the range input type lets you ask the ...
...ported, we will be able to make the range vertical, to slide up and down with css by declaring a height value greater than the width value. this is not actually implemented yet by any of the major browsers. (see firefox bug 981916, chrome bug 341071). it also, perhaps, may still be under discussion. in the meantime, we can make the range vertical by rotating it using using css transforms, or, by
targeting each browser engine with their own method, which includes setting the appearance to slider-vertical, by using a non-standard orient attribute in firefox, or by changing the text direction for internet explorer and edge. consider this range control: <input type="range" id="volume" min="0" max="11" value="7" step="1"> screenshotlive sample this control is horizontal (at least on most if no...
...y 90°. the result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom. screenshotlive sample appearance property the appearance property has a non-standard value of slider-vertical that, well, makes sliders vertical. html we use the same html as in the previous examples: <input type="range" min="0" max="11" value="7" step="1"> css we
target just the inputs with a type of range: input[type="range"] { -webkit-appearance: slider-vertical; } orient attribute in firefox only, there is a non-standard orient property. html use similar html as in the previous examples, we add the attribute with a value of vertical: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> writing-mode: bt-lr; the writing-mode...
...And 2 more matches
FinalizationRegistry.prototype.unregister() - JavaScript
the unregister unregisters a
target object from a finalizationregistry instance. syntax registry.unregister(unregistertoken); parameters unregistertoken the token used with the register method when registering the
target object. return value undefined. notes when a
target object has been reclaimed, it is no longer registered in the registry. there is no need to all unregister in your cleanup callback. only call unregister if you haven't received a cleanup callback and no longer need to receive one. ...
...h the register method when registering the
target object. return value undefined. notes when a
target object has been reclaimed, it is no longer registered in the registry. there is no need to all unregister in your cleanup callback. only call unregister if you haven't received a cleanup callback and no longer need to receive one. ...
... }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance. be sure to call `release` when you're done with it. * * @param label a label for the `thingy`. ...
...And 2 more matches
handler.deleteProperty() - JavaScript
the handler.deleteproperty() method is a trap for the delete operator. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { deleteproperty: function(
target, property) { } }); parameters the following parameters are passed to the deleteproperty() method. this is bound to the handler.
target the
target object. property the name or symbol of the property to delete. return value the deleteproperty() method must return a boolean indicating whether or not the property has been successfully deleted. description the handler.deleteproperty() method is a trap for the delete ope...
...tion the handler.deleteproperty() method is a trap for the delete operator. ...
...delete proxy[foo] and delete proxy.foo reflect.deleteproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be deleted, if it exists as a non-configurable own property of the
target object. examples trapping the delete operator the following code traps the delete operator. ...
...And 2 more matches
handler.getOwnPropertyDescriptor() - JavaScript
the handler.getownpropertydescriptor() method is a trap for object.getownpropertydescriptor(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { getownpropertydescriptor: function(
target, prop) { } }); parameters the following parameters are passed to the getownpropertydescriptor() method. this is bound to the handler.
target the
target object. prop the name of the property whose description should be retrieved. return value the getownpropertydescriptor() method must return an object or undefined. description the handler.getownpropertydescriptor() method is a trap ...
...riptor(). interceptions this trap can intercept these operations: object.getownpropertydescriptor() reflect.getownpropertydescriptor() invariants if the following invariants are violated, the proxy will throw a typeerror: getownpropertydescriptor() must return an object or undefined. a property cannot be reported as non-existent, if it exists as a non-configurable own property of the
target object. a property cannot be reported as non-existent, if it exists as an own property of the
target object and the
target object is not extensible. a property cannot be reported as existent, if it does not exists as an own property of the
target object and the
target object is not extensible. a property cannot be reported as non-configurable, if it does not exists as an own property of the ta...
...sts as an own property of the
target object and the
target object is not extensible. a property cannot be reported as existent, if it does not exists as an own property of the
target object and the
target object is not extensible. a property cannot be reported as non-configurable, if it does not exists as an own property of the
target object or if it exists as a configurable own property of the
target object. the result of object.getownpropertydescriptor(
target) can be applied to the
target object using object.defineproperty() and will not throw an exception. examples trapping of getownpropertydescriptor the following code traps object.getownpropertydescriptor(). ...
...And 2 more matches
handler.setPrototypeOf() - JavaScript
the handler.setprototypeof() method is a trap for object.setprototypeof(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { setprototypeof: function(
target, prototype) { } }); parameters the following parameters are passed to the setprototypeof() method. this is bound to the handler.
target the
target object. prototype the object's new prototype or null. return value the setprototypeof() method returns true if the [[prototype]] was successfully changed, otherwise false. description the handler.setprototypeof() method is a trap for object.setprototypeof(). interce...
...he setprototypeof() method returns true if the [[prototype]] was successfully changed, otherwise false. description the handler.setprototypeof() method is a trap for object.setprototypeof(). interceptions this trap can intercept these operations: object.setprototypeof() reflect.setprototypeof() invariants if the following invariants are violated, the proxy will throw a typeerror: if
target is not extensible, the prototype parameter must be the same value as object.getprototypeof(
target). examples if you want to disallow setting a new prototype for your object, your handler's setprototypeof() method can either return false, or it can throw an exception. approach 1: returning false this approach means that any mutating operation that throws an exception on failure to mutate, mus...
...s that any mutating operation that throws an exception on failure to mutate, must create the exception itself. for example, object.setprototypeof() will create and throw a typeerror itself. if the mutation is performed by an operation that doesn't ordinarily throw in case of failure, such as reflect.setprototypeof(), no exception will be thrown. const handlerreturnsfalse = { setprototypeof(
target, newproto) { return false; } }; const newproto = {},
target = {}; const p1 = new proxy(
target, handlerreturnsfalse); object.setprototypeof(p1, newproto); // throws a typeerror reflect.setprototypeof(p1, newproto); // returns false approach 2: throwing an exception the latter approach will cause any operation that attempts to mutate, to throw. this approach is best if you want ev...
...And 2 more matches
Reflect - JavaScript
e the reflect object as a function. all properties and methods of reflect are static (just like the math object). the reflect object provides the following static functions which have the same names as the proxy handler methods. some of these methods are also the same as corresponding methods on object, although they do have some subtle differences between them. ...
...ties and methods of reflect are static (just like the math object). the reflect object provides the following static functions which have the same names as the proxy handler methods. some of these methods are also the same as corresponding methods on object, although they do have some subtle differences between them. static methods reflect.apply(
target, thisargument, argumentslist) calls a
target function with arguments as specified by the argumentslist parameter. see also function.prototype.apply(). reflect.construct(
target, argumentslist[, new
target]) the new operator as a function. equivalent to calling new
target(...argumentslist). also provides the option to specify a different prototype. reflect.defineproperty(
target, propertykey, attributes) similar to object.defineproperty(). ...
....apply(). reflect.construct(
target, argumentslist[, new
target]) the new operator as a function. equivalent to calling new
target(...argumentslist). also provides the option to specify a different prototype. reflect.defineproperty(
target, propertykey, attributes) similar to object.defineproperty(). returns a boolean that is true if the property was successfully defined. reflect.deleteproperty(
target, propertykey) the delete operator as a function. equivalent to calling delete
target[propertykey]. reflect.get(
target, propertykey[, receiver]) returns the value of the property. works like getting a property from an object (
target[propertykey]) as a function. reflect.getownpropertydescriptor(
target, propertykey) similar to object.getownpropertydescriptor(). returns a property descriptor of ...
...And 2 more matches
WebAssembly Concepts - WebAssembly
oncepts behind how webassembly works including its goals, the problems it solves, and how it runs inside the web browser's rendering engine. what is webassembly? webassembly is a new type of code that can be run in modern web browsers and provides new features and major gains in performance. it is not primarily intended to be written by hand, rather it is designed to be an effective compilation
target for low-level source languages like c, c++, rust, etc. this has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so. what’s more, you don’t even have to know how to create webassembly code to take advantage of it. webassembly modules...
...rite web applications. it has many advantages — it is dynamically typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools. webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as c++ and rust with a compilation
target so that they can run on the web. (note that webassembly has the high-level goal of supporting languages with garbage-collected memory models in the future.) with the advent of webassembly appearing in browsers, the virtual machine that we talked about earlier will now load and run two types of code — javascript and webassembly. the different code types can call each other as required — the...
...r loading and running this binary code. now let’s talk about how we can use these primitives in practice. the webassembly ecosystem is at a nascent stage; more tools will undoubtedly emerge going forward. right now, there are four main entry points: porting a c/c++ application with emscripten. writing or generating webassembly directly at the assembly level. writing a rust application and
targeting webassembly as its output. using assemblyscript which looks similar to typescript and compiles to webassembly binary. let’s talk about these options: porting from c/c++ two of the many options for creating wasm code are an online wasm assembler or emscripten. there are a number of online wasm assembler choices, such as: wasmfiddle wasmfiddle++ wasmexplorer these are great resourc...
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
so content scripts can't directly share objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. ...
... objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. ...
...l attach "content-script.js" to the
target web page, and will then load the
target web page: 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, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the
target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var ...
...vent("addon-message", true, true, cloned); document.documentelement.dispatchevent(event); } messaging from page script to content script sending messages using custom dom events from the page script to the content script is just the same, but in reverse. also, there's no need to clone the message when using custom dom events in this direction. ...
Communicating using "postMessage" - Archive of obsolete content
t 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...
...pt wants to send mouseout events as well as mouseover. ...
....postmessage({" + " kind: 'mouseover'," + " element: event.
target.tostring()" + " });" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind: 'mouseout'," + " element: event.
target.tostring()" + " });" + " }, false);" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ' + message.element); break; case 'mouseout': ...
... console.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.port.emit('mouseover', event.
target.tostring());" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.port.emit('mouseout', event.
target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('mouseov...
indexed-db - Archive of obsolete content
s open(), additem() and getitems() to open the database, add a new item to the database, and get all items in the database. ...
...nd getitems() to open the database, add a new item to the database, and get all items in the database. ...
...ar request = indexeddb.open("stuff", version); request.onupgradeneeded = function(e) { var db = e.
target.result; e.
target.transaction.onerror = database.onerror; if(db.objectstorenames.contains("items")) { db.deleteobjectstore("items"); } var store = db.createobjectstore("items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.
target.result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date().gettime(); var request = store.put({ "name": name, "time": time }); request.onerror = database.onerror; }; function getitems(callback) { var cb = callback; ...
...getitems(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.
target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").acti...
page-mod - Archive of obsolete content
patterns, pass an array of match patterns: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: ["*.foo.org", "*.bar.com"], contentscript: 'window.alert("matched!");' }); see the match-pattern module for a detailed description of match pattern syntax. optional options: name: contentscriptfile type: string,array this option specifies one or more content scripts to attach to
targeted documents. each script is supplied as a separate file under your add-on's "data" directory, and is specified by a url typically constructed using the url() method of the self module's data object. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: data.url("my-script.js") }); from firefox 34, you can use "./my-...
...).data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: [data.url("jquery.min.js"), data.url("my-script.js")] }); content scripts specified using this option are loaded before those specified by the contentscript option. name: contentscript type: string,array this option specifies one or more content scripts to attach to
targeted documents. each script is supplied directly as a single string: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");' }); to attach multiple scripts, supply an array of strings. content scripts specified by this option are loaded after those specified by the contentscriptfile option. unless your content scr...
...son-serializable value: a string, number, boolean, null, array of json-serializable values, or an object whose property values are themselves json-serializable. this means you can't send functions, and if the object contains methods they won't be usable. you also can't pass cyclic values. name: contentstylefile type: string,array use this option to load one or more stylesheets into the
targeted documents as user stylesheets. each stylesheet is supplied as a separate file under your add-on's "data" directory, and is specified by a url typically constructed using the url() method of the self module's data object. to add multiple stylesheet files, pass an array of urls. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", ...
...s option are loaded before those specified by the contentstyle option. in earlier versions of this module, you couldn't use relative urls in stylesheets loaded in this way, and you had to use a workaround. in current versions this has been fixed, and the workaround is no longer needed. name:contentstyle type: string,array use this option to load one or more stylesheet rules into the
targeted documents. each stylesheet rule is supplied as a separate string. to supply multiple rules, pass an array of strings: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstyle: [ "div { padding: 10px; color: red }", "img { display: none }" ] }); content styles specified by this option are loaded after those specified by the contentstylefile option...
On page load - Archive of obsolete content
, as documents are loading or when tabs are switched—see progress listeners. progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...ntent"); // 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.original
target; // doc is document that triggered "onload" event // do something with the loaded page. // doc.location is a location object (see below for a link). // you can use it to make your code executed on certain pages only. if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.original
target.defaultview.add...
... if you are running code on a page load it is likely you would want to run some cleanup code on page unload. ...
...npageunload, false); and add your code to onpageunload method. basic onpageload for a browser window var myextension = { init: function() { // the event can be domcontentloaded, pageshow, pagehide, load or unload. if(gbrowser) gbrowser.addeventlistener("domcontentloaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.original
target; // doc is document that triggered the event var win = doc.defaultview; // win is the window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top window. // if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +doc.loc...
Adding Events and Commands - Archive of obsolete content
ep in mind that there are 2 drag and drop apis, the newest (and preferred) one introduced in firefox 3.5. event handlers can take an event argument, which is an event object that holds information on the event. ...
...the advantage of using the event argument is that the method is not dependent of the specific button, so it can also be used for other elements. ...
...es for mouse events, and most importantly, the
target element for the event. for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.
target.setattribute("label", somenewgreeting); } the
target in this example is the button element, so clicking on it will change its text. the advantage of using the event argument is that the method is not dependent of the specific button, so it can also be used for other elements. for more advanced event handling, you should read about event propagation. ...
...you can capture and cancel events during any of these phases, provided that they aren't canceled before they reach the point where you intended to capture them. the addeventlistener method allows you to control the phase where you want to handle an event, with the last argument of the function. ...
Promises - Archive of obsolete content
uest api now support promises out of the box. example direct usage task.spawn(function* () { // make the initial request. let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.
target.response; // use the response to construct form data object for the // second request. let form = new formdata; form.append("id", data.id); form.append("content", data.content); // make the second request. resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open(...
...data; form.append("id", data.id); form.append("content", data.content); // make the second request. resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("post", updateurl); xhr.send(form); }); // use the response of the second request. notifyuser(resp.
target.responsetext); }); example using promise-based helper the following example relies on the helper function defined below. task.spawn(function* () { // make the initial request. let xhr = yield request(dataurl, { responsetype: "json" }); let data = xhr.response; // use the response to construct form data object for the // second request. let form = new formdata; for...
...lly, integration with the download manager ui. representative example usage components.utils.import("resource://gre/modules/downloads.jsm"); task.spawn(function* () { // fetch a file in the background. let download_1 = downloads.fetch(url_1, path_1); // fetch a file visible in the download manager. let download_2 = yield downloads.createdownload({ source: url_2,
target: path_2, }); // add it to the downloads list used by the download manager ui. let list = yield downloads.getlist(downloads.all); list.add(download_2); // start the second download, and wait for both // downloads to complete. // this will raise an error if either download fails. yield promise.all([download_1, download_2.start()]); // do...
..."post" : "get"; if (options.mimetype) xhr.overridemimetype(params.options); xhr.open(options.method || defaultmethod, url); if (options.responsetype) xhr.responsetype = options.responsetype; for (let header of object.keys(options.headers || {})) xhr.s...
Structure of an installable bundle - Archive of obsolete content
c jar files. to facilitate the first case, the extension/app loader has special sub-directories specifically for platform-specific files (starting with toolkit/gecko 1.8, firefox/thunderbird 1.5). the platform string is defined during the toolkit build process to a value unique for the combination of operating system, processor architecture and compiler. the format of the platform string is: {os_
target}_{
target_xpcom_abi} all of the files which are loaded from the main extension directory are loaded from the subdirectory /platform/{platform string} if it exists. for example, if a plugin vendor wanted to make a plugin available for consumer computers running linux(of the form: /platform/linux*/), macintosh(of the form: /platform/darwin*/), and windows(of the form: /platform/win*/), it would...
...when default preferences are defined in several directories, the ones loaded later overwrite the earlier ones. official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about...
...when default preferences are defined in several directories, the ones loaded later overwrite the earlier ones. official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package exte...
... each platform directory should have its own chrome.manifest file: chrome.manifest chrome/mytheme-base.jar platform/darwin/chrome.manifest platform/darwin/chrome/mytheme-mac.jar platform/winnt/chrome.manifest platform/winnt/chrome/mytheme-win.jar the app/extension loader processes the base directory first, followed by the applicable platform directories (first /{os_
target}/, then /{os_
target}_{
target_xpcom_abi}/). when default preferences are defined in several directories, the ones loaded later overwrite the earlier ones. official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions ...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
rver that is observing an element that can start a drag, you should define at least the ondragstart function. for elements that can have objects dropped on them, you should define ondragover, ondrop and getsupportedflavours (and, if desired, ondragexit). the type of data being dragged is stored as a set of flavors. often, a dragged object will be available in a number of flavors. that way, a drop
target can accept the flavor it finds most suitable. for example, a file may come in two flavors, the file itself and the text name of the file. if the file is dragged and dropped onto a directory, the file flavor will be used. if the file is dropped onto a textbox, the text name flavor will be used. the text is therefore used to insert the name of the file when files can't be dropped directly. a flavor...
.... it has one property called ondragstart. (in javascript, properties can be declared with the syntax name : value). this property is a function which sets the data that is being dragged. once called, it starts a drag for the string data "cabbage". of course, you would want to calculate this value from the element that was clicked on. conveniently, this element is available from the event object's
target property. the event object is passed as the first argument to ondragstart. we create a transferdata object which can be used to hold all the data to be dragged. we add two pieces of data to the transfer data. the first is a string of html text and the second is a string of plain text. if the user drops onto an area which can accept html (such as mozilla's editor window), the html flavour will be ...
...u define the flavours should be from the best match to the weakest match. in this case above, the html flavour (text/html) comes first and then the text flavour (text/unicode). the example below shows how to set the data to be dragged from the element's label attribute. in this case we only provide the data in one flavour. var textobserver = { ondragstart: function (event) { var txt = event.
target.getattribute("label"); transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/unicode",txt); } } this might be useful when implementing drag and drop for cells in a tree. you can use the value of a cell, or some resource from an rdf file if the tree is built from a template, as the value of a drag. if you store it as a string, any object that accepts strings ...
...drop, so the transfer object only contains the data for the best matching flavour. the transfer object has two properties, data which holds the data and flavour which holds the flavour of the data. once you have the data, you can add it to the element is some way. for example, you might set the value of a textbox. var textobserver = { ondrop : function (event, transferdata, session) { event.
target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative forms of the data to be dragged. the following table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
used to stop the event from bubbling farther up the tree. clientx clientx the x coordinate of the event, in relation to the element viewport. clienty clienty the y coordinate of the event, in relation to the element viewport. ctrlkey ctrlkey boolean property that returns whether the ctrl key was pressed during the event. fromelement related
target for mouse events, this is the element from which the mouse moved away. keycode keycode for keyboard events, this is a number representing the key that was pressed. it is 0 for mouse events. for keypress events (not keydown/keyup) of keys that produce output, the mozilla equivalent is charcode, not keycode. returnvalue preventdefault() used to prevent the event's d...
...e preventdefault() used to prevent the event's default action from occurring. screenx screenx the x coordinate of the event, in relation to the screen. screeny screeny the y coordinate of the event, in relation to the screen. shiftkey shiftkey boolean property that returns whether the shift key was pressed during the event. srcelement
target the element to which the event was originally dispatched. toelement current
target for mouse events, this is the element to which the mouse moved. type type returns the name of the event. attach event handlers mozilla supports two ways to attach events through javascript. the first, supported by all browsers, sets event properties directly on objects. to se...
...) and removeeventlistener() methods, and have the benefit of being able to set multiple listeners for the same event type. both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase. if the boolean is set to false, it will only catch bubbling events. w3c events have three phases: capturing, at
target, and bubbling. every event object has an eventphase attribute indicating the phase numerically (0 indexed). every time you trigger an event, the event starts at the dom's outermost element, the element at the top of the dom tree. it then walks the dom using the most direct route toward the
target, which is the capturing phase. when the event reaches the
target, the event is in the
target phase. a...
... event object has an eventphase attribute indicating the phase numerically (0 indexed). every time you trigger an event, the event starts at the dom's outermost element, the element at the top of the dom tree. it then walks the dom using the most direct route toward the
target, which is the capturing phase. when the event reaches the
target, the event is in the
target phase. after arriving at the
target, it walks up the dom tree back to the outermost node; this is bubbling. internet explorer's event model only has the bubbling phase; therefore, setting the third parameter to false results in internet explorer-like behavior: <div id="mydiv">click me!</div> <script> function handleevent(aevent) { // if aevent is null, it is the internet explorer event model, // so get window.event. ...
Elements - Archive of obsolete content
g. id - the id attribute is a document-unique identifier. ...
... cdata #implied charcode cdata #implied clickcount (1|2|3) #implied command id #implied preventdefault false|true #implied > the handler element describes a single event handler. this handler is attached to its
target at the time the binding is attached and unhooked when the binding is detached from the bound element. the script inside the handler is executed when the event handler is matched. the handler tag must be inside the handlers tag. id - the id attribute is a document-unique identifier. event - the event attribute describes the specific event that this handler is listening for. its value can be an...
... action - the action attribute contains script that is invoked when the handler fires. the type attribute on the enclosing handlers element determines the language of the script. the handler script can also be specified as a child of the handler element. phase - this attribute specifies the phase of the event flow that this handler should monitor. the possible values are capturing, bubbling, and
target. if a phase is specified, the handler will only be invoked during that phase of the event handling process. if no phase is specified, a default of bubbling is assumed. button - the button attribute imposes a filter on the handler. it is used with mouse handlers to specify a particular button. the event handler will only be matched if the value of the button field in the dom mouse event object ma...
...r to fire. charcode - the charcode attribute imposes a filter on key handlers. its value is a single character, e.g., "z". if this attribute is present, then its value must match the charcode field of the dom key event object in order for the handler to fire. [editor's note: as dom events mature more attributes may be added. for example, mutation events define several new fields such as related
target that could be supported in the filtering syntax.] key - the key attribute has the same meaning as charcode. clickcount - the clickcount attribute imposes a filter on the handler. it is used with mouse handlers to specify how many times a button has been clicked. the event handler will only be matched if the value of the clickcount field in the dom mouse event object matches the value of the att...
ContextMenus - Archive of obsolete content
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. as textboxes have a context menu built in, the event will fire before an attempt to open the context menu. ...
...ilt in, the event will fire before an attempt to open the context menu. however, the event will also fire when the label is right-clicked for instance, so the event handler should check to make sure that the
target of the contextmenu event is what is desired. to cancel a context menu event, you can use the preventdefault method of the event object. 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. this has the effect of disabling the c...
...the context will be the element that is clicked. you can retrieve this element using the popup's triggernode property. in firefox 3.6 and earlier, the document's popupnode property was used; this is now deprecated. ...
...ng the popup's triggernode property. in firefox 3.6 and earlier, the document's popupnode property was used; this is now deprecated. in this example, the triggernode property is checked for a popup attached to a browser to determine whether an image is clicked: <script> function showhideitems(aevent) { // aevent.
target is the popup for which the popupshowing event fired. ...
Custom toolbar button - Archive of obsolete content
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> ...
...tion><!-- 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:package="content/custombutton/" /> </em:file> </description> </rdf> optionally customize the file by ch...
...the last section in the file specifies that this extension adds content to the application. 4. create a plain text file named chrome.manifest. ...
...the last section in the file specifies that this extension adds content to the application. 4. ...
Toolbar customization events - Archive of obsolete content
; for example, by right-clicking on a toolbar and choosing "customize". customizationchange this event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it. aftercustomization this event is delivered when the user closes the toolbar customization panel. in all cases, the event.
target is the toolbox being customized. you can look at the contents of that element and its children to determine what changes were made. example in this example, we watch for toolbar changes. window.addeventlistener("beforecustomization", customizestart, false); window.addeventlistener("aftercustomization", customizeend, false); window.addeventlistener("customizationchange", customizechange, false); ...
...the contents of that element and its children to determine what changes were made. example in this example, we watch for toolbar changes. ...
...atch for toolbar changes. ...
...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 */ } function customizechange(e) { let thetoolbox = e.
target; /* the user has made a change to the toolbox */ } ...
ant script to assemble an extension - Archive of obsolete content
amps@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" /> <zipfileset dir="." includes="install.rdf" /> </zip> </
target> everything inside the chrome directory is...
... description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zipfileset 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"/>...
...> <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.tpl.xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="versi...
... overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filterchain> </copy> </
target> </project> ...
NPN_GetURLNotify - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary requests creation of a new stream with the contents of the specified url; gets notification of the result. syntax #include <npapi.h> nperror npn_geturlnotify(npp instance, const char* url, const char*
target, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any type, such as http, ftp, news, or mailto.
target name of the
target window or frame, or one of several special
target names. for values, see npn_geturl(). notifydata plug-in-private value for associating the request with the subsequent npp_urlnotif...
...ug-in instance upon successful or unsuccessful completion of the request by calling the plug-in's npp_urlnotify() function and passing it the notifydata value. npn_geturlnotify() typically handles the url request asynchronously. it returns immediately and only later handles the request and calls npp_urlnotify(). ...
...mpletion of the request by calling the plug-in's npp_urlnotify() function and passing it the notifydata value. npn_geturlnotify() typically handles the url request asynchronously. it returns immediately and only later handles the request and calls npp_urlnotify(). this notification is the only way the plug-in can tell whether a request with a null
target failed, or that a request with a non-null
target completed. for requests that complete unsuccessfully, the browser calls npp_urlnotify() as soon as possible. for requests that complete successfully: if the
target is non-null, the browser calls npp_urlnotify() after it has finished loading the url. if the
target is null, the browser calls npp_urlnotify() after closing the stream by calling npn_destroystream(). if this function is called w...
...this is the only way to notify the plug-in once it is deleted. ...
NSPR Release Engineering Guide - Archive of obsolete content
this paper is for engineers performing formal release for the netscape portable runtime (nspr) across all platforms. nspr generally follows the iplanet product lifecycle. ...
... this paper is for engineers performing formal release for the netscape portable runtime (nspr) across all platforms. nspr generally follows the iplanet product lifecycle. ...
...cycle. ...
... tag the tree with nsprpub_release_x_y_z_beta beta release checkout a whole new tree using the tag from above build all
targets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z 1 run explode.pl run the test suite on all
targets, using binaries & headers from shipped bits resolve testing anomalies tag the tree with nsprpub_release_x_y[_z] release candidate checkout a whole new tree using tag (including fixes) tag the treey with nsprpub_release_x_y_z build all
targets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=...
Type, class, and ID selectors - Learn web development
the same thing, the readability is significantly improved. class selectors the class selector starts with a full stop (.) character and will select everything in the document with that class applied to it. in the live example below we have created a class called .highlight, and have applied it to several places in my document. all of the elements that have the class applied are highlighted.
targeting classes on particular elements you can create a selector that will
target specific elements with the class applied. in this next example we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. we do this by using the type selector for the element i want to
target, with the class appended using a dot, with no white space in between. thi...
...eading with a class of highlight. we do this by using the type selector for the element i want to
target, with the class appended using a dot, with no white space in between. this approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you decided the rule should apply to other elements too.
target an element if it has more than one class applied you can apply multiple classes to an element and
target them individually, or only select the element when all of the classes in the selector are present. this can be helpful when building up components that can be combined in different ways on your site. in the example below we have a <div> that contains a note. the grey border is applied when t...
...ebox as well to get anything applied. id selectors an id selector begins with a # rather than a full stop character, but is basically used in the same way as a class selector. an id however can be used only once per document, and elements can only have a single id value applied to them. it can select an element that has the id set on it, and you can precede the id with a type selector to only
target the element if both the element and id match. you can see both of these uses in the following example: warning: using the same id multiple times in a document may appear to work for styling purposes, but don't do this. it results in invalid code, and will cause strange behavior in many places. note: as we learned in the lesson on specificity, an id has high specificity and will overrule mo...
...ling purposes, but don't do this. it results in invalid code, and will cause strange behavior in many places. note: as we learned in the lesson on specificity, an id has high specificity and will overrule most other selectors. this can make them difficult to deal with. in most cases it is preferable to add a class to the element rather than use an id, however if using the id is the only way to
target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors by looking at attribute selectors. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-...
Beginner's guide to media queries - Learn web development
from the so-called mime type. note: there were a number of other media types defined in the level 3 media queries specification; these have been deprecated and should be avoided. note: media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types. media feature rules after specifying the type, you can then
target a media feature with a rule. width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond ...
...wser, or view the source. if we know the user cannot hover, we could display some interactive features by default. for users who can hover, we might choose to make them available when a link is hovered over. also in level 4 is the pointer media feature. this takes three possible values, none, fine and coarse. a fine pointer is something like a mouse or trackpad. it enables the user to precisely
target a small area. a coarse pointer is your finger on a touchscreen. the value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. for example, you could create larger hit areas if you know that the user is in...
... not operator. this reverses the meaning of the entire media query. therefore in this next example the text will only be blue if the orientation is portrait. @media not all and (orientation: landscape) { body { color: blue; } } open this example in the browser, or view the source. ...
...perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. ...
Creating hyperlinks - Learn web development
the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or
target, that contains the web address. <p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with the title attribute another attribute you may want to add to your links is title. the title contains additional information about the link, such as which ...
...ments. if you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element. <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. a quick primer on urls and paths to fully understand link
targets, you need to understand urls and file paths. this section gives you the information you need to achieve this. a url, or uniform resource locator is simply a string of text that defines where something is located on the web. for example, mozilla's english homepage is located at https://www.mozilla.org/. urls use paths to find files. paths specify where the file you're interested in is located i...
...g links. let's look at these now. use clear link wording it's easy to throw links up on your page. that's not enough. we need to make our links accessible to all readers, regardless of their current context and which tools they prefer. for example: screenreader users like jumping around from link to link on the page, and reading links out of context. search engines use link text to index
target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to. visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. they will find descriptive link text useful. let's look at a specific example: good link text: download firefox <p><a href="https://firefox...
... a multiple megabyte download starts unexpectedly. if you don't have the flash player installed, click a link, and then suddenly get taken to a page that requires flash. let's look at some examples, to see what kind of text can be used here: <p><a href="http://www.example.com/large-report.pdf"> download the sales report (pdf, 10mb) </a></p> <p><a href="http://www.example.com/video-stream/"
target="_blank"> watch the video (stream opens in separate tab, hd quality) </a></p> <p><a href="http://www.example.com/car-game"> play the car game (requires flash) </a></p> use the download attribute when linking to a download when you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. here'...
Getting started with HTML - Learn web development
<img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements. attributes elements can also have attributes. attributes look like this: attributes contain extra information about the element that won't appear in the content. in this example, the class attribute is an identifying name used to
target the element with style information. an attribute should have: a space between it and the element name. (for an element with more than one attribute, the attributes should be separated by spaces too.) the attribute name, followed by an equal sign. an attribute value, wrapped with opening and closing quote marks. active learning: adding attributes to an element another example of an elemen...
...f attributes, but several are as follows: href: this attribute's value specifies the web address for the link. for example: href="https://www.mozilla.org/". title: the title attribute specifies extra information about the link, such as a description of the page that is being linked to. for example, title="the mozilla homepage". this appears as a tooltip when a cursor hovers over the element.
target: the
target attribute specifies the browsing context used to display the link. for example,
target="_blank" will display the link in a new tab. if you want to display the linked content in the current tab, just omit this attribute. edit the line below in the input area to turn it into a link to your favorite website. add the <a> element. add the href attribute and the title attribute. spec...
... you'll be able to see your changes update live in the output area. you should see a link—that when hovered over—displays the value of the title attribute, and when clicked, navigates to the web address in the href attribute. ...
...ution'; 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(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage"
target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27...
Index - Learn web development
e is quite a lot to adding a background or a border to a box. do explore the different property pages if you want to find out more about any of the features we have discussed. each page on mdn has more examples of usage for you to play with and enhance your knowledge. 107 css selectors attribute, beginner, css, class, learn, pseudo, selectors, id in css, selectors are used to
target the html elements on our web pages that we want to style. there are a wide variety of css selectors available, allowing for fine-grained precision when selecting elements to style. in this article and its sub-articles we'll run through the different types in great detail, seeing how they work. 108 attribute selectors attribute, beginner, css, learn, selectors as you know from...
... selecting elements to style. in this article and its sub-articles we'll run through the different types in great detail, seeing how they work. 108 attribute selectors attribute, beginner, css, learn, selectors as you know from your study of html, elements can have attributes that give further detail about the element being marked up. in css you can use attribute selectors to
target elements with certain attributes. this lesson will show you how to use these very useful selectors. 109 combinators css, selectors, combinators the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. 110 pseudo-classes a...
...rt taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers. 259 cross browser testing accessibility, automation, beginner, css, codingscripting, html, javascript, landing, learn, module, testing, tools, cross browser this module focuses on testing web projects across different browsers. we look at identifying your
target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. 260 handling common html and css problems article, beginner, css, cod...
... an insight into writing and running automated tests for you to get going with writing your own automated tests. 267 strategies for carrying out testing article, automation, beginner, codingscripting, learn, testing, concepts, cross browser, device lab, user testing, virtual machine after reading this article you should now have a good idea of what you can do to identify your
target audience/
target browser list, and then effectively carry out cross-browser testing on that list. 268 git and github beginner, github, learn, web, git all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions o...
Adding a new event
anually. virtual internalfooevent* asfooevent() moz_override this method should just return this. this method is used for retrieving sub class pointer avoiding to use static_cast. virtual widgetevent* duplicate() const moz_override this method should create a new instance with copying its members except widget. for copying the members, this should use assignfooeventdata() with true for acopy
targets. and also, mflags should be just copied since assignfooeventdata() doesn't copy mflags. this method is basically used for duplicating an internal event class instance of a dom event when the dom event is stored by content. void assignfooeventdata(const internalfooevent* aevent, bool acopy
targets) this method should copy members from aevent. first, this method should call its super class's this...
... all new member variables of event classes must be with "m" prefix. ...
... all new member variables of event classes must be with "m" prefix. although, a lot of existing members don't have "m" prefix, but you shouldn't use the legacy local rules. ...
...d to add new paramtraits for the new event class in nsguieventipc.h. modify utility methods of widgetevent widgetevent class has some utility mehtods and all of them are implemented in widgeteventimple.cpp. e.g., if your event shouldn't cause dom event, you need to modify widgetevent::isallowedtodispatchdomevent(). if your event should be fired on focused node, you need to modify widgetevent::is
targetedatfocusedcontent(). how to implement a dom event class if you're in the case 3 (non-dom events), you can skip this section. create webidl of the event write a dom event definition with webidl. it should be created under dom/webidl/. see webidl bindings for the detail. if your new event shouldn't be created with event constructor such as: var event = new fooevent("bar", { bubbles: true, c...
The Firefox codebase: CSS Guidelines
gecko anyway. writing media queries boolean media queries do this: @media (-moz-mac-yosemite-theme: 0) { not this: @media not all and (-moz-mac-yosemite-theme) { privilege css for most common configuration it is better to put the most common configuration (latest version of an os, or default theme for example) outside of the media query. in the following example, -moz-mac-yosemite-theme
targets macos 10.10 and higher, so it should be privileged over the styling for macos 10.9. do this: @media (-moz-mac-yosemite-theme: 0) { #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2); } } not this: #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2); } @media (-moz-mac-yosemite-theme) { #placeslist { box-shadow: none; } } theme support firefox comes b...
... for themes, so it's again a good idea to use them for theme support. the text color of elements often contains valuable information from the theme colors, so currentcolor/inheritance is again a good idea for theme support. never write css specially for the built-in light/dark theme in compacttheme.css unless that css isn't supposed to affect webextension themes. these selectors can be used to
target dark areas: :-moz-lwtheme-brighttext: dark window frame. :root[lwt-toolbar-field-brighttext]: dark address bar and searchbar. :root[lwt-popup-brighttext]: dark arrow panels and autocomplete panels. :root[lwt-sidebar-brighttext]: dark sidebars. if you'd like a different shade of a themed area and no css variable is adequate, using colors with alpha transparency is usually a go...
...e of a themed area and no css variable is adequate, using colors with alpha transparency is usually a good idea, as it will preserve the original theme author's color hue. variables for clarity, css variables that are only used when a theme is enabled have the --lwt- prefix. layout & performance layout mixing xul flexbox and html flexbox can lead to undefined behaviour. css selectors when
targetting the root element of a page, using :root is the most performant way of doing so. reflows and style flushes see performance best practices for firefox front-end engineers for more information about this. misc text aliasing when convenient, avoid setting the opacity property on text as it will cause text to be aliased differently. hdpi support it's recommended to use svg since it keeps th...
...n about this. ...
Multiple Firefox profiles
use each time you start firefox. select this option to allow firefox to load the selected profile, without prompting at startup. note: to access other profiles after selecting this option, you must start the profile manager first. using the profiles windows if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to edit the "
target" of the launch icon. to do this: right-click the icon and choose "properties". when the properties dialog box pops up, you should see a "
target" text field that you can edit, and it should show the current file path. after the closing quote, add -profilemanager. click ok. now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd...
...ies dialog box pops up, you should see a "
target" text field that you can edit, and it should show the current file path. after the closing quote, add -profilemanager. click ok. now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use. if you want individual icons to launch specific profiles, you will need to edit the "
target" of each icon. to do this: right-click the icon and choose "properties". when the properties dialog box pops up, you should see a "
target" text field that you can edit, and it should show the current file path. to permanently set a specific profile, add -p profile_name to the
target path, but outside of the quotes, replacing "profile_name" with the actual profile name you chose. if you woul...
...overall: gnome 3 custom application launcher. once you get to the point of adding a new item, you can have the profile dialog show up every time or set the launcher to launch a specific profile. if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to set the command line for your new launcher. set the "command" text field to
target the executable file, likely "/usr/bin/firefox", and add the -p parameter. if you want individual icons to launch specific profiles, you will need to set the command line for your new launcher. to do this: set the "command" text field to
target the executable file, likely "/usr/bin/firefox", and add the -p profile_name parameter, replacing "profile_name" with the specific profile. repeat as ...
... ...
Mozilla DOM Hacking Guide
cument i will try to outline the main aspects of the implementation, beginning with the class info mechanism, which lies at the heart of the dom, then with the description of various interfaces and classes. since i am myself still learning how it works, don't expect this to be a complete reference quite yet. if you can contribute any time or knowledge to this document, it is greatly appreciated!
target audience: people interested in learning how the dom is implemented. prior knowledge of c++ and xpcom is assumed. if you don't know xpcom yet, and would like to be able to read this document quickly, you can read the introduction to xpcom for the dom. otherwise, for more detailed xpcom documentation, please see the xpcom project page. class info and helper classes introduction to class info cla...
...features of the xpconnect'ed dom is the interface flattening. "interface flattening is the ability to call methods on an object regardless of the interface it was defined on." for example, when we have the document object in javascript, we can call indistinctly document.getelementbyid(), or document.addeventlistener(), although they are defined on two different interfaces (domdocument and domevent
target. needless to say this is critical for the use of the dom in real-world content. in mozilla interface flattening is obtained through the use of the nsiclassinfo interface. nsiclassinfo stores the interfaces available for an object and later on xpconnect uses those interfaces to lookup the right method to call. the great thing is that one can easily see the interfaces available from js through in...
...looking at the code. the interesting part is in nsdomclassinfo::init(). there we have a long list of macros. there is one set of macros per dom class. there you can see, for each object, what interfaces are part of the "flattened" set. as an example, on the window object, we can call all the methods defined on the following interfaces: nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomevent
target, nsidomviewcss, and nsidomabstractview. again, without caring on what interface the method is defined. see section 1.5 for more information about the init() method. for the w3c dom (level 1, 2, 3) objects, for each object there is one "standards-compliant" interface, which is exactly the same as the w3c one, named nsidom<objectname>.idl, and a mozilla-specific extension interface, named nsidomns...
...ion. let's now see how to specify the interfaces available from javascript for a particular dom class. #define dom_classinfo_map_entry(_if) &ns_get_iid(_if), the array of pointers interface_list is filled with the addresses of the iid's of all the interfaces passed as arguments to the macro. in our window example, the interfaces are nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomevent
target, nsidomviewcss, and nsidomabstractview. please see section 1.2 on interface flattening for an explanation of the use of these interfaces. the initialization for a class is finished by the dom_classinfo_map_end macro. #define dom_classinfo_map_end nsnull }; d.minterfaces = interface_list; } the interface_list array is terminated by a null pointer. the line d.minterfaces = interface_list assigns...
NSPR build instructions
r mozilla, nspr is independent of the mozilla client source tree. building nspr consists of three steps: run the configure script. you may override the compilers (the cc environment variable) or specify options. build the libraries build the test programs for example, # check out the source tree from mercurial hg clone https://hg.mozilla.org/projects/nspr # create a build directory mkdir
target.debug cd
target.debug # run the configure script ../nspr/configure [optional configure options] # build the libraries gmake # build the test programs cd pr/tests gmake on mac os x, use make, which is gnu make. configure options although nspr uses autoconf, its configure script has two default values that are different from most open source projects. if the os vendor provides a compiler (fo...
...ld generates a debug build by default. --disable-debug --enable-optimize specify these two options to generate an optimized (release) build. these two options can actually be used independently, but it's not recommended. --enable-64bit on a dual 32-bit/64-bit platform, nspr build generates a 32-bit build by default. to generate a 64-bit build, specify the --enable-64bit configure option. --
target=x86_64-pc-mingw32 for 64-bit builds on windows, when using the mozillabuild environment. --enable-win32-
target=win95 this option is only used on windows. 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. the "win95" name is historica...
...n32-
target=win95 this option is only used on windows. 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. the "win95" name is historical; it should have been named "win32". to generate a "win95" configuration, specify the --enable-win32-
target=win95 configure option. --enable-debug-rtl this option is only used on windows. nspr debug build uses the release c run-time library by default. to generate a debug build that uses the debug c run-time library, specify the --enable-debug-rtl configure option. ...
... name is historical; it should have been named "win32". to generate a "win95" configuration, specify the --enable-win32-
target=win95 configure option. --enable-debug-rtl this option is only used on windows. nspr debug build uses the release c run-time library by default. to generate a debug build that uses the debug c run-time library, specify the --enable-debug-rtl configure option. makefile
targets all (default) clean realclean distclean install release running the test programs the tests were built above, in the pr/tests directory. on mac os x, they can be executed with the following: /bin/sh: $ cd pr/tests $ dyld_library_path=../../dist/lib ./accept pass $ $ # to run all the nspr tests... $ $ dyld_library_path=../../dist/lib ../../../nspr/pr/tests/runtests.sh ../.. ...
nsIAsyncInputStream
method). while this interface is almost exclusively used with non-blocking streams, it is not necessary that nsiinputstream.isnonblocking() return true. nor is it necessary that a non-blocking nsiinputstream implementation also implement nsiasyncinputstream. ...
...e this interface is almost exclusively used with non-blocking streams, it is not necessary that nsiinputstream.isnonblocking() return true. nor is it necessary that a non-blocking nsiinputstream implementation also implement nsiasyncinputstream. ...
...n the stream is closed. if the stream is already readable or closed when asyncwait is called, then the nsiinputstreamcallback.oninputstreamready() event will be dispatched immediately. otherwise, the event will be dispatched when the stream becomes readable or closed. void asyncwait( in nsiinputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsievent
target aevent
target ); parameters acallback this object is notified when the stream becomes ready. this parameter may be null to clear an existing callback. aflags this parameter specifies optional flags passed in to configure the behavior of this method. pass zero to specify no flags. arequestedcount wait until at least this many bytes can be read. this is only a suggestion to the underlying stream; ...
...am becomes ready. this parameter may be null to clear an existing callback. aflags this parameter specifies optional flags passed in to configure the behavior of this method. pass zero to specify no flags. arequestedcount wait until at least this many bytes can be read. this is only a suggestion to the underlying stream; it may be ignored. the caller may pass zero to indicate no preference. aevent
target specify null to receive notification on any thread (possibly even recursively on the calling thread, that is synchronously), or specify that the notification be delivered to a specific event
target. closewithstatus() this method closes the stream and sets its internal status. if the stream is already closed, then this method is ignored. once the stream is closed, the stream's status cannot be ch...
nsIAsyncOutputStream
od). while this interface is almost exclusively used with non-blocking streams, it is not necessary that nsioutputstream.isnonblocking() return true. nor is it necessary that a non-blocking nsioutputstream implementation also implement nsiasyncoutputstream. ...
...is interface is almost exclusively used with non-blocking streams, it is not necessary that nsioutputstream.isnonblocking() return true. nor is it necessary that a non-blocking nsioutputstream implementation also implement nsiasyncoutputstream. ...
...he stream is closed. if the stream is already writable or closed when asyncwait is called, then the nsioutputstreamcallback.onoutputstreamready() event will be dispatched immediately. otherwise, the event will be dispatched when the stream becomes writable or closed. void asyncwait( in nsioutputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsievent
target aevent
target ); parameters acallback this object is notified when the stream becomes ready. this parameter may be null to clear an existing callback. aflags this parameter specifies optional flags passed in to configure the behavior of this method. pass zero to specify no flags. arequestedcount wait until at least this many bytes can be written. this is only a suggestion to the underlying strea...
...becomes ready. this parameter may be null to clear an existing callback. aflags this parameter specifies optional flags passed in to configure the behavior of this method. pass zero to specify no flags. arequestedcount wait until at least this many bytes can be written. this is only a suggestion to the underlying stream; it may be ignored. the caller may pass zero to indicate no preference. aevent
target specify null to receive notification on any thread (possibly even recursively on the calling thread, that is synchronously), or specify that the notification be delivered to a specific event
target. closewithstatus() this method closes the stream and sets its internal status. if the stream is already closed, then this method is ignored. once the stream is closed, the stream's status cannot be ch...
nsIDNSService
e: 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. this is done by disabling ipv6 on backup connections. method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsievent
target alistener
target); void init(); obsolete since gecko 1.8 nsidnsrecord resolve(in autf8string ahostname, in unsigned long aflags); void shutdown(); obsolete since gecko 1.8 attributes attribute type description myhostname autf8string read only. constants resolve flag constants various flags that may be ored together to form the af...
...lve_disable_ipv6 (1 << 5) if this flag is set, only ipv4 addresses will be returned by asyncresolve() and resolve(). methods asyncresolve() begins off an asynchronous host lookup. a specified nsidnslistener is invoked when the resolution process is completed. ...
... (1 << 5) if this flag is set, only ipv4 addresses will be returned by asyncresolve() and resolve(). methods asyncresolve() begins off an asynchronous host lookup. a specified nsidnslistener is invoked when the resolution process is completed. ...
...ocess is completed. nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsievent
target alistener
target ); parameters ahostname the host name or ip-address-literal to resolve. aflags a bitwise or of the resolve flag constants. alistener the listener to be notified when the result is available. alistener
target optional parameter (may be null). if not null, this parameter specifies the nsievent
target of the thread on which the listener's onlookupcomplete should be called. if this parameter is null, then onlookupcomplete will be called on an unspecified thread (possibly recursively). return value an object that can be used to cancel the host lookup. init() obsolete since gecko 1.8 (...
nsIDocShell
boolean isbeingdestroyed(); void loadstream(in nsiinputstream astream, in nsiuri auri, in acstring acontenttype, in acstring acontentcharset, i...
... data into the document. setting this attribute overrides the encoding; however, to update the dom or display of the content, you need have the data reparsed. overriding the character set also sets the fallback encoding for the container frame. note: prior to gecko 12.0, this attribute was part of a separate nsidoccharset interface. chromeeventhandler nsidomevent
target events generated in the frame bubble up to its chromeeventhandler. in the case of a content frame or subframe this is the containing chrome frame. in the case of a chrome frame this is the same as the frame element. this attribute allows chrome to tie in to handle dom events that may be of interest to chrome. contentviewer nsicontentviewer content viewer that is currently loaded...
...ries ); parameters numentries the number of entries removed. native code only!internalload loads the given uri. this method is identical to loaduri() except that its parameter list is broken out instead of being packaged inside of an nsidocshellloadinfo object. void internalload( in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindow
target, in string atypehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest ); parameters auri the uri to load. areferrer referring uri. aowner owner (security principal) aflags a combination of the internal...
..., in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest ); parameters auri the uri to load. areferrer referring uri. aowner owner (security principal) aflags a combination of the internal load flags as detailed in the constants secion. awindow
target window
target for the load. atypehint a hint as to the content-type of the resulting data. may be null or empty if no hint. apostdatastream post data stream (if posting) aheadersstream stream containing "extra" request headers. aloadflags flags to modify load behaviour. flags are defined in nsiwebnavigation. ashentry active session history entry (if loa...
nsIUpdateItem
terface is obsolete; instead of using the extension manager, you should use the addon manager. method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring
targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item. read only. id astring the guid of the item. read only. installlocationkey astring the name of the install location where this item is installed. read only. maxappversion astring the maximum version of t...
... the maximum version of the application that this item works with, in fvf format. read only. minappversion astring the minimum version of the application that this item works with, in fvf format. read only. name astring the name of this item. read only. objectsource astring returns a js object source representing an nsiupdateitem. read only.
targetappid astring the
target application id used for checking compatibility for this item. note: add-ons can specify a
targetapplication id of toolkit@mozilla.org in their install manifest for compatibility with all apps using a specific release of the toolkit. read only. type long the type of this item. read only. updatekey astring the public key to verif...
...f type_plugin 0x10 methods init() initializes the object. void init( in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring
targetappid ); parameters id the item's guid. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible. maxappversion the maximum application version with which the item is compatible. name the item's name downloadurl the url from which the item is to b...
...ion with which the item is compatible. name the item's name downloadurl the url from which the item is to be downloaded. xpihash the string hash for the xpi file. iconurl the url of the icon that can be shown for the item. updateurl the url of the update rdf for the item. updatekey the public key to use to verify updates for the item. type the type of item; see item type constants.
targetappid the application id of the
target application. ...
nsIXULBrowserWindow
rowserwindow reference in the global xulbrowserwindow object accessible from javascript code. note: the xulbrowserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code. see the documentation for xulbrowserwindow for details. method overview astring onbeforelinktraversal(in astring original
target, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate
target into which to load the link. this may be used, for example, to redirect links into...
...n nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate
target into which to load the link. this may be used, for example, to redirect links into new tabs or windows when it's not desirable to replace the content in the current tab (such as when the link is clicked in an app tab). astring onbeforelinktraversal( in astring original
target, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters original
target the specified
target for the link. linkuri the uri of the link that is about to be traversed. linknode the nsidomnode representing the dom node in which the link is located. ...
...setjsdefaultstatus() sets the default status according to javascript's version of the default status. void setjsdefaultstatus( in astring status ); parameters status the status string. setjsstatus() sets the status according to javascript's version of the status. void setjsstatus( in astring status ); parameters status the status string. ...
...atus the status string. setjsstatus() sets the status according to javascript's version of the status. void setjsstatus( in astring status ); parameters status the status string. setoverlink() tells the object implementing this function what link we are currently over. void setoverlink( in astring link, in nsidomelement element ); parameters link the link string. element the currently
targeted link element. ...
XPCOM ABI
which fits all platforms and a dll (.dll on windows, .so on unix) which is platform-specific and has a certain abi. only applications which use this abi could use this xpcom component. to put it simply, an xpcom component built for a specific abi would only be compatible with firefox, thunderbird or other xulrunner application built for the same abi. ...
...o on unix) which is platform-specific and has a certain abi. only applications which use this abi could use this xpcom component. to put it simply, an xpcom component built for a specific abi would only be compatible with firefox, thunderbird or other xulrunner application built for the same abi. ...
... [
target_xpcom_abi] of the following format: {cpu_arch}-{
target_compiler_abi} {cpu_arch} [platforms] represents the cpu architecture and may be either: x86 - i386 and higher series (including x86-64 cpus in 32-bit mode) ppc - powerpc series alpha - alpha series x86_64 - amd64/emt64 series in 64-bit mode (32-bit mode is still considered x86) sparc - sparc series ia64 - itanium series {
target_compiler_abi}[platforms] represents the compiler abi and may be either: msvc - microsoft visual c++ n32 - irix 6 c++ compiler gcc2 - gnu c++ compiler 2.x gcc3 - gnu c++ compiler 3.x or 4.x sunc - sun c++ compiler ibmc - ibm c++ compiler for example: firefox built with the gnu c++ compiler 4.0.0 for the intel pentium processor would have xpcom abi of x86-gcc3 the xpcom abi string ca...
...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. it would still be a distinct abi, but we just wouldn't have a name for it. note: platforms this is not an exhaustive list of possible cpu architectures and compiler abis. newest information can always be found by exploring the build system. note:
target_xpcom_abi in the mozilla build system, the variable storing the xpcom abi is named
target_xpcom_abi. (this is an internals detail and should be of no concern to an extension developer.) extension installation when the application (e.g. firefox) is built, the name of the abi it supports is embedded into it. later on, it could use this value to check compatibility with third-party binary xpcom co...
AddressErrors - Web APIs
in one of a limited number of countries. function handleaddresschange(ev) { const validcountries = ["us", "ca", "gb", "jp", "cn", "mx"]; const genericaddresserror = "unable to ship to the given address. ...
...nericaddresserror = "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. complete example here we'll see a complete, working version of the example above (e...
...those we allow as shipping destinations. function handleaddresschange(ev) { const validcountries = ["us", "ca", "gb", "jp", "cn", "mx"]; const genericaddresserror = "unable to ship to the given address. ...
...nericaddresserror = "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); } the shippingaddresschange event doesn't receive the paymentrequest object directly, so we fetch it from the
target property of the event. if the request's s...
Attr - Web APIs
tattributenode()) or means of iterating return attr types. ...
...tenode()) or means of iterating return attr types. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
..."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 / thu...
AudioNode - Web APIs
ode 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/event
target"
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">event
target</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...="#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">event
target</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, th...
...th="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 event
target interface. description the audio routing graph each audionode has inputs and outputs, and multiple audio nodes are connected to build a processing graph. this graph is contained in an audiocontext, and each audio node can only belong to one audio context. a source node has zero inputs but one or multiple outputs, and can be used to generate sound. on the other hand, a destination node has n...
... an enumerated value describing the way channels must be matched between the node's inputs and outputs. audionode.channelinterpretation represents an enumerated value describing the meaning of the channels. this interpretation will define how audio up-mixing and down-mixing will happen. the possible values are "speakers" or "discrete". methods also implements methods from the interface event
target. audionode.connect() allows us to connect the output of this node to be input into another node, either as audio data or as the value of an audioparam. audionode.disconnect() allows us to disconnect the current node from another one it is already connected to. example this simple snippet of code shows the creation of some audio nodes, and how the audionode properties and methods can be u...
BluetoothDevice - Web APIs
h device inside a particular script execution environment. ...
... inside a particular script execution environment. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" fil...
... bluetoothdevice.name read only a domstring that provices a human-readable name for the device. bluetoothdevice.gatt read only a refer...
CharacterData - Web APIs
, comment, or processinginstruction which aren't abstract. ...
...t, or processinginstruction which aren't abstract. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...="#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="#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 ...
DataTransfer.dropEffect - Web APIs
when the datatransfer object is created, dropeffect is set to a string value. on getting, it returns its current value. ...
...opped. assigning any other value to dropeffect has no effect and the old value is retained. example this example shows the use of the dropeffect and effectallowed properties. 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 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. ...
...der: 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.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...
DataTransferItemList.DataTransferItem() - Web APIs
indicated by the list's length property, undefined is returned. the returned value is never null. example this example shows how to use drag and drop. 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 ((...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/ur...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getas...
...ction 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; } #
target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in ...
DataTransferItemList.length - Web APIs
e disabled if the item list's datatransfer object is not associated with a drag data store. example this example shows the use of the length property. 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 ((...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/ur...
...drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getas...
...ction 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; } #
target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specificatio...
DirectoryEntrySync - Web APIs
leentrysync represents a file in a file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the path supplied is invalid. not_found_err the path was structurally correct, but refers to a resource that does not exist. no_modification_allowed_err this is a permission issue. the
target directory or file is not writable. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ] type_mismatch_err...
...rysync represents a directory in a file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the path supplied is invalid. not_found_err the path was structurally correct, but refers to a resource that does not exist. no_modification_allowed_err this is a permission issue. the
target directory or file is not writable. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ] type_mismatch_err...
...e removed or if an error occurs while the deletion is in progress, some of the contents might not be deleted. catch these cases with error callbacks and retry the deletion. void removerecursively ( ) raises (fileexception); parameter none returns void exceptions this method can raise a fileexception with the following codes: exception description not_found_err the
target directory does not exist. invalid_state_err this directory is not longer valid for some reason other than being deleted. [todo: explain more ] no_modification_allowed_err one of the following is not writable: the directory, its parent directory, and some of the content in the directory. security_err the application does not have permission to access ...
...ectory does not exist. invalid_state_err this directory is not longer valid for some reason other than being deleted. [todo: explain more ] no_modification_allowed_err one of the following is not writable: the directory, its parent directory, and some of the content in the directory. security_err the application does not have permission to access the
target directory, its parent, or some of its contents. ...
Document.createTouch() - Web APIs
identifier the value for touch.identifier. pagex the value for touch.pagex. pagey the value for touch.pagey. screenx the value for touch.screenx. ...
... identifier the value for touch.identifier. pagex the value for touch.pagex. pagey the value for touch.pagey. screenx the value for touch.screenx. ...
... identifier the value for touch.identifier. pagex the value for touch.pagex. pagey the value for touch.pagey. screenx the value for touch.screenx. screeny the value for touch.screeny. ...
...for touch.radiusx. radiusy the value for touch.radiusy. rotationangle the value for touch.rotationangle. force the value for touch.force. return value touch a touch object configured as described by the input parameters. example this example illustrates using the document.createtouch() method to create touch objects. in following code snippet, two touch objects are created for the
target element. 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. recommendation initial definition. ...
DocumentFragment - Web APIs
flow) or incur any performance impact when changes are made. ...
... incur any performance impact when changes are made. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...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/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() cre...
DocumentType - Web APIs
menttype interface represents a node containing a doctype. ...
... interface represents a node containing a doctype. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" t...
...l="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype"
target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its p...
Element: mouseout event - Web APIs
ace mouseevent event handler property onmouseout examples the following examples show the use of the mouseout event. mouseout and mouseleave the following example illustrates the difference between mouseout and mouseleave events. the mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the
targeted element orange when the mouse exits it. when you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>. html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.geteleme...
...ourtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>. ...
...hierarchy of the items and the fact that list items obscure the underlying <ul>. ...
...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 specif...
FileSystemEntrySync - Web APIs
filesystementrysync an object that represents an entry in the file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the name supplied is invalid, because at least one of the characters is reserved or illegal. examples include a backslash (\), dot (.), and two dots (..). not_found_err the
target directory does not exist. invalid_modification_err you tried one of the following disallowed operations: moving an entry into its parent without changing its name moving a parent directory into one of its child directories. [todo: verify ] no_modification_allowed_err one of the following is not writable: the source entry, its parent direct...
...es not exist. invalid_modification_err you tried one of the following disallowed operations: moving an entry into its parent without changing its name moving a parent directory into one of its child directories. [todo: verify ] no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the
target directory. copyto() copy an entry to a different location on the file system. you cannot copy an entry inside itself if it is a directory, nor can you copy it into its parent without providing a new name. directory copies are always recursive—that is, all contents of the directory are copied. you cannot change this behavior. files are simply duplicated. void copyto ( in directoryentr...
...filesystementrysync an object that represents an entry in the file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the name supplied is invalid, because at least one of the characters is reserved or illegal. examples include a backslash (\), dot (.), and two dots (..). not_found_err the
target directory does not exist. invalid_modification_err you tried one of the following disallowed operations: moving an entry into its parent without changing its name moving a parent directory into one of its child directories. no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the ta...
... deletes a file or directory. you cannot delete an empty directory or the root directory of a file system. if you want to remove an empty directory, use removerecursively() instead. void remove ( ) raises (fileexception); parameter none returns void exceptions this method can raise a fileexception with the following codes: exception description not_found_err the
target directory does not exist. invalid_modification_err you tried to remove a directory that is not empty. if you want to remove an empty directory, use removerecursively() instead. no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the
target directory. getparent() look up the parent directoryentry...
FocusEvent - Web APIs
ed events, including focus, blur, focusin, and focusout. ...
...t="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" stro...
...="#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" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focus...
...monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-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. properties this interface also inherits properties from its parent uievent, and indirectly from event. focusevent.related
target is an event
target representing a secondary
target for this event. in some cases (such as when tabbing in or out a page), this property may be set to null for security reasons. methods this interface has no specific methods. it inherits methods from its parent uievent, and indirectly from event. specifications specification status comment ui eventsthe definition o...
GlobalEventHandlers.ondrag - Web APIs
a global event handler for the drag event. syntax var draghandler =
targetelement.ondrag; return value draghandler the drag event handler for element
targetelement. example this example includes the use of the ondrag attribute handler to set an element's drag event handler. ...
...dler for element
targetelement. example this example includes the use of the ondrag attribute handler to set an element's drag event handler. ...
...al 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.current
target.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>...
... living standard html 5.1the definition of 'ondrag' in that specification. recommendation initial definition ...
GlobalEventHandlers.ondragover - Web APIs
a global event handler for the dragover event. syntax var dragoverhandler =
targetelement.ondragover; return value dragoverhandler the dragover event handler for element
targetelement. example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler. ...
...r element
targetelement. example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler. ...
...al 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.current
target.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>...
... living standard html 5.1the definition of 'ondragover' in that specification. recommendation initial definition ...
GlobalEventHandlers.ondragstart - Web APIs
a global event handler for the dragstart event. syntax var dragstarthandler =
targetelement.ondragstart; return value dragstarthandler the dragstart event handler for element
targetelement. example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler. ...
...element
targetelement. example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler. ...
...al 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.current
target.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>...
... living standard html 5.1the definition of 'ondragstart' in that specification. recommendation initial definition ...
GlobalEventHandlers.ondrop - Web APIs
a global event handler for the drop event. syntax var drophandler =
targetelement.ondrop; return value drophandler the drop event handler for element
targetelement. example this example demonstrates the use of the ondrop attribute to define an element's drop event handler. ...
...ndler for element
targetelement. example this example demonstrates the use of the ondrop attribute to define an element's drop event handler. ...
...al 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.current
target.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>...
... living standard html 5.1the definition of 'ondrop' in that specification. recommendation initial definition ...
GlobalEventHandlers.onkeypress - Web APIs
the onkeypress property of the globaleventhandlers mixin is an eventhandler that processes keypress events. the keypress event should fire when the user presses a key on the keyboard. however, in practice browsers do not fire keypress events for certain keys. the onkeypress event handler has been deprecated. you may want to use onkeydown instead. syntax
target.onkeypress = functionref; value functionref is a function name or a function expression. the function receives a keyboardevent object as its sole argument. examples basic example this example logs the keyboardevent.code value whenever you press a key inside the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeyp...
...lowing 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... ...
... word "exit" in any point of a page. /* type the word "exit" in any point of your page... ...
...*/ alert("yesss!!!"); location.assign("https://developer.mozilla.org/"); } return true; ...
GlobalEventHandlers.onpointerleave - Web APIs
the global event handler for the pointerleave event, which is delivered to a node when the pointer (mouse cursor, fingertip, etc.) exits its hit test area (for example, if the cursor exits an element or window's content area). this event is part of the pointer events api. syntax event
target.onpointerleave = leavehandler; var leavehandler = event
target.onpointerleave; value leavehandler the eventlistener which will be invoked to handle pointerleave events sent to the
target. ...
...</div> </body> </html> see using pointer events for additional details. ...
...</div> </body> </html> see using pointer events for additional details. specifications specification status comment pointer events – level 2the definition of 'onpointerleave' in that specification. ...
...</div> </body> </html> see using pointer events for additional details. specifications specification status comment pointer events – level 2the definition of 'onpointerleave' in that specification. ...
File drag and drop - Web APIs
these steps are described below, including example code snippets. ...
...ag-and-drop repository (pull requests and/or issues are welcome). note: html drag and drop defines two different apis to support dragging and dropping files. one api is the datatransfer interface and the second api is the datatransferitem and datatransferitemlist interfaces. this example illustrates the use of both apis (and does not use any gecko specific interfaces). ...
... not use any gecko specific interfaces). define the drop zone the
target element of the drop event needs an ondrop global event handler. 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. ...
...de 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. in this example, the drop
target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } note that dragstart and dragend events are not fired when dragging a file into the browser from the os. process the drop the drop event is fired when the user drops the file(s). in the follow...
IDBTransaction - Web APIs
sactions. note: this feature is available in web workers. ...
.... note: this feature is available in web workers. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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...
...itted, or was aborted with theidbtransaction.abort() function. idbtransaction.mode read only the mode for isolating access to data in the object stores that are in the scope of the transaction. the default value is readonly. idbtransaction.objectstorenames read only returns a domstringlist of the names of idbobjectstore objects associated with the transaction. methods inherits from: event
target idbtransaction.abort() rolls back all the changes to objects in the database associated with this transaction. if this transaction has been aborted or completed, this method fires an error event. idbtransaction.objectstore() returns an idbobjectstore object representing an object store that is part of the scope of this transaction. idbtransaction.commit() for an active transaction, commit...
InputEvent - Web APIs
epresents an event notifying of editable content change. ...
...t="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" stro...
...="#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 inpu...
...the type of change for editable content such as, for example, inserting, deleting, or formatting text. see the property page for a complete list of input types. inputevent.iscomposingread only returns a boolean value indicating if the event is fired after compositionstart and before compositionend. methods this interface inherits methods from its parents, uievent and event. inputevent.get
targetranges() returns an array of static ranges that will be affected by a change to the dom if the input event is not canceled. specifications specification status comment input events level 2the definition of 'inputevent' in that specification. working draft ui eventsthe definition of 'inputevent' in that specification. working draft initial defin...
IntersectionObserver - Web APIs
the intersectionobserver interface of the intersection observer api provides a way to asynchronously observe changes in the intersection of a
target element with an ancestor element or with a top-level document's viewport. the ancestor element or viewport is referred to as the root. when an intersectionobserver is created, it's configured to watch for given ratios of visibility within the root. the configuration cannot be changed once the intersectionobserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple
target elements with the same observer. constructor intersectionobserver.intersectionobserver() creates a new intersectionobserver object which will execute a specified callback function whe...
... properties intersectionobserver.root read only the element or document whose bounds are used as the bounding box when testing for intersection. ...
...me as the one specified when calling the constructor as it may be changed to match internal requirements. each offset can be expressed in pixels (px) or as a percentage (%). the default is "0px 0px 0px 0px". intersectionobserver.thresholds read only a list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed
target. notifications for a
target are generated when any of the thresholds are crossed for that
target. if no value was passed to the constructor, 0 is used. methods intersectionobserver.disconnect() stops the intersectionobserver object from observing any
target. intersectionobserver.observe() tells the intersectionobserver a
target element to observe. intersectionobserver.takerecords() retu...
...ds are crossed for that
target. if no value was passed to the constructor, 0 is used. methods intersectionobserver.disconnect() stops the intersectionobserver object from observing any
target. intersectionobserver.observe() tells the intersectionobserver a
target element to observe. intersectionobserver.takerecords() returns an array of intersectionobserverentry objects for all observed
targets. intersectionobserver.unobserve() tells the intersectionobserver to stop observing a particular
target element. examples var intersectionobserver = new intersectionobserver(function(entries) { // if intersectionratio is 0, the
target is out of view // and we do not need to do anything. if (entries[0].intersectionratio <= 0) return; loaditems(10); console.log('loaded new items'); ...
IntersectionObserverEntry - Web APIs
the bounds are computed as described in the documentation for element.getboundingclientrect(). ...
...tween the
target element and its root container at a specific moment of transition. instances of intersectionobserverentry are delivered to an intersectionobserver callback in its entries parameter; otherwise, these objects can only be obtained by calling intersectionobserver.takerecords(). properties intersectionobserverentry.boundingclientrect read only returns the bounds rectangle of the
target element as a domrectreadonly. the bounds are computed as described in the documentation for element.getboundingclientrect(). intersectionobserverentry.intersectionratio read only returns the ratio of the intersectionrect to the boundingclientrect. intersectionobserverentry.intersectionrect read only returns a domrectreadonly representing the
target's visible area. intersectionobserverentry...
...ed in the documentation for element.getboundingclientrect(). intersectionobserverentry.intersectionratio read only returns the ratio of the intersectionrect to the boundingclientrect. intersectionobserverentry.intersectionrect read only returns a domrectreadonly representing the
target's visible area. intersectionobserverentry.isintersecting read only a boolean value which is true if the
target element intersects with the intersection observer's root. ...
... intersectionobserverentry.time read only a domhighrestimestamp indicating the time at which the intersection was recorded, relative to the intersectionobserver's time origin. methods this interface has no methods. ...
KeyboardEvent.key - Web APIs
key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout. try experimenting using the following two test cases: press and hold the shift key, then press 2 and release it. next, release the shift key. press and hold the shift key, then press and hold 2. release the shift key. finally, release 2. ...
...keyboard layout as compared to when we do so using a uk keyboard layout. try experimenting using the following two test cases: press and hold the shift key, then press 2 and release it. next, release the shift key. press and hold the shift key, then press and hold 2. release the shift key. finally, release 2. ...
...me="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; padding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-
target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-
target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { ...
... event of the key 2 key press is now "2" because the modifier shift key is no longer active. the same goes for the inputevent.data property of the beforeinput and input events. as we finally release the key 2, a keyup event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer active. example this example uses event
target.addeventlistener() to listen for keydown events. when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet). window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothin...
MSSiteModeEvent - Web APIs
generic event that the createevent method created. *note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated. preventdefault cancels the default action of an event. stopimmediatepropagation prevents any further propagation of an event. stoppropagation prevents propagation of an event beyond the current
target. properties property description actionurl gets the url of a jump list item that is removed. *this property is not supported for windows store apps using javascript. bubbles gets a value that indicates whether an event propagates up from the event
target. buttonid gets the thumbnail toolbar button id that is clicked. *this property is no...
... defaultprevented gets a value that indicates whether the default action should be canceled. eventphase gets the event phase that is being evaluated. istrusted gets a value that indicates whether a trusted event source created an event. ...
... buttonid gets the thumbnail toolbar button id that is clicked. *this property is not supported for windows store apps using javascript. cancelable gets a value that indicates whether you can cancel an event's default action. cancelbubble gets or sets a value that indicates whether an event should be stopped from propagating up from the current
target. current
target gets the event
target that is currently being processed. defaultprevented gets a value that indicates whether the default action should be canceled. eventphase gets the event phase that is being evaluated. istrusted gets a value that indicates whether a trusted event source created an event. srcelement gets the element that the event was original...
...t is currently being processed. defaultprevented gets a value that indicates whether the default action should be canceled. eventphase gets the event phase that is being evaluated. istrusted gets a value that indicates whether a trusted event source created an event. srcelement gets the element that the event was originally dispatched to. compare to
target.
target gets the element that is the
target of the event. timestamp gets the time, in milliseconds, when an event occurred. type gets the name of an event. although this event inherits from the event object, it cannot be created by using createevent. example interface mssitemodeevent extends event { buttonid: number; actionurl: string; } declar...
MediaSource - Web APIs
ched to a htmlmediaelement to be played in the user agent. ...
...a htmlmediaelement to be played in the user agent. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="#...
...ream() (ended.) mediasource.duration gets and sets the duration of the current media being presented. event handlers mediasource.onsourceclose the event handler for the sourceclose event. mediasource.onsourceended the event handler for the sourceended event. mediasource.onsourceopen the event handler for the sourceopen event. methods inherits methods from its parent interface, event
target. mediasource.addsourcebuffer() creates a new sourcebuffer of the given mime type and adds it to the mediasource.sourcebuffers list. mediasource.clearliveseekablerange() clears a seekable range previously set with a call to setliveseekablerange(). mediasource.endofstream() signals the end of the stream. mediasource.removesourcebuffer() removes the given sourcebuffer from the mediasource.
MutationObserver.observe() - Web APIs
callback to begin receiving notifications of changes to the dom that match the given options. depending on the configuration, the observer may watch a single node in the dom tree, or that node and some or all of its descendant nodes. to stop the mutationobserver (so that none of its callbacks will be triggered any longer), call mutationobserver.disconnect(). syntax mutationobserver.observe(
target, options) parameters
target a dom node (which may be an element) within the dom tree to watch for changes, or to be the root of a subtree of nodes to be watched. options a mutationobserverinit object providing options that describe which dom mutations should be reported to mutationobserver’s callback. return value undefined. exceptions typeerror thrown in any of the following ci...
...onitored). usage notes reusing mutationobservers you can call observe() multiple times on the same mutationobserver to watch for changes to different parts of the dom tree and/or different types of changes. there are some caveats to note: if you call observe() on a node that's already being observed by the same mutationobserver, all existing observers are automatically removed from all
targets being observed before the new observer is activated. if the same mutationobserver is not already in use on the
target, then the existing observers are left alone and the new one is added. observation follows nodes when disconnected mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed. if...
...onitoring the moved node or subtree for changes. 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. ...
... changes that occur, you should be able to "undo" the changes, rewinding the dom back to its initial state. example in this example, we demonstrate how to call the method observe() on an instance of mutationobserver, once it has been set up, passing it a
target element and a mutationobserverinit options object. ...
MutationObserverInit.attributes - Web APIs
u can expand the capabilities of attribute mutation monitoring using other options: attributefilter lets you specify specific attribute names to monitor instead of monitoring all attributes. attributeoldvalue lets you specify whether or not you want the previous value of changed attributes to be included in the mutationrecord's oldvalue property. subtree lets you specify whether to watch the
target node and all of its descendants (true), or just the
target node (false). if you set either attributefilter or attributeoldvalue to true, attributes is automatically assumed to be true, even if you don't expressly set it as such. example in this example, a mutation observer is set up to watch for changes to the status and username attributes in any elements contained within a subtree that disp...
...lays the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline. ...
...mark them as away from keyboard (afk) or offline. 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: 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. for any items representing an attribute change (which can be detected...
...ich will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects. 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). when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutation record will include the oldvalue property specifying the attribute's previous value. specifications specification status comment domthe d...
OfflineAudioContext - Web APIs
fast as it can, and outputs the result to an audiobuffer. ...
... it can, and outputs the result to an audiobuffer. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="#4d...
...ke="#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/web/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.
SVGEvent - Web APIs
type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
... type read only domstring the type of event. ...
SourceBuffer - Web APIs
ect. this can be made up of one or several media segments. ...
...s can be made up of one or several media segments. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="...
...pdating changes from true to false. this event is fired before onupdateend. sourcebuffer.onupdateend fired whenever sourcebuffer.appendbuffer() method or the sourcebuffer.remove() has ended. this event is fired after onupdate. sourcebuffer.onupdatestart fired whenever the value of sourcebuffer.updating transitions from false to true. methods inherits methods from its parent interface, event
target. sourcebuffer.abort() aborts the current segment and resets the segment parser. sourcebuffer.appendbuffer() appends media segment data from an arraybuffer or arraybufferview object to the sourcebuffer. sourcebuffer.appendbufferasync() starts the process of asynchronously appending the specified buffer to the sourcebuffer. returns a promise which is fulfilled once the buffer has been app...
SourceBufferList - Web APIs
ator (i.e. []) or functions such as foreach() for example. ...
...e. []) or functions such as foreach() for example. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" fi...
...#0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list. event handlers sourcebufferlist.onaddsourcebuffer the event handler for the addsourcebuffer event. sourcebufferlist.onremovesourcebuffer the event handler for the removesourcebuffer event. methods inherits methods from its parent interface, event
target. sourcebufferlist: indexed property getter this getter allows the sourcebuffer objects in the list to be accessed with an array operator (i.e. [].) examples tbd. specifications specification status comment media source extensionsthe definition of 'sourcebufferlist' in that specification. recommendation initial definition. ...
TouchList.item() - Web APIs
index the index of the touch object to retrieve. the index is a number in the range of 0 to one less than the length of the touchlist. return value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
...object to retrieve. the index is a number in the range of 0 to one less than the length of the touchlist. return value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
...etrieve. the index is a number in the range of 0 to one less than the length of the touchlist. return value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
... value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property.
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 comment touch events – level 2 draft non-stable version. ...
TouchList.length - Web APIs
the length read-only property indicates the number of items (touch points) in a given touchlist. syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
... the length read-only property indicates the number of items (touch points) in a given touchlist. syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
... the length read-only property indicates the number of items (touch points) in a given touchlist. syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
...n a given touchlist. syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist. example this code example illustrates the use of the touchlist interface's item method and the length property.
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 comment touch events – level 2 draft non-stable version. ...
WebGL2RenderingContext.getBufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...tional a gluint specifying the element index offset where to start reading the buffer. length optional a gluint defaulting to 0. return value none. exceptions an invalid_value error is generated if: offset + returneddata.bytelength would extend beyond the end of the buffer returneddata is null offset is less than zero. an invalid_operation error is generated if: zero is bound to
target target is transform_feedback_buffer, and any transform feedback object is currently active. examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.getbuffersubdata(gl.array_buffer, 0, arrbuffer); specific...
WebGLRenderingContext.bindBuffer() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. ...
...rom one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. buffer a webglbuffer to bind. return value none. exceptions only one
target can be bound to a given webglbuffer. an attempt to bind the buffer to another
target will throw an invalid_operation error and the current buffer binding will remain the same. a webglbuffer which has been marked for deletion with deletebuffer cannot be (re-)bound. an attempt to do so will generate an invalid_operation error, and the current binding will remain untouched. examples binding a buf...
...ound to a given webglbuffer. an attempt to bind the buffer to another
target will throw an invalid_operation error and the current buffer binding will remain the same. a webglbuffer which has been marked for deletion with deletebuffer cannot be (re-)bound. an attempt to do so will generate an invalid_operation error, and the current binding will remain untouched. examples binding a buffer to a
target var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); getting current bindings to check the current buffer bindings, query the array_buffer_binding and element_array_buffer_binding constants. gl.getparameter(gl.array_buffer_binding); gl.getparameter(gl.element_array_buffer_binding); spec...
... webgl 1.0the definition of 'bindbuffer' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of 'glbindbuffer' in that specification. standard man page of the (similar) opengl es 2 api. webgl 2.0the definition of 'bindbuffer' in that specification. editor's draft updated definition for webgl 2. adds new
target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer opengl es 3.0the definition of 'glbindbuffer' in that specification. standard man page of the (similar) opengl es 3 api. ...
WebGLRenderingContext - Web APIs
maskseparate() controls enabling and disabling of front and/or back writing of individual bits in the stencil planes. webglrenderingcontext.stencilop() sets both the front and back-facing stencil test actions. webglrenderingcontext.stencilopseparate() sets the front and/or back-facing stencil test actions. buffers webglrenderingcontext.bindbuffer() binds a webglbuffer object to a given
target. webglrenderingcontext.bufferdata() updates buffer data. webglrenderingcontext.buffersubdata() updates buffer data starting at a passed offset. webglrenderingcontext.createbuffer() creates a webglbuffer object. webglrenderingcontext.deletebuffer() deletes a webglbuffer object. webglrenderingcontext.getbufferparameter() returns information about the buffer. webglrenderingcontext.isbuffe...
...text.createbuffer() creates a webglbuffer object. webglrenderingcontext.deletebuffer() deletes a webglbuffer object. webglrenderingcontext.getbufferparameter() returns information about the buffer. webglrenderingcontext.isbuffer() returns a boolean indicating if the passed buffer is valid. framebuffers webglrenderingcontext.bindframebuffer() binds a webglframebuffer object to a given
target. webglrenderingcontext.checkframebufferstatus() returns the status of the framebuffer. webglrenderingcontext.createframebuffer() creates a webglframebuffer object. webglrenderingcontext.deleteframebuffer() deletes a webglframebuffer object. webglrenderingcontext.framebufferrenderbuffer() attaches a webglrenderingbuffer object to a webglframebuffer object. webglrenderingcontext.framebuffe...
...ngcontext.getframebufferattachmentparameter() returns information about the framebuffer. webglrenderingcontext.isframebuffer() returns a boolean indicating if the passed webglframebuffer object is valid. webglrenderingcontext.readpixels() reads a block of pixels from the webglframebuffer. renderbuffers webglrenderingcontext.bindrenderbuffer() binds a webglrenderbuffer object to a given
target. webglrenderingcontext.createrenderbuffer() creates a webglrenderbuffer object. webglrenderingcontext.deleterenderbuffer() deletes a webglrenderbuffer object. webglrenderingcontext.getrenderbufferparameter() returns information about the renderbuffer. webglrenderingcontext.isrenderbuffer() returns a boolean indicating if the passed webglrenderingbuffer is valid. webglrenderingcontext.ren...
...nderbuffer object. webglrenderingcontext.getrenderbufferparameter() returns information about the renderbuffer. webglrenderingcontext.isrenderbuffer() returns a boolean indicating if the passed webglrenderingbuffer is valid. webglrenderingcontext.renderbufferstorage() creates a renderbuffer data store. textures webglrenderingcontext.bindtexture() binds a webgltexture object to a given
target. webglrenderingcontext.compressedteximage2d() specifies a 2d texture image in a compressed format. webglrenderingcontext.compressedtexsubimage2d() specifies a 2d texture sub-image in a compressed format. webglrenderingcontext.copyteximage2d() copies a 2d texture image. webglrenderingcontext.copytexsubimage2d() copies a 2d texture sub-image. webglrenderingcontext.createtexture() creates ...
XRInputSourceEvent.frame - Web APIs
to get the relative positions of the objects in the scene at the time the event occurred. however, since the event frame isn't an animation frame, there is no viewer pose available to represent the viewer's current point of view; the results of calling getviewerpose() will be an xrviewerpose with an empty views list. ...
... however, since the event frame isn't an animation frame, there is no viewer pose available to represent the viewer's current point of view; the results of calling getviewerpose() will be an xrviewerpose with an empty views list. examples this code shows a handler for the selectstart event which gets the
target ray's pose from the frame, mapping the pose representing the ray (event.inputsource.
targetrayspace) to the overall reference space myrefspace. ...
...epresent the viewer's current point of view; the results of calling getviewerpose() will be an xrviewerpose with an empty views list. examples this code shows a handler for the selectstart event which gets the
target ray's pose from the frame, mapping the pose representing the ray (event.inputsource.
targetrayspace) to the overall reference space myrefspace. then, if the result isn't null, the
target ray pose's transform is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered. ...
...ch gets the
target ray's pose from the frame, mapping the pose representing the ray (event.inputsource.
targetrayspace) to the overall reference space myrefspace. then, if the result isn't null, the
target ray pose's transform is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered. xrsession.onselectstart = event => { let
targetraypose = event.frame.getpose(event.inputsource.
targetrayspace, myrefspace); if (
targetraypose) { checkandhandlehit(
targetraypose.transform); } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification. working draft initial definition. ...
Using the link role - Accessibility
e it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology. this is a huge amount of work just to recreate something you've get for free using the <a> element, so you should really use that if possible. but this shows that it can be done. you should however note that there are still problems with this approach: it is very difficult to detect whether the
target of the fake link has been visited before, and therefore use :visited styles (e.g. the default purple color for visited links). opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. html <h1>role="link" example</h1> <span data-href="http...
... open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. ...
...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 const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.
target != null ? ...
...">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 const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.
target != null ? ...
animation - CSS: Cascading Style Sheets
: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3a
target%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c...
...%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3a
target%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c...
...d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3a
target%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c...
...s. values <single-animation-iteration-count> the number of times the animation is played. the value must be one of those available in animation-iteration-count. <single-animation-direction> the direction in which the animation is played. the value must be one of those available in animation-direction. <single-animation-fill-mode> determines how styles should be applied to the animation's
target before and after its execution. the value must be one of those available in animation-fill-mode. <single-animation-play-state> determines whether the animation is playing or not. the value must be one of those available in animation-play-state. accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity ...
Event reference
a pointing device is rotated in any direction. drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms). dragend a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter a dragged element or text selection enters a valid drop
target. dragstart the user starts dragging an element or text selection. dragleave a dragged element or text selection leaves a valid drop
target. dragover an element or text selection is being dragged over a valid drop
target (fired continuously every 350ms). drop an element is dropped on a valid drop
target. media events event name ...
... a change happened in the document (use mutation observers instead). drag dragevent html5 an element or text selection is being dragged (every 350ms). dragend dragevent html5 a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter dragevent html5 a dragged element or text selection enters a valid drop
target. dragleave dragevent html5 a dragged element or text selection leaves a valid drop
target. dragover dragevent html5 an element or text selection is being dragged over a valid drop
target (fires every 350ms). dragstart dragevent html5 the user starts dragging an element or text selection. drop dragevent html5 an element is dro...
... durationchange event html5 media the duration attribute has been updated. emptied event html5 media the media has become empty. for example, this event is triggered if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ...
...sent when a <meta> element is added to, removed from, or changed in the browser <iframe>'s content. mozbrowseropensearch firefox os browser api-specific sent when a link to a search engine is found. mozbrowseropentab firefox os browser api-specific sent when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link
target in a new tab (for example ctrl/cmd + click.) mozbrowseropenwindow firefox os browser api-specific sent when window.open() is called within a browser iframe. mozbrowserresize firefox os browser api-specific sent when the browser <iframe>'s window size has changed. mozbrowserscroll firefox os browser api-specific sent when the browser <iframe...
<area> - HTML: Hypertext Markup Language
e circle and r is a value for the radius. poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on. the values are numbers of css pixels. download this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. see <a> for a full description of the download attribute. href the hyperlink
target for the area. its value is a valid url. this attribute may be omitted; if so, the <area> element does not represent a hyperlink. hreflang indicates the language of the linked resource. allowed values are determined by bcp47. use this attribute only if the href attribute is present. ping contains a space-separated list of urls to which, when the hyperlink is followed, post requests with the bo...
...avigations on the same origin will include the referrer's path. "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel for anchors containing the href attribute, this attribute specifies the relationship of the
target object to the link object. the value is a space-separated list of link types values. the values and their semantics will be registered by some authority that might have meaning to the document author. the default relationship, if no other is given, is void. use this attribute only if the href attribute is present. shape the shape of the associated hot spot. the specifications for html defines t...
...ot spot. the specifications for html defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes. many browsers, notably internet explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape, but these values are non-standard.
target a keyword or author-defined name of the browsing context to display the linked resource. the following keywords have special meanings: _self (default): show the resource in the current browsing context. _blank: show the resource in a new, unnamed browsing context. _parent: show the resource in the parent browsing context of the current one, if the current page is inside a frame. if ther...
...e, if the current page is inside a frame. if there is no parent, acts the same as _self. _top: show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). if there is no parent, acts the same as _self. use this attribute only if the href attribute is present. note: in newer browser versions (e.g. firefox 79+) setting
target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener". deprecated attributes name define a names for the clickable area so that it can be scripted by older browsers. nohref indicates that no hyperlink exists for the associated area. note: since html5, omitting the href attribute is sufficient. tabindex a numeric value specifying...
<input type="image"> - HTML: Hypertext Markup Language
tored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, form
target idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt...
...ernate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission form
target a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image canno...
...a at all. this attribute is also available on <input type="submit"> and <button> elements. formnovalidate a boolean attribute which, if present, specifies that the form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="submit"> and <button> elements. form
target a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab, window, or <iframe>. a value specified here overrides any
target given by the
target attribute on the <form> that owns this input. in addition to the actual names of tabs, windows, or inline frames, there a...
.... use this method when the form has no side-effects and contains only ascii characters. if specified, this attribute overrides the method attribute of the element's form owner. formnovalidate html5 a boolean attribute specifying that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the element's form owner. form
target html5 a name or keyword indicating where to display the response that is received after submitting the form. this is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). if this attribute is specified, it overrides the
target attribute of the element's form owner. the following keywords have special meanings: _self: load the response into the same browsi...
<p>: The Paragraph element - HTML: Hypertext Markup Language
screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim c...
...screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users ski...
...screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around. using empty <p>...
...screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around. using empty <p> elements to add space between paragraphs ...
handler.get() - JavaScript
the handler.get() method is a trap for getting a property value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { get: function(
target, property, receiver) { } }); parameters the following parameters are passed to the get() method. this is bound to the handler.
target the
target object. property the name or symbol of the property to get. receiver either the proxy or an object that inherits from the proxy. return value the get() method can return any value. description the handler.get() method is a trap for getting a property value. interceptions this trap ca...
...t() method is a trap for getting a property value. interceptions this trap can intercept these operations: property access: proxy[foo]and proxy.bar inherited property access: object.create(proxy)[foo] reflect.get() invariants if the following invariants are violated, the proxy will throw a typeerror: the value reported for a property must be the same as the value of the corresponding
target object property if the
target object property is a non-writable, non-configurable own data property. the value reported for a property must be undefined if the corresponding
target object property is a non-configurable own accessor property that has undefined as its [[get]] attribute. examples trap for getting a property value the following code traps getting a property value. const p = new...
...t object property is a non-writable, non-configurable own data property. the value reported for a property must be undefined if the corresponding
target object property is a non-configurable own accessor property that has undefined as its [[get]] attribute. examples trap for getting a property value the following code traps getting a property value. 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. ...
...ew 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. const obj = {}; object.defineproperty(obj, 'a', { configurable: false, enumerable: false, value: 10, writable: false }); const p = new proxy(obj, { get: function(
target, property) { return 20; } }); p.a; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[get]]' in that specification. ...
handler.has() - JavaScript
the handler.has() method is a trap for the in operator. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { has: function(
target, prop) { } }); parameters the following parameters are passed to has() method. this is bound to the handler.
target the
target object. prop the name or symbol of the property to check for existence. return value the has() method must return a boolean value. description the handler.has() method is a trap for the in operator. interceptions this trap can intercept these operations: property query: foo in proxy inherited property query: f...
...perator. ...
...herited property query: foo in object.create(proxy) with check: with(proxy) { (foo); } reflect.has() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be reported as non-existent, if it exists as a non-configurable own property of the
target object. a property cannot be reported as non-existent, if it exists as an own property of the
target object and the
target object is not extensible. examples trapping the in operator the following code traps the in operator. 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. const obj = { a: 10 }; object.preven...
...rapping the in operator the following code traps the in operator. 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. const obj = { a: 10 }; object.preventextensions(obj); const p = new proxy(obj, { has: function(
target, prop) { return false; } }); 'a' in p; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[hasproperty]]' in that specification. ...
handler.preventExtensions() - JavaScript
the handler.preventextensions() method is a trap for object.preventextensions(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { preventextensions: function(
target) { } }); parameters the following parameter is passed to the preventextensions() method. this is bound to the handler.
target the
target object. return value the preventextensions() method must return a boolean value. description the handler.preventextensions() method is a trap for object.preventextensions(). interceptions this trap can intercept these operations: object.preventextensions() reflect...
...ons: object.preventextensions() reflect.preventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of preventextensions the following code traps object.preventextensions(). ...
...invariants if the following invariants are violated, the proxy will throw a typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of preventextensions the following code traps object.preventextensions(). ...
... traps object.preventextensions(). 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. const p = new proxy({}, { preventextensions: function(
target) { return true; } }); object.preventextensions(p); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[preventextensions]]' in that specification. ...
handler.set() - JavaScript
the handler.set() method is a trap for setting a property value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { set: function(
target, property, value, receiver) { } }); parameters the following parameters are passed to the set() method. this is bound to the handler.
target the
target object. property the name or symbol of the property to set. value the new value of the property to set. receiver the object to which the assignment was originally directed. this is usually the proxy itself. but a set() handler can also be called indirectly, via the prototype chai...
...ng property value. interceptions this trap can intercept these operations: property assignment: proxy[foo] = bar and proxy.foo = bar inherited property assignment: object.create(proxy)[foo] = bar reflect.set() invariants if the following invariants are violated, the proxy will throw a typeerror: cannot change the value of a property to be different from the value of the corresponding
target object property if the corresponding
target object property is a non-writable, non-configurable data property. cannot set the value of a property if the corresponding
target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set() handler will throw a typeerror exception. examples trap setting of ...
... cannot set the value of a property if the corresponding
target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set() handler will throw a typeerror exception. examples trap setting of a property value the following code traps setting a property value. ...
...f the corresponding
target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set() handler will throw a typeerror exception. examples trap setting of a property value the following code traps setting a property value. 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. ...
WeakRef() constructor - JavaScript
examples creating a new weakref object see the main weakref page for a complete example. ...
... examples creating a new weakref object see the main weakref page for a complete example. ...
... examples creating a new weakref object see the main weakref page for a complete example. ...
... examples creating a new weakref object see the main weakref page for a complete example. ...
this - JavaScript
de effects.) as a dom event handler when a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()). ...
...ndler when a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()). ...
... a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()). ...
... set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()). ...
Digital audio concepts - Web media technologies
l minimize the compressed size of the audio while maximizing the percieved fidelity of the sound. an algorithm employing psychoacoustics may use any of the techniques mentioned here, and will almost certainly apply others as well. all of this means there is a fundamental question that has to be asked and answered before choosing a codec: given the content of the sound, the usage context, and the
target audience, is it acceptable to lose some degree of audio fidelity, and if so, how much; or is it necessary that, upon decoding the data, the result be identical to the source audio? lossy vs lossless compression if loss of detail and potentially fidelity is unacceptable or undesirable, a lossless codec is preferred. on the other hand, if some degree of reduction of audio fidelity is okay, a loss...
...article, but it is useful to have a general idea of how audio gets compressed by common algorithms can help understand and make better decisions about audio codec selection. lossy compression algorithms generally use psychoacoustics to determine which components of an audio waveform can be lost or subdued in some way that can improve compression ratios while minimizing the audible effect for the
target listeners. by manipulating the waveform to make it easier to compress, or by removing components of the sound that aren't really heard, the waveform becomes simpler, resulting in data which has more consistency and is therefore easier to compress. restricting the audio bandwidth to include only the frequencies most important to how the human ear will interpret the decoded sound can also improve c...
...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. bit rate there are two mutually-exclusive ways to control the quality of the compressed audio using the bit rate. the first involves
targeting an average bit rate for the encoded data, while the second involves specifying a constant quality value to
target while allowing the bit rate to vary. average bit rate the first method for controlling the quality of the output file is to specify the average bit rate (abr) to
target when encoding the audio. the encoder will attempt to produce an encoded sound file that, when playing it back, ...
...oding the audio. the encoder will attempt to produce an encoded sound file that, when playing it back, uses, on average, the specified number of bits for each second of audio. this controls quality from the perspective of the encoded audio size; the higher the bit rate, the higher the resulting audio quality will be. the quality of the audio will fluctuate over time as needed in order to meet the
targeted bit rate. somewhat similar to abr is cbr (constant bit rate). where abr attempts to keep the bit rate on average at a given level, while allowing some fluctuation, cbr uses an actually fixed bit rate for the duration of the audio. cbr is primarily used in codecs designed for voice-only purposes, where the frequency range and variation tends to be minimal, allowing cbr encoding to work without ...
Performance fundamentals - Web Performance
an use to test and improve it. what is performance? ultimately, user-perceived performance is the only performance that matters. users provide inputs to the system through touch, movement, and speech. in return, they perceive outputs through sight, touch, and hearing. performance is the quality of system outputs in response to user inputs. all other things being equal, code optimized for some
target besides user-perceived performance (hereafter upp) loses when competing against code optimized for upp. users prefer, say, a responsive, smooth app that only processes 1,000 database transactions per second, over a choppy, unresponsive app that processes 100,000,000 per second. of course, it's by no means pointless to optimize other metrics, but real upp
targets come first. the next few subsecti...
...o's graphics pipeline is highly optimized to render common animations efficiently. common-case animations are "offloaded" to the system compositor, which can render them in a performant, power-efficient fashion. an app's startup performance matters just as much as its runtime performance. gecko is optimized to load a wide variety of content efficiently: the entire web! many years of improvements
targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox. application performance this section is intended for developers asking the question: "how can i make my app fast"? startup performance application startup is punctuated by three user-perceived events...
... a guide as to how. framerate the first important thing for high framerate is to choose the right tool. use html and css to implement content that's mostly static, scrolled, and infrequently animated. use canvas to implement highly dynamic content, like games that need tight control over rendering and don't need theming. for content drawn using canvas, it's up to the developer to hit framerate
targets: they have direct control over what's drawn. for html and css content, the path to high framerate is to use the right primitives. firefox is highly optimized to scroll arbitrary content; this is usually not a concern. but often trading some generality and quality for speed, such as using a static rendering instead of a css radial gradient, can push scrolling framerate over a
target. css media q...
...s in css along with the rest of your app's look-and-feel, using a standardized syntax. css animations give you very granular control over your effects using keyframes, and you can even watch events fired during the animation process in order to handle other tasks that need to be performed at set points in the animation process. you can easily trigger these animations with the :hover, :focus, or :
target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of ...
Progressive loading - Progressive web apps (PWAs)
about optimizing the image loading using javascript. we'll expain this below. placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript. the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to
target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure. the placeholder image is scaled the same way the original images are, so it will take up the same space and not cause the layout to repaint as the images load. loading via javascri...
...still loads all the images at once, even though the user will only see the first two or three upon page load. this problem can be solved with the new intersection observer api — using this we can ensure that images will be loaded only when they appear in the viewport. ...
...ement to the previously working example — intersection observer will load
target images only when the user scrolls down, causing them to display in the viewport. here's what the relevant code looks like: if('intersectionobserver' in window) { const observer = new intersectionobserver((items, observer) => { items.foreach((item) => { if(item.isintersecting) { loadimages(item.
target); observer.unobserve(item.
target); } }); }); imagestoload.foreach((img) => { observer.observe(img); }); } else { imagestoload.foreach((img) => { loadimages(img); }); } if the intersectionobserver object is supported, the app creates a new instance of it. the function passed as a parameter is handling the case when one or more items are intersecting with the ob...
...e more basic approach covered earlier. improvements remember that there are many ways to optimize loading times, and this example is exploring only one of the approaches. you could try to make your apps more bulletproof by making them work without javascript — either using <noscript> to show the image with final src already assigned, or by wrapping <img> tags with <a> elements pointing at the
target images, so the user can click and access them when desired. we won't do that because the app itself is dependent on javascript — without it, the list of games wouldn't even be loaded, and the service worker code wouldn't be executed. we could rewrite the loading process to load not only the images, but the complete items consisting of full descriptions and links. it would work like an infinit...
begin - SVG: Scalable Vector Graphics
in <offset-value> can be appended. <wallclock-sync-value> this value defines the animation start time as a real-world clock time. a valid wallclock-sync-value consists of the function wallclock() with a time value as parameter. the time syntax is based upon the syntax defined in iso 8601. ...
...fines the animation start time as a real-world clock time. a valid wallclock-sync-value consists of the function wallclock() with a time value as parameter. the time syntax is based upon the syntax defined in iso 8601. indefinite the begin of the animation will be determined by a beginelement() method call or a hyperlink
targeted to the element. discard for <discard>, begin defines when the
target element will be discarded. ...
...t() method call or a hyperlink
targeted to the element. discard for <discard>, begin defines when the
target element will be discarded. the <discard> element has an implicit simple duration of indefinite. as soon as the element's active duration starts, the element identified by the href attribute is discarded. the behavior is the same as if node.removechild() were called on the parent of the
target element with the
target element as parameter. after removal of the
target element, the <discard> element is no longer useful, therefore it is also discarded after the
target element's removal. if the href attribute has an invalid url reference (e.g. the
target element did not exist), the <discard> element itself is still removed after the activation. seeking backwards in the timeline doesn't re...
... not exist), the <discard> element itself is still removed after the activation. seeking backwards in the timeline doesn't re-insert the discarded elements. so, authors are encouraged to set the playbackorder attribute to forwardonly when using the <discard> element. the <discard> element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own
target element. value <begin-value-list> default value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements. 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"...
HTML to DOM - Archive of obsolete content
vigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.original
target; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using ...
...) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file. the most interesting piece of code here is the domcontentloaded event listener we define for the element. ...
... with that code, we obtain a reference to the iframe element we declared in the .xul file. the most interesting piece of code here is the domcontentloaded event listener we define for the element. let's take a look at the donkeyfire.donkeybrowser_onpageload() handler: donkeybrowser_onpageload: function(aevent) { var doc = aevent.original
target; var url = doc.location.href; if (aevent.original
target.nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df] url = "+url+"\n"); var text = doc.evaluate("/html/body/h1",doc,null,xpathresult.string_type,null).stringvalue; dump("[df] text in /html/body/h1 = "+text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we can even evaluate xpath expressions. in the exampl...
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
ugger can be a good way to learn about design methods. installing this is bundled with the mozilla suite and the current version of seamonkey, but it needs to be installed as an extension in firefox. see https://addons.mozilla.org/firefox/216/. install the extension in firefox directly from the above url and relaunch firefox. starting up select “javascript debugger” from the tools menu.
targeting javascript for debugging. when venkman first launches, it can only debug the file currently open in your web browser. this is because a lot of javascript files can slow down the browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions. uncheck the “exclude browser files” menu item under the debug menu (figure 1). fixme: fig...
...ough it. use step over to avoid a function, and step into to always call it; once you are done investigating a function, use step out, and then you can step into the next function. set breakpoints in locations of interest where you’re not sure what’s going on, and the next time you run it, use continue to shift to that location and start investigating again. fixme: figure 4: adding a watch
target mozunit mozunit is a tool for javascript that assists with unit testing. it provides an ui similar to that of eclipse’s junit test runner. it should be very easy for java programmers to get up to speed on it quickly. installing mozunit is a feature of mozlab. install mozlab from the following url and relaunch firefox. http://hyperstruct.net/projects/mozunit after relaunching, set up the e...
...type = { init: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case. first, select the menu item tools:mozlab:open mozunit runner to bring up the mozunit window. select the menu item file:new, and save test_calc.js in the same directory as the file that is the test
target. next, click the edit button to set up the “2 1+” test case (listing 2). note that in this file, the method names serve as the test names. in junit and similar packages, methods containing tests that start with testhoge are recognized as tests. mozunit uses the same kind of notation, but you can also make the string the method name, making the test self-documenting. pretty clever. listing 2...
Appendix D: Loading Scripts - Archive of obsolete content
ents.utils.getglobalforobject({}); else // gecko 1.x context = {}.__parent__; loadscript("script.js", context); the sub-script loader the mozijssubscriptloader can be used to load local scripts from the chrome:, resource:, and file: protocols into any javascript object. any new globals created by this script are defined as properties of this object. ...
...loader the mozijssubscriptloader can be used to load local scripts from the chrome:, resource:, and file: protocols into any javascript object. any new globals created by this script are defined as properties of this object. additionally, any properties of the
target object are available as variables in the script's global namespace, along with as any properties of the global associated with the
target object. these scripts execute with the same privileges and restrictions of the global associated with the
target object, and this method can therefore also be used when with sandbox objects with the same effect as evalinsandbox and into content windows with the same effect as injecting script tags into their documents. advantages namespacing: global namespace contamination and the resultant e...
... disadvantages namespacing: as modules always execute with their own namespace, they have no direct access to the dom or window properties of windows or documents, and therefore must often pass around references to these objects and any document-specific state data that they require. examples the following code will import a module into the current global scope. all variables named in the
target script's exported_symbols global array will be copied into the current execution context. components.utils.import("resource://my-package/my-module.jsm"); the following function will import an arbitrary module into a singleton object, which it returns. if the argument is not an absolute path, the module is imported relative to the caller's filename. function module(uri) { if (!/^[a-z-]+:/.
Appendix F: Monitoring DOM changes - Archive of obsolete content
n observers mutation observers are the more efficient, w3c speced replacement for the highly inefficient mutation events. their major advantage is in their performance and their ease of use, especially when combined with simple libraries. their main disadvantage is that, due to their recent advent, support is currently limited to firefox 14+ and chrome 18. while they are still viable for add-ons
targeting only the latest firefox, those wishing to support older browsers will need to provide fallbacks. for more information, see this blog post on the issues at hand. non-mutation triggers it is usually possible to tell when a mutation has occurred or is about to occur without resorting to mutation events or observers. most of these methods are specific to a particular site or codebase. hashchan...
...x dynamic behavior. late binding and event delegation often times, it suffices to bind event listeners to top-level elements and check for matching elements when the event fires. for instance, rather than watching for the creation of <a> elements and adding event listeners to them as they are created, an event listener can be added to the root <html> element, and when the event fires, the event.
target and its parents can be searched for a matching element. you can read more about event delegation here. it is important to note, however, that this method can have severe performance implications for certain events, namely mouseover, mouseout, and friends, which are fired very often while the mouse is moving. monkey patching in many instances, especially when dealing with chrome code, the best...
...bindings are attached to dom nodes via css and are given the opportunity to run code via their constructors when new...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
the given dom tree. ...
...). in most cases, .text() should be used instead of the latter. when using the jquery constructor, only empty tags should be specified in order to avoid invoking the dom parser. var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) { alert(event.
target.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases. it is safe, though inefficient, to assign dynamic values to innerhtml if any dynamic content in the value is escaped with the following function: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) =...
...ly more efficient: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => escapehtml.replacements[m]); } escapehtml.replacements = { "&": "&", '"': """, "'": "'", "<": "<", ">": ">" }; note that quotation marks must be escaped in order to prevent fragments escaping attribute values. var href = "http://www.google.com/"; var text = "google"; document.getelementbyid("
target-div").innerhtml = '<div>\ <a href="' + escapehtml(href) + '"
target="_top">' + escapehtml(text) + '</a>\ </div>' it needs to be stressed that this method should not be used in new code and is only a temporary measure to shore up legacy code bases. safely generating event listeners and scripts it is occasionally necessary to generate event listeners and script fragments from dynami...
Index of archived content - Archive of obsolete content
/loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace core/promise dev/panel event/core event/
target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon pla...
... fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-
target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/utils test/assert t...
... add a menu item to firefox adding a button to the toolbar annotator creating annotations displaying annotations implementing the widget overview storing annotations chrome authority creating event
targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url ...
Getting Started - Archive of obsolete content
in. <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. once you've done this, insert the information as above, and scroll down. ...
...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. once you've done this, insert the information as above, and scroll down. ...
...see install manifests for the reference information about the install.rdf file. ...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
<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. once you've done this, insert the information as above, and scroll down. ...
...d>{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. once you've done this, insert the information as above, and scroll down. ...
... see install manifests for the reference information about the install.rdf file. ...
jspage - Archive of obsolete content
;case"array":var c={};f.each(function(h,g){c[g]=h; });d=hash.toquerystring(c,e);break;default:d=e+"="+encodeuricomponent(f);}if(f!=undefined){b.push(d);}});return b.join("&");}});hash.alias({keyof:"indexof",hasvalue:"contains"}); var event=new native({name:"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.
target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var...
...1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.related
target||a.fromelement; break;case"mouseout":l=a.related
target||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,related
target:l,
target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({en...
...ent.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.related
target;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};element.pr...
How to Write and Land Nanojit Patches - Archive of obsolete content
doing a periodic nj-to-tm/tr update this step is only done by certain people. nnethercote usually does it for mozilla, edwsmith and stejohns usually do it for adobe. note that you'd only do this for your company's tm/tr repo, ie. mozilla people for tm, and adobe people for tr. propagate all recent nanojit-central changes to your local tm/tr repo. ...
...build and test the changes. in the easy case, you'll have a consistent tm/tr repo. land the tm/tr changes. then for each revision involved, mark its whiteboard as fixed-in-tracemonkey or fixed-in-tamarin. you're done, but watch the tinderbox. ...
...group and land them with a single hg push. then update the whiteboard for the each such bug p and add a comment url. and likewise for all revisions involved in the update. you're done, but watch the tm/tr testing results (tbpl or buildbot). 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. if you do so, the next time you copy revisions from nanojit-central to your
target repository, the script will re-copy the backed-out revisions, as well as those that occurred after. you can explicitly manipulate the revision from which the copying process begins by writing a nanojit-central revision id to the file nanojit-import-rev, held in your
target repository. if you are at all ...
Extensions - Archive of obsolete content
add toolbar buttons, menus and other features. one of prism's features is an extreme lack of ui elements, which means that trying to use the same overlays in firefox and prism is really not possible. the basics in order to install an extension in prism, you need to follow the guidelines for building a mozilla-based extension. ...
...ich means that trying to use the same overlays in firefox and prism is really not possible. the basics in order to install an extension in prism, you need to follow the guidelines for building a mozilla-based extension. to support prism specifically, you'll need to add prism to the list of
target applications in the extension's install.rdf file. the code snippet will look something like this: <em:
targetapplication> <!– prism –> <description> <em:id>prism@developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:
targetapplication> in addition to the install manifest changes, you may want to expose your extension into the prism ui. prism does have a few ui elements, such as a toolbox, toolbar, menubar, popup m...
...atusbar and a container for the browser. you can use these ui elements to merge in your extension ui. see the prism main window xul file for the actual structure: webrunner.xulporting an existing extension since there aren't many extensions designed explicitly for prism, you may need to port your favorite extensions. this usually means extracting and editing the install.rdf file to add prism as a
target application. you may also need to modify the extension's overlay to be able to work with the prism ui. many archive tools, like 7zip, can edit and update a file in the archive without needing to manually extract it and add it back into the xpi. installing prism supports a basic add-on user interface which allows a user to manage extensions. using this dialog, a user just launches a webapp and ope...
File.windowsShortcut - Archive of obsolete content
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. ...
...ndows software (misc.exe) that is installed in the "windows" directory. ...
...ows" directory. ...
windowsShortcut - Archive of obsolete content
ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. ...
... ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. ...
... ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. adescription string description for the shortcut to be used as the shortcut name with a .lnk extension (do not include .lnk in the string). aworkingpath a filespecobject representing the absolute path to the working dir for where a
target will is to be run from. aparams parameters that a
target requires. aicon a filespecobject representing the absolute path (including fiilename) to a file that contains icons. can be either .ico, .dll, .exe, or any other binary file that contains icons. aiconid index of the icon from aicon to use for this shortcut. returns an integer error code. for a lis...
PopupEvents - Archive of obsolete content
extra steps necessary to fire the popupshowing event if it isn't needed. when using nested submenus, make sure to check in the popupshowing event that the event corresponds to the right popup. this is because the popup events bubble so the parent menu will receieve a popupshowing event whenever it opens, or any submenus open. 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. otherwise, the adjustfilemenu function would be called whenever the outer menupopup is opened and when the in...
... the following example, is needed if you wish to open a submenu programmatically. this is because you cannot open a submenu directly without first opening the parent menu. ...
...nu> <button label="open" oncommand="openfilemenu();"/> when the button is pressed, the openfilemenu function is called. within this function, a popupshown event listener is attached to the 'file' menu using the addeventlistener method. this will cause the filemenuopened function to be called when the popupshown event is fired on the 'file' menu. the filemenuopened function first checks that the
target of the event is the right popup and returns early if not. next, the popupshown event listener is removed again. we need to make sure to do this to ensure that the event listener isn't added multiple times. finally, we use a similar technique as the openfilemenu function to open the 'open' submenu. the result is a button that opens both the outer menu and the inner menu. the popuphiding event when...
Adding Event Handlers - Archive of obsolete content
orresponding to that event type. various properties are set on the event object such as the mouse position, the key that was pressed, and so forth. the event is then sent to the xul in phases. in the capturing phase, the event is first sent to the window, then to the document, followed by each ancestor of the xul element where the event occured downwards until it reaches that element. in the
target phase, the event is sent to the
target xul element. in the bubbling phase, the event is sent to each element back upwards until it reaches the window again. you can respond to an event during either the capturing or bubbling phase. once the event has finished propagating, any default action will occur, which is the built in behaviour of the element. for example, when the mouse is moved over a...
...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. in the example below, the listener has been placed on a box and will receive events for both elements. example 2 : source view <vbox oncommand="alert(event.
target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled. if a second listener (the oncommand attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. event handlers are passed the event object as an implied argument ...
...event will bubble up from the button or checkbox to the vbox, where it is handled. if a second listener (the oncommand attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. event handlers are passed the event object as an implied argument called 'event'. this is used to get specific information about the event. one commonly used property is the '
target' property of the event, which holds the element where the event actually occured. in the example we display an alert containing the
target's tag name. the
target is useful when using a bubbling event so that you could have a set of buttons which are all handled by a single script. you might notice that the attribute syntax is similar to that used for events in html documents. in fact, both html ...
More Event Handlers - Archive of obsolete content
argument to the script code which can be referred to using the name 'event'. in the addeventlistener form, the first argument passed to the listener function will be the event object. other arguments can be passed to a listener function, if required. the event object has a number of properties which can be examined during an event. for a full list, see the reference. we already saw the event's
target property in the last section. it holds a reference to the element where the event occurred. a similar property current
target holds the element that is currently having its event listeners handled. in the example below, current
target is always the vbox, whereas
target would be the specific element, either the button or checkbox, that was activated. example 1 : source view <vbox oncommand="alert(ev...
...n the last section. it holds a reference to the element where the event occurred. a similar property current
target holds the element that is currently having its event listeners handled. in the example below, current
target is always the vbox, whereas
target would be the specific element, either the button or checkbox, that was activated. example 1 : source view <vbox oncommand="alert(event.current
target.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. depending on how you attach the event listener to an element, there are ...
...res. obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved. element relative coordinates you will often want to get the coordinates of an event relative to the element where the event occurred rather than the entire window. you can do this by subtracting the element's position from the event position, as in the following code. var element = event.
target; var elementx = event.clientx - element.boxobject.x; var elementy = event.clienty - element.boxobject.y; xul elements have a box object that can be retrieved using the boxobject property. we'll learn more about the box object in a later section, but it holds information pertaining to how the element is displayed, including the x and y position of the element. in this example code, these coordina...
XUL Event Propagation - Archive of obsolete content
ment itself and handled right there before it bubbles up any higher. this is the case in the example code in the diagram, where the onclick event listener for the button element handles the click event by displaying a simple alert dialog: <button value="click me" onclick="alert('thank you')" /> the opposite of event bubbling is event capturing. where event bubbling propagates an event from its
target up higher into the node hiearchy, event capturing intercepts an event before it is received by other elements, even by the event
target itself. the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the fo...
...e appropriate action, as in the following example, where a javascript function determines which menuitem was selected and responds appropriately: <script> function docmd(el) { v = el.getattribute("value"); if (v == "new") alert("new clicked"); else if (v == "open") alert("open clicked"); else alert("close clicked"); } </script> ... <menu class="menu" value="file" oncommand="docmd(event.
target)"> <menupopup> <menuitem oncommand="alert('new item alert')" value="new" /> <menuitem value="open" /> <menuitem oncommand="alert('close handler')" value="close" /> </menupopup> </menu> ... the event handler in the menu finds out which menuitem was actually clicked and takes different actions accordingly. event capturing event capturing is the complement of event bu...
...value="new" /> <menuitem value="open" /> <menuitem oncommand="alert('close handler')" value="close" /> </menupopup> </menu> ... the event handler in the menu finds out which menuitem was actually clicked and takes different actions accordingly. event capturing event capturing is the complement of event bubbling. when you register an event listener on an ancestor of the event
target (i.e. any node above the event-raising element in the node hierarchy), you can use event capturing to handle the event in the ancestor before it is heard in the
target itself or any of the intervening nodes. in the diagram above, the alert dialog invoked by the menuitem itself is not displayed, since the root window element has used event capture to handle the event itself. in another example,...
Mozilla release FAQ - Archive of obsolete content
n-debug, 19 august 1999 cvs -- 25 minutes how do i run the binary on unix? i get library errors in dist/bin there's a script called mozilla. use that to launch mozilla for you -- it sets ld_library_path automatically. to launch other binaries from dist/bin with the correct environment, use run-mozilla.sh ./your_binary features, patches what platforms is mozilla available for? mozilla is currently
targeted for win32, macos, and unix/x systems. mozilla also runs on mac os x, os/2, and beos, and ports exist for some other platforms. what does mozilla lack that netscape 7 has? netscape 7 has versions with a number of plugins (which mozilla.org does not have the source for). netscape 7 also has icq/aim integration, as well as integration with an internet radio tool. what does mozilla have that wasn't...
... nearly impossible. devising a system that would handle all of these situations would make web servers more complex, slower, and likely hurt the transfer time that this proposal is attempting to save. also, progressive display of the webpage would be completely gone with this idea. for these reasons, this is generally considered a bad idea. i'd like to port mozilla to xxxos. any advice? if you're
targeting a relatively recent unix, you probably will have very few problems. otherwise, the more unixlike the
target system is, the easier your port will go. i would suggest that before you devote much time and effort to your port, you consider: how many users the os has that are likely to use mozilla does the os support multitasking well enough for mozilla does the os have a sufficiently evolve...
...this is not meant to state that the port is not worthwhile, but that it will be difficult. how to help what projects are there for programmers? this project is largely about coding. you could tackle: porting mozilla to the os you use work on moving #ifdef platform to #ifdef feature/bug if ...
NPN NewStream - Archive of obsolete content
summary requests the creation of a new data stream produced by the plug-in and consumed by the browser. syntax #include <npapi.h> nperror npn_newstream(npp instance, npmimetype type, const char*
target, npstream** stream); parameters the function has the following parameters: instance pointer to current plug-in instance. type mime type of the stream.
target name of the
target window or frame, or one of several special
target names. for values, see npn_geturl. stream stream to be created by the browser. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_newstr...
... nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_newstream creates a new stream of data produced by the plug-in and consumed by the browser. the mime parameter is the mime type of the plug-in to create. ...
...ate another instance of itself by specifying its own mime type and a new
target name in a call to npn_newstream. the stream is returned in the stream parameter. the plug-in can use this object in subsequent calls to npn_write to write data into the stream. when the plug-in has written all of its data into the stream, npn_destroystream terminates the stream and deallocates the npstream object. the
target parameter is the name of the
target window or frame, or one of several special
target names. for parameter values and information about how to use them, see npn_geturl. if the new stream has the
target of _self, this function should return an invalid_param np error. see also npp_newstream, npp_write, npp_destroystream, npstream, npp ...
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information about the
target into which the plug-in instance can draw. ...
...mac os: window is a pointer to an np_port. x, y the x and y coordinates for the top left corner of the plug-in relative to the page (and thus relative to the origin of the drawable). sho...
... is drawn into a native window (or portion of a native window) on a web page. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable (a pointer to an npwindow allocated by the browser). this window is valid until npp_setwindow is called again with a different window or the instance is destroyed. a windowless plug-in is drawn into a
target called a drawable, which can be defined in several ways depending on the platform. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. the plug-in should not modify the field values in this structure. see also npp_setwindow, np_port, npsetwindowcallbackstruct, nprect ...
HTML: A good basis for accessibility - Learn web development
o the source code, and you want to make things work more logically. there are two other options for tabindex: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. this is the most useful value of tabindex. tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via javascript, or as the
target of links. whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the enter/return key. to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a but...
...rking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. external links and linking to non-html resources links that open in a new tab or window via the
target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. older ver...
...t the behavior that will occur when the link is activated. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. link that opens a new tab or window <a
target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a
target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description. webaim: links and hypertext - hypertext links mdn understanding wcag, gu...
HTML: A good basis for accessibility - Learn web development
o the source code, and you want to make things work more logically. there are two other options for tabindex: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. this is the most useful value of tabindex. tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via javascript, or as the
target of links. whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the enter/return key. to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a but...
...rking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. external links and linking to non-html resources links that open in a new tab or window via the
target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. older ver...
...t the behavior that will occur when the link is activated. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. link that opens a new tab or window <a
target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a
target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description. webaim: links and hypertext - hypertext links mdn understanding wcag, gu...
Pseudo-classes and pseudo-elements - Learn web development
icle larger and bold, we could add a class to that paragraph and then add css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the document? we'd need to move the class over to the new paragraph. instead of adding the class, we could use the :first-child pseudo-class selector — this will always
target the first child element in the article, and we will no longer need to edit the html (this may not always be possible anyway, maybe due to it being generated by a cms.) all pseudo-classes behave in this same kind of way. they
target some bit of your document that is in a certain state, behaving as if you had added a class into your html. take a look at some other examples on mdn: :last-child...
... in use. whenever you see these selectors, look at the content property to see what is being added to the document. reference section there are a large number of pseudo-classes and pseudo-elements, and it is useful to have a list to refer to. below are tables listing them, with links to their reference pages on mdn. use this as a reference to see the kind of things that are available for you to
target. pseudo-classes selector description :active matches when the user activates (for example clicks on) an element. :any-link matches both the :link and :visited states of a link. :blank matches an <input> element whose input value is empty. :checked matches a radio button or checkbox in the selected state. :current matche...
... matches an element if it is user-alterable. :required matches form elements that are required. :right in paged media, matches right-hand pages. :root matches an element that is the root of the document. :scope matches any element that is a scope element. :valid matches an element such as an <input> element, in a valid state. :
target matches an element if it is the
target of the current url (i.e. if it has an id matching the current url fragment). :visited matches visited links. pseudo-elements selector description ::after matches a stylable element appearing after the originating element's actual content. ::before matches a stylable element appearing before the o...
Responsive design - Learn web development
if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. ...
...n check for larger screens and implement a multiple-column layout when you know that you have enough screen width to handle it. this is often described as mobile first design. find out more in the mdn documentation for media queries. flexible grids responsive sites don't just change their layout between breakpoints, they are built on flexible grids. a flexible grid means that you don't need to
target every possible device size that there is, and build a pixel perfect layout for it. that approach would be impossible given the vast number of differently-sized devices that exist, and the fact that on desktop at least, people do not always have their browser window maximized. by using a flexible grid, you only need to add in a breakpoint and change the design at the point where the content start...
...s. in the early days of responsive design, our only option for performing layout was to use floats. flexible floated layouts were achieved by giving each element a percentage width, and ensuring that across the layout the totals were not more than 100%. in his original piece on fluid grids, marcotte detailed a formula for taking a layout designed using pixels and converting it into percentages.
target / context = result for example, if our
target column size is 60 pixels, and the context (or container) it is in is 960 pixels, we divide 60 by 960 to get a value we can use in our css, after moving the decimal point two places to the right. .col { width: 6.25%; /* 60 / 960 = 0.0625 */ } this approach will be found in many places across the web today, and it is documented here in the layo...
What are hyperlinks? - Learn web development
ents have hardly changed the three pillars. before the web, it was quite hard to access documents and move from one to another. being human-readable, urls already made things easier, but it's hard to type a long url whenever you want to access a document. this is where hyperlinks revolutionized everything. links can correlate any text string with a url, such that the user can instantly reach the
target document by activating the link. links stand out from the surrounding text by being underlined and in blue text. tap or click a link to activate it, or if you use a keyboard, press tab until the link is in focus and hit enter or spacebar. links are the breakthrough that made the web so useful and successful. in the rest of this article, we discuss the various types of links and their importan...
... as other links. links and search engines links matter both to users and search engines. every time search engines crawl a webpage, they index the website by following the links available on the webpage. search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the
target webpage. links influence how readily a search engine will link to your site. the trouble is, it's hard to measure search engines' activities. companies naturally want their sites to rank highly in search results. we know the following about how search engines determine a site's rank: a link's visible text influences which search queries will find a given url. the more incoming links a webpa...
...ch engines' activities. companies naturally want their sites to rank highly in search results. we know the following about how search engines determine a site's rank: a link's visible text influences which search queries will find a given url. the more incoming links a webpage can boast of, the higher it ranks in search results. external links influence the search ranking both of source and
target webpages, but it is unclear by how much. seo (search engine optimization) is the study of how to make websites rank highly in search results. improving a website's use of links is one helpful seo technique. next steps now you'll want to set up some webpages with links. to get some more theoretical background, learn about urls and their structure, since every link points to a url. want som...
Test your skills: Links - Learn web development
s information on blue whales and sperm whales. 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. this is not strictly best practice, but we've done it here so that the page doesn't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor o...
...al, which is located one directory level above the current directory. the third link should link to the uk google image search. the base url is https://www.google.co.uk, and the image search is located in a subdirectory called imghp. the fourth link should link to the paragraph at the very bottom of the current page. it has an id of bottom. note: the first three links in the example have the
target="_blank" attribute set on them, so that when you click on them, they open the linked page in a new tab. this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your o...
...e editor. links 3 the following links link to an info page about narwhals, a support email address, and a pdf factfile that is 4mb in size. in this task we want you to: take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text. add a warning to any links that need a warning added. note: the first and third links in the example have the
target="_blank" attribute set on them, so that when you click on them, they open the linked page in a new tab. this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your o...
Introduction to the server side - Learn web development
ities enable much deeper engagement with users. in the modern world of web development, learning about server-side development is highly recommended. what is server-side website programming? web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, an http request is sent from your browser to the
target server. the request includes a url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies. web servers wait for client request message...
...rameworks like django provide one out of the box, along with other very useful tools. what can you do on the server-side? server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience. companies like amazon use server-side programming to construct search results for products, make
targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc. banks use server-side programming to store account information and allow only authorized users to view and make transactions. other services like facebook, twitter, instagram, and wikipedia use server-side programming to highlight, share, and control access to interesting content. some of the ...
... is also possible to simply return data (json, xml, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent). the server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. the content can even be
targeted for the type of client device that is receiving it. because the information is in a database, it can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory). note: your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage a...
Ember interactivity: Events, classes and state - Learn web development
vc/app/components/header.js: import component from '@glimmer/component'; export default class headercomponent extends component { } inside this file we will implement the event handler code. ...
...port component from '@glimmer/component'; export default class headercomponent extends component { } inside this file we will implement the event handler code. ...
...we will implement the event handler code. update the content to the following: import component from '@glimmer/component'; import { action } from '@ember/object'; export default class headercomponent extends component { @action onkeydown({
target, key }) { let text =
target.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) { alert(text);
target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application. the @action decorator declares that the function is an "action", meaning it's a type of function that ...
Mozilla Plugin Accessibility
all browser keys unavailable when plugin has focus focused plugins currently have no choice but to consume all keyboard events. ...
...nt page, scroll, move back and forward in history, etc. if the plugin needs those keystrokes, the can consume them and not pass them on. see the plugin keyboard navigation proposal for the implementation plan. the same solution will be used for bug 140566 (full page plugins) and bug 78414 (partial page plugins), as well as the linux-specific bug 84159 and mac-specific bug 180426. ? no
target 2. focus gets stuck in plugin. user cannot keyboard navigate out of a plugin we will apply the same solution as in problem 4 above. the plugin will be responsible for bubbling up shift+tab and tab when the user has reached the end of the tab cycle within the plugin. the bug tracking this work is bug 93149. ? no
target 3. many plugins lack accessib...
...pports msaa. ...
How Mozilla's build system works
ll tests and other support tools. when make is invoked, it starts at the export sub-tier of the first tier, and traverses all the directories in that tier. then, it does the same thing for the libs sub-tier and, subsequently, the tools sub-tier. it then moves on to the next tier and continues until no tiers remain. to view information about the tiers, you can execute the following special make
targets: command effect make echo-tiers show the final list of tiers. make echo-dirs show the list of non-static source directories to iterate over, as determined by the tier list. make echo-variable-static_dirs show the list of static source directories to iterate over, as determined by the tier list. moz.build files moz.build files are how each ...
...ure and points to the top-level mozilla directory. srcdir is also substituted in by configure and points to the source directory for the current directory. in source tree builds, this will simply point to "." (the current directory). vpath is a list of directories where make will look for prerequisites (i.e., source files). one other frequently used variable not specific to a particular build
target is dirs. dirs is a list of subdirectories of the current directory to recursively build in. subdirectories are traversed after their parent directories. for example, you could have: dirs = \ public \ resources \ src \ $(null) this example demonstrates another concept called continuation lines. a backslash as the last character on a line allows the variable definition to be continued on...
...ows you to add and remove lines without worrying about whether the last line has an ending backslash or not. makefile examples standard makefile header installing headers using exports compiling interfaces using xpidlsrcs installing a javascript component building a component dll building a static library building a dynamic library makefiles - best practices and suggestions makefile -
targets makefile - variables, values makefile - *.mk files & user config building libraries there are three main types of libraries that are built in mozilla: components are shared libraries (except in static builds), which are installed to dist/bin/components. components are not linked against by any other library. non-component shared libraries include libraries such as libxpcom and libmozjs.
Creating Custom Events That Can Pass Data
nscomptr<nsidommyevent> myevent; //this is a handle to the your inteface to the event. wwatcher->getactivewindow(getter_addrefs(awindow)); //get the active window. awindow->getdocument(getter_addrefs(adoc)); ...
... nscomptr<nsidommyevent> myevent; //this is a handle to the your inteface to the event. wwatcher->getactivewindow(getter_addrefs(awindow)); //get the active window. awindow->getdocument(getter_addrefs(adoc)); //get the document from t...
...rom the window. nscomptr<nsidomdocumentevent> docevent = do_queryinterface(adoc); //change interfaces so you can create interfaces. docevent->createevent(ns_literal_string("nsdommyevent"), getter_addrefs(event)); //create the event event->initevent(ns_literal_string("nsdommyevent"), pr_true, pr_true); //initialize it twindow = do_queryinterface(awindow); //use the window for a
target. myevent = do_queryinterface(event); myevent->setmyproperty(45); //set my property of my event to (e.g.) 45. prbool defaultactionenabledwin; prbool defaultactionenableddoc; nscomptr<nsiprivatedomevent> privevt(do_queryinterface(event)); privevt->settrusted(pr_true); //make the event trusted twindow->dispatchevent(event, &defaultactionenabledwin); //dispatch it (i.e. send ...
mach
trap.py will download and setup everything so you can build a mozilla app such as firefox etcetera, so it is a nice starting point. why should i use mach? you should use mach because it provides a better and more unified developer experience for working on mozilla projects. ...
...for it. some other cases where you should consider implementing something as a mach command: when your tool is a random script in the tree. random scripts are hard to find and may not conform to coding conventions or best practices. mach provides a framework in which your tool can live that will put it in a better position to succeed than if it were on its own. when the alternative is a make
target. the build team generally does not like one-off make
targets that aren't part of building (read: compiling) the tree. this includes things related to testing and packaging. these weigh down make files and add to the burden of maintaining the build system. instead, you are encouraged to implement ancillary functionality in not make (preferably python). if you do implement something in python, hook...
... mach outside of mozilla-central? yes, the mach core is in mozilla-central inside the python/mach directory and available on pypi at https://pypi.python.org/pypi/mach/. the actual file "mach" (a py script) , which you need, is not there though - look for that driver at moz-central or here directly. mach architecture under the hood mach is a generic command dispatching framework which currently
targets command line interfaces (clis). you essentially have a bunch of python functions saying "i provide command x" and mach hooks up command line argument parsing, terminal interaction, and dispatching. there are 3 main components to mach: the mach core. mach commands the mach driver the mach core is the main python modules that implement the basic functionality of mach. these include command...
Script security
scenario for same-origin access is when objects belonging to the same window object interact. this all takes place within the same compartment, with no need for security checks or wrappers. when objects share an origin but not a global - for example two web pages from the same protocol, port, and domain - they belong to two different compartments, and the caller gets a transparent wrapper to the
target object. transparent wrappers allow access to all the
target's properties: functionally, it's as if the
target is in the caller's compartment. cross-origin if the two compartments are cross-origin, the caller gets a cross-origin wrapper. this denies access to all the object's properties, except for a few properties of window and location objects, as defined by the same-origin policy. priv...
...security relation is between system-privileged chrome code and untrusted web content, but there are other examples in gecko. the add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome. if the caller has a higher privilege than the
target object, the caller gets an xray wrapper for the object. xrays are designed to prevent untrusted code from confusing trusted code by redefining objects in unexpected ways. for example, privileged code using an xray to a dom object sees only the original version of the dom object. any expando properties are not visible, and if any native dom properties have been redefined, they are not visible i...
...y the original version of the dom object. any expando properties are not visible, and if any native dom properties have been redefined, they are not visible in the xray. the privileged code is able to waive xrays if it wants unfiltered access to the untrusted object. see xray vision for much more information on xrays. unprivileged to privileged code if the caller has lower privileges than the
target object, then the caller gets an opaque wrapper. an opaque wrapper denies all access to the
target object. however, the privileged
target is able to copy objects and functions into the less privileged scope using the exportfunction() and cloneinto() functions, and the less privileged scope is then able to use them. security checks to determine the security relation between two compartments, ...
NetUtil.jsm
("resource://gre/modules/netutil.jsm"); once you've imported the module, you can then use its methods. method overview nsiasyncstreamcopier asynccopy(nsiinputstream asource, nsioutputstream asink, [optional] acallback) void asyncfetch(asource, acallback) nsichannel newchannel(awhattoload, [optional] aorigincharset, [optional] nsiuri abaseuri) nsiuri newuri(a
target, [optional] aorigincharset, [optional] nsiuri abaseuri) string readinputstreamtostring(ainputstream, acount, aoptions) attributes attribute type description ioservice nsiioservice returns a reference to nsiioservice. methods asynccopy() the asynccopy() method performs a simple asynchronous copy of data from a source input stream to a destina...
... interpreting awhattoload as a string; this is ignored if awhattoload is not a string. defaults to utf-8 if not provided. abaseuri the base uri for the spec, specified as an nsiuri. only used if awhattoload is a string. newuri() the newuri() method creates a new nsiuri. this method wraps the nsiioservice.newuri(). note: starting in gecko 2, this method supports specifying an nsifile as the
target of the uri. in previous versions of gecko, you must use a string to specify the uri. nsiuri newuri( a
target, [optional] aorigincharset, [optional] abaseuri ); parameters a
target specifies the
target of the uri as either a uri string or (starting in gecko 2) as an nsifile. aorigincharset the optional character set for the uri. defaults to utf-8 if not provided. abaseuri the base ...
... exceptions thrown this method throws an exception with the message "must have a non-null string spec or nsifile object" and result code ns_error_invalid_arg if aspec is null. readinputstreamtostring() reads a given number of bytes from an input stream, returning a string containing those bytes. ...
OS.File for the main thread
promise<file> open( in string path, [optional] in object mode, [optional] in object options ) arguments path the full native name of the file to open. modeoptional the opening mode for the fil...
...esent an existing file. os.file.setpermissions() sets the file's access permission bits. promise<void> setpermissions( in string path, in object options ) arguments path the complete path to the file. options the new attributes to set winattributes this is an object with following optional keys. ignored under non-windows platforms. hidden boolean. set to true to make the
target hidden, or false to make it visible. readonly boolean. set to true to make the
target "read only". system boolean. toggles the "system" attribute, this is equivalent . unixmode number. this is an number can be created with the constants available in os.constants.libc.s_i* or os.constants.libc.s_o*. ignored under non-unix platforms. to make a file hidden on unix based platforms, including ma...
... performance note: if the file is already opened, calling method stat() is much faster than calling function os.file.stat(). os.file.unixsymlink() create a symoblic link file, also known as "alias" files on mac os. this is similar to "shortcut" files on windows systems. this function is specific to unix baed systems such as linux and mac os x. promise<undefined> unixsymlink( in string path
target, in string pathcreate ) arguments path
target the complete path to the file that should be launced by the symbolic link. pathcreate the complete path to the file that should launch
target. the file extension should be .link. promise resolves to undefined promise can be rejected with os.file.error in case of any error. if the file exists already, unixerrorco of 17 will be return...
Profiling with the Firefox Profiler
not available, and can provide more information and insight into what the browser is doing. using the firefox profiler visit profiler.firefox.com to get started. it has instructions for enabling the profiler menu button, and getting going. there are also product docs available at profiler.firefox.com/docs/. in addition to profiler.firefox.com, the firefox devtools have a simplified interface
targeted towards web developers, but does not include as much information as the firefox profiler web app. it is available from the menu at tools > web developer > performance. understanding profiles the firefox profiler has more current documentation available at profiler.firefox.com/docs/. however the following could have some potentially useful information for gecko-specific problems. you can ch...
... name:arm-eabi-addr2line (on os x) and stick an export to its location in ~/.bash_profile. the extension will invoke bash to use adb and addr2line. install the latest pre-release build in your host machine's firefox browser that has your phone reachable via adb. this will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select
target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. profiling firefox startup start your firefox with the environment variable moz_profiler_startup=1 set. this way the profiler is started as early as possible during startup. then capture the profile using the add-on as usual. startup profiling does not use the settin...
...utput all benchmark information and on its last line it output the result of the profiling, you can filter it with tail -n 1 and redirect it to a file to prevent printing it in your shell. the expected size of the output is around 100 of mb. to add symbols to your build, you need to call ./scripts/profile-symbolicate.py available in b2g repository. $ gecko_objdir=<objdir> product_out=<objdir>
target_tools_prefix= \ ./scripts/profile-symbolicate.py -o run.symb.cleo run.cleo clone cleopatra and start the server with ./run_webserver.sh. access cleopatra from your web browser by loading the page localhost:8000, and upload run.symb.cleo to render the profile with most of the symbol information. native stack vs. label stack the profiler periodically samples the stack of the selected threa...
Necko walkthrough
nshttpconnectionmgr::onmsgnewtransaction, and the recently created nshttptransaction. dispatches the nsconnevent to the socket thread back to the context of nshttpchannel::continueconnect: nsinputstreampump->asyncread this pump calls nsiasyncinputstream::asyncwait (the input for the response stream pipe created with the nshttptransaction, i.e. ...
...ump->asyncread this pump calls nsiasyncinputstream::asyncwait (the input for the response stream pipe created with the nshttptransaction, i.e. nspipeinputstream::asyncwait), with
target thread set to the current thread, i.e. main. so, subsequent callbacks will be dispatched to the main thread. nspipeinputstream::asyncwait sets the callback to be used later for a response if a
target is specified (in this case, the main thread), callback is proxied via an nsinputstreamreadyevent, which is created now and may be called later otherwise, the callback would be called directly, when the socket is readable et voila, the transaction has been posted to the socket thread, and the main thread continues on, unblocked from network io. so, on the socket thread... the event queue ...
...le so now the response is hitting the other end of the pipe, saying it has bytes to read nspipeevents::notifyinputready puts the callback object into an nspipeevents object. once this object goes out of scope, mcallback->oninputstreamready is called. note: this callback may be a proxy object, nsinputstreamreadyevent: it is a runnable that dispatches itself to a previously set
target thread, and calls its internal mcallback->oninputstreamready function. remember that nspipeinputstream::asyncwait was called earlier, after the transaction was initially created and posted to the connection manager on the socket thread. and in that function it created a proxy callback because it wished to have oninputstreamready called on the main thread. back on the main thread: nsinputs...
How to embed the JavaScript engine
tovaluearray<2> argv(cx); argv[0].setint32(1); argv[1].setint32(2); then call the function: // [spidermonkey 24] pass arguments length and the 'jsval *' pointer. ...
...; then call the function: // [spidermonkey 24] pass arguments length and the 'jsval *' pointer. // js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): jsobject *
target, *event; js::autovaluearray<1> argv(cx); /* * find event
target and make event object to represent this click. ...
...ame(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): jsobject *
target, *event; js::autovaluearray<1> argv(cx); /* * find event
target and make event object to represent this click. * pass cx to neweventobject so js_newobject can be called. */
target = findevent
targetat(cx, global, x, y); event = neweventobject(cx, "click", x, y); argv[0].setobjectornull(event); /* to emulate the dom, you might want to try "onclick" too. */ ok = js_callfunctionname(cx,
target, "onclick", argv, &rval); /* now test rval to see whether we should cancel the event. */ if (rval.isboolean() && !rval.toboolean()) cancelevent(event); again, i've elided error c...
JIT Optimization Outcomes
ared between various optimization strategies. genericfailure the optimization attempt failed, and the reason was not recorded. genericsuccess optimization succeeded. disabled the optimization has been explicitly disallowed. notypeinfo optimization failed because there was no type information associated with an object containing the property. this failure mode is unlikely and occurs if the
target object is obtained in some roundabout way. noanalysisinfo todo noshapeinfo the baseline compiler recorded no usable shape information for this operation. unknownobject the type of the object is not known. this can happen if the operation sees many different types of objects, and so the type of the input to the operation cannot be resolved to a single type. unknownproperties optimization f...
...t access location have seen negative indexes. typedobjectneutered the typed object being accessed at this location may have been neutered (a neutered typed object is one where the underlying byte buffer has been removed or transferred to a worker). typedobjectarrayrange failed to do range check of element access on a typed object. accessnotdense accessnotsimdobject the observed type of the
target of the property access doesn't guarantee that it is an simd object. accessnottypedobject the observed type of the
target of the property access doesn't guarantee that it is a typedobject. accessnottypedarray accessnotstring statictypedarrayuint32 statictypedarraycantcomputemask outofbounds getelemstringnotcached nonnativereceiver indextype setelemnondensenontanotcached nosimdjitsuppor...
...mestub_readslot icnamestub_callgetter call inlining outcomes optimization outcomes of attempts to inline function calls. cantinlinegeneric cantinlineclassconstructor cantinlineexceededdepth cantinlineexceededtotalbytecodelength cantinlinebigcaller cantinlinebigcallee cantinlinebigcalleeinlinedbytecodelength cantinlinenothot cantinlinenotindispatch cantinlinenativebadtype cantinlineno
target unable to inline function call. the callee (
target) function, f in f(x), is not known at jit time. cantinlinenotinterpreted unable to inline function call. the callee function is not an interpreted function. for example, it could be a native function for which ion has no built-in specialization. cantinlinenobaseline unable to inline function call. the interpreted callee function could not be...
Parser API
s part of the source location information in the returned ast nodes. line number default: 1 the initial line number to use for source location information. builder builder default: null a builder object, which can be used to produce ast nodes in custom data formats. the expected callback methods are described under builder objects.
target string default: script a type of the parsing
target, can be either script or module. if parsing fails due to a syntax error, an instance of syntaxerror is thrown. the syntax error object thrown by reflect.parse() has the same message property as the syntax error that would be thrown by eval(src). the linenumber and filename properties of the syntax error object indi...
... an xml name. interface xmlattribute <: xml { type: "xmlattribute"; value: string; } an xml attribute value. interface xmlcdata <: xml { type: "xmlcdata"; contents: string; } an xml cdata node. interface xmlcomment <: xml { type: "xmlcomment"; contents: string; } an xml comment. interface xmlprocessinginstruction <: xml { type: "xmlprocessinginstruction";
target: string; contents: string | null; } an xml processing instruction. builder objects the optional builder parameter to reflect.parse() makes it possible to construct user-specified data from the parser, rather than the default node objects. builder objects may contain any of the callback methods described in this section. each callback can produce any custom, user-defined datatype; these a...
... value: string loc: sourcelocation returns: customxml callback to produce a custom xml attribute node. xmlcdata(contents[, loc]) contents: string loc: sourcelocation returns: customxml callback to produce a custom xml cdata node. xmlcomment(contents[, loc]) contents: string loc: sourcelocation returns: customxml callback to produce a custom xml comment node. xmlprocessinginstruction(
target, contents[, loc])
target: string contents: string | null loc: sourcelocation returns: customxml callback to produce a custom xml processing instruction node. ...
Components.utils.cloneInto
this function provides a safe way to take an object defined in a privileged scope and create a structured clone of it in a less-privileged scope. it returns a reference to the clone: var clonedobject = cloneinto(myobject,
targetwindow); you can then assign the clone to an object in the
target scope as an expando property, and scripts running in that scope can access it:
targetwindow.foo = clonedobject; in this way privileged code, such as an add-on, can share an object with less-privileged code like a normal web page script. syntax components.utils.cloneinto(obj,
targetscope[, options]); parameters obj : object the object to clone.
targetscope : object the object to attach the object to. options : object this optional parameter is an object with the following opt...
...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 scrip...
... ...
nsICacheService
read only. methods createsession() this method creates a cache session. a cache session represents a client's access into the cache. the cache session is not "owned" by the cache service. hence, it is possible to create duplicate cache sessions. entries created by a cache session are invisible to other cache se...
...read only. methods createsession() this method creates a cache session. a cache session represents a client's access into the cache. the cache session is not "owned" by the cache service. hence, it is possible to create duplicate cache sessions. entries created by a cache session are invisible to other cache sessions, unless the...
...achestoragepolicy storagepolicy); obsolete since gecko 1.9.2 void evictentries(in nscachestoragepolicy storagepolicy); void init(); obsolete since gecko 1.8 void shutdown(); obsolete since gecko 1.8 void visitentries(in nsicachevisitor visitor); attributes attribute type description cacheio
target nsievent
target the event
target for cache i/o operation notifications. read only. methods createsession() this method creates a cache session. a cache session represents a client's access into the cache. the cache session is not "owned" by the cache service. hence, it is possible to create duplicate cache sessions. entries created by a cache session are invisible to other cache sessions, unless the cache sessions are ...
nsIDOMMozTouchEvent
this is a random number that is guaranteed to remain the same for each finger during all moztouchmove events between the corresponding moztouchdown and moztouch...
...this is a random number that is guaranteed to remain the same for each finger during all moztouchmove events between the corresponding moztouchdown and moztouchup events. ...
...t. void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in unsigned long streamidarg ); parameters streamidarg the value to assign to the streamid attribute; this uniquely identifies the finger generating the touch events. see also mouse gesture events touch events event ...
XPCOM Interface Reference
nsicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomevent
targetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsou...
...oadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensievent
targetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutp...
...rnsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequestevent
targetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfo...
XPCOM Interface Reference by grouping
ent nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomevent
target nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext ...
...internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequestevent
target favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicati...
... nsiacceleration nsiaccelerationlistener nsiaccelerometer misc nsisound nsiwifimonitor document nsiwebnavigation environment nsienvironment event nsieventlistenerinfo nsieventlistenerservice nsievent
target exception nsiexception extention nsiextensionmanager nsiinstalllocation external nsiexternalprotocolservice frame nsicontentframemessagemanager history nsishentry nsishistory idle nsiidleservice interna...
Debugger.Object - Firefox Developer Tools
rue if the referent is an async function, defined with an async function expression or statement, or false if it is some other sort of function. if the referent is not a debuggee function, or not a function at all, this is undefined. (this is always equal to obj.script.isasyncfunction, assuming obj.script is a debugger.script.) ispromise true if the referent is a promise; false otherwise. bound
targetfunction if the referent is a bound debuggee function, this is its
target function— the function that was bound to a particular this object. if the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined. boundthis if the referent is a bound debuggee function, this is the this value it was bound to. if the referent is either not a bound fu...
... this is an array (in the debugger object’s compartment) that contains the debuggee values of the arguments object it was bound to. if the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined. isproxy if the referent is a (scripted) proxy, either revoked or not, return true. if the referent is not a (scripted) proxy, return false. proxy
target if the referent is a non-revoked (scripted) proxy, return a debugger.object instance referring to the ecmascript [[proxy
target]] of the referent. if the referent is a revoked (scripted) proxy, return null. if the referent is not a (scripted) proxy, return undefined. proxyhandler if the referent is a non-revoked (scripted) proxy, return a debugger.object instance referring to the ecmascript [[p...
...npropertysymbols(referent) had been called in the debuggee, and the result copied in the scope of the debugger’s global object. defineproperty(name,attributes) define a property on the referent namedname, as described by the property descriptordescriptor. any value, get, and set properties ofattributes must be debuggee values. (this function behaves like object.defineproperty, except that the
target object is implicit, and in a different compartment from the function and descriptor.) defineproperties(properties) add the properties given byproperties to the referent. (this function behaves like object.defineproperties, except that the
target object is implicit, and in a different compartment from theproperties argument.) deleteproperty(name) remove the referent’s property namedname. ret...
Use the Inspector from the Web Console - Firefox Developer Tools
the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. ...
... the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. ...
... the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. ...
AnalyserNode - Web APIs
s 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/event
target"
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">event
target</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...="#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">event
target</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" stro...
...#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" 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 n...
AudioContext - Web APIs
several different audio source and pipeline concurrently. ...
... different audio source and pipeline concurrently. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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="...
AudioParam.setValueAtTime() - Web APIs
rrgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var
targetattimeplus = document.queryselector('.set-
target-at-time-plus'); var
targetattimeminus = document.queryselector('.set-
target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var ...
... ...
... working draft ...
BatteryManager - Web APIs
or the chargingtimechange event; this event is sent when the battery charging time is updated batterymanager.ondischargingtimechange a handler for the dischargingtimechange event; this event is sent when the battery discharging time is updated. batterymanager.onlevelchange a handler for the levelchange event; this event is sent when the battery level is updated. ...
...imechange event; this event is sent when the battery charging time is updated batterymanager.ondischargingtimechange a handler for the dischargingtimechange event; this event is sent when the battery discharging time is updated. batterymanager.onlevelchange a handler for the levelchange event; this event is sent when the battery level is updated. ...
...er.ondischargingtimechange a handler for the dischargingtimechange event; this event is sent when the battery discharging time is updated. batterymanager.onlevelchange a handler for the levelchange event; this event is sent when the battery level is updated. methods inherited from event
target: event
target.addeventlistener() registers an event handler of a specific event type on the event
target. event
target.removeeventlistener() removes an event listener from the event
target. event
target.dispatchevent() dispatches an event to this event
target. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event
targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring type, eventhandler h...
BeforeUnloadEvent - Web APIs
re or user interaction. see browser compatibility for more information. ...
...l="#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/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 cance...
...an almost-cross-browser working example would be close to th...
CompositionEvent - Web APIs
nts that occur due to the user indirectly entering text. ...
...t="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" stro...
..." 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() cre...
CustomEvent - Web APIs
bble a historical alias to event.stoppropagation(). setting its value to true before returning from an event handler prevents propagation of the event. event.cancelable read only a boolean indicating whether the event is cancelable. event.composed read only a boolean indicating whether or not the event can bubble across the boundary between the shadow dom and the regular dom. event.current
target read only a reference to the currently registered
target for the event. this is the object to which the event is currently slated to be sent. it's possible this has been changed along the way through re
targeting. event.deeppath an array of dom nodes through which the event has bubbled. event.defaultprevented read only indicates whether or not the call to event.preventdefault() canceled t...
...ly slated to be sent. it's possible this has been changed along the way through re
targeting. event.deeppath an array of dom nodes through which the event has bubbled. event.defaultprevented read only indicates whether or not the call to event.preventdefault() canceled the event. event.eventphase read only indicates which phase of the event flow is being processed. event.explicitoriginal
target read only the explicit original
target of the event (mozilla-specific.) event.original
target read only the original
target of the event, before any re
targetings. (mozilla-specific.) event.returnvalue a historical property introduced by internet explorer and eventually adopted into the dom specification in order to ensure existing sites continue to work. ideally, you should try to use e...
... historical property introduced by internet explorer and eventually adopted into the dom specification in order to ensure existing sites continue to work. ideally, you should try to use event.preventdefault() and event.defaultprevented instead, but you can use returnvalue if you choose to do so. event.srcelement a non-standard alias (from old versions of microsoft internet explorer) for event.
target. some other browsers are starting to support it for web compatibility purposes. event.
target read only a reference to the
target to which the event was originally dispatched. event.timestamp read only the time at which the event was created (in milliseconds). by specification, this value is time since epoch—but in reality, browsers' definitions vary. in addition, work is underway to chang...
DataTransfer.effectAllowed - Web APIs
thus, linkmove will become linkmove, and so on. example this example shows the use of the effectallowed and dropeffect properties. ...
...order: 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 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.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)); } ...
... living standard html 5.1the definition of 'effectallowed' in that specification. recommendation initial definition ...
DedicatedWorkerGlobalScope - Web APIs
he worker global scope) is accessible through the self keyword. some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see also: functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent event
target, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.name read only the name that the worker was (optionally) given when it was created using the worker() constructor. this is mainly useful for debugging purposes. properties inherited from workerglobalscope workerglobalscope.self returns an object reference to the ded...
...ect, mostly a subset of the navigator for browsing scopes, but adapted to workers. workerglobalscope.performance read only returns the performance object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent event
target, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.onmessage is an eventhandler representing the code to be called when the message event is raised. these events are of type messageevent and will be called when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) d...
...vents are of type messageevent and will be called when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) dedicatedworkerglobalscope.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. methods this interface inherits methods from the workerglobalscope interface, and its parent event
target, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.close() discards any tasks queued in the workerglobalscope's event loop, effectively closing this particular scope. dedicatedworkerglobalscope.postmessage() sends a message — which can consist of any javascript object — to the parent document that first spawned the work...
Document: dragenter event - Web APIs
interface dragevent event handler property ondragenter examples see the drag event for example code or this jsfiddle demo. ...
... interface dragevent event handler property ondragenter examples see the drag event for example code or this jsfiddle demo. ...
... interface dragevent event handler property ondragenter examples see the drag event for example code or this jsfiddle demo. ...
DragEvent - Web APIs
ser during drag-and-drops. dragevent() creates a synthetic and untrusted dragevent. event types drag this event is fired when an element or text selection is being dragged. dragend this event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter this event is fired when a dragged element or text selection enters a valid drop
target. ...
... this event is fired when an element or text selection is being dragged. dragend this event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter this event is fired when a dragged element or text selection enters a valid drop
target. dragexit this event is fired when an element is no longer the drag operation's immediate selection
target. dragleave this event is fired when a dragged element or text selection leaves a valid drop
target. dragover this event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop
target (every 50 ms when mouse is not moving else much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. this firing pattern is differ...
... globaleventhandlers globaleventhandlers.ondrag a global event handler for the drag event. globaleventhandlers.ondragend a global event handler for the dragend event. globaleventhandlers.ondragenter a global event handler for the dragenter event. globaleventhandlers.ondragexit a global event handler for the dragexit event. ...
EXT_disjoint_timer_query.queryCounterEXT() - Web APIs
must be ext.timestamp_ext. return value none. examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); var endquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); // ... ...
...must be ext.timestamp_ext. return value none. examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); var endquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); // ... ...
...must be ext.timestamp_ext. return value none. examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); var endquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); // ... ...
Element: blur event - Web APIs
html <form id="form"> <input type="text" placeholder="text input"> <input ty...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyi...
...re two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true. html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.
target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.
target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
Element: focus event - Web APIs
html <form id="form"> <input type="text" placeholder="text input"> <input typ...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid...
...are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true. html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.
target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.
target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
Element.getAttributeNS() - Web APIs
tes, but it was not typically implemented this way since null makes more sense. the dom4 specification now says this method should return null for non-existent attributes. examples the following svg document reads the value of the foo attribute in a custom namespace. ...
...n a custom namespace. <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="
target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( '
target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported. ...
...etelementbyid( '
target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported. <!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="
target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( '
target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents. html5 docum...
Element: mouseover event - Web APIs
wing example illustrates the difference between mouseover and mouseenter events. ...
...lustrates the difference between mouseover and mouseenter events. ...
...li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter
target event.
target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.
target.style.color = ""; }, 500); }, false); // this handler will be 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 ...
Element: select event - Web APIs
onselect the event is not available for all elements in all languages. for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements. ...
...is not available for all elements in all languages. for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements. ...
...ents in all languages. for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements. ...
Event.eventPhase - Web APIs
valuation phase of the event flow. possible values are listed in event phase constants. constants event phase constants these values describe which phase the event flow is currently being evaluated. constant value description event.none 0 no event is being processed at this time. event.capturing_phase 1 the event is being propagated through the
target's ancestor objects. this process starts with the window, then document, then the htmlhtmlelement, and so on through the elements until the
target's parent is reached. event listeners registered for capture mode when event
target.addeventlistener() was called are triggered during this phase. event.at_
target 2 the event has arrived at the event's
target. event listeners registered for...
...this is known as bubbling, and occurs only if event.bubbles is true. event listeners registered for this phase are triggered during this process. for more details, see section 3.1, event dispatch and dom event flow, of the dom level 3 events specification. ...
...[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.current
target.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ? "none" : e.eventphase == 1 ? "capturing" : e.eventphase == 2 ? "
target" : e.eventphase == 3 ? "bubbling" : "error"; divinfo.innerhtml += e.current
target.id + "; eventphase: " + level + "<br/>"; } function clear() { for (let i = 0; i < divs.length; i++) { if (divs[i].id != "divinfo") { ...
Using files from web applications - Web APIs
s selected by the user. the multiple attribute on the input element allows the user to select multiple files. accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event. ...
... const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed. const reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.
target.result; }; })(img); reader.readasdataurl(file); } } here our loop handling the user-selected files looks at each file's type attribute to see if its mime type begins with the string "image/"). for each file that is an image, we create a new img element. css can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here. e...
... before actually transferring the data, several preparatory steps are taken: the xmlhttprequest's upload progress listener is set to update the throbber with new percentage ...
The HTML DOM API - Web APIs
is: as such, an element inherits the properties and methods of all of its ancestors. for example, consider a <a> element, which is represented in the dom by an object of type htmlanchorelement. the element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by htmlelement and element, as well as from node and, finally, event
target. each level defines a key aspect of the utility of the element. from node, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. of special importance is what is gained by inheriting from event
target: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth. there ...
...d upon the common type htmlmediaelement, which in turn is based upon htmlelement and so forth. htmlmediaelement defines the methods and properties held in common between audio and video elements. these element-specific interfaces make up the majority of the html dom api, and are the focus of this article. to learn more about the actual structure of the dom, see introduction to the dom. html dom
target audience the features exposed by the html dom are among the most commonly-used apis in the web developer's arsenal. all but the most simple web applications will use some features of the html dom. html dom api interfaces the majority of the interfaces that comprise the html dom api map almost one-to-one to individual html elements, or to a small group of elements with similar functionality. in...
...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. with these, we can access the properti...
Dragging and Dropping Multiple Items - Web APIs
fortunately, you don't normally need to clear items often; it's more common to just add the items only when you know they are needed. common cases where dragging multiple items is used is when dragging multiple files or bookmarks. in this case, add the appropriate formats for each item. although not required, you should always add the same formats for each item. the ensures that receiving drop
targets can expect consistent data. to check if multiple files are being dragged, check the mozitemcount property. it will be set to the number of items being dragged. if a particular drop
target only supports dropping a single item, it could either reject the dragged items or it could just use just the first item. to reject the items, either don't cancel the dragover event, or set the effectallowed pr...
...ingle item, it could either reject the dragged items or it could just use just the first item. to reject the items, either don't cancel the dragover event, or set the effectallowed property to none. you may wish to do both in case another listener has already cancelled the event. to just take the first item being dropped, use the getdata() method as with a single item. this is convenient as drop
targets which only need to support a single item do not need to do anything extra. however, use the mozgetdataat() method to retrieve a specific item from the data transfer. the following example retrieves a set of files being dragged and adds them to an array. function ondrop(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozget...
...s called when dropping an item. it checks the mozitemcount property to check how many items have been dropped and iterates over them. for each item, the moztypesat() method is called to get the list of types. this list is iterated over to get all of the data associated with the drag. this processing is useful if you wish to examine the data that a drag is holding. simply drop an item on the drop
target in the example to see what items, formats and data was being dragged. see also html drag and drop api (overview) drag operations recommended drag types html5 living standard: drag and drop ...
IDBCursorWithValue - Web APIs
re. note: this feature is available in web workers. ...
...f" 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 p...
...an grab data from the current record under the cursor object using cursor.value.foo. ...
IDBDatabase: versionchange event - Web APIs
database) was requested. ...
...ntain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.
target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.
target.result; // create an objectstore for this d...
...ectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.
target.result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
InstallEvent - Web APIs
is interface inherits from the extendableevent interface. ...
...ill="#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="2...
...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/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()...
IntersectionObserver.rootMargin - Web APIs
the intersectionobserver interface's read-only rootmargin property is a string with syntax similar to that of the css margin property. each side of the rectangle represented by rootmargin is added to the corresponding side in the root element's bounding box before the intersection test is performed. this lets you, for example, adjust the bounds outward so that the
target element is considered 100% visible even if a certain number of pixels worth of width or height is clipped away, or treat the
target as partially hidden if an edge is too close to the edge of the root's bounding box. see the root element and root margin in intersection observer api for a more in-depth look at the root margin and how it works with the root's bounding box. syntax var marginstring = intersectionobserve...
... and how it works with the root's bounding box. syntax var marginstring = intersectionobserver.rootmargin; value a string, formatted similarly to the css margin property's value, which contains offsets for one or more sides of the root's bounding box. these offsets are added to the corresponding values in the root's bounding box before the intersection between the resulting rectangle and the
target element's bounds. the string returned by this property may not match the one specified when the intersectionobserver was instantiated. 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 th...
...lement's bounds. the string returned by this property may not match the one specified when the intersectionobserver was instantiated. 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. the root element and root margin in intersection observer api describes how the rootmargin is used in more detail. specifications specification status comment intersection observerthe definition of 'intersectionobserver.rootmargin' in that specification. working draft initial definition ...
KeyboardEvent - Web APIs
as a handwriting system on a tablet or graphics tablet. ...
...t="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" stro...
...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/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...
MediaKeySession.onkeystatuseschange - Web APIs
this interface inherits from the extendableevent interface. ...
...erface inherits from the extendableevent interface. ...
...tion: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" fil...
MediaKeySession.onmessage - Web APIs
this interface inherits from the extendableevent interface. ...
...erface inherits from the extendableevent interface. ...
...tion: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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" fil...
MessageEvent - Web APIs
this is used to represent messages in: server-sent events (see eventsource.onmessage). web sockets (see the onmessage property of the websocket interface). cross-document messaging (see window.postmessage() and window.onmessage). channel messaging (see messageport.postmessage() and messageport.onmessage). cross-worker/document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworkerglobalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage). webrtc data channels (see rtcdatachannel.onmessage). ...
...above). note: this feature is available in web workers. ...
..." 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/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 n...
MutationObserver.MutationObserver() - Web APIs
llback(mutationlist, observer) { mutationlist.foreach( (mutation) => { switch(mutation.type) { case 'childlist': /* one or more children have been added to and/or removed from the tree. (see mutation.addednodes and mutation.removednodes.) */ break; case 'attributes': /* an attribute value changed on the element in mutation.
target. the attribute name is in mutation.attributename, and its previous value is in mutation.oldvalue. */ break; } }); } the callback() function is invoked when the observer sees changes matching the configuration of the observation request specified when calling observe() to begin watching the dom. the kind of change that took place (either a change to the list ...
...en the observer sees changes matching the configuration of the observation request specified when calling observe() to begin watching the dom. the kind of change that took place (either a change to the list of children, or a change to an attribute) is detected by looking at the mutation.type property. creating and starting the observer this code actually sets up the observation process. 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. a set of options for t...
...is located by finding an element with the id someelement. a set of options for the observer is also established in the observeroptions record. in it, we specify values of true for both childlist and attributes, so we get the information we want. then the observer is instantiated, specifying the callback() function. we begin observing the dom nodes of interest by calling observe(), specifying the
target node and the options object. from this point until disconnect() is called, callback() will be called each time an element is added to or removed from the dom tree rooted at
targetnode, or any of those elements' attributes are changed. specifications specification status comment domthe definition of 'mutationobserver()' in that specification. living standard ...
MutationObserver - Web APIs
tions occur. takerecords() removes all pending notifications from the mutationobserver's notification queue and returns them in a new array of mutationrecord objects. mutation observer & customize resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post. ...
... living standard ...
... living standard ...
MutationObserverInit.attributeFilter - Web APIs
s the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline. ...
...chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline. ...
... (afk) or offline. ...
MutationObserverInit.attributeOldValue - Web APIs
lays the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline. ...
...mark them as away from keyboard (afk) or offline. 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: 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. for any items representing an attribute change (which can be detected...
...ich will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects. 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). when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutation record will include the oldvalue property specifying the attribute's previous value. specifications specification status comment domthe d...
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. ...
... webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to be attached. must be 0. baseviewindex a glint specifying the base view index of the framebuffer object attachment. numviews a glsizei specifying the number of views of the framebuffer object attachment. return value none. exceptions a gl.invalid_enum error is thrown if
target is not gl.framebuffer. attachment is not one of the accepted attachment points. a gl.invalid_value error is thrown if level is not 0. if numviews is less than one or more than max_views_ovr. a gl.invalid_operation error is thrown if texture isn't 0 or the name of an existing texture object. examples ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.color_attac...
Pointer Lock API - Web APIs
it is ideal for first person 3d games, for example. ...
... moment the pointer reaches the edge of the browser or screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. basic concepts pointer lock is related to mouse capture. mouse capture provides continued delivery of events to a
target element while a mouse is being dragged, but it stops when the mouse button is released. pointer lock is different from mouse capture in the following ways: it is persistent: pointer lock does not release the mouse until an explicit api call is made or the user uses a specific release gesture. it is not limited by browser or screen boundaries. it continues to send events regardless of mouse b...
...all in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y, radius, 0, degtorad(360), true); ctx.fill(); } iframe limitations pointer lock can only lock one iframe at a time. if you lock one iframe, you cannot try to lock another iframe and transfer the
target to it; pointer lock will error out. to avoid this limitation, first unlock the locked iframe, and then lock the other. while iframes work by default, "sandboxed" iframes block pointer lock. the ability to avoid this limitation, in the form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in chrome soon. specifications specification sta...
RTCDTMFSender - Web APIs
no mechanism provided by webrtc for receiving dtmf codes. ...
...anism provided by webrtc for receiving dtmf codes. ...
...tion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event
target"
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">event
target</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=...
RTCDataChannel - Web APIs
channels (the actual limit may vary from browser to browser). to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. the peer being invited to exchange data receives a datachannel event (which has type rtcdatachannelevent) to let it know the data channel has been added to the connection. propertiesalso inherits properties from: event
targetbinarytype the property binarytype on the rtcdatachannel interface is a domstring which specifies the type of javascript object which should be used to represent binary data received on the rtcdatachannel. 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".
...this event, which is represented by a simple event object, is sent when the amount of data buffered to be sent falls to or below the threshold specified by the channel's bufferedamountlowthreshold.onclos...
...either peer is permitted to call this method to initiate closure of the channel.send()the send() method of the rtcdatachannel interface sends data across the data channel to the remote peer. events bufferedamountlow sent to the channel's onbufferedamountlow event handler when the number of bytes of data in the outgoing data b...
RTCPeerConnection.peerIdentity - Web APIs
the read-only rtcpeerconnection property peeridentity returns a javascript promise that resolves to an rtcidentityassertion which contains a domstring identifying the remote peer. once this promise resolves successfully, the resulting identity is the
target peer identity and cannot change for the duration of the connection. syntax var identity = rtcpeerconnection.peeridentity; value a javascript promise which resolves to an rtcidentityassertion that describes the remote peer's identity. ...
...ange for the duration of the connection. syntax var identity = rtcpeerconnection.peeridentity; value a javascript promise which resolves to an rtcidentityassertion that describes the remote peer's identity. if an error occcurs while attempting to validate an incoming identity assertion (that is, the information describing a peer's identity), the promise is rejected. if there isn't already a
target peer identity, peeridentity is set to a newly created promise and the process begins again, until the process succeeds or no further attempts to authenticate occur. note: the promise returned by setremotedescription() cannot resolve until any
target peer identity that's been set is validated. if the identity hasn't been validated yet, the promise returned by setremotedescription() will be rejec...
...ridentity is set to a newly created promise and the process begins again, until the process succeeds or no further attempts to authenticate occur. note: the promise returned by setremotedescription() cannot resolve until any
target peer identity that's been set is validated. if the identity hasn't been validated yet, the promise returned by setremotedescription() will be rejected. if there's no
target peer identity, setremotedescription() doesn't need to wait for validation to occur before it resolves. example in this example, a function, getidentityassertion(), is created which asynchronously waits for the peer's identity to be verified, then returns the identity to the caller. if an error occurs and the promise is rejected, this logs the error to the console and returns null to the caller...
SVGViewElement - Web APIs
each of the domstring values can be associated with the corresponding element using the getelementbyid() method call. ...
...each of the domstring values can be associated with the corresponding element using the getelementbyid() method call. ...
...each of the domstring values can be associated with the corresponding element using the getelementbyid() method call. ...
Screen - Web APIs
device's screen. a double between 0 and 1.0 is expected. events handler screen.onorientationchange a handler for the orientationchange event. ...
... a double between 0 and 1.0 is expected. events handler screen.onorientationchange a handler for the orientationchange event. ...
...a handler for the orientationchange event. methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from event
target: event
target.addeventlistener() registers an event handler of a specific event type on the event
target. event
target.removeeventlistener() removes an event listener from the event
target. event
target.dispatchevent() dispatches an event to this event
target. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event
targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring type, eventhandler h...
SharedWorkerGlobalScope - Web APIs
l scope) is accessible through the self keyword. some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see the complete list of functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent event
target, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. sharedworkerglobalscope.name read only the name that the sharedworker was (optionally) given when it was created using the sharedworker() constructor. this is mainly useful for debugging purposes. sharedworkerglobalscope.applicationcache read only this property returns the applicationcache obj...
...ect, mostly a subset of the navigator for browsing scopes, but adapted to workers. workerglobalscope.performance read only returns the performance object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent event
target, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers. sharedworkerglobalscope.onconnect is an eventhandler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread. methods this interface inherits methods from the workerglobals...
...dlers from windowtimers, windowbase64, and windoweventhandlers. sharedworkerglobalscope.onconnect is an eventhandler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread. methods this interface inherits methods from the workerglobalscope interface, and its parent event
target, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers. sharedworkerglobalscope.close() discards any tasks queued in the sharedworkerglobalscope's event loop, effectively closing this particular scope. inherited from workerglobalscope workerglobalscope.close() discards any tasks queued in the workerglobalscope's event loop, effectively closing this ...
Using readable streams - Web APIs
the image we originally fetched. return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our
target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobjecturl(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); let’s look in detail at how read() is used. in the pump() function seen above we first invoke read(),...
...; return; } note: close() is part of the new custom stream, not the original stream we are discussing here. we’ll explain more about the custom stream in the next section. if done is not true, we process the new chunk we’ve read (contained in the value property of the results object) and then call the pump() function again to read the next chunk. // enqueue the next data chunk into our
target stream controller.enqueue(value); return pump(); this is the standard pattern you’ll see when using stream readers: you write a function that starts off by reading the stream. if there is no more stream to read, you return out of the function. if there is more stream to read, you process the current chunk then run the function again. you keep running the function recursively until there ...
...ll the data out of our fetch stream. return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our
target stream controller.enqueue(value); return pump(); }); } } }) }) readablestream controllers you’ll notice that the start() and pull() methods passed into the readablestream() constructor are given controller parameters — these are instances of the readablestreamdefaultcontroller class, which can be used to control your stream. in our example we are us...
SyncEvent - Web APIs
is interface inherits from the extendableevent interface. ...
...ill="#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="2...
...f" 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" font-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 ...
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
must be gl.transform_feedback. transformfeedback a webgltransformfeedback object to bind. return value none. ...
...must be gl.transform_feedback. transformfeedback a webgltransformfeedback object to bind. return value none. ...
...must be gl.transform_feedback. transformfeedback a webgltransformfeedback object to bind. return value none. ...
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. ...
...possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. ...
...possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. ...
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. ...
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. ...
WebGL2RenderingContext.texStorage3D() - Web APIs
possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the number of texture levels. internalformat a glenum specifying the texture store format. ...
...possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the number of texture levels. internalformat a glenum specifying the texture store format. ...
...possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the number of texture levels. internalformat a glenum specifying the texture store format. ...
WebGL2RenderingContext - Web APIs
ds of the webgl 1 context can accept additional values when used in a webgl 2 context. you will find this info noted on the webgl 1 reference pages. the webgl tutorial has more information, examples, and resources on how to get started with webgl. constants see the webgl constants page. state information webgl2renderingcontext.getindexedparameter() returns the indexed value for the given
target. buffers webgl2renderingcontext.bufferdata() initializes and creates the buffer object's data store. webgl2renderingcontext.buffersubdata() updates a subset of a buffer object's data store. webgl2renderingcontext.copybuffersubdata() copies part of the data of a buffer to another buffer. webgl2renderingcontext.getbuffersubdata() reads data from a buffer and writes them to an arraybuffe...
...y object. webgl2renderingcontext.deletequery() deletes a given webglquery object. webgl2renderingcontext.isquery() returns true if a given object is a valid webglquery object. webgl2renderingcontext.beginquery() begins an asynchronous query. webgl2renderingcontext.endquery() marks the end of an asynchronous query. webgl2renderingcontext.getquery() returns a webglquery object for a given
target. webgl2renderingcontext.getqueryparameter() returns information about a query. sampler objects webgl2renderingcontext.createsampler() creates a new webglsampler object. webgl2renderingcontext.deletesampler() deletes a given webglsampler object. webgl2renderingcontext.bindsampler() binds a given webglsampler to a texture unit. webgl2renderingcontext.issampler() returns true if a give...
...eedbackvarying() returns information about varying variables from webgltransformfeedback buffers. webgl2renderingcontext.pausetransformfeedback() pauses a transform feedback operation. webgl2renderingcontext.resumetransformfeedback() resumes a transform feedback operation. uniform buffer objects webgl2renderingcontext.bindbufferbase() binds a given webglbuffer to a given binding point (
target) at a given index. webgl2renderingcontext.bindbufferrange() binds a range of a given webglbuffer to a given binding point (
target) at a given index. webgl2renderingcontext.getuniformindices() retrieves the indices of a number of uniforms within a webglprogram. webgl2renderingcontext.getactiveuniforms() retrieves information about active uniforms within a webglprogram. webgl2renderingco...
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. ...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. ...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. ...
WebGLRenderingContext.framebufferTexture2D() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. ...
...ttachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: gl.depth_stencil_attachment: depth and stencil buffer data storage. tex
target a glenum specifying the texture
target. possible values: gl.texture_2d: a 2d image. gl.texture_cube_map_positive_x: image for the positive x face of the cube. gl.texture_cube_map_negative_x: image for the negative x face of the cube. gl.texture_cube_map_positive_y: image for the positive y face of the cube. gl.texture_cube_map_negative_y: image for the negative y face of the cube. ...
... of the cube. gl.texture_cube_map_positive_z: image for the positive z face of the cube. gl.texture_cube_map_negative_z: image for the negative z face of the cube. texture a webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to be attached. must be 0. return value none. exceptions a gl.invalid_enum error is thrown if
target is not gl.framebuffer. attachment is not one of the accepted attachment points. tex
target is not one of the accepted texture
targets. a gl.invalid_value error is thrown if level is not 0. a gl.invalid_operation error is thrown if texture isn't 0 or the name of an existing texture object. examples gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, texture,...
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. ...
...ebuffer color encoding. either gl.linear or ext.srgb_ext. ext.framebuffer_attachment_texture_num_views_ovr a glsizei indicating the number of views of the framebuffer object attachment. ext.framebuffer_attachment_texture_base_view_index_ovr a glint indicating the base view index of the framebuffer object attachment. exceptions a gl.invalid_enum error is thrown if
target is not gl.framebuffer, gl.draw_framebuffer, gl.read_framebuffer or if attachment is not one of the accepted attachment points. examples gl.getframebufferattachmentparameter(gl.framebuffer, gl.color_attachment0, gl.framebuffer_attachment_object_type); specifications specification status comment webgl 1.0the definition of 'getframeb...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
ne with the camera mounted on a track or on a moving vehicle. the resulting motion can create impressively smooth effects, especially if moving along with the person or object that's the focus of your shot. while a dolly shot and a zoom seem like they ought to look about the same, they don't. the fact that zooming alters the camera's focal length means that the spatial relationship between the
target and its surroundings doesn't change even as the
target gets larger or smaller in the frame. on the other hand, a dolly shot, by actually moving the camera, replicates the sense of physical movement, causing the relationships of objects in the scene to shift as you expect while moving past them as you go toward or away from the
target of the shot. to perform a dolly operation, translate the camer...
... the camera, what really happens here is that the entire world moves along the z axis by dollydistance meters relative to the camera. if dollydistance is positive, the world moves toward the user by that amount, resulting in the camera being closer to the scene. contrariwise, negative values of dollydistance move the world away from the user, causing the camera to appear to move backward from the
target. trucking (moving left or right) trucking using a physical camera uses the same kind of rigging as dollying, but instead of moving the camera forward and backward, it moves from left to right or vice-versa. the camera doesn't rotate at all, so the focus of the shot slowly glides off the screen. this can suggest concentration, time passing, or contemplation when attempting to establish emotion i...
...ext, we go ahead and queue up the request to render the next frame of video, so we don't have to worry about doing it later, by simply calling requestanimationframe() again. now it's time to render the scene. if we did successfully obtain a pose, we get the xrwebgllayer we need to use for rendering from the session's renderstate object's baselayer property. we bind this to webgl's gl.framebuffer
target using the webglrenderingcontext method gl.bindframebuffer(). then we clear the framebuffer to ensure we're starting with a known state, since our renderer will not be touching every pixel. we set the clear color to opaque black using gl.clearcolor() and the value to clear the depth buffer to to 1.0 by calling the webglrenderingcontext method gl.cleardepth(). then we call the webglrenderingcontex...
Movement, orientation, and motion: A WebXR example - Web APIs
le from which this code is derived. displaying a matrix for instructive purposes, this example displays the contents of the important matrices used while rendering the scene. the displaymatrix() method is used for this; this function uses mathml to render the matrix, falling back to a more array-like format if mathml isn't supported by the user's browser. ...
...each entry is displayed with up to two decimal places. everything else the rest of the code is identical to that found in the earlier examples: initshaderprogram() initializes the glsl shader program, calling loadshader() to load and compil...
.../mo>\n<mtable>\n"; for (let y=0; y<numrows; y++) { outhtml += "<mtr>\n"; for (let x=0; x<rowlength; x++) { outhtml += `<mtd><mn>${mat[(x*rowlength) + y].tofixed(2)}</mn></mtd>\n`; } outhtml += "</mtr>\n"; } outhtml += "</mtable>\n<mo>]</mo>\n</mrow>\n</math>"; }
target.innerhtml = outhtml; } this replaces the contents of the element specified by
target with a newly-created <math> element which contains the 4x4 matrix. each entry is displayed with up to two decimal places. everything else the rest of the code is identical to that found in the earlier examples: initshaderprogram() initializes the glsl shader program, calling loadshader() to load and compile each shader's program, then attaching each one to the webgl context. once they're co...
Rendering and the WebXR frame animation callback - Web APIs
o be rendered in order to not drop the frame. for example, a 60 hz display has 1/60th of a second to render a single frame, or 0.0166667 seconds. and if the device's refresh rate is 120 hz, you only have 0.00883333 seconds to render each frame if you want to avoid dropping frames. even if the hardware is actually 120 hz, though, you can get by with just refreshing 60 times per second anyway, and
targeting that is usually a good baseline to follow. 60 fps is already beyond the point at which most people can easily detect that the animation isn't simply a series of still images going by really fast. in other words, when in doubt, you can assume that the display is refreshing at 60 hz. as long as your code is written properly, everything will be fine. renderer performance concerns clearly, you h...
...their position and orientation—using the frame's getviewerpose() method, passing in the viewer's reference space from the viewerrefspace previously obtained while setting up the webxr session. with the viewer's pose in hand, we can then begin to render the frame. the first step is to obtain access to the framebuffer into which the webxr device wants the frame drawn; this is done by getting the
target webgl layer from the session's renderstate object's baselayer property, then getting the framebuffer from that xrwebgllayer object. we then call gl.bindframebuffer() to bind that framebuffer as the
target for all upcoming drawing commands. the next step is to erase the framebuffer. while you can in theory skip this step—if and only if your rendering code is guaranteed to write every single pix...
...u interact with them through webxr. the third and final type of input is the traditional non-xr input device such as keyboards, mice, trackpads, touch screens, and non-xr gamepads and joysticks. orientation and position information that can be collected from the xr hardware directly is applied automatically. thus it's the other kinds of input that you need to handle yourself: pointing device
target and button presses gamepad inputs non-xr input device inputs to learn more about how to handle user inputs while presenting a scene using webxr, see the article inputs and input sources. updating object positions most (though not all) scenes include some form of animation, in which things move and react to one another in appropriate ways. for example, a virtual reality or augmented reality...
Migrating from webkitAudioContext - Web APIs
compliant web audio implementation. this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines. note: there is a library called webkitaudiocontext monkeypatch, which automatically fixes some of these changes to make most code
targetting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkitaudiocontext have been renamed in audiocontext. creategainnode() has been re...
...ans 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. this means that you may need to restructure your code to run the part which happened after the createbuffer() call in the success callback, as you can see in the example above. renaming of audioparam.set
targetvalueattime the set
targetvalueattime() method on the audioparam interface has been renamed to set
targetattime(). this is also a simple rename to improve the understandability of the api, and the semantics of the method are the same. if your code is using set
targetvalueattime(), you can simply rename it to use set
targetattime(). for example, if we have code that looks like this: var gainnode ...
...hod on the audioparam interface has been renamed to set
targetattime(). this is also a simple rename to improve the understandability of the api, and the semantics of the method are the same. if your code is using set
targetvalueattime(), you can simply rename it to use set
targetattime(). for example, if we have code that looks like this: var gainnode = context.creategain(); gainnode.gain.set
targetvalueattime(0.0, 10.0, 1.0); you can rename the method, and be compliant with the standard, like so: var gainnode = context.creategain(); gainnode.gain.set
targetattime(0.0, 10.0, 1.0); enumerated values that changed the original webkitaudiocontext api used c-style number based enumerated values in the api. those values have since been changed to use the web idl based enumerated values, ...
Example and tutorial: Simple synth keyboard - Web APIs
arted up so that it begins to produce sound by calling the oscillator's inherited audioscheduledsourcenode.start() method. playing a tone when the mousedown or mouseover event occurs on a key, we want to start playing the corresponding note. the notepressed() function is used as the event handler for these events. function notepressed(event) { if (event.buttons & 1) { let dataset = event.
target.dataset; if (!dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]] = playtone(dataset["frequency"]); dataset["pressed"] = "yes"; } } } we start by checking whether the primary mouse button is pressed, for two reasons. first, we want to only allow the primary mouse button to trigger notes playing. second, and more importantly, we are using this to handle mouse...
...lator is stored into osclist for future reference, and data-pressed is set to yes to indicate that the note is playing so we don't start it again next time this is called. stopping a tone the notereleased() function is the event handler called when the user releases the mouse button or moves the mouse out of the key that's currently playing. function notereleased(event) { let dataset = event.
target.dataset; if (dataset && dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]].stop(); osclist[dataset["octave"][dataset["note"]]] = null; delete dataset["pressed"]; } } notereleased() uses the data-octave and data-note custom attributes to look up the key's oscillator, then calls the oscillator's inherited stop() method to stop playing the note. finally, the osclist...
...dataset["octave"][dataset["note"]]] = null; delete dataset["pressed"]; } } notereleased() uses the data-octave and data-note custom attributes to look up the key's oscillator, then calls the oscillator's inherited stop() method to stop playing the note. finally, the osclist entry for the note is cleared and the data-pressed attribute is removed from the key element (as identified by event.
target), to indicate that the note is not currently playing. changing the master volume the volume slider in the settings bar provides a simple interface to change the gain value on the master gain node, thereby changing the loudness of all playing notes. the changevolume() method is the handler for the change event on the slider. function changevolume(event) { mastergainnode.gain.value = volumecon...
Window: message event - Web APIs
a window object when the window receives a message, for example from a call to window.postmessage() from another browsing context. ...
...a message, for example from a call to window.postmessage() from another browsing context. ...
...eevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const
targetframe = window.top.frames[1]; const
targetorigin = 'https://example.org'; const windowmessagebutton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => {
targetframe.postmessage('hello there',
targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: window.onmessage = (event) => { console.log(`received message: ${event.data...
Window.pageYOffset - Web APIs
extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll. ...
...e're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll. <iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var
target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop =
target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check. it then gets a reference to the element we want to scroll into view calling g...
... frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check. it then gets a reference to the element we want to scroll into view calling getelementbyid() on the frame's htmliframeelement.contentdocument. with the
target element in hand, we set the scrolltop of the frame's scrollingelement to the offsettop of the
target element. by doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the
target element. this will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. this prevents us fro...
Using XMLHttpRequest - Web APIs
} } function processstatus (odata) { if (odata.status > 0) { return; } /* the form is now totally serialized! do something before sending it to the server... */ /* dosomething(odata); */ /* console.log("ajaxsubmit - the form is now serialized. ...
...et.result + "\r\n"; this.owner.status--; processstatus(this.owner); } function plainescape (stext) { /* how should i treat a text/plain form encoding? what characters are not allowed? this is what i suppose...: */ /* "4\3\7 - einstein said e=mc2" ----> "4\\3\\7\ -\ einstein\ said\ e\=mc2" */ return stext.replace(/[\s\=\\]/g, "\\$&"); } function submitrequest (o
target) { var nfile, sfieldtype, ofield, osegmreq, ofile, bispost = o
target.method.tolowercase() === "post"; /* console.log("ajaxsubmit - serializing form..."); */ this.contenttype = bispost && o
target.enctype ? o
target.enctype : "application\/x-www-form-urlencoded"; this.technique = bispost ? this.contenttype === "multipart\/form-data" ? 3 : this.contenttype === "text\/plain" ? ...
...field, osegmreq, ofile, bispost = o
target.method.tolowercase() === "post"; /* console.log("ajaxsubmit - serializing form..."); */ this.contenttype = bispost && o
target.enctype ? o
target.enctype : "application\/x-www-form-urlencoded"; this.technique = bispost ? this.contenttype === "multipart\/form-data" ? 3 : this.contenttype === "text\/plain" ? 2 : 1 : 0; this.receiver = o
target.action; this.status = 0; this.segments = []; var ffilter = this.technique === 2 ? plainescape : escape; for (var nitem = 0; nitem < o
target.elements.length; nitem++) { ofield = o
target.elements[nitem]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodename.touppercase() === "input" ? ofield.getattribute("type").touppercase() : "text"; ...
Web APIs
olor_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource event
target extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfaceset...
... webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequestevent
target xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrref...
... xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit xrrigidtransform xrsession xrsessionevent xrsessioneventinit xrsessioninit xrsessionmode xrspace xrsystem xr
targetraymode xrview xrviewerpose xrviewport xrvisibilitystate xrwebgllayer xrwebgllayerinit xsltprocessor ...
ARIA: tab role - Accessibility
with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist. this combination identifies to assistive technology that the element is part of a group of related elements. some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have
targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist. when working with elements with the tab role, when they are selected or active, they should have their aria-selected attribute set ...
...ocus >= tabs.length) { tabfocus = 0; } // move left } else if (e.keycode === 37) { tabfocus--; // if we're at the start, move to the end if (tabfocus < 0) { tabfocus = tabs.length - 1; } } tabs[tabfocus].setattribute("tabindex", 0); tabs[tabfocus].focus(); } }); }); function changetabs(e) { const
target = e.
target; const parent =
target.parentnode; const grandparent = parent.parentnode; // remove all current selected tabs parent .queryselectorall('[aria-selected="true"]') .foreach(t => t.setattribute("aria-selected", false)); // set this tab as selected
target.setattribute("aria-selected", true); // hide all tab panels grandparent .queryselectorall('[role="tabpanel...
...ent .queryselectorall('[aria-selected="true"]') .foreach(t => t.setattribute("aria-selected", false)); // set this tab as selected
target.setattribute("aria-selected", true); // hide all tab panels grandparent .queryselectorall('[role="tabpanel"]') .foreach(p => p.setattribute("hidden", true)); // show the selected panel grandparent.parentnode .queryselector(`#${
target.getattribute("aria-controls")}`) .removeattribute("hidden"); } best practices it is recommended to use a button element with the role tab for their built-in functional and accessible features instead, as opposed to needing to add them yourself. for controlling tab key functionality for elements with the role tab, it is recommended to set all non-active elements to tabindex=-1, and to set ...
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
gn-items: stretch align-items: baseline in the live example below, the value of align-items is stretch. try the other values and see how all of the items align against each other in the flex container. aligning one item with align-self the align-items property sets the align-self property on all of the flex items as a group. ...
...you can change the value of align-items or change the values of align-self on the individual items to see how this works. ...
...e some key items are aligned to the right, with the main group on the left. you might think that this should be a use case for a justify-self property, however consider the image below. i have three items on one side and two on the other. if i were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention. instead we can
target item 4 and separate it from the first three items by giving it a margin-left value of auto. auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. each side tries to take as much space as it can, and so the block is pushed into the middle. in this live example, i have flex items arranged simply into a row with...
Column layouts - CSS: Cascading Style Sheets
equal. multiple rows of columns lined up by row and column. the recipes you need to choose different layout methods in order to achieve your requirements. a continuous thread of content — multi-column layout if you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. ...
...this is a different behavior to what you saw with multicol. ...
...this is a different behavior to what you saw with multicol. ...
Using media queries - CSS: Cascading Style Sheets
media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to
target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. syntax a media query is composed of an optional media type and any number of m...
...ng its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine multiple media queries into a single rule. each query in a comma-separated list is treated separately from the others. thus, if any of the queries in a list is true, the entire media statement returns true. in other words, lists behave like a logical or operator.
targeting media types media types describe the general category of a given device. although websites are commonly designed with screens in mind, you may want to create styles that
target special devices such as printers or audio-based screenreaders. for example, this css
targets printers: @media print { ... } you can also
target multiple devices. for instance, this @media rule uses two media queries ...
... media types media types describe the general category of a given device. although websites are commonly designed with screens in mind, you may want to create styles that
target special devices such as printers or audio-based screenreaders. for example, this css
targets printers: @media print { ... } you can also
target multiple devices. for instance, this @media rule uses two media queries to
target both screen and print devices: @media screen, print { ... } see media types for a list of all media types. because they describe devices in only very broad terms, just a few are available; to
target more specific attributes, use media features instead.
targeting media features media features describe the specific characteristics of a given user agent, output device, or environment. for instan...
Pseudo-classes - CSS: Cascading Style Sheets
html living standard living standard defines when particular selectors match html elements. selectors level 4 working draft defined :any-link, :blank, :local-link, :scope...
... html living standard living standard defines when particular selectors match html elements. selectors level 4 working draft defined :any-link, :blank, :local-link, :scope, :drop, ...
...taken over). html5 recommendation copies the relevant section from the canonical (whatwg) html spec. css basic user interface module level 3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning. selectors level 3 recommendation defined :
target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not(). defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning. no significant change for pseudo-classes defined in css level 2 (revision 1). css level 2 (r...
Visual formatting model - CSS: Cascading Style Sheets
ous boxes an anonymous box is created when there is not an html element to use for the box. this situation happens when, for example, you declare display: flex on a parent element, and directly inside there is a run of text not contained in another element. in order to fix the box tree, an anonymous box is created around that run of text. it will then behave as a flex item, however, it cannot be
targeted and styled like a regular box because there is no element to
target. the same thing happens when you have text runs interspersed with block elements. in the next example i have a string inside a <div>; in the middle of my string is a <p> element containing part of the text. the string is split into three boxes in the box tree. the part of the string before the paragraph element is wrapped...
... element containing part of the text. the string is split into three boxes in the box tree. the part of the string before the paragraph element is wrapped in an anonymous box, then we have the <p>, which generates a box, and then another anonymous box. something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by
targeting the anonymous box. in my examples, i am using a direct child selector to
target the children of the container. this does not change the anonymous boxes, as they are not a child of the parent block. inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <em></em>. this splits the sentence into three inline bo...
... be styled independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts also create anonymous boxes. grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise
targetted. table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row. line boxes line boxes are the boxes that wrap each line of text. you can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color. in the...
animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-mode css property sets how a css animation applies styles to its
target before and after its execution. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the
target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the
target will retain the computed values set by the last keyframe encountered during execution. the last keyframe depends on the value of animation-direction and animation-iteration-count: animation-direction animation-iteration-count ...
...the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending th...
font-weight - CSS: Cascading Style Sheets
e of these values for non-variable fonts using the fallback weights system. css fonts level 4 extends the syntax to accept any number between 1 and 1000 and introduces variable fonts, which can make use of this much finer-grained range of font weights. fallback weights if the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered: if the
target weight given is between 400 and 500 inclusive: look for available weights between the
target and 500, in ascending order. if no match is found, look for available weights less than the
target, in descending order. if no match is found, look for available weights greater than 500, in ascending order. if a weight less than 400 is given, look for available weights less than the ta...
... meaning of relative weights when lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined. ...
...n descending order. if no match is found, look for available weights greater than 500, in ascending order. if a weight less than 400 is given, look for available weights less than the
target, in descending order. if no match is found, look for available weights greater than the
target, in ascending order. if a weight greater than 500 is given, look for available weights greater than the
target, in ascending order. if no match is found, look for available weights less than the
target, in descending order. meaning of relative weights when lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined. note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). ...
Creating and triggering events - Developer guides
ents are commonly called synthetic events, as opposed to the events fired by the browser itself. creating custom events events can be created with the event constructor as follows: const event = new event('build'); // listen for the event. elem.addeventlistener('build', function (e) { /* ... */ }, false); // dispatch the event. elem.dispatchevent(event); the above code example uses the event
target.dispatchevent() method. this constructor is supported in most modern browsers (with internet explorer being the exception). for a more verbose approach (which works with internet explorer), see the old-fashioned way below. adding custom data – customevent() to add more data to the event object, the customevent interface exists and the detail property can be used to pass custom data. for exa...
... is: ' + e.detail); } the old-fashioned way the older approach to creating events uses apis inspired by java. the following shows an example with document.createevent(): // create the event. const event = document.createevent('event'); // define that the event name is 'build'. event.initevent('build', true, true); // listen for the event. elem.addeventlistener('build', function (e) { // e.
target matches elem }, false); //
target can be any element or other event
target. 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 ev...
...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 fire, and uses itself as the starting point textarea.addeventlistener('input', e => e.
target.dispatchevent(eventawesome)); creating and dispatching events dynamically elements can listen for 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() { ...
HTML attribute reference - HTML: Hypertext Markup Language
f this attribute is specified, it overrides the method attribute of the button's form owner. 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. if this attribute is specified, it overrides the novalidate attribute of the button's form owner. form
target <button>, <input> if the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. if this attribute is specified, it overrides the
target attribute of the button's form owner. headers <td>, <th> ids of the <th> elements...
...he whole resource, parts of it or nothing should be preloaded. radiogroup <command> readonly <input>, <textarea> indicates whether the element can be edited. referrerpolicy <a>, <area>, <iframe>, <img>, <link>, <script> specifies which referrer is sent when fetching the resource. rel <a>, <area>, <link> specifies the relationship of the
target object to the link object. required <input>, <select>, <textarea> indicates whether this element is required to fill out or not. reversed <ol> indicates whether the list should be displayed in a descending order instead of a ascending. rows <textarea> defines the number of rows in a text area. rowspan <td>, <th> defines the number of row...
...ne or more responsive image candidates. start <ol> defines the first number if other than 1. step <input> style global attribute defines css styles which will override styles previously set. summary <table> tabindex global attribute overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form> specifies where to open the linked document (in the case of an <a> element) or where to display the response recieved (in the case of a <form> element) title global attribute text to be displayed in a tooltip when hovering over the element. translate global attribute specify whether an element’s attribute values and the values of i...
<input type="color"> - HTML: Hypertext Markup Language
in both cases, you can determine the new value of the element by looking at its value. here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.
target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field. if the browser instead uses a color well, select() does nothing. you should be aware of this behavior s...
...he color of the first paragraph element in the document to match the new value of the color input. since input events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used. ...
...dly as the color picker is used. function updatefirst(event) { var p = document.queryselector("p"); if (p) { p.style.color = event.
target.value; } } when the color picker is dismissed, indicating that the value will not be changing again (unless the user re-opens the color picker), a change event is sent to the element. we handle that event using the updateall() function, using event.
target.value to obtain the final selected color: function updateall(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.
target.value; }); } this sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.
target. result the final result looks like this: specifications ...
Link types - HTML: Hypertext Markup Language
ndow.opener property on the opened window (it returns null). this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well). note that when noopener is used, nonempty
target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab. <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the referer: http header. (in firefox, before firefox 37, this worked only in links fo...
...gating to another page, to send this page address, or any other value, as referrer via the referer: http header. (in firefox, before firefox 37, this worked only in links found in pages. links clicked in the ui, like "open in a new tab" via the contextual menu, ignored this). <a>, <area>, <form> <link> opener reverts implicit rel="noopener" addition on links with
target="_blank" (see related html spec discussion, webkit change, and firefox bug discussion). <a>, <area>, <form> <link> pingback defines an external resource uri to call if one wishes to make a comment or a citation about the webpage. the protocol used to make such a call is defined in the pingback 1.0 specification. note: if the x-pingback: http header is also present, ...
...ition of 'preload' in that specification. candidate recommendation added preload. resource hintsthe definition of 'preconnect' in that specification. working draft added dns-prefetch, preconnect, and prerender values. html living standardthe definition of 'link types' in that specification. living standard added opener and made noopener the default behavior for
target="_blank" links. html5the definition of 'link types' in that specification. recommendation added tag, search, prefetch, noreferrer, nofollow, icon, and author. renamed copyright to license. removed start, chapter, section, subsection, and appendix html 4.01 specificationthe definition of 'link types' in that specification. recommendation added alternate, style...
PUT - HTTP
the http put request method creates a new resource or replaces a representation of the
target resource with the request payload. the difference between put and post is that put is idempotent: calling it once or several times successively has the same effect (that is no side effect), whereas successive identical post requests may have additional effects, akin to placing an order several times. ...
...to placing an order several times. ...
...html http/1.1 example request put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the
target resource does not have a current representation and the put request successfully creates one, then the origin server must inform the user agent by sending a 201 (created) response. http/1.1 201 created content-location: /new.html if the
target resource does have a current representation and that representation is successfully modified in accordance with the state of the enclosed representation, then the origin server must send either a 200 (ok) or a 204 (no content) response to indicate successful completion of the request. http/1.1 204 no content content-location: /existing.html specifications specification title ...
Object.getOwnPropertyNames() - JavaScript
.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. ...
...tynames( 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. ...
...op", "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. ...
handler.apply() - JavaScript
the handler.apply() method is a trap for a function call. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { apply: function(
target, thisarg, argumentslist) { } }); parameters the following parameters are passed to the apply() method. this is bound to the handler.
target the
target object. thisarg the this argument for the call. argumentslist the list of arguments for the call. return value the apply() method can return any value. description the handler.apply() method is a trap for a function call. interceptions this trap can intercept these operations: prox...
... arguments for the call. return value the apply() method can return any value. description the handler.apply() method is a trap for a function call. interceptions this trap can intercept these operations: proxy(...args) function.prototype.apply() and function.prototype.call() reflect.apply() invariants if the following invariants are violated, the proxy will throw a typeerror. ...
...ns: proxy(...args) function.prototype.apply() and function.prototype.call() reflect.apply() invariants if the following invariants are violated, the proxy will throw a typeerror. the
target must be a callable itself. that is, it must be a function object. examples trapping a function call the following code traps a function call. 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. ...
Comparing Reflect and Object methods - JavaScript
fined on the object and false if it was not. defineproperties() object.defineproperties() returns the objects that were passed to the function. returns a typeerror if any properties were not successfully defined on the object. n/a set() n/a reflect.set() returns true if the property was set successfully on the object and false if it was not. throws a typeerror if the
target was not an object. get() n/a reflect.get() returns the value of the property. throws a typeerror if the
target was not an object. deleteproperty() n/a reflect.deleteproperty() returns true if the property was deleted from the object and false if it was not. getownpropertydescriptor() object.getownpropertydescriptor() returns a property descriptor of the g...
...ject itself if its prototype was set successfully. throws a typeerror if the prototype being set was anything other than an object or null, or if the prototype for the object being modified is non-extensible. reflect.setprototypeof() returns true if the prototype was successfully set on the object and false if it wasn't (including if the prototype is non-extensible). throws a typeerror if the
target passed in was not an object, or if the prototype being set was anything other than an object or null. isextensible() object.isextensible() returns true if the object is extensible, and false if it is not. throws a typeerror in es5 if the first argument is not an object (a primitive). in es2015, it will be coerced into a non-extensible, ordinary object and will return false. re...
...rgument is not an object (a primitive). in es2015, treats the argument as a non-extensible, ordinary object and returns the object itself. reflect.preventextensions() returns true if the object has been made non-extensible, and false if it has not. throws a typeerror if the argument is not an object (a primitive). keys() object.keys() returns an array of strings that map to the
target object's own (enumerable) property keys. throws a typeerror in es5 if the
target is not an object, but coerces non-object
targets into objects in es2015. n/a ownkeys() n/a reflect.ownkeys() returns an array of property names that map to the
target object's own property keys. throws a typeerror if the
target is not an object. ...
Reflect.getOwnPropertyDescriptor() - JavaScript
etownpropertydescriptor(). it returns a property descriptor of the given property if it exists on the object, undefined otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.getownpropertydescriptor(
target, propertykey) parameters
target the
target object in which to look for the property. propertykey the name of the property to get an own property descriptor for. return value a property descriptor object if the property exists in
target object; otherwise, undefined. exceptions a typeerror, if
target is not an object. description the reflect.getownpropertydescriptor method returns a ...
...ich to look for the property. propertykey the name of the property to get an own property descriptor for. return value a property descriptor object if the property exists in
target object; otherwise, undefined. exceptions a typeerror, if
target is not an object. description the reflect.getownpropertydescriptor method returns a property descriptor of the given property if it exists in the
target object, undefined otherwise. the only difference to object.getownpropertydescriptor() is how non-object
targets are handled. examples using reflect.getownpropertydescriptor() reflect.getownpropertydescriptor({x: 'hello'}, 'x') // {value: "hello", writable: true, enumerable: true, configurable: true} reflect.getownpropertydescriptor({x: 'hello'}, 'y') // undefined reflect.getownpropertydescri...
...with object.getownpropertydescriptor, a non-object first argument will be coerced to an object at first. reflect.getownpropertydescriptor('foo', 0) // typeerror: "foo" is not non-null object object.getownpropertydescriptor('foo', 0) // { value: "f", writable: false, enumerable: true, configurable: false } s...
String.prototype.padEnd() - JavaScript
ith a given string (repeated, if needed) so that the resulting string reaches a given length. the padding is applied from the end of the current string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... that the resulting string reaches a given length. the padding is applied from the end of the current string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...://github.com/mdn/interactive-examples and send us a pull request. syntax str.padend(
targetlength [, padstring]) parameters
targetlength the length of the resulting string once the current str has been padded. if the value is lower than str.length, the current string will be returned as-is. padstring optional the string to pad the current str with. if padstring is too long to stay within
targetlength, it will be truncated: for left-to-right languages the left-most part and for right-to-left languages the right-most will be applied. the default value for this parameter is " " (u+0020). return value a string of the specified
targetlength with the padstring applied at the end of the current str. examples using padend 'abc'.padend(10); // "abc " 'abc'.padend(10, "foo");...
String.prototype.padStart() - JavaScript
r string (multiple times, if needed) until the resulting string reaches the given length. the padding is applied from the start of the current string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax str.padstart(
targetlength [, padstring]) parameters
targetlength the length of the resulting string once the current str has been padded. if the value is less than str.length, then str is returned as-is. padstring optional the string to pad the current str with. if padstring is too long to stay within the
targetlength, it will be truncated from the end. the default value is " " (u+0020 'space'). return valu...
...ters
targetlength the length of the resulting string once the current str has been padded. if the value is less than str.length, then str is returned as-is. padstring optional the string to pad the current str with. if padstring is too long to stay within the
targetlength, it will be truncated from the end. the default value is " " (u+0020 'space'). return value a string of the specified
targetlength with padstring applied from the start. 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 leftfil...
...h padstring applied from the start. 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. ...
TypedArray.prototype.set() - JavaScript
this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax typedarray.set(array[, offset]) typedarray.set(typedarray[, offset]) parameters array the array from which to copy values. ...
...interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax typedarray.set(array[, offset]) typedarray.set(typedarray[, offset]) parameters array the array from which to copy values. all values from the source array are copied into the
target array, unless the length of the source array plus the offset exceeds the length of the
target array, in which case an exception is thrown. typedarray if the source array is a typed array, the two arrays may share the same underlying arraybuffer; the javascript engine will intelligently copy the source range of the buffer to the destination range. offset optional the offset into the
target array at which to begin writing values from the source array. if this value is omitted, 0 is assu...
... exceptions a rangeerror, if the offset is set such as it would store beyond the end of the typed array. ...
Media container formats (file types) - Web media technologies
chrome edge firefox safari opus yes yes yes yes vorbis yes yes yes yes choosing the right container there are a few factors to consider when selecting the best container or containers to use for your media. the relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your
target audience. guidelines the best choice also depends on what you'll be doing with the media. playing back media is a different thing than recording and/or editing it. if you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with...
...depends on what you'll be doing with the media. playing back media is a different thing than recording and/or editing it. if you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs. if your
target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3gp container with appropriate compression. if you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs. if you want your media to be in a non-proprietary, open format, consider using one of the...
... browsers, such as mp3 (for audio) or mp4 (for video and/or audio). if your media is audio-only, choosing an audio-only container format likely makes sense. now that the patents have all expired, mp3 is a widely supported and good choice. wave is good but uncompressed, so be aware of that before using it for large audio samples. flac is a very good choice, due to its lossless compression, if the
target browsers all support it. unfortunately, neither of the relatively major lossless compression formats (flac and alac) are universally supported. flac is the more broadly supported of the two, but is not supported by macos without additional software installed, and is not supported at all on ios. if you need to offer lossless audio, you may need to provide both flac and alac to get close to unive...
enable-background - SVG: Scalable Vector Graphics
new [ <x> <y> <width> <height> ]? this value enables the ability of children of the current container element to access the background image. it also indicates that a new (i.e., initially transparent black) background image canvas is established and that in effe...
... animatable no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the
target device. otherwise, there is no current background image canvas, so graphics elements are only rendered onto the
target device. new [ <x> <y> <width> <height> ]? this value enables the ability of children of the current container element to access the background image. it also indicates that a new (i.e., initially transparent black) background image canvas is established and that in effect all children of the current container element shall be rendered into the new background image canvas in addition to be...
...<y> <width> <height> ]? this value enables the ability of children of the current container element to access the background image. it also indicates that a new (i.e., initially transparent black) background image canvas is established and that in effect all children of the current container element shall be rendered into the new background image canvas in addition to being rendered onto the
target device. the optional <x>, <y>, <width>, and <height> parameters are <number> values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. those values act as a clipping rectangle on the background image canvas. negative values for <width> or <height> are forbidden. if one, two, or three values are specified or if neither ...
patternContentUnits - SVG: Scalable Vector Graphics
bute viewbox is specified on the <pattern> element. 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. ...
...ted 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. ...
... 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. ...
Reddit Example - Archive of obsolete content
firefox 29 onwards. this example add-on creates a panel containing the mobile version of reddit. when the user clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser window. to accomplish this the add-on needs to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's
target url. the content script then needs to send the url to the add-on script. 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...
... two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that intercepts link clicks. finally, it registers a listener to the user-defined click event which in turn passes the url into the open function of the tabs module. this is the panel.js content script that intercepts link clicks: $(window).click(function (event) { var t = event.
target; // don't intercept the click if it isn't on a link. 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. if ($(t).parents('#header').length || $(t).parents('.nextprev').length) return; // intercept the click, passing it to the addon, which will ...
Communicating using "port" - Archive of obsolete content
uch as page-mod, might need to handle multiple pages, each with its own context in which the content scripts are executing, so it needs a separate channel (worker) for each page. so page-mod does not integrate the worker api directly: instead, each time a content script is attached to a page, the worker associated with the page is supplied to the page-mod in its onattach function. ...
...age is supplied to the page-mod in its onattach function. by supplying a
target for this function in the page-mod's constructor you can register to receive messages from the content script, and take a reference to the worker so as to emit messages to the content script. ...
context-menu - Archive of obsolete content
omatically removed from the menu. you never need to manually remove your items from the menu unless you want them to never appear again. for example, if your add-on needs to add a context menu item whenever the user visits a certain page, don't create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the
target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automatically. if the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally 10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of ...
... argument that provide information about the invocation context. context object properties: property description documenttype the mime type of the document the menu was invoked in. e.g. text/html for html pages, application/xhtml+xml for xhtml, or image/jpeg if viewing an image directly. documenturl the url of the document the menu was invoked in.
targetname the name of the dom element that the menu was invoked on, in lower-case.
targetid the id attribute of the element that the menu was invoked on, or null if not set. iseditable true if the menu was invoked in an editable element, and that element isn't disabled or read-only. this includes non-input elements with the contenteditable attribute set to true. sel...
panel - Archive of obsolete content
dd-on code. you can specify one or more content scripts to load into a panel using the contentscript or contentscriptfile options to the panel() constructor. you can communicate with the script using either the postmessage() api or (preferably, usually) the port api. ...
..., usually) the port api. for example, here's an add-on whose content script intercepts mouse clicks on links inside the panel, and sends the
target url to the main add-on code. the content script sends messages using self.port.emit() and the add-on script receives them using panel.port.on(). ...
system - Archive of obsolete content
} you can set a variable by setting the property: var system = require("sdk/system"); system.env.foo = "bar"; console.log(system.env.foo); you can unset a variable by deleting the property: var system = require("sdk/system"); delete system.env.foo; you can't enumerate environment variables. platform the type of operating system you're running on. this will be one of the values listed as os_
target, converted to lower case. var system = require("sdk/system"); console.log("platform = " + system.platform); architecture the type of processor architecture you're running on. this will be one of: "arm"``,"ia32", or"x64"`. var system = require("sdk/system"); console.log("architecture = " + system.architecture); compiler the type of compiler used to build the host application. for example: "m...
... = require("sdk/system"); console.log("architecture = " + system.architecture); compiler the type of compiler used to build the host application. for example: "msvc", "n32", "gcc2", "gcc3", "sunc", "ibmc" var system = require("sdk/system"); console.log("compiler = " + system.compiler); build an identifier for the specific build, derived from the build date. this is useful if you're trying to
target individual nightly builds. see nsixulappinfo's appbuildid. var system = require("sdk/system"); console.log("build = " + system.build); id the uuid for the host application. for example, "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" for firefox. this has traditionally been in the form "{aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee}" but for some applications it may be in the form "appname@vendor.tld". see ...
dev/panel - Archive of obsolete content
we're working on removing this restriction. enables you to extend the firefox developer tools. most of the firefox developer tools are hosted in a ui component called the toolbox. individual built-in tools, such as the javascript debugger or the web console, occupy "panels" in the toolbox. ...
...rce://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis. however, it can receive messages from the add-on that created it, and the add-on can pass it the debuggee so it can communicate with the debugger server the developer tools are
targeting. communicating with the panel document the main add-on code can't directly access the panel document or any scripts loaded by the panel document. however it can send messages to the panel document using the postmessage method of panel. this is closely modeled on window.postmessage. you can only send the panel document message after you've received the ready event. in the main add-on code: ...
system/runtime - Archive of obsolete content
access to information about firefox's runtime environment. all properties exposed are read-only. for more information, see nsixulruntime. globals properties insafemode this value is true if firefox was started in safe mode, otherwise false. os a string identifying the current operating system. for example, . "winnt", "darwin", or "linux". see os_
target for a more complete list of possible values. processtype the type of the caller's process, which will be one of these constants: constant value description process_type_default 0 the default (chrome) process. process_type_plugin 1 a plugin subprocess. process_type_content 2 a content subprocess. process_type_ipdlunittest 3 an ipdl unit testing subprocess. ...
... process, which will be one of these constants: constant value description process_type_default 0 the default (chrome) process. process_type_plugin 1 a plugin subprocess. process_type_content 2 a content subprocess. process_type_ipdlunittest 3 an ipdl unit testing subprocess. widgettoolkit a string identifying the
target widget toolkit in use. xpcomabi a string identifying the abi of the current processor and compiler vtable. this string takes the form <processor>-<compilerabi>, for example: "x86-msvc" or "ppc-gcc3". ...
Low-Level APIs - Archive of obsolete content
provides an api for creating namespaces for objects, which effectively may be used for creating fields that are not part of objects public api. core/promise implementation of promises to make asynchronous programming easier. dev/panel enables you to extend the firefox developer tools. event/core the event/core module allows the creation of apis to broadcast and subscribe to events. event/
target create objects that broadcast events. frame/hidden-frame creates firefox frames (i.e. xul <iframe> elements) that are not displayed to the user. frame/utils provides helper functions for working with platform internals like frames and browsers. fs/path provides access to the local filesystem with the nodejs path module api. io/byte-streams provides streams for reading and writing bytes. ...
...xecute scripts in them. net/url enables you to read content from a uri. net/xhr provides access to xmlhttprequest functionality. places/bookmarks create, modify, and retrieve bookmarks. places/favicon helper functions for working with favicons. places/history access the user's browsing history. platform/xpcom implement xpcom objects, factories, and services. preferences/event-
target listen to changes to the preferences system in firefox. preferences/service access the preferences system in firefox. remote/child enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process. remote/parent enables you to load modules, and privileged parts of your add-on in general, into child processes. styl...
Developing for Firefox Mobile - Archive of obsolete content
d to learn more about development of webextensions for firefox for android. to follow this tutorial you'll need to have learned the basics of jpm. firefox for android implements its ui using native android widgets instead of xul. with the add-on sdk you can develop add-ons that run on this new version of firefox mobile as well as on the desktop version of firefox. you can use the same code to
target both desktop firefox and firefox mobile, and use jpm-mobile instead of the normal jpm. right now not all modules are fully functional, but we're working on adding support for more modules. the tables at the end of this guide list the modules that are currently supported on firefox mobile. this tutorial explains how to run sdk add-ons on an android device connected via usb to your development ma...
...ome supported console/plain-text supported console/traceback supported content/content supported content/loader supported content/mod supported content/worker supported core/heritage supported core/namespace supported core/promise supported event/core supported event/
target supported frame/hidden-frame supported frame/utils supported io/byte-streams supported io/file supported io/text-streams supported lang/functional supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/url supported net/xhr supporte...
Deploying a Plugin as an Extension - Archive of obsolete content
our extension; all extensions have one. 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> <em:minversion>1.5</em:minversion> <em:maxversion>1.5.0.*</em:maxversion> </description> </em:
targetapplication> </description> </rdf> you can get more detailed information about this file at install.rdf. we'll cover the basics. the id specifies a unique id that uniquely ide...
.... we'll cover the basics. the id specifies a unique id that uniquely identifes this extension of the form. if you have written extensions for firefox in the past, you'll notice that we no longer require the use of guids as extension ids. the name specifies the name of the extension that appears in the extension manager. the version is used for version checking when we are updating extensions. the
targetapplication section specifies that platform we want to work on (that id is for firefox). it also specifies what versions of firefox we want to work with. now that we have an install.rdf file, we can actually package the xpi. simply use the zip utility to create the xpi file. make sure you keep the directory structure! now we can open the xpi in firefox and it will get installed. you'll have to res...
Multiple item extension packaging - Archive of obsolete content
a multiple item package and then start the installation of the individual packages it contains automatically. no other files besides the install.rdf install manifest and the files with a jar and xpi file extension will be extracted or utilized. install.rdf a multiple item package does not have the same requirements as an extension for its install.rdf. the only required properties are em:id, em:
targetapplication, and em:type. 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://w...
... the firefox and thunderbird 2.0 extension manager you can use the above syntax or <em:type>32</em:type> as shown below. ... <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> ... when specifying em:
targetapplication the minversion specified should be the highest minversion and the maxversion specified should be the lowest maxversion from all of the installable bundles contained by the multiple item package for the em:
targetapplication. if this is not done, any items that are not compatible will not be installed unless a compatibility check discovers updated compatibility information. installation...
Intercepting Page Loads - Archive of obsolete content
owser exists in every browser window. we store the handler function in a private variable because later we want to remove it when we do not need it anymore. gbrowser.removeeventlistener("load", this._loadhandler, true); finally, the actual code for the handler, which is very simple: _onpageload : function(event) { // this is the content document of the loaded page. let doc = event.original
target; if (doc instanceof htmldocument) { // is this an inner frame? if (doc.defaultview.frameelement) { // frame within a tab was loaded. // find the root document: while (doc.defaultview.frameelement) { doc = doc.defaultview.frameelement.ownerdocument; } } } } the second if validation is necessary if you need to make a distinction for html documents ...
...we regis...
Session store API - Archive of obsolete content
ng when the tab is restored. the session store api is implemented using the nsisessionstore interface. knowing when to restore each time firefox is about to restore a tab, an event of type sstabrestoring is sent. ...
...y, the sstabrestored event is sent. if you want to set permissions or otherwise manipulate a restored tab before the page is loaded into it, you should watch sstabrestoring. if you want to do something after the page is loaded, you should watch sstabrestored. both events are always sent for each tab being restored. you can determine which tab is being restored by looking at the event's original
target field. there's not really a way to determine when the last tab has been restored unless you determine how many tabs need to be restored then count the sstabrestored events. this section provides a few simple examples of how to make use of the session store api. saving a value with a tab the following code will attach a key/value pair to a tab, so that when the tab is restored, that pair is ...
Using microformats - Archive of obsolete content
ou prefer. var dumpstring = debug(microformatobject) parameters microformatobject the microformat object to dump. return value a string that describes the contents of the specified microformat object. get() returns an array of microformat objects corresponding to the microformats found that match specified criteria. var microformatsarray = microformats.get(name, rootelement, options,
targetarray); parameters name the name of the microformat to find. rootelement required. the dom element at which to begin the search. if you want to search the entire document, specify content.document. options optional. if provided, this is a javascript object that contains zero or more of the following flags: recurseexternalframes if true, child frames that reference external content ...
...vascript object that contains zero or more of the following flags: recurseexternalframes if true, child frames that reference external content are included in the search. the default is true. showhidden if true, hidden microformats are added; otherwise they're left out. the default is false. debug specify true if debug mode is in use; otherwise, specify false. the default is false.
targetarray optional. if provided, this is an array of microformat objects to which the search results are added. return value a new array of microformat objects matching the search criteria, or the array specified by microformats with the newly found microformat objects added. getnamesfromnode() returns a space-delineated list of microformat names that correspond to the specified microformat node...
Makefile.mozextension.2 - Archive of obsolete content
(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. ...
...r)</creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <
targetapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </
targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" ...
Binding Attachment and Detachment - Archive of obsolete content
of binding attachment. when a binding is attached, the following events occur: if required, anonymous content is cloned from the binding's content template and inserted around the bound element. the methods and properties of the binding are installed on the element and become available to scripts that reference the bound element. any specified event handlers are installed on their requested
targets. if the binding needs to execute any initialization code following its attachment to an element, it can do so using a <constructor> block inside <implementation> section. this block contains script that executes upon completion of the binding attachment. within this block this refers to the bound element. <destructor> call bindings attached through css are detached when any of the following ...
...ding style rule is removed the element is destroyed (e.g., by closing the document) when a binding is detached, the following events occur: anonymous content generated by the binding is destroyed. methods and properties with getters/setters are no longer accessible from the binding, although properties with raw values remain. any specified event handlers are unhooked from their respective
targets. a binding can specify a <destructor> block within <implementation> section that executes prior to the binding detachment. using a <destructor> block, a binding can perform any necessary cleanup before it is torn down. bindings in an inheritance chain are always detached from the most derived binding to the base. therefore the <destructor> block of the derived binding will execute, and then t...
Example Sticky Notes - Archive of obsolete content
me useful sometimes. all namespaces above are supported by default and they do not require any additional downloads or initializations. --> <binding id="default"> <!-- a separate binding. you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the
target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. --> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke...
...the bound element. unlike virtual property it is called in function context: this.setborder(arg) you also may define any amount of named arguments using <parameter name="argumentname"/> --> <parameter name="arg"/> <body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers. mouse events sent to bindings are refactored, so event.
target / event.related
target always points to the bound element, even if it was originated to/from a child. --> <handler event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to:...
XBL 1.0 Reference - Archive of obsolete content
this example...
... attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handling dom changes event flow and
targeting flow and
targeting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation. this example is
targeted to demonstra...
Mac stub installer - Archive of obsolete content
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...
... in the context of the installer rather than in the context of the browser. to do this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug
target of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself. how do i add an installer package to the mac installer? adding a package involves a...
Return Codes - Archive of obsolete content
n_use -217 the specified file cannot be deleted because it is in use. apple_single_err -218 an error occurred when unpacking a file in applesingle format. invalid_path_err -219 the path provided to getfolder was invalid. patch_bad_diff -220 an error occurred in gdiff. patch_bad_checksum_
target -221 the checksum generated for the source file does not match the checksum in the xpi file. patch_bad_checksum_result -222 the checksum of the patched file failed. uninstall_failed -223 an error occurred while uninstalling a package. package_folder_not_set -224 install folder not set in installation s...
...me filename being used in install install_cancelled -227 raised when installation is cancelled in medias res. ...
allowevents - Archive of obsolete content
« xul reference home allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. on listitem and titlebar elements, mouse events normally do not get sent to their children; instead they are re
targeted to the listitem and titlebar element itself. this means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list. by setting the allowevents attribute to true, this special behavior is disabled, and the events are
targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also re
targeted to the element itself. however, the al...
...ts are
targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also re
targeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be
targeted normally, but allows this to be different for each descendant. this behavior is used for menus, for instance, to allow a menu button to behave as a menu when clicking on it, yet have part of the menu behave as a button. for the latter, the allowevents attribute is set to true to have a click on the child button receive events instead of
targeting all events at the menu. ...
browser.type - Archive of obsolete content
nside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-
targetable and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are alwa...
...d inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-
targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrom...
Uploading and Downloading Files - Archive of obsolete content
file field to the data you use a file object that an extension can construct from file path. 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. this is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support put operations. function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/pl...
...t you can also upload a file using an http put operation. this is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support put operations. 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. fetch upload please refer to uploading a file section inside the fetch article. downloading files under construction... meanwhile you can read this. ...
appendNotification - Archive of obsolete content
is an array of button descriptions. each description is an object with the following properties: accesskey - the accesskey to appear on the button callback - function to be called when the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the
target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - ...
.../window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator) .getmostrecentwindow("navigator:browser"); } if (typeof gbrowser === "undefined") { //if there is no gbrowser defined, get it var gbrowser = window.gbrowser; } function testnotificationbutton1callback(thenotification, buttoninfo, event
target) { window.alert("button 1 pressed"); //prevent notification from closing: return true; }; function testnotificationbutton2callback(thenotification, buttoninfo, event
target) { window.alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificationcallback(reason) { window.alert("reason is: " + reas...
MenuItems - Archive of obsolete content
it is that need changing. you do not need to update the checked attribute as the menuitem will update this automatically before the command event is fired. note that the checked state is updated before the command event fires, so if you use the menuitem's checked attribute within the command listener, it will already be in the new state. <script> function changetoolbarstate(event) { if (event.
target.getattribute("checked") == "true") showtoolbar(); else hidetoolbar(); } </script> ... <menuitem label="show toolbar" accesskey="t" type="checkbox" oncommand="changetoolbarstate();"/> in this example, we show the toolbar when the menuitem is checked and hide the toolbar otherwise. there may be times when you do not want the checkbox state to be updated automatically when the...
...ed out could fail. one possibility is to simply reverse the checkbox state again. as this can be more complicated, it is also possible to use the autocheck attribute to disable this behavior. when the autocheck attribute is set to false, the checkbox state is not updated automatically, and you must write code to adjust the state yourself. <script> function changetoolbarstate(event) { if (event.
target.getattribute("checked") == "true") hidetoolbar(); event.
target.removeattribute("checked"); } else { if (!showtoolbar()) return; event.
target.setattribute("checked", "true"); } } </script> ... <menuitem label="show toolbar" accesskey="t" type="checkbox" autocheck="false" oncommand="changetoolbarstate();"/> this version of the changetoolbarstate function chan...
RDF Modifications - Archive of obsolete content
ible to use and/or implement other query types with templates, these additional types may support automatic updating. there are two main situations when the notifications are made. the first is when the modification functions on the datasource are called. there are four such functions: 'assert', to add a new triple (or arrow) to the rdf graph, 'unassert' to remove a triple, 'change' to adjust the
target of a triple, and 'move' to adjust the source of a 'triple'. for mozilla's datasources, the latter two just unassert the old triple and add a new one, creating the effect of changing the value. however, only one notification is made. 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.get...
...for mozilla's datasources, the latter two just unassert the old triple and add a new one, creating the effect of changing the value. however, only one notification is made. 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. when this happens, any templates observing the datasource will be notified via the rdf observer's onassert method. the second situation when notifications are made is when a datasource is being loaded or reloaded. actually, in...
Static Content - Archive of obsolete content
e. instead it will be what is called static content in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
...be the first item in the menu. static content example let's look at another example, involving radio buttons. actually, this example is similar, it just uses a radiogroup instead of a menulist to display the list of countries. ...
browser - Archive of obsolete content
nside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-
targetable and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are alwa...
...d inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-
targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrom...
commandset - Archive of obsolete content
ds | related ] this element is not displayed and serves as a container for command elements. in addition, this element can hold a command updater which is used to update commands when certain events occur. a common use of the command updater is to update cut, copy, and paste menu items. more information is available in the xul tutorial. 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. typically, this is used to update menu commands such as undo and cut based on when an event occurs. for example, since the cut ...
... focus: occurs when the focused element changes. select: occurs when the selected text changed. clipboard: occurs when the clipboard is changed. undo: occurs when the undo buffer is changed. oncommandupdate type: script code this event occurs when a command update occurs. you would use this to update the disabled status of items.
targets type: comma-separated list of element ids a comma-separated list of element ids that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all elements are valid. the command update will only occur when the event occurs to one of the specified elements. properties inherited properties align, , allowevents, , boxobject, bu...
iframe - Archive of obsolete content
nside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-
targetable and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are alwa...
...d inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-
targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrom...
NPN_PostURLNotify - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary posts data to a url, and receives notification of the result. syntax #include <npapi.h> nperror npn_posturlnotify(npp instance, const char* url, const char*
target, uint32 len, const char* buf, npbool file, void* notifydata); parameters the function has the following parameters: instance current plug-in instance, specified by the plug-in. url url of the post request, specified by the plug-in.
target target window, specified by the plug-in. for values, see npn_geturl. len length of the ...
...h these exceptions: npn_posturlnotify supports specifying headers when posting a memory buffer. npn_posturlnotify calls npp_urlnotify upon successful or unsuccessful completion of the request. for more information, see npn_posturl. npn_posturlnotify is typically asynchronous: it returns immediately and only later handles the request and calls npp_urlnotify. if this function is called with a
target parameter value of _self or a parent to _self, this function should return an invalid_param nperror. this is the only way to notify the plug-in once it is deleted. see npn_geturl for information about this parameter. see also npn_geturl, npp_urlnotify, npn_posturl ...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
tall manifest the install manifest describes the plugin to the user. 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:minversion> <em:maxversion>4.0.*</em:maxversion> </description> </em:
targetapplication> <em:unpack>true</em:unpack> </description> </rdf> this contains 5 required pieces of information. every add-on must have a unique id. this can be in a guid for...
...ion. every add-on must have a unique id. this can be in a guid form but the simpler email form is preferred now. you should aim to use a domain-name that you own and then your own unique short-name for the plugin before the @. the plugin must have a name to identify the plugin to the user in the list of add-ons. the version is fairly self-descriptive, it must be a toolkit version format. the
target application block says which versions of an application the plugin is compatible with. it includes the application id and the minimum and maximum version of the application that the plugin works with. there can be multiple
targetapplication blocks listed. the unpack property is necessary to tell applications using newer versions of gecko to unpack the plugin because dlls can't be loaded from xpi...
Sunbird Theme Tutorial - Archive of obsolete content
change the next six lines to describe ...
...change the next six lines to describe your theme. ensure that the internal name is a single word. note: if your theme is for a version of sunbird later than 0.4, then also change the maxversion. save the file. regi...
Browser Detection and Cross Browser Support - Archive of obsolete content
// but could be wrong! height = window.innerheight; } else { // other height = 0; } the approach is incorrect since it assumes that the only other browser besides internet explorer 5+ that implements document.getelementbyid is gecko. this is not true today and will become even less true as more browsers which support the w3c dom standards are introduced in the future. recommendations
target the standards and not particular browsers while the period from 1994-2000 was dominated by incompatible non-standard browsers from netscape and microsoft, today the dominating factor in web development are the standards proposed by the world wide web consortium (w3c). standards are important for web developers due to the increased flexibility, power of presentation, support for users with disabi...
...owsers while the period from 1994-2000 was dominated by incompatible non-standard browsers from netscape and microsoft, today the dominating factor in web development are the standards proposed by the world wide web consortium (w3c). standards are important for web developers due to the increased flexibility, power of presentation, support for users with disabilities to name just a few reasons.
targeting your web content to particular vendors ignores the possibility that other browsers which support the same standards may be introduced in the future. a common problem on the web today is the assumption that the only browsers in the world are netscape navigator and microsoft internet explorer. this ignores the existence of opera as well as the newer handheld devices which are being used to acces...
Using JavaScript Generators in Firefox - Archive of obsolete content
ent(event) { generator.send(event); } // when we're all done we can close the generator, but that must happen outside // of the generator so we use a timeout. ...
... closegenerator(); // always have an extra yield at the end or you will see stopiteration // exceptions. ...
Number.toInteger() - Archive of obsolete content
syntax number.tointeger(number) parameters number the value to be converted to an integer. ...
... syntax number.tointeger(number) parameters number the value to be converted to an integer. ...
Introduction to game development for the Web - Game development
games that have in the olden days been done using flash®. we're talking about kick-ass 3d action shooters, rpgs, and more. thanks to massive performance improvements in javascript just-in-time compiler technology and new apis, you can build games that run in the browser (or on html5-powered devices) without making compromises. the html5 game platform you can truly think of the web as a better
target platform for your game. 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 c...
...let's look at how the web can help you. the reach of the web is enormous; it's everywhere. games built with html5 work on smartphones, tablets, pcs and smart tvs. marketing and discoverability are improved. you're not limited to promoting your app on someone else's app store. instead, you can advertise and promote your game all over the web as well as...
Building up a basic demo with A-Frame - Game development
u can test it right away in the browser. it runs on desktop, mobile (ios and android), and oculus rift, gear vr and htc vive. a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc. it is based on the entity component system, which is known in the game development world, but it
targets web developers with a familiar markup structure, manipulable with javascript. the end result is 3d web experiences, which are vr-enabled by default. environment setup let's start by setting up an environment to create something with a-frame. we'll then build up a demo and run it. you should start off by: making sure you are using a modern browser with good webgl support (and webxr support i...
... the y axis and see how it affects the movement. conclusion everything is rendered properly and animating — congratulations on building your first a-frame scene! here's how the final version looks and works: if you have a vr device available, now is a good time to try out your scene with it too. note: you can also check it out on github. that was easier than you thought, right? a-frame
targets web developers by offering easy to use web markup and all the advantages that brings, such as javascript manipulation. it is easy to start with, but also provides a powerful api for advanced concepts, as well as dealing with cross browser differences and suchlike. the community is growing, just like the number of supported vr devices — it's a great time to start experimenting with such framewo...
Square tilemaps implementation: Static maps - Game development
map might use one or several atlases — or spritesheets — that contain all of the tile images. this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context. ...
...lemap object discussed above. for (var c = 0; c < map.cols; c++) { for (var r = 0; r < map.rows; r++) { var tile = map.gettile(c, r); if (tile !== 0) { // 0 => empty tile context.drawimage( tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height c * map.tsize, //
target x r * map.tsize, //
target y map.tsize, //
target width map.tsize //
target height ); } } } demo our static tilemap implementation demo pulls the above code together to show what an implementation of this map looks like. you can see a live demo and grab the full source code. ...
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
a distributed denial-of-service (ddos) is an attack in which many compromised systems are made to attack a single
target, in order to swamp server resources and block legitimate users. normally many persons, using many bots, attack high-profile web servers like banks or credit-card payment gateways. ddos concerns computer networks and cpu resource management. in a typical ddos attack, the assailant begins by exploiting a vulnerability in one computer system and making it the ddos master. the attack master, also known as the botmaster, identifies and infects other vulnerable systems with malware. eventually, the assailant instructs the controlled machines to launch an attack against a specified
target. there are two types of ddos attacks: a network-centric attack (which overloads a se...
...es and infects other vulnerable systems with malware. eventually, the assailant instructs the controlled machines to launch an attack against a specified
target. there are two types of ddos attacks: a network-centric attack (which overloads a service by using up bandwidth) and an application-layer attack (which overloads a service or database with application calls). 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"). the infected computers' owners normally don't know that their computers have been compromised, and they also suffer loss of service. a computer under an intruder's control is called a zombie or bot. a network of co-infected computers is known as a ...
HTML forms in legacy browsers - Learn web development
e default appearance of form control because altering one css property value may alter some input types but not others. for example, if you declare input { font-size: 2rem; }, it will impact number, date, and text, but not color or range. if you alter a property, that may impact the appearance of the widget in unexpected ways. for example, [value] { background-color: #ccc; } may have been used to
target every <input> with a value attribute, but changing the background-color or border radius on a <meter> will lead to likely unexpected results that differ across browsers. you can declare appearance: none; to remove the browser styles, but that generally defeats the purpose: as you lose all styling, removing the default look and feel your visitors are used to. to summarize, when it comes to styli...
...e is not destroyed. you can also investigate some hard techniques such as rebuilding widgets with javascript. but in that case, do not hesitate to charge your client for such foolishness. feature detection and polyfills css and javascript are awesome technologies, but it's important to ensure you don't break legacy browsers. ...
Functions — reusable blocks of code - Learn web development
while loop, or if...else statement, you are making use of a function. built-in browser functions we've made use of functions built in to the browser a lot in this course. ...
...a function. built-in browser functions we've made use of functions built in to the browser a lot in this course. ...
Client-Server Overview - Learn web development
implemented by your server-side code, irrespective of which programming language or web framework you select. web servers and http (a primer) web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, the browser sends an http request to the server. this request includes: a url identifying the
target server and resource (e.g. an html file, a particular data point on the server, or a tool to run). a method that defines the required action (for example, to get a file or to save or update some data). the different methods/verbs and their associated actions are listed below: get: get a specific resource (e.g. an html file containing information about a product, or a list of products). ...
...charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get). the
target resource url (/search). the url parameters (q=client%2bserver%2boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev). the
target/host website (developer.mozilla.org). the end of the first line also includes a short string identifying the specific protocol version (http/1.1). the final line contains information about the client-side cookies — you can see in this case th...
Website security - Learn web development
un when the new page is loaded. for example, consider a site search function where the search terms are encoded as url parameters, and these terms are displayed along with the results. 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. as discussed earlier, this gives the attacker all the information they need to enter the site as the
target user, potentially making purchases as the user or sharing their contact information. a persistent xss vulnerability occurs when the malicious script is stored on the website and then ...
...isible <iframe> controlled by the attacker. clickjacking could also be used to get the user to click a button on a visible site, but in doing so actually unwittingly click a completely different button. as a defense, your site can prevent itself from being embedded in an iframe in another site by setting the appropriate http headers. denial of service (dos). dos is usually achieved by flooding a
target site with fake requests so that access to a site is disrupted for legitimate users. the requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files). dos defenses usually work by identifying and blocking "bad" traffic while allowing legitimate messages through. these defenses are typically located before or in the web s...
Getting started with React - Learn web development
ort react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org"
target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom. most react components follow this pattern. import statements the import statements at the top of th...
...pp, your browser would show you an error. let's look at app more closely. function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org"
target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } the app function returns a jsx expression. this expression defines what your browser ultimately renders to the dom. some elements in the expression have attributes, which are written just like in html, following a pattern of attribute="value". on line 3, the opening <div> ...
React interactivity: Editing, filtering, conditional rendering - Learn web development
tive: to learn about conditional rendering in react, and implementing list filtering and an editing ui in our app. editing the name of a task we don’t have a user interface for editing the name of a task yet. we'll get to that in a moment. to start with, we can at least implement an edittask() function in app.js. it’ll be similar to deletetask() because it'll take an id to find its
target object, but it'll also take a newname property containing the name to update the task to. we'll use array.prototype.map() instead of array.prototype.filter() because we want to return a new array with some changes, instead of deleting something from the array. add the edittask() function inside your app component, in the same place as the other functions: function edittask(id, newname) { cons...
...o update our state with the new name of the task. we'll start by making a new hook for storing and setting the new name. still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.
target.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its onchange event. update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following...
Strategies for carrying out testing - Learn web development
esting. gotta test 'em all? when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with. there is no way you can test on every combination of browser and device your users might use to view your site — there are just too many, and new ones appear all the time. instead, you should try to make sure your site works on the most important
target browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have. by coding defensively, we mean trying to build in intelligent fallbacks so that if a feature or style doesn't work in a browser, the site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core information is still acce...
...te: some server-side development environments provide useful mechanisms for rolling out site changes to only a subset of users, providing a useful mechanism for getting a feature tested by a subset of users without the need for a separate development server. an example is django waffle flags. summary after reading this article you should now have a good idea of what you can do to identify your
target audience/
target browser list, and then effectively carry out cross-browser testing on that list. next we'll turn our attention to the actual code issues your testing might uncover, starting with html and css. previous overview: cross browser testing next in this module introduction to cross-browser testing strategies for carrying out testing handling common html and css problems ...
Cross browser testing - Learn web development
what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups. handling common html and css problems with the scene set, we'll now look specifically at t...
Mozilla’s UAAG evaluation report
(p2) c when focus and/or selection changes they are in the viewport 5.5 confirm form submission. (p2) p only al...
...(p2) c when focus and/or selection changes they are in the viewport 5.5 confirm form submission. (p2) p only allows confirmation if the information is no...
A bird's-eye view of the Mozilla framework
rce description framework (rdf) example, where rdf is a framework for describing and interchangingmetadata, that is, information about information. in this example, we’re interested in the rdf sub-graph underlying thecontents panel widget within thehelp viewer window. suppose the client already has an nsirdfdatasource object representing a sub-graph of an rdf graph and calls nsirdfdatasource.get
target(resource, nc_link, true) to obtain an nsirdfnode representing a specific node in the graph, in this case a link to ahelp viewer document page. the client is completely unaware of which c++ class (or other language) actually implements nsirdfnode; it only interacts with the idl interface. the client would like to ask the nsirdfnode whether its supports nsirdfliteral. an nsirdfnode must be an nsir...
...f/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. getlink() uses the nsirdfservice to obtain an nsirdfresource for the requested link. var resource = rdf.getresource(rdfid); nsirdfcompositedatasource inherits from nsirdfdatasource, which supports a get
target() method for obtaining the nsirdfnode for a given resource and property. var link = tocds.get
target(resource, nc_link, true); now that getlink() has the nsirdfnode for the link, it can call queryinterface() to check whether the nsirdfliteral is supported. link = link.queryinterface(components.interfaces.nsirdfliteral); if nsirdfliteral is supported, getlink() uses it to return the value o...
Creating a Language Pack
your language code, in this case, x-testing, or add it in front of the current setting, seperated with a comma. before gecko 59 you had to set the preference general.useragent.locale to your language code. l10n binary repack for apps currently in development, you need to get the right strings for the build you use. best is to create an installer there. first, we get the en-us builds. there is a
target to get those, too, another way to test it to repack the en-us binary. from the obj-firefox-build/browser/locales directory, download the most recent en-us nightly that will be repacked to include your locale. $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command sligh...
...has been updated to the revision the binary was built from. let's go to the build directory again and continue the repacking. $ cd ../obj-firefox-build/browser/locales we will now merge the localized files from x-testing locale with the en-us files from the original source. issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir rm -f -rf mergedir macosx_deployment_
target= compare-locales -m mergedir /users/your_id/mozilla/vc/mozilla-aurora/browser/locales/l10n.ini /users/your_id/mozilla/vc/l10n-central x-testing x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ... // lots of notifications about missing entities ... x-testing: changed: 6 missinginfiles: 6124 missing: 5 0% of...
Creating a spell check dictionary add-on
<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 install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:
targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:
targetapplication> <!-- thunderbird --> <em:
targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minvers...
... <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:
targetapplication> <!-- thunderbird --> <em:
targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:
targetapplication> <!-- seamonkey --> <em:
targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:maxversion>2.49</em:maxversion> </description> </em:
targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you...
Error codes returned by Mozilla APIs
he file is not executable. nsifile.isexecutable() may be used to check if a file is executable. ns_error_file_unknown_type (0x80520004) an call was made to nsifile.create() with an invalid type. only normal_file_type and directory_type are allowed. ns_error_file_destination_not_dir (0x80520005) an attempt was made to copy or move a file to a destination that is not a directory. ns_error_file_
target_does_not_exist (0x80520006) an attempt was made to reference a file that does not exist for copy/move, checking its size, etc. ns_error_file_copy_or_move_failed (0x80520007) a call to nsifile.copyto() or nsifile.moveto() failed. ns_error_file_already_exists (0x80520008) an attempt was made to create a file that already exists. ns_error_file_invalid_path (0x80520009) this error occurs when ...
...x804b0002) the asynchronous request failed because it was aborted by some user action. ns_binding_redirected (0x804b0003) the asynchronous request has been "redirected" to a different async request. (for example, an http redirect occurred). this error code is used with load groups to notify the load group observer when a request in the load group is redirected to another request. ns_binding_re
targeted (0x804b0004) the asynchronous request has been "re
targeted" 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. ns_error_malformed_uri (0x804b000a) the uri is malformed. ns_error_already_connected (0x804b000b) the connection is already establ...
Cross Process Object Wrappers
essage() or sendsyncmessage(). the optional third parameter to each of these functions is an object whose properties are objects to wrap. 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. the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = mess...
...chronously pass objects (such as event listener functions) into functions defined in the cpow. this means you can write code like this: // frame script /* on mouseover, send the button to the chrome script as a cpow. */ var button = content.document.getelementbyid("click-me"); button.addeventlistener("mouseover", function (event) { sendasyncmessage("my-addon-message", {}, { element : event.
target }); }, false); // chrome script /* load the frame script, then listen for the message. when we get the message, extract the cpow and add a function as a listener to the button's "click" event. */ browsermm.loadframescript("chrome://my-addon/content/frame-script.js", false); browsermm.addmessagelistener("my-addon-message", function(message) { let wrapper = message.objects.element; w...
Performance
alize some fairly heavyweight objects. better: addon.js as above // framescript.js components.utils.import("resource://my-addon/processmodule.jsm", {}).addframe(this) // processmodule.jsm const exported_symbols = ['addframe']; const precomputedconstants = // ... function helper(window, action) { // ... ...
...nly need this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.
target; let callback = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length})", false) } function decoratebutton(button, count) ...
mozbrowsercontextmenu
user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>. this event can be used to control what will appear in the menu. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
...he event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport. clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport. system
targets an array containing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown. for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link. contextmenu a menu object (see the menu object, below) representing a custom menu def...
mozbrowseropenwindow
it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown
target. ...
... fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown
target. the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
Browser API
tmliframeelement.unmute() unmutes any audio playing in the browser <iframe>. htmliframeelement.getmuted() indicates whether the browser <iframe> is currently muted. event-related methods in order to manage the browser <iframe>'s content, many new events were added (see below). the following methods are used to deal with those events: the <iframe> gains support for the methods of the event
target interface addeventlistener(), removeeventlistener(), and dispatchevent(). htmliframeelement.sendmouseevent() sends a mouseevent to the <iframe>'s content. utility methods last, there are some utility methods, useful for apps that host a browser <iframe>. htmliframeelement.getstructureddata() retrieves any structured microdata (and hcard and hcalendar microformat data) contained in the h...
... of a browser <iframe> with an open web app embedded in it. mozbrowsermetachange sent when a <meta> elelment is added to, removed from or changed in the browser <iframe>'s content. mozbrowseropenwindow sent when window.open() is called within a browser <iframe>. mozbrowseropentab sent when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link
target in a new tab (for example ctrl/cmd + click.) mozbrowserresize sent when the browser <iframe>'s window size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged sent when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewch...
Gecko SDK
dk corresponding to security updates of mozilla (e.g., mozilla 1.7.3) since the headers and glue libs in the gecko sdk are usually not changed as a result of security updates. you do have to get and distribute the newest gecko components (gklayout.dll etc.), though. downloading for gecko versions before 2.0, you should choose the gecko sdk version for the earliest version of mozilla you wish to
target. for gecko versions 2.0 and higher, you must recompile your component for each release as cross-version compatibility is no longer supported. in addition to the below versions, you can find other versions (including beta) here: xulrunner releases (files include "sdk" in the name). the sdk follows the same release schedule as firefox/thunderbird. once the sdk enters beta, it is suitable for bu...
...below versions, you can find other versions (including beta) here: xulrunner releases (files include "sdk" in the name). the sdk follows the same release schedule as firefox/thunderbird. once the sdk enters beta, it is suitable for building extensions; your component should work with release builds of the sdk without any modifications. due to the rapid release process, it may be a good idea to
target the sdk in beta. download link latest gecko (latest firefox) gecko 1.9.2 (firefox 3.6) gecko 1.9.1 (firefox 3.5) gecko 1.9 (firefox 3.0) gecko 1.8 (firefox 1.5 and 2.0) windows download download download download download mac x86_64 download n/a n/a n/a n/a mac i386 download download download download ...
How to add a build-time test
if a test is added, that test or its directory needs to be mentioned in a makefile.in file somewhere so that the build system knows about it. standalone executables to add a test that is written in c or c++ and which is called as a standalone executable, a few things must be done. ...
...the heavy lifting. a simple example of adding a test is in . note that the following variables are supplied by the rules.mk file: cppsrcs, simple_programs, run_test_program. xpcshell tests here are the simple guidelines for adding an xpcshell test to the build system. 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 t...
Introduction to Layout in Mozilla
kes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b. ...
... resize, style-change processed immediately via presshell method incremental reflows
targeted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands incremental reflow recursively descend to
target recovering reflow state child rs.reason set to incremental incremental reflow process reflow “normally” at
target frame child rs.reason set based on rc’s type incremental reflow propagate damage to frames later “in the flow” incremental reflow multiple reflow commands are batched nsreflowpath maintains a tree of
target frames ...
Introduction to NSPR
r, if local threads are also present, and they are preemptable, they are subject to deadlock. at this time, the only safe solutions are to turn off preemption (a runtime decision) or to preempt global threads only. interrupting threads nspr threads are interruptable, with some constraints and inconsistencies. to interrupt a thread, the caller of pr_interrupt must have the nspr reference to the
target thread (prthread*). when the
target is interrupted, it is rescheduled from the point at which it was blocked, with a status error indicating that it was interrupted. nspr recognizes only two areas where a thread may be interrupted: waiting on a condition variable and waiting on i/o. in the latter case, interruption does cancel the i/o operation. in neither case does being interrupted imply the de...
...monitor using pr_notifycondvar. logically, each such notification promotes one thread that was waiting on the condition to a ready state. an alternate form of notification (pr_notifyallcondvar) promotes all threads waiting on a condition to the ready state. if no threads were waiting, the notification is a no-op. waiting on a condition variable is an interruptible operation. another thread could
target the waiting thread and issue a pr_interrupt, causing a waiting thread to resume. in such cases the return from the wait operation indicates a failure and definitively indicates that the cause of the failure is an interrupt. a call to pr_waitcondvar may also resume because the interval specified on the wait call has expired. however, this fact cannot be unambiguously delivered, so no attempt is m...
PR_Interrupt
syntax #include <prthread.h> prstatus pr_interrupt(prthread *thread); parameter pr_interrupt has the following parameter: thread the thread whose interrupt request you want to set. returns the function returns one of the following values: if the specified thread is currently blocked, pr_success. otherwise, pr_failure. description the purpose of pr_interrupt is to request that a thread performing some task stop what it is doing and return to some control point. it is assumed that a control point has been mutually arranged between the thread doing the interrupting and the thread being interrupted. ...
...t is delivered exactly once or explicitly canceled. the interrupted thread returns pr_failure (-1) with an error code (see pr_geterror) for blocking operations that return a prstatus (such as i/o operations, monitor waits, or waiting on a condition). to check whether the thread was interrupted, compare the result of pr_geterror with pr_pending_interrupt_error. pr_interrupt may itself fail if the
target thread is invalid. bugs pr_interrupt has the following limitations and known bugs: there can be a delay for a thread to be interrupted from a blocking i/o function. in all nspr implementations, the maximum delay is at most five seconds. in the pthreads-based implementation on unix, the maximum delay is 0.1 seconds. file i/o is considered instantaneous, so file i/o functions cannot be interr...
PR_JoinThread
terminates. syntax #include <prthread.h> prstatus pr_jointhread(prthread *thread); parameter pr_jointhread has the following parameter: thread a valid identifier for the thread that is to be joined. returns the function returns one of the following values: if successful, pr_success if unsuccessful--for example, if no joinable thread can be found that corresponds to the specified
target thread, or if the
target thread is unjoinable--pr_failure. description pr_jointhread is used to synchronize the termination of a thread. the function is synchronous in that it blocks the calling thread until the
target thread is in a joinable state. pr_jointhread returns to the caller only after the
target thread returns from its root function. pr_jointhread must not be called until after pr_...
...l after pr_createthread has returned. if pr_jointhread is not called on the same thread as pr_createthread, then it is the caller's responsibility to ensure that pr_createthread has completed. several threads cannot wait for the same thread to complete. one of the calling threads operates successfully, and the others terminate with the error pr_failure. the calling thread is not blocked if the
target thread has already terminated. pr_jointhread is interruptable. ...
Threads
thread is created by an explicit client request and remains a valid, independent execution entity until it returns from its root function or the process abnormally terminates. threads are critical resources and therefore require some management. to synchronize the termination of a thread, you can join it with another thread (see pr_jointhread). joining a thread provides definitive proof that the
target thread has terminated and has finished with both the resources to which the thread has access and the resources of the thread itself. for an overview of the nspr threading model and sample code that illustrates its use, see introduction to nspr. for api reference information related to thread synchronization, see locks and condition variables. threading types and constants prthread prthrea...
...ss: pr_newthreadprivateindex allocates a unique index. if the call is successful, every thread in the same process is capable of associating private data with the new index. pr_setthreadprivate associates private thread data with an index. pr_getthreadprivate retrieves data associated with an index. interrupting and yielding pr_interrupt requests an interrupt of another thread. once the
target thread has been notified of the request, the request stays with the thread until the notification either has been delivered exactly once or is cleared. pr_clearinterrupt clears a previous interrupt request. pr_sleep causes a thread to yield to other threads for a specified number of ticks. setting global thread concurrency pr_setconcurrency sets the number of global threads used by nspr to...
Index
ar-file add a new pkcs #11 module to the database using the named jar file. use this command with the -installdir and -tempdir arguments. the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the
target machine, including the pkcs #11 module library file and other files such as documentation. this is covered in the jar installation file section in the man page, which details the special script needed to perform an installation through a server or with modutil. -list [modulename] display basic information about the contents of the secmod...
...eate an individual certificate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the
target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). argum...
JSS 4.4.0 Release Notes
new functionality new functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:. support for ipv6. support for tls v1.1 and tls v1.2 via nss though jss. ...
...ew functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:. support for ipv6. support for tls v1.1 and tls v1.2 via nss though jss. bugs fixed in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&
target_milestone=4.4&
target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8. jss 4.4.0 requir...
NSS 3.14.2 release notes
terprise linux 5.x systems, install the binutils220 package and add /usr/libexec/binutils220 to the beginning of your path environment variable. initial manual pages for some nss command line tools have been added. they are still under review, and contributions are welcome. the documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build
target. new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing notable changes in nss 3.14.2 bug 805604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel. if compiled on linux systems in 64-bit mode, nss will include runtime detection to check if the platform supports aes-n...
...decryptfinal now correctly validate the pkcs #7 padding when present. bug 807890 - added support for microsoft trust list signing eku. bug 822433 - fixed a crash in dtls_freehandshakemessages. bug 823336 - reject invalid ldap aia uris sooner. bugs fixed in nss 3.14.2 https://bugzilla.mozilla.org/buglist.cgi?list_id=5502456;resolution=fixed;classification=components;query_format=advanced;
target_milestone=3.14.2;product=nss compatibility nss 3.14.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.14.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible...
NSS 3.15.4 release notes
able changes in nss 3.15.4 reordered the cipher suites offered in ssl/tls client hello messages to match modern best practices. updated the set of root ca certificates (version 1.96). improved ssl/tls false start. in addition to enabling the ssl_enable_false_start option, an application must now register a callback using the ssl_setcanfalsestartcallback function. ...
...ent hello messages to match modern best practices. updated the set of root ca certificates (version 1.96). improved ssl/tls false start. in addition to enabling the ssl_enable_false_start option, an application must now register a callback using the ssl_setcanfalsestartcallback function. when building on windows, os_
target now defaults to win95. to use the winnt build configuration, specify os_
target=winnt. bugs fixed in nss 3.15.4 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&
target_milestone=3.15.4&product=nss compatibility nss 3.15.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared li...
NSS 3.16 release notes
ibution information the hg tag is nss_3_16_rtm. nss 3.16 requires nspr 4.10.3 or newer. nss 3.16 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_rtm/src/ new in nss 3.16 new functionality supports the linux x32 abi. (this requires nspr 4.10.4.) to build for the linux x32
target, set the environment variable use_x32=1 when building nss. new functions in cms.h nss_cmssignerinfo_verify - verify the signature of a single signerinfo. it just verifies the signature, assuming that the certificate has been verified already. new macros in sslproto.h tls_rsa_with_rc4_128_sha, tls_rsa_with_3des_ede_cbc_sha, etc. - cipher suites that were first defined in ssl...
...gnore lines of text that aren't in base64 format. ...
NSS 3.53 release notes
/lib/ssl/sslsock.c:4460 bug 1638289 - avoid multiple definitions of sha{256,384,512}_* symbols when linking libfreeblpriv3.so in firefox on ppc64le bug 1636389 - relocate deprecated seed algorithm bug 1637083 - lib/ckfw: no such file or directory. stop. ...
...a program linked with older nss 3.x shared libraries will work with nss 3.53 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.56 release notes
rc2 and relocate to lib/freebl/deprecated. bug 1656429 - correct rtt estimate used in 0-rtt anti-replay. bug 1588941 - send empty certificate message when scheme selection fails. bug 1652032 - fix failure to build in windows arm64 makefile cross-compilation. bug 1625791 - fix deadlock issue in nssslot_istokenpresent. bug 1653975 - fix 3.53 regression by setting "all" as the default makefile
target. ...
...a program linked with older nss 3.x shared libraries will work with nss 3.56 shared libraries without recompiling or relinking. ...
NSS environment variables
r flags to produce symbolic debugging information in a particular format. 3.12.8 nsdistmode string on operating systems other than windows, this controls whether copies, absolute symlinks, or relative symlinks of the output files should be published to mozilla/dist. the possible values are: copy: copies of files are published absolute_symlink: symlinks whose
targets are absolute pathnames are published if not specified, default to relative symlinks (symlinks whose
targets are relative pathnames). on windows, copies of files are always published. before 3.0 ns_use_gcc boolean (1 to enable) on systems where gcc is not the default compiler, this tells nss to build with gcc. before 3.0 nss_allow_sslkeylogfile bo...
... by default. as of nss 3.33 this variable has no effect. 3.16 nss_enable_ecc (deprecated) boolean (1 to enable) enable building of code that uses elliptic curve cryptography. unused as of nss 3.16; see nss_disable_ecc. before 3.16; since 3.11. nss_force_fips boolean (1 to enable) allows enabling fips mode using nss_fips 3.24 os_
target string (
target os) for cross-compilation environments only, when the
target os is not the default for the system on which the build is performed. values understood: win95 before 3.0 use_64 boolean (1 to enable) on platforms that has separate 32-bit and 64-bit abis, nss builds for the 32-bit abi by default. this tells nss to build for the 64-bit abi. befo...
Hacking Tips
uncptr, codebase() + func.entryoffset()); │ if (!call_generated_2(funcptr, exportargs.begin(), &tlsdata_)) │ return false; after it's set, x/64i funcptr will show you the trampoline code. there should be a call to an address at some point ; that's what we're
targeting. copy that address. 0x7ffff7ff6000: push %r15 0x7ffff7ff6002: push %r14 0x7ffff7ff6004: push %r13 0x7ffff7ff6006: push %r12 0x7ffff7ff6008: push %rbp 0x7ffff7ff6009: push %rbx 0x7ffff7ff600a: movabs $0xea4f80,%r10 0x7ffff7ff6014: mov 0x178(%r10),%r10 0x7ffff7ff601b: mov %rsp,0x40(%r10) 0x7ffff7ff601f: mov (%rsi)...
...ad of entering jit code, it runs it in a simulator (interpreter) for arm code. to use the simulator, compile an x86 shell (32-bit, x64 doesn't work as we use a different value format there), and pass --enable-arm-simulator to configure. for instance, on a 64-bit linux host you can use the following configure command to get an arm simulator build: ar=ar cc="gcc -m32" cxx="g++ -m32" ../configure --
target=i686-pc-linux --enable-debug --disable-optimize --enable-threadsafe --enable-simulator=arm or on os x: $ ar=ar cc="clang -m32" cxx="clang++ -m32" ../configure --
target=i686-apple-darwin10.0.0 --enable-debug --disable-optimize --enable-threadsafe --enable-arm-simulator an --enable-debug --enable-optimize build is recommended if you want to run jit-tests or jstests. use the vixl debugger in t...
Garbage collection
name allocate-black. the spidermonkey incremental read barrier the textbook version of incremental gc has only a write barrier. spidermonkey also needs a read barrier for weak references (see dictionary). this is because weak references have a similar problem as is solved by the incremental write barrier above, but cannot use the same solution. by definition, a weak reference should not hold a
target live by itself. that means that we can't trace weak references when we encounter them during gc graph traversal. instead, we append them to a list. after marking everything live we scan through the list to null out references to garbage. but this also means that pre-barriers are inadequate to prevent incremental gc from missing edges due to graph mutation. live cells will be marked either becaus...
...ey're reachable or because they were marked by a pre-barrier before being removed from the graph. but reachable weak references aren't traced! so you could read one out and write it behind the frontier and no pre-barriered removal will mark it (it's not being removed, just read). so we barrier the read instead; if you ever read a weak reference in the middle of an ongoing incremental gc, then the
target of the weak ref will be marked. implementation details write barriers have a runtime cost, so spidermonkey tries to skip them when an incremental gc cycle is not active. each zone has a flag needsincrementalbarrier() that indicates whether barriers are required. for each type t such that fields of type t* need a write barrier, there is a functiont::writebarrierpre(old). for example, fields of ...
JS_PreventExtensions
ld return false. this might also occur if the object is a proxy, and some internal state of the proxy means that no coherent behavior is possible. for example, if the object is a revocable proxy that has been revoked, it makes no sense to say that an attempt to prevent extensions either succeeded or failed: it's a category error. thus in this case js_preventextensions will throw an error. var
target = {}; var handler = {}; var pair = proxy.revocable(
target, handler); var proxy = pair.proxy; var revoke = pair.revoke; revoke(); // bool succeeded; // bool rv = js_preventextensions(cx, proxy, &succeeded); // // rv == false, succeeded is indeterminate the second case occurs when no internal error is encountered, but the object simply refuses to be made non-extensible. for example, a proxy mi...
...pair.revoke; revoke(); // bool succeeded; // bool rv = js_preventextensions(cx, proxy, &succeeded); // // rv == false, succeeded is indeterminate the second case occurs when no internal error is encountered, but the object simply refuses to be made non-extensible. for example, a proxy might refuse to be made non-extensible; this refusal would show up in the post-call value of *succeeded. var
target = {}; var handler = { preventextensions: function(obj) { return false; } }; var obj = new proxy(
target, handler); // bool succeeded; // bool rv = js_preventextensions(cx, obj, &succeeded); // // rv == true, succeeded == false note that as with most jsapi methods, *succeeded is only set if js_preventextensions returns true (that is, does not fail). thus you should always check the return value ...
Shell global objects
y() report oom, then clear the exception and return undefined. for crash testing. throwoutofmemory() throw out of memory exception, for oom handling testing. reportlargeallocationfailure() call the large allocation failure callback, as though a large malloc call failed, then return undefined. in gecko, this sends a memory pressure notification, which can free up some memory. findpath(start,
target) return an array describing one of the shortest paths of gc heap edges from start to
target, or undefined if
target is unreachable from start. each element of the array is either of the form: { node: {object or string}, edge: {string describing edge from node} } , if the node is a javascript object or value; or of the form: { type: {string describing node}, edge: {string describing edge} } , if ...
...node} } , if the node is a javascript object or value; or of the form: { type: {string describing node}, edge: {string describing edge} } , if the node is some internal thing that is not a proper javascript value (like a shape or a scope chain element). the destination of the i'th array element's edge is the node of the i+1'th array element; the destination of the last array element is implicitly
target. shortestpaths(start,
targets, maxnumpaths) return an array of arrays of shortest retaining paths. there is an array of shortest retaining paths for each object in
targets. the maximum number of paths in each of those arrays is bounded by maxnumpaths. each element in a path is of the form { predecessor, edge }. sharedmemoryenabled() return true if sharedarraybuffer and atomics are enabled ev...
Web Replay
even if the associated js object has not been destroyed yet during the replay, it will never be used again because at this point in the recording it has been finalized. similarly, gc behavior can cause values read from weak pointers to differ between recording and replay. if this difference can affect the recording, the weak pointer must be instrumented so that during replay it holds onto its
target for the same duration it was held while recording. recording a recording content process differs from a normal content process in the following ways: calls to certain functions are intercepted by hooking them (rewriting the machine code at their entry points to call a different function with the same signature), including the function used to dispatch mach messages. when a call or message ...
...spectrum: at what level is the boundary between components whose behavior is recorded and the rest of the system? rr records all behavior in the user space of a process; the boundary is the system calls which are made into the kernel. this project records all behavior outside of system library calls which the process makes, with exceptions carved out for the allowed non-determinism and for draw
targets. microsoft's and webkit's projects record a smaller subset of the browser's behavior. this project is at a good point on this spectrum. compared to a higher level project, this is able to operate on stable, thoroughly documented library apis. by focusing on intercepting these apis, browser instrumentation, recording overhead, and the maintenance burden going forward are all minimized. compa...
Components.utils.createObjectIn
10/changes-to-unsafewindow-for-the-add-on-sdk/. syntax var newobject = components.utils.createobjectin(obj, options); parameters obj an object indicating the compartment in which the new object should be created; the new object will be created in the scope of this object's compartment. options an object containing a single option defineas, which determines the name of the object in the
target compartment. return value a new object in the specified scope. 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: genprop...
... ...
nsIAsyncStreamCopier
/base/public/nsiasyncstreamcopier.idlscriptable this interface is used to copy the contents of one stream to another. inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiinputstream asource, in nsioutputstream asink, in nsievent
target a
target, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation. the specified observer is notified when the copy completes. void asynccopy( in nsirequestobserver aobserver, in nsisupports aobservercontext ); parameters aobserver receives notifications. aobservercont...
...n nsirequestobserver aobserver, in nsisupports aobservercontext ); parameters aobserver receives notifications. aobservercontext the object to receive notifications with information about the progress of the copy operation. init() initializes the stream copier. note: at least one of the streams must be buffered. void init( in nsiinputstream asource, in nsioutputstream asink, in nsievent
target a
target, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied. asink specifies the destination for the data. a
target specifies the thread on which the copy will occur. a null value is permitted and causes the copy to occur on an unspecified background threa...
nsIBadCertListener2
obtain the ssl handshake status of a connection that will be canceled because of improper certificate status. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) replaces the obsolete nsibadcertlistener interface. method overview boolean notifycertproblem(in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string
targetsite); methods notifycertproblem() called in case of a broken ssl status. boolean notifycertproblem( in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string
targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection. this object usually supports nsisslsocketcontrol, nsitransportsecurityi...
... return value the consumer shall return true if it wants to suppress the error message related to the bad cert (the connection will still get canceled). ...
nsIChannel
alue is immutable. read only. constants channel specific load flags: bits 23-31 are reserved for future use by this interface or one of its derivatives (for an example see nsicachingchannel). constant value description load_document_uri 16 set (for example by the docshell) to indicate whether or not the channel corresponds to a document uri. load_re
targeted_document_uri 17 if the end consumer for this load has been re
targeted after discovering its content, this flag will be set: load_replace 18 this flag is set to indicate that this channel is replacing another channel. this means that: the stream listener this channel will be notifying was initially passed to the asyncopen() method of some other channel t...
...mple, for redirects or for cases when a single channel has multiple parts to it (and thus can follow onstoprequest with another onstartrequest/onstoprequest pair, each pair for a different request). load_initial_document_uri 19 set (for example by the docshell) to indicate whether or not the channel corresponds to an initial document uri load (for example link click). load_
targeted 20 set (for example by the uriloader) to indicate whether or not the end consumer for this load has been determined. load_call_content_sniffers 21 if this flag is set, the channel should call the content sniffers as described in netwerk/build/nsnetcid.h about ns_content_sniffer_category. see nsicontentsniffer [en-us] note: channels may ignore this flag; howeve...
nsIDOMSimpleGestureEvent
vents. method overview void initsimplegestureevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved. for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred whil...
.... void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in unsigned long directionarg, in double deltaarg ); parameters typearg canbubblearg cancelablearg viewarg detailarg screenxarg screenyarg clientxarg clientyarg ctrlkeyarg altkeyarg shiftkeyarg metakeyarg buttonarg related
targetarg directionarg the value to assign to the direction attribute. deltaarg the val...
nsIDownload
d for direct database manipulation in the database that contains this download. use the guid property instead for safe, database-agnostic searching and manipulation. read only. deprecated since gecko 19.0 guid astring the guid of the download that is stored in the database. has the form of twelve alphanumeric characters. read only. mimeinfo nsimimeinfo provides the
targets relevant mime information, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete. read only. optional percentcomplete long the percentage of the file transfer that has been completed, or -1 if the file's size is unknown. read only. referrer nsiuri the referrer uri of the download. ...
...ile's size is unknown. read only. source nsiuri the source uri of the download. read only. speed double the downloads transfer speed in bytes per second. read only. starttime long long the time at which the transfer was started. read only. state short the downloads current state. see nsidownloadmanager.constants. read only.
target nsiuri the
target of the transfer. read only.
targetfile nsilocalfile indicates the location at which the downloaded file will be (or is, if the download is complete) stored. read only. see also nsidownloadmanager nsidownloadprogresslistener nsixpinstallmanagerui ...
nsIDragDropHandler
nsidragdrophandler is an interface for communicating with the built-in drag and drop implementation in the content area. use this to register where the listeners should attach (something that implements nspidomevent
target which is what we end up using under the hood). content/base/public/nsidragdrophandler.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomevent
target attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers related to drag and drop. void detach(); parameters none. hookupto() attaches drag handlers to a specified receiver, setting up callbacks to let built-in behaviors b...
... navigator the nsiwebnavigation object to handle the dropped urls. ...
nsIDragSession
ecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not. usually the
target "frame" sets this so the native system can render the correct feedback. datatransfer nsidomdatatransfer the data transfer object for the current drag operation. dragaction unsigned long sets the action (copy, move, link and so on) for the current drag. (see nsidragservice) numdropitems unsigned long get the number of items that were dropped. read only...
...cument nsidomdocument the document where the drag was started, which will be null if the drag originated outside the application. useful for determining if a drop originated in the same document. read only. sourcenode nsidomnode the dom node that was originally dragged to start the session, which will be null if the drag originated outside the application. read only.
targetsize nssize sets the current width and height of the drag
target area. it will contain the current size of the frame that the drag is currently in. native code only! methods getdata() gets data from a drag and drop operation. can be called while the drag is in process or after the drop has completed. void getdata( in nsitransferable atransferable, in unsigned long aitemindex );...
nsIEventListenerInfo
content/events/public/nsieventlistenerservice.idlscriptable an instance of this interface describes how an event listener was added to an event
target; these are returned by nsieventlistenerservice.getlistenerinfofor, which provides a list of all the listeners to a given event
target. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports getdebugobject(); astring tosource(); attributes attribute type description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events. read only. capturing boolean indicates whether or not the event listener is in capture mod...
... javascript functions to act as listeners. tosource() tries to serialize the event listener to a string. astring tosource(); parameters none. return value returns a string describing the event listener, or null if serialization isn't possible (for example, if the listener was written in c++). remarks nsieventlistenerinfo was introduced with bug 448602. see also nsieventlistenerservice nsievent
target ...
nsILocalFileMac
filetype ostype file type and creator attributes. native code only! constants constant value description current_process_creator 0x8000000 use with setfiletype() to specify the signature of current process. obsolete since gecko 2.0 methods native code only!getcfurl note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the
target of the alias. if followlinks is false, returns the unresolved alias file. note: supported only for xp_macosx. cfurlref getcfurl(); parameters none. return value the cfurlref of the file object. the caller is responsible for calling cfrelease() on it. native code only!getfsref note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns th...
...f the alias. if followlinks is false, returns the unresolved alias file. note: supported only for xp_macosx. cfurlref getcfurl(); parameters none. return value the cfurlref of the file object. the caller is responsible for calling cfrelease() on it. native code only!getfsref note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the
target of the alias. if followlinks is false, returns the unresolved alias file. note: supported only for xp_macosx. fsref getfsref(); parameters none. return value the fsref of the file object. native code only!getfsspec note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the
target of the alias. if followlinks is false, returns the un...
nsIMessageListener
eners are attached using the nsimessagelistenermanager interface. methods void receivemessage(); receivemessage() this is for js only. this function receives a message from one of the three message-sending functions in the message manager framework: broadcastasyncmessage sendasyncmessage sendsyncmessage. the received message is an object with the following properties:
target the
target of the message. either an element owning the message manager, or the message manager itself if no element owns it. if the message was sent from a frame script using a nsicontentframemessagemanager, then this property is the xul <browser> element for the frame from which the message was sent. name the message name. this is the first argument passed into the m...
...-sending function. json same as data. deprecated. objects an object whose properties are any cross process object wrappers exposed by the sender as the third argument to the message-sending function. principal principal for the window app. each listener is invoked with its own copy of the message parameter. when the listener is called, 'this' value is the
target of the message. if the message is synchronous, the possible return value is returned as json (will be changed to use structured clones). when there are multiple listeners to synchronous messages, each listener's return value is sent back as an element in an array. undefined return values show up as undefined values in the array. ...
nsINavHistoryResultViewObserver
pane in thunderbird, where drops are only permitted on items themselves instead of on the pane as a whole, always return false when the orientation isn't drop_on. warning: do not change the content of the observer list. boolean candrop( in long index, in long orientation ); parameters index the item over which the drag is currently located. orientation whether the drag
target is before, after, or on the indicated row. return value return true if the drop is permitted or false if it isn't. ondrop() called when the user drops something onto the view being observed. void ondrop( in long row, in long orientation ); parameters row the row at which the drop occurred. orientation drop_before, drop_on, or drop_after, indicating whether the drop dest...
...ed row. return value return true if the drop is permitted or false if it isn't. ondrop() called when the user drops something onto the view being observed. void ondrop( in long row, in long orientation ); parameters row the row at which the drop occurred. orientation drop_before, drop_on, or drop_after, indicating whether the drop destination is before, on, or after the
target row. ontoggleopenstate() called when an item is opened or closed. void ontoggleopenstate( in long index ); parameters index the item being toggled. oncycleheader() called when a header is clicked. void oncycleheader( in nsitreecolumn column ); parameters column the column whose header was clicked. oncyclecell() called when a cell in a non-selectable cycling column...
nsISSLErrorListener
manager/ssl/public/nsisslerrorlistener.idlscriptable a mechanism to report a broken ssl connection. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the recipient of this ssl status notification should not block. method overview boolean notifysslerror(in nsiinterfacerequestor socketinfo, in print32 error, in autf8string
targetsite); methods notifysslerror() called in case of an ssl error. boolean notifysslerror( in nsiinterfacerequestor socketinfo, in print32 error, in autf8string
targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection. error the code associated with the error. the ssl status object that describes the problem...
...; methods notifysslerror() called in case of an ssl error. boolean notifysslerror( in nsiinterfacerequestor socketinfo, in print32 error, in autf8string
targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection. error the code associated with the error. the ssl status object that describes the problem(s).
targetsite the site name that was used to open the current connection. return value the consumer shall return true if it wants to suppress the error message related to the error (the connection will still get canceled). see also nsisockettransport ...
nsISpeculativeConnect
se this service, simply call nsisupports.queryinterface() on the nsiioservice you plan to use for the connection, to get access to the i/o service's implementation of nsispeculativeconnect. then call speculativeconnect() to let the networking layer know what you might be doing in the future. method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsievent
target a
target); methods speculativeconnect() call this method to hint to the networking layer that a new transaction for the specified uri is likely to happen soon. the code implementing this method may use this information to start a tcp and/or ssl level handshake for that resource immediately so that it is ready (or at least in the process of becoming ready) when the transaction is actually submit...
...nformation to start a tcp and/or ssl level handshake for that resource immediately so that it is ready (or at least in the process of becoming ready) when the transaction is actually submitted. no obligation is taken on by the implementer, nor is the submitter obligated to actually open the new channel. void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsievent
target a
target ); parameters auri the uri of the hinted transaction. acallbacks any security callbacks for use with ssl for interfaces such as nsibadcertlistener. may be null. a
target the thread on which the release of the callbacks will occur. may be null for "any thread". see also nsiioservice blog post: making firefox search snappier ...
nsIThreadObserver
ithreadinternal thread, in unsigned long recursiondepth); void ondispatchedevent(in nsithreadinternal thread); void onprocessnextevent(in nsithreadinternal thread, in boolean maywait, in unsigned long recursiondepth); methods afterprocessnextevent() called by the nsithread method nsithread.processnextevent() after an event is processed. this method is only called on the
target thread. note: it is valid to change the thread's observer during a call to this method. void afterprocessnextevent( in nsithreadinternal thread, in unsigned long recursiondepth ); parameters thread the nsithread on which the event was processed. recursiondepth the number of calls to nsithread.processnextevent() on the call stack in addition to the current call. ondispatchedevent()...
...s method may be called from any thread. note: it is valid to change the thread's observer during a call to this method. void ondispatchedevent( in nsithreadinternal thread ); parameters thread the nsithread on which the event was dispatched. onprocessnextevent() called by the nsithread method nsithread.processnextevent() before an event is processed. this method is only called on the
target thread. it is valid to change the thread\'s observer during a call to this method. void onprocessnextevent( in nsithreadinternal thread, in boolean maywait, in unsigned long recursiondepth ); parameters thread the nsithread on which the event is going to be processed. maywait true if the method is allowed to block the calling thread. this parameter will be false during thread shut...
nsITransport
info about socket transport specifics. method overview void close(in nsresult areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsievent
target aevent
target); constants open flags. constant value description open_blocking 1<<0 open flags. open_unbuffered 1<<1 generic nsitransporteventsink status codes. nsitransport implementations may override these status codes with their own more specific status codes (for example, see nsisockettransport). constant value description status_reading 0x804b0008 status_writing 0x804...
...tsize if open_unbuffered is not set, then this parameter specifies the size of each buffer segment (pass 0 to use default value). asegmentcount if open_unbuffered is not set, then this parameter specifies the maximum number of buffer segments (pass 0 to use default value). return value seteventsink() set the transport event sink. void seteventsink( in nsitransporteventsink asink, in nsievent
target aevent
target ); parameters asink receives transport layer notifications. aevent
target indicates the event
target to which the notifications should be delivered. if null, then the notifications may occur on any thread. ...
nsIWebBrowserChrome3
embedding/browser/webbrowser/nsiwebbrowserchrome3.idlscriptable an extension to nsiwebbrowserchrome2. 1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring original
target, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate
target for a link. astring onbeforelinktraversal( in astring original
target, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters original
target the original link
target. linkuri link destination uri. linknode link dom node. isapptab whether or not the link ...
...etermines the appropriate
target for a link. astring onbeforelinktraversal( in astring original
target, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters original
target the original link
target. linkuri link destination uri. linknode link dom node. isapptab whether or not the link is in an application tab. return value a new link
target, if appropriate. otherwise returns original
target. see also nsiwebbrowserchrome2 ...
nsIWebProgressListener
at is being redirected. when a redirect occurs, a new request is generated automatically to process the new request. expect a corresponding state_start event for the new request, and a state_stop for the redirected request. state_transferring 0x00000004 this flag indicates that data for a request is being transferred to an end consumer. this flag indicates that the request has been
targeted, and that the user may start seeing content corresponding to the request. state_negotiating 0x00000008 this flag is not used. state_stop 0x00000010 this flag indicates the completion of a request. the astatus parameter to onstatechange() indicates the final status of the request. state type flags these flags further describe the entity for which the state t...
... /** * this example assumes that it's being run within the context of a browser * window, and uses a frame script that will be loaded into every * browser tab. */ 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. if you need to hold onto an identifier for whichever frame // (be it the top-level, or a subframe) was using the webprogress, use // the outerwindowid. this can be communicated back down to the content // in order to do send a command to a particular dom window. ...
nsIWindowWatcher
nothing special about that requirement. this component must be initialized at application startup by calling setwindowcreator(). ...
...ent the parent nsidomwindow used for posing alerts. can be null. return value a new nsiprompt object. getwindowbyname() retrieve an existing window (or frame). note: this method will search all open windows for any window or frame with the given window name. make sure you understand the security implications of this before using this method! nsidomwindow getwindowbyname( in wstring a
targetname, in nsidomwindow acurrentwindow ); parameters a
targetname the window name. acurrentwindow the nsidomwindow starting point in the window hierarchy to begin the search. if null, each top level window will be searched. return value the nsidomwindow with the
target name. getwindowenumerator() get an nsisimpleenumerator for currently open windows in the order they were opened, guara...
nsIXMLHttpRequest
obsolete since gecko 60 (firefox 60 / thunderbird 60 / seamonkey 2.57)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequestevent
target are mozilla's implementation details of the dom xmlhttprequest object. note: if you're a web developer or a mozilla add-on developer, please refer to the xmlhttprequest documentation instead. this page contains documentation, specific to mozilla application and add-on developers. 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-onl...
...in example 2, the flag of load_anonymous is added, this strips all user data (cookies, tokens, etc). using event handlers from native code (not sure if it's up-to-date) from native code, the way to set up onload and onerror handlers is a bit different. here is a comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomevent
target and that's how you're supported to add event listeners. try something like this: nscomptr<nsidomevent
target>
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. the 'onload', 'onerror', and 'onreadystatechange' attributes moved to nsijsxm...
nsIXMLHttpRequestUpload
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the features needed when uploading data using nsixmlhttprequest. ...
... attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequestevent
target xmlhttprequest using xmlhttprequest ...
nsIXULRuntime
boolean indicates whether the current firefox build is 64-bit. read only. logconsoleerrors boolean whether to write console errors to a log file. if a component encounters startup errors that might prevent the app from showing proper ui, it should set this flag to true. os autf8string a string tag identifying the current operating system. this is taken from the os_
target configure variable. it will always be available. read only. processid unsigned long the system process id of the caller's process. read only. processtype unsigned long the type of the caller's process. returns one of process type constants. read only. widgettoolkit autf8string a string tag identifying the
target widget toolkit in use. this is taken f...
...it may not be available on all platforms, especially unusual processor or compiler combinations. the result takes the form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc3. ...
Weak reference
er. neither inheritance, nor templates, nor macros can help automatically forward all the method calls to the real object. xpidl could write an implementation for you (if we modified it), or you could write one by hand as i discuss below. there are other, mostly negligible, costs: it's an extra indirection per call, and the easy implementation requires adding an extra pointer per interface to the
target implementation. why can't i just queryinterface between the pair? it really feels like the nsiweakreference that you are holding is just another interface on the
target object. it seems reasonable to want to simply queryinterface between the two. why these extra calls: getweakreference and queryreferent? this would be possible if the weak reference was actually aggregated to the
target object. ...
... in our situation, since we explicitly rely on the the fact that part of the `aggregate' can be destroyed. subsequent attempts to reach that part must return nsnull. sometimes our queryinterface through the weak pointer would return a pointer to the `real' interface, and sometimes it would return nsnull. we just broke com. it's clear, therefore, that the weak reference can't be aggregated to the
target object. hence, we can't use queryinterface to move between them. i know this sounds more convenient, but the global routine ns_getweakreference makes it easy to go from the
target object to the weak reference; and nsiweakreference::queryreferent gives you the same functionality as queryinterface for getting back. additionally, nscomptr now supports the new key do_queryreferent to simplify life ev...
Mozilla
by inserting an extension in the testing profile or uses marionette's wire protocol to drive the browser. how to add a build-time test writing a test is good, but it is even more helpful if that test gets executed. we have various automation tools that help make this possible. the first link, though, is the "check"
target in a makefile. if a test is added, that test or its directory needs to be mentioned in a makefile.in file somewhere so that the build system knows about it. how to get a process dump with windows task manager when tracking down the causes of process hangs, it is often helpful to obtain a process dump while the process is experiencing a hang. this art...
...ally-served firefox update. signing mozilla apps for mac os x mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their computers secure. firefox and thunderbird releases are both signed before shipping; this article describes the process. supported build
targets page moved to the in-tree documentation: https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html task graph after a change to the gecko source code is pushed to version-control, jobs for that change appear on treeherder. how does this work? test-info ...
Streams - Plugins
e plug-in as an output parameter. the plug-in can use this stream object in subsequent npn_write calls to the browser. when all the plug-in data is written into the stream, the plug-in must terminate the stream and deallocate the npstream object by calling the npn_destroystream function. nperror npn_newstream(npp instance, npmimetype type, const char*
target, npstream** stream); the instance parameter is the plug-in instance that is creating the stream; the type specifies the mime type of the stream. the
target parameter specifies the window or frame. for the possible values of named
targets, see the reference entry for npn_newstream. the
target should not be the same window. the stream parameter represents the stream that t...
...y>/html>"; int32 mylength = strlen(mydata) + 1; /* create the stream. */ err = npn_newstream(instance, "text/html", "_blank", &stream); /* push data into the stream. */ err = npn_write(instance, stream, mylength, mydata); /* delete the stream. */ err = npn_destroystream(instance, stream, npres_done); your plug-in can create another instance of itself by specifying its own mime type and a new
target name in a call to npn_newstream. « previousnext » ...
Debugger.Object - Firefox Developer Tools
npropertynames(referent) had been called in the debuggee, and the result copied in the scope of the debugger's global object. defineproperty(name,attributes) define a property on the referent namedname, as described by the property descriptordescriptor. any value, get, and set properties ofattributes must be debuggee values. ...
...return true if the property was successfully removed, or if the referent has no such property. ...
Examine and edit CSS - Firefox Developer Tools
alid values. this can help you understand why certain styles are not being applied. 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. highlight matched elements: next to the selector is a
target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked. filter rules containing ...
...t 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. it represents the css properties assigned to the element via its style attribute. this also gets the
target icon: , giving you a convenient way to highlight the currently selected element in the page. filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter. wh...
Page Inspector - Firefox Developer Tools
user interface tour to find your way around the inspector, here's a quick tour of the ui. you can split the rules view out into its own pane, separate from the other tabs on the css pane — this is called 3-pane mode. ...
... user interface tour to find your way around the inspector, here's a quick tour of the ui. you can split the rules view out into its own pane, separate from the other tabs on the css pane — this is called 3-pane mode. ...
Frame rate - Firefox Developer Tools
the frame rate graph in the performance tool shows you the frame rate over the course of a recording. it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for a more in-depth analysis. ...
...arily unresponsive (janky). similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze. in general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging. a frame rate of 60fps is reckoned to be the
target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event. however, consistency is especially important: if you can't deliver 60fps, it's better to deliver lower frame rates more consistently, and avoid sudden dips in the frame rate which cause the site to freeze. frame rate graph the frame rate graph is found i...
AbortSignal - Web APIs
abortsignal.aborted read only a boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false). ...
... with is/are aborted (true) or not (false). events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface. abort invoked when the dom request(s) the signal is communicating with is/are aborted. also available via the onabort property. methods the abortsignal interface inherits methods from its parent interface, event
target. examples in the following snippet, we aim to download a video using the fetch api. we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). thi...
AnimationEvent - Web APIs
ents events providing information related to animations. ...
...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/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...
AudioTrackList - Web APIs
racklist interface is used to represent a list of the audio tracks contained within a given html media element, with each track represented by a separate audiotrack object in the list. retrieve an instance of this object with htmlmediaelement.audiotracks. the individual tracks can be accessed using array syntax. properties this interface also inherits properties from its parent interface, event
target. length read only the number of tracks in the list. event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new audio track has been added to the media element. onchange an event handler to be called when the change event occurs. this occurs when one or more tracks have been enabled or disabled by their enabled flag being changed. ...
...change an event handler to be called when the change event occurs. this occurs when one or more tracks have been enabled or disabled by their enabled flag being changed. onremovetrack an event handler to call when the removetrack event is sent, indicating that an audio track has been removed from the media element. methods this interface also inherits methods from its parent interface, event
target. gettrackbyid() returns the audiotrack found within the audiotracklist whose id matches the specified string. if no match is found, null is returned. events addtrack fired when a new audio track has been added to the media element. also available via the onaddtrack property. change fired when a track has been enabled or disabled. also available via the onchange property. removetrac...
BeforeInstallPromptEvent - Web APIs
obile. this interface inherits from the event interface. ...
..." 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 beforeinstallpr...
Body.body - Web APIs
nts. syntax var stream = response.body; value a readablestream. example in our simple stream pump example we fetch an image, expose the response's stream using response.body, create a reader using readablestream.getreader(), then enqueue that stream's chunks into a second, custom readable stream — effectively creating an identical copy of the image. ...
... const reader = body.getreader(); return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our
target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobjecturl(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); specifications specification status comment fetchthe definition of 'body' in t...
CSSCounterStyleRule - Web APIs
terface 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="#d4d...
...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 inh...
CSSPrimitiveValue - Web APIs
verted to a number (see also the rgbcolor interface). ...
...="#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">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 ...
CSSValueList - Web APIs
re accessible via an integral index, starting from 0. ...
... 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">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 p...
DOMRect - Web APIs
it inherits from its parent, domrectreadonly. ...
...#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 domrec...
Document: copy event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
Document.createEvent() - Web APIs
many methods used with createevent, such as initcustomevent, are deprecated. use event constructors instead. creates an event of the type specified. the returned object should be first initialized and can then be passed to event
target.dispatchevent. syntax var event = document.createevent(type); event is the created event object. type is a string that represents the type of event to be created. possible event types include "uievents", "mouseevents", "mutationevents", and "htmlevents". see notes section for details. ...
...presents the type of event to be created. possible event types include "uievents", "mouseevents", "mutationevents", and "htmlevents". see notes section for details. example // create the event. var event = document.createevent('event'); // define that the event name is 'build'. event.initevent('build', true, true); // listen for the event. elem.addeventlistener('build', function (e) { // e.
target matches elem }, false); //
target can be any element or other event
target. elem.dispatchevent(event); notes event type strings suitable for passing to createevent() are listed in the dom standard — see the table in step 2. bear in mind that most event objects now have constructors, which are the modern recommended way to create event object instances. gecko supports some non-standard ev...
Document: cut event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
Document.getElementsByClassName() - Web APIs
only elements with all of the classnames specified are selected. html <span cla...
...only elements with all of the classnames specified are selected. html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">ap...
Document.onafterscriptexecute - Web APIs
the document.onafterscriptexecute property references a function that fires when a static <script> element finishes executing its script. it does not fire if the element is added dynamically, such as with appendchild(). ...
...ent finishes executing its script. it does not fire if the element is added dynamically, such as with appendchild(). syntax document.onafterscriptexecute = funcref; funcref is a function reference, called when the event is fired. ...
Document.onbeforescriptexecute - Web APIs
fired when the code in a <script> element declared in an html document is about to start executing. does not fire if the element is added dynamically, eg with appendchild(). ...
...tml document is about to start executing. does not fire if the element is added dynamically, eg with appendchild(). syntax document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired. ...
Document: paste event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
Document.readyState - Web APIs
living standard html 5.1the definition of 'document readiness' in that specification. recom...
... living standard html 5.1the definition of 'document readiness' in that specification. recommendation html5the definition of 'document readiness' in that sp...
Events and the DOM - Web APIs
event interfaces relate to one another. there is an excellent diagram that clearly explains the three phases of event flow through the dom in the dom level 3 events draft. also see example 5: event propagation in the examples chapter for a more detailed example of how events move through the dom. registering event listeners there are 3 ways to register event handlers for a dom element. event
target.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages. note: internet explorer...
... mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages. note: internet explorer 6–8 didn't support this method, offering a similar event
target.attachevent api instead. for cross-browser compatibility, use one of the many javascript libraries available. more details can be found on the event
target.addeventlistener reference page. html attribute <button onclick="alert('hello world!')"> the javascript code in the attribute is passed the event object via the event parameter. the return value is treated in a special way, described in t...
EXT_disjoint_timer_query - Web APIs
to getqueryparameter. in webgl 2, other queries (such as occlusion queries and primitive queries) are possible using webglquery objects. types this extension exposes a new type: gluint64ext unsigned 64-bit integer number. constants this extension exposes seven new constants. ext.query_counter_bits_ext a glint indicating the number of bits used to hold the query result for the given
target. ext.current_query_ext a webglquery object, which is the currently active query for the given
target. ext.query_result_ext a gluint64ext containing the query result. ext.query_result_available_ext a glboolean indicating whether or not a query result is available. ext.time_elapsed_ext elapsed time (in nanoseconds). ext.timestamp_ext the current time. ext.gpu_disjoint_ext a glboolean in...
...eturns true if a given object is a webglquery. ext.beginqueryext() the timer starts when all commands prior to beginqueryext have been fully executed. ext.endqueryext() the timer stops when all commands prior to endqueryext have been fully executed. ext.querycounterext() records the current time into the corresponding query object. ext.getqueryext() returns information about a query
target. ext.getqueryobjectext() return the state of a query object. examples var ext = gl.getextension('ext_disjoint_timer_query'); specifications specification status comment ext_disjoint_timer_querythe definition of 'ext_disjoint_timer_query' in that specification. working draft initial definition. ...
Element.classList - Web APIs
delete this[len], proto.length -= 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; }; window.domtokenlist = domtokenlist; function whenpropchanges(){ var evt = window.event, prop = evt.propertyname; if ( !skippropchange && (prop==="classname" || (prop==="classlist" && !defineproperty)) ) { var
target = evt.srcelement, protoobjproto =
target[" uclp"], strval = "" +
target[prop]; var tokens=strval.trim().split(wsre), restokenlist=
target[prop==="classlist"?" ucl":"classlist"]; var oldlen = protoobjproto.length; a: for(var ci = 0, clen = protoobjproto.length = tokens.length, sub = 0; ci !== clen; ++ci){ for(var inneri=0; inneri!==ci; ++inneri) i...
...th = tokens.length, sub = 0; ci !== clen; ++ci){ for(var inneri=0; inneri!==ci; ++inneri) if(tokens[inneri]===tokens[ci]) {sub++; continue a;} restokenlist[ci-sub] = tokens[ci]; } for (var i=clen-sub; i < oldlen; ++i) delete restokenlist[i]; //remove trailing indexs if(prop !== "classlist") return; skippropchange = 1,
target.classlist = restokenlist,
target.classname = strval; skippropchange = 0, restokenlist.length = tokens.length - sub; } } function polyfillclasslist(ele){ if (!ele || !("innerhtml" in ele)) throw typeerror("illegal invocation"); ele.detachevent( "onpropertychange", whenpropchanges ); // prevent duplicate handler infinite loop allowtokenlistconstru...
Element: copy event - Web APIs
pboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault(). however, the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic copy event, but this will not affect the system clipboard. ...
...ventdefault(). however, the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic copy event, but this will not affect the system clipboard. ...
Element: cut event - Web APIs
" while modifying the clipboard must also manually remove the selection from the document. the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic cut event, but this will not affect the system clipboard or the document's contents. ...
...the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic cut event, but this will not affect the system clipboard or the document's contents. ...
Element: focusin event - Web APIs
document object model (dom) level 3 events specification obsolete initial definition ...
... document object model (dom) level 3 events specification obsolete initial definition ...
Element: focusout event - Web APIs
document object model (dom) level 3 events specification obsolete initial definition ...
... document object model (dom) level 3 events specification obsolete initial definition ...
Element.hasPointerCapture() - Web APIs
the haspointercapture() method of the element interface sets whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer id. syntax
targetelement.haspointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object. return value a boolean value — true if the element does have pointer capture, false if it doesn't. examples <html> <script> function downhandler(ev) { const el = document.getelementbyid("
target"); // element '
target' will receive/capture further events el.setpointercapture(ev.pointerid); /* ... */ // check whether element still has pointer capture let pointercap = el.haspointercapture(ev.pointerid); if(pointercap) { // we've still got pointe...
...ure further events el.setpointercapture(ev.pointerid); /* ... */ // check whether element still has pointer capture let pointercap = el.haspointercapture(ev.pointerid); if(pointercap) { // we've still got pointer capture } else { // oops, we've lost pointer capture! } } 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. recommendation ...
Element.onfullscreenchange - Web APIs
the element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode. syntax
targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode. example this example establishes a fullscreenchange event handler, handlefullscreenchange(). this function determines which element it was called on by checking the value of event.
target, then compares the document's fullscreenelement value to the element to see if they're the same node. this gives us a value, isfullscreen, which we pass into a function called adjustmycontrols(), which we imagine to be a function th...
... living standard initial definition. ...
Element.setPointerCapture() - Web APIs
the setpointercapture() method of the element interface is used to designate a specific element as the capture
target of future pointer events. subsequent events for the pointer will be
targeted at the capture element until capture is released (via element.releasepointercapture()). note: when pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture
target. this has the effect of suppressing these events on all other elements. overview of pointer capture pointer capture allows events for a particular pointer event (pointerevent) to be re-
targeted to a particular element instead of the normal (or hit test)
target at a pointer's location. this can be used to ensure that an element continues to receive poi...
... return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. ...
ErrorEvent - Web APIs
events providing information related to errors in scripts or in files. ...
...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 it...
Event.initEvent() - Web APIs
once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific event constructors, like event(). ...
...ancelable is a boolean defining whether the event can be canceled. once set, the read-only property event.cancelable will give its value. example // create the event. var event = document.createevent('event'); // create a click event that bubbles up and // cannot be canceled event.initevent('click', true, false); // listen for the event. elem.addeventlistener('click', function (e) { // e.
target matches elem }, false); elem.dispatchevent(event); specifications specification status comment domthe definition of 'event.initevent()' in that specification. living standard from document object model (dom) level 2 events specification, deprecated it, superseded by event constructors. document object model (dom) level 2 events specificationthe definitio...
EventSource - Web APIs
ww.example2.com. (from stackoverflow). when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100). constructor eventsource() creates a new eventsource to handle receiving server-sent events from a specified url, optionally in credentials mode. properties this interface also inherits properties from its parent, event
target. eventsource.readystate read only a number representing the state of the connection. possible values are connecting (0), open (1), or closed (2). eventsource.url read only a domstring representing the url of the source. eventsource.withcredentials read only a boolean indicating whether the eventsource object was instantiated with cross-origin (cors) credentials set (true), or not (fals...
...rror occurs and the error event is dispatched on an eventsource object. eventsource.onmessage is an eventhandler called when a message event is received, that is when a message is coming from the source. eventsource.onopen is an eventhandler called when an open event is received, that is when the connection was just opened. methods this interface also inherits methods from its parent, event
target. eventsource.close() closes the connection, if any, and sets the readystate attribute to closed. if the connection is already closed, the method does nothing. events error fired when a connection to an event source failed to open. message fired when data is received from an event source. open fired when a connection to an event source has opened. additionally, the event source its...
ExtendableEvent - Web APIs
274.) this interface inherits from the event interface. ...
...ill="#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="#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...
File - Web APIs
from web applications for more information and examples. ...
...eight="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">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 constructe...
GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events. the animationend event fires when a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay). syntax var animendhandler =
target.onanimationend;
target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the
target, where the
target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html content <div class="main"> <div id="box"> <div id="text">box</...
...for information about why, and how to support running an animation more than once, see run an animation again in css animations tips and tricks. result assembled together, you...
GlobalEventHandlers.onauxclick - Web APIs
rt of a plan to improve compatibility with regards to button behaviors. specifically, event behavior is being updated so that click only fires for primary button clicks (e.g., left mouse button), while auxclick fires for non-primary button clicks. historically, click has generally fired for the click of any device input button, although with browser behavior being somewhat inconsistent. ...
... example in this example we define functions for two event handlers — onclick and onauxclick. the former changes the color of the button background, while the latter changes the button foreground (text) color. ...
GlobalEventHandlers.onchange - Web APIs
leventhandlers mixin is an eventhandler for processing change events. change events fire when the user commits a value change to a form control. this may be done, for example, by clicking outside of the control or by using the tab key to switch to a different control. note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value. syntax
target.onchange = functionref; functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it. html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p i...
... time you modify its contents and then change focus away from it. 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 specification status comment html living standardthe definition of 'onchange' in that specification. living standard ...
GlobalEventHandlers.onclick - Web APIs
venthandler for processing click events on a given element. the click event is raised when the user clicks on an element. it fires after the mousedown and mouseup events, in that order. note: when using the click event to trigger an action, also consider adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen. ...
... examples detecting clicks this example simply changes the color of an element when it's clicked upon. ...
GlobalEventHandlers.oninput - Web APIs
the oninput property of the globaleventhandlers mixin is an eventhandler that processes input events on the <input>, <select>, and <textarea> elements. it also handles these events on elements where contenteditable or designmode are turned on. note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value. syntax
target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents. html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('inp...
...the number of characters in an <input> element, every time you modify its contents. 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 comment html living standardthe definition of 'oninput' in that specification. living standard initial definition ...
GlobalEventHandlers.onload - Web APIs
the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc. the load event fires when a given resource has loaded. syntax
target.onload = functionref; value functionref is the handler function to be called when the window’s load event fires. 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 e...
...load event fires when the document has finished loading!</p> </body> </html> notes the load event fires at the end of the document loading process. at this point, all of the objects in the document are in the dom, and all the images, scripts, links and sub-frames have finished loading. there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using event
target.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading. specifications specification status comment html living standardthe definition of 'onload' in that specification. living standard initial definition ...
GlobalEventHandlers.onmousemove - Web APIs
the function receives a mouseevent object as its sole argument. examples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
... 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.
target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an example available showing the use of...
GlobalEventHandlers.onscroll - Web APIs
the onscroll property of the globaleventhandlers mixin is an eventhandler that processes scroll events. the scroll event fires when the document view or an element has been scrolled, whether by the user, a web api, or the user agent. note: don't confuse onscroll with onwheel! onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content. syntax
target.onscroll = functionref value functionref a function name, or a function expression. the function receives a uievent object as its sole argument. only one onscroll handler can be assigned to an object at a time. for greater flexibility, you can pass a scroll event to the event
target.addeventlistener() method instead. example this example monitors scrolling on a <textarea>, and logs the element's v...
...d logs the element's vertical scroll position accordingly. html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.
target.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification. living standard document object model (dom) level 3 events specificationthe definition of 'onscroll' in that specification. obsolete initial definition ...
GlobalEventHandlers.onselect - Web APIs
the onselect property of the globaleventhandlers mixin is an eventhandler that processes select events. the select event only fires after text inside an <input type="text"> or <textarea> is selected. syntax
target.onselect = functionref; value functionref is a function name or a function expression. the function receives a uievent object as its sole argument. examples this example logs the text you select inside a <textarea> element. ...
... functionref is a function name or a function expression. the function receives a uievent object as its sole argument. examples this example logs the text you select inside a <textarea> element. 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 that specification. living standard ...
GlobalEventHandlers.ontransitioncancel - Web APIs
the ontransitioncancel property of the globaleventhandlers mixin is an eventhandler that processes transitioncancel events. the transitioncancel event is sent when a css transition is cancelled. 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". the transition is stopped before it has run to completion, e.g. by moving the mouse off a hover-transitioning element. ...
...vents. the transitioncancel event is sent when a css transition is cancelled. 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". the transition is stopped before it has run to completion, e.g. by moving the mouse off a hover-transitioning element. syntax var transitioncancelhandler =
target.ontransitioncancel;
target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the
target, where the
target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which oc...
GlobalEventHandlers.ontransitionend - Web APIs
the ontransitionend property of the globaleventhandlers mixin is an eventhandler that processes transitionend events. the transitionend event is sent to when a css transition completes. if the transition is removed from its
target node before the transition completes execution, the transitionend event won't be generated. one way this can happen is by changing the value of the transition-property attribute which applies to the
target. another is if the display attribute is set to none. ...
...ionend event is sent to when a css transition completes. if the transition is removed from its
target node before the transition completes execution, the transitionend event won't be generated. one way this can happen is by changing the value of the transition-property attribute which applies to the
target. another is if the display attribute is set to none. syntax var transitionendhandler =
target.ontransitionend;
target.ontransitionend = function value a function to be called when a transitionend event occurs indicating that a css transition has completed on the
target, where the
target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the ev...
HTMLElement: beforeinput event - Web APIs
if these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable. ...
...nt value of the element immediately before replacing that value with the new one applied to the <input> element. 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 specification. working draft ...
HTMLElement: change event - Web APIs
try entering something into the field below, and then click somewhere else to trigger the event. html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log ...
...l the control loses focus. try entering something into the field below, and then click somewhere else to trigger the event. html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.
target.value; } result specifications specification status html living standardthe definition of 'change' in that specification. living standard ...
HTMLElement: input event - Web APIs
he value of an <input>, <select>, or <textarea> element has been changed. bubbles yes cancelable no interface inputevent event handler property globaleventhandlers.oninput the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on. in the case of contenteditable and designmode, the event
target is the editing host. if these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable. for <input> elements with type=checkbox or type=radio, the input event should fire whenever a user toggles the control, per the html5 specification. however, historically this has not always been the case. check compatibility, or use the change event ...
...f options, and the like. examples this example logs the value whenever you change the value of the <input> element. html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.
target.value; } result specifications specification status html living standardthe definition of 'input event' in that specification. living standard document object model (dom) level 3 events specificationthe definition of 'input event' in that specification. obsolete ...
HTMLFormControlsCollection - Web APIs
thod from htmlcollection, on which it is based. ...
...de4" 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">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 i...
HTMLOptionsCollection - Web APIs
turned only by the options property of select. ...
..."#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">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...
HashChangeEvent - Web APIs
art of the url that follows (and includes) the # symbol. ...
...ill="#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/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 inherit...
Ajax navigation example - Web APIs
eturn; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: vmsg = json.parse(this.responsetext); document.title = opageinfo.title = vmsg.page; document.getelementbyid(s
targetid).innerhtml = vmsg.content; if (bupdateurl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { /*...
...is.href); return false; } return true; } function init () { opageinfo.title = document.title; history.replacestate(opageinfo, opageinfo.title, opageinfo.url); for (var olink, nidx = 0, nlen = document.links.length; nidx < nlen; document.links[nidx++].onclick = processlink); } const /* customizable constants */ s
targetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title:...
IDBDatabase: abort event - Web APIs
vent event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...n a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
IDBDatabase: close event - Web APIs
ction is closed normally using idbdatabase.close(). ...
...}; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
IDBDatabase: error event - Web APIs
event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
... transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
IDBIndex - Web APIs
d. idbindex.multientry read only affects how the index behaves when the result of evaluating the index's key path yields an array. if true, there is one record in the index for each item in an array of keys. if false, then there is one record for each key that is an array. idbindex.unique read only if true, this index does not allow duplicate values for a key. methods inherits from: event
target idbindex.count() returns an idbrequest object, and in a separate thread, returns the number of records within a key range. idbindex.get() returns an idbrequest object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an idbkeyrange. idbindex.getkey() returns an idbrequest object, ...
...r a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.
target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBObjectStore.getKey() - Web APIs
exception description transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbobjectstore has been deleted or removed. ...
...et 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. recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to con...
IDBOpenDBRequest: blocked event - Web APIs
database is blocking a versionchange transaction on the same database. ...
... higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBOpenDBRequest: upgradeneeded event - Web APIs
no cancelable no interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store. ...
...reateindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); this is the same example, but uses the onupgradeneeded event handler property. ...
IDBRequest: error event - Web APIs
ndler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); ...
... objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBRequest: success event - Web APIs
brequest succeeds. ...
...nique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBTransaction: abort event - Web APIs
tached, or other os/hardware failure) quota exceeded. examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...dd a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBTransaction: complete event - Web APIs
the complete handler is executed when a transaction successfully completed. ...
...onst objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.
target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBTransaction: error event - Web APIs
event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
...olist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.
target.result; // create an objectstore for this database const 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...
IntersectionObserver.observe() - Web APIs
the intersectionobserver method observe() adds an element to the set of
target elements being watched by the intersectionobserver. one observer has one set of thresholds and one root, but can watch multiple
target elements for visibility changes in keeping with those. to stop observing the element, call intersectionobserver.unobserve(). when the visibility of the specified element crosses over one of the observer's visibility thresholds (as listed in intersectionobserver.thresholds), the observer's callback is executed with an array of intersectionobserverentry objects representing the intersection changes which occurred. ...
...sses over one of the observer's visibility thresholds (as listed in intersectionobserver.thresholds), the observer's callback is executed with an array of intersectionobserverentry objects representing the intersection changes which occurred. note that this design allows multiple elements' intersection changes to be processed by a single call to the callback. syntax intersectionobserver.observe(
targetelement); parameters
targetelement an element whose visibility within the root is to be monitored. this element must be a descendant of the root element (or contained wtihin the current document, if the root is the document's viewport). return value undefined. examples <<<...>>> specifications specification status comment intersection observerthe definition o...
IntersectionObserver.root - Web APIs
the intersectionobserver interface's read-only root property identifies the element or document whose bounds are treated as the bounding box of the viewport for the element which is the observer's
target. if the root is null, then the bounds of the actual document viewport are used. syntax var root = intersectionobserver.root; value a element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the
target element is visible. ...
...e actual document viewport are used. syntax var root = intersectionobserver.root; value a element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the
target element is visible. the intersection of this bounding rectangle, offset by any margins specified in the options passed to the intersectionobserver() constructor, the
target element's bounds, minus the bounds of every element or other object which overlaps the
target element, is considered to be the visible area of the
target element. if root is null, then the owning document is used as the root, and the bounds its viewport (that is, the visible area of the document) are used as the root bounds. example this example sets the border of the intersection observer's r...
IntersectionObserver.takeRecords() - Web APIs
the intersectionobserver method takerecords() returns an array of intersectionobserverentry objects, one for each
targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback. note: if you use the callback to monitor these changes, you don't need to call this method. calling this method clears the pending intersection list, so the callback will not be run. syntax intersectionobserverentries = intersectionobserver.takerecords(); parameters none. ...
... automatic call to the observer's callback. note: if you use the callback to monitor these changes, you don't need to call this method. calling this method clears the pending intersection list, so the callback will not be run. syntax intersectionobserverentries = intersectionobserver.takerecords(); parameters none. return value an array of intersectionobserverentry objects, one for each
target element whose intersection with the root has changed since the last time the intersections were checked. examples <<<...>>> specifications specification status comment intersection observerthe definition of 'intersectionobserver.takerecords()' in that specification. working draft initial definition. ...
IntersectionObserverEntry.intersectionRatio - Web APIs
the intersectionobserverentry interface's read-only intersectionratio property tells you how much of the
target element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0. syntax var intersectionratio = intersectionobserverentry.intersectionratio; value a number between 0.0 and 1.0 which indicates how much of the
target element is actually visible within the root's intersection rectangle. more precisely, this value is the ratio of the area of the intersection rectangle (intersectionrect) to the area of the
target's bounds rectangle (boundingclientrect). if the area of the
target's bounds rectangle is zero, the returned value is 1 if isintersecting is true or 0 if not. example in this simple example, an intersection callback sets each targ...
...t's bounds rectangle (boundingclientrect). if the area of the
target's bounds rectangle is zero, the returned value is 1 if isintersecting is true or 0 if not. example in this simple example, an intersection callback sets each
target element's opacity to the intersection ratio of that element with the root. function intersectioncallback(entries) { entries.foreach(function(entry) { entry.
target.style.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionratio' in that specification. working draft initial d...
IntersectionObserverEntry.intersectionRect - Web APIs
the intersectionobserverentry interface's read-only intersectionrect property is a domrectreadonly object which describes the smallest rectangle that contains the entire portion of the
target element which is currently visible within the intersection root. syntax var intersectionrect = intersectionobserverentry.intersectionrect; value a domrectreadonly which describes the part of the
target element that's currently visible within the root's intersection rectangle. this rectangle is computed by taking the intersection of boundingclientrect with each of the
target's ancestors' clip rectangles, with the exception of the intersection root itself. example in this simple example, an intersection callback stores the intersection rectangle for later use by the code that draws the targ...
...ors' clip rectangles, with the exception of the intersection root itself. example in this simple example, an intersection callback stores the intersection rectangle for later use by the code that draws the
target elements' contents, so that only the visible area is redrawn. function intersectioncallback(entries) { entries.foreach(function(entry) { refreshzones.push({ element: entry.
target, rect: entry.intersectionrect }); }); } specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionrect' in that specification. working draft initial definition ...
MediaKeyMessageEvent - Web APIs
t decryption module generates a message for the session. ...
...#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 mediakeymessageeven...
MediaStream - Web APIs
information or functionality, like in canvascapturemediastream. constructor mediastream() creates and returns a new mediastream object. you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of mediastreamtrack objects). properties this interface inherits properties from its parent, event
target. mediastream.active read only a boolean value that returns true if the mediastream is active, or false otherwise. mediastream.ended read only a boolean value set to true if the end of the stream has been reached. this has been removed from the specification; you should instead check the value of mediastreamtrack.readystate to see if its value is ended for the track or tracks you want to...
...t. event handlers mediastream.onaddtrack an eventhandler containing the action to perform when an addtrack event is fired when a new mediastreamtrack object is added. mediastream.onremovetrack an eventhandler containing the action to perform when a removetrack event is fired when a mediastreamtrack object is removed from it. methods this interface inherits methods from its parent, event
target. mediastream.addtrack() stores a copy of the mediastreamtrack given as argument. if the track has already been added to the mediastream object, nothing happens. mediastream.clone() returns a clone of the mediastream object. the clone will, however, have a unique value for id. mediastream.getaudiotracks() returns a list of the mediastreamtrack objects stored in the mediastream object...
MediaStreamTrackEvent - Web APIs
events are sent to the stream when these changes occur. ...
...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/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 interfac...
Capabilities, constraints, and settings - Web APIs
l so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused. ...
...l find that the documentation link doesn't help much. let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code><a href='/docs/web/api/mediatracksupportedconstraints/" .concat(constraint) + "'
target='_blank'>" + constraint + "</a></code>"; supportedconstraintlist.appendchild(elem); } } error handling we also have some simple error handling code; handleerror() is called to handle promises which fail, and the log() function appends the error message to a special logging <div> box under the video. function log(msg) { logelement.innerhtml += (msg + "<br>"); } function handleerror(re...
MessagePort: message event - Web APIs
ge arrives on that channel. ...
...les no cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const
targetframe = window.top.frames[1]; const
targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); })
targetframe.postmessage('init',
targetorigin, [channel.port2]); the
target can receive the port and start listening for messages...
MessagePort: messageerror event - Web APIs
can't be deserialized. ...
... no cancelable no interface messageevent event handler property onmessageerror examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const
targetframe = window.top.frames[1]; const
targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); })
targetframe.postmessage('init',
targetorigin, [channel.port2]); the
target can receive the port and start listening for messages...
MessagePort.start() - Web APIs
the start() method of the messageport interface starts the sending of messages queued on the port. this method is only needed when using event
target.addeventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
... this feature is available in web workers. syntax port.start() returns void. parameters none. ...
MessagePort - Web APIs
the messageport interface of the channel messaging api represents one of the two ports of a messagechannel, allowing messages to be sent from one port and listening out for them arriving at the other. note: this feature is available in web workers. methods inherits methods from its parent, event
target postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. ...
...ssages to be sent from one port and listening out for them arriving at the other. note: this feature is available in web workers. methods inherits methods from its parent, event
target postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. start() starts the sending of messages queued on the port (only needed when using event
target.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active. event handlers inherits event handlers from its parent, event
target onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message. onmessageerror an eventlistener called when a messageevent of ...
MouseEvent() - Web APIs
"region", optional and defaulting to null, of type domstring, is the id of the hit region affected by the event. the absence of any hit region is affected, is represented by the null value. in some implementations...
... "region", optional and defaulting to null, of type domstring, is the id of the hit region affected by the event. the absence of any hit region is affected, is represented by the null value. in some implementations, passing anything other than a number for the screen a...
msPlayToPreferredSourceUri - Web APIs
this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. msplaytopreferredsourceuri is a read/write property which gets or sets the path to the preferred media source. ...
...this enables web pages and microsoft store apps to play digital rights management (drm) protected content. the app specifies a preferred uniform resource identifier (uri). ...
MutationObserverInit - Web APIs
uration of a mutation observer. as such, it's primarily used as the type of the options parameter on the mutationobserver.observe() method. properties at a minimum, one of childlist, attributes, and/or characterdata must be true when you call observe(). otherwise, a typeerror exception will be thrown. subtree optional set to true to extend monitoring to the entire subtree of nodes rooted at
target. all of the other mutationobserverinit properties are then extended to all of the nodes in the subtree instead of applying solely to the
target node. the default value is false. childlist optional set to true to monitor the
target node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes. the default value is false. attributes option...
...tes cause mutation notifications. attributeoldvalue optional set to true to record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes; see monitoring attribute values in mutationobserver for details on watching for attribute changes and value recording. the default value is false. characterdata optional set to true to monitor the specified
target node (and, if subtree is true, its descendants) for changes to the character data contained within the node or nodes. the default value is true if characterdataoldvalue is specified, otherwise the default value is false. characterdataoldvalue optional set to true to record the previous value of a node's text whenever the text changes on nodes being monitored. for details and an example, see mon...
NetworkInformation - Web APIs
ection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. the networkinformation interfaces cannot be instantiated. it is instead accessed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, event
target. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlinkmax read only returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. networkinformation.effectivetype read only returns the effective t...
...f connection a device is using to communicate with the network. it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers networkinformation.onchange the event that's fired when connection information changes and the change is fired on this object. methods this interface also inherits methods of its parent, event
target. specifications specification status comment network information apithe definition of 'networkinformation' in that specification. draft initial definition ...
OrientationSensor.populateMatrix() - Web APIs
the populatematrix method of the orientationsensor interface populates the given
target matrix with the rotation matrix based on the latest sensor reading. the rotation matrix is shown below. where: w = cos(θ/2) x = vx * sin(θ/2) y = vy * sin(θ/2) z = vz * sin(θ/2) if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax orientationinstance.populatematrix(
targetmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes. ...
...olicy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax orientationinstance.populatematrix(
targetmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes. parameters
targetmatrix tbd return value undefined example // tbd specifications specification status comment orientation sensorthe definition of 'populatematrix' in that specification. candidate recommendation initial definition. ...
PageTransitionEvent - Web APIs
and pagehide events, fired when a document is being loaded or unloaded. ...
..."#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 inh...
PerformanceFrameTiming - Web APIs
performanceframetiming is an abstract interface that provides frame timing data about the browser's event loop. a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc.. a frame rate of 60fps (frames per second) for a 60hz refresh rate is the
target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. <div id="interfacediagram" style="display: inline-block; position: r...
...long to provide a good user experience. ...
PerformanceLongTaskTiming - Web APIs
ng tasks api reports instances of long tasks. ...
...e4" 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 performancelong...
PerformanceMark - Web APIs
mark) to the browser's performance timeline. ...
...oke="#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/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 prope...
PerformanceMeasure - Web APIs
marks to the browser's performance timeline. ...
...="#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/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 pr...
PerformanceNavigationTiming - Web APIs
h time it takes to load or unload a document. ...
..." 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/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 ...
PerformancePaintTiming - Web APIs
e too long to provide a good user experience. ...
...4dde4" 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/performancepainttiming"
target="_top"><rect x="201" y="1" width="220" 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">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has n...
PerformanceResourceTiming - Web APIs
he type of resource that initiated the fetch. ...
...e4" 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;} note: this feature is availab...
ProgressEvent - Web APIs
ource of an <img>, <audio>, <video>, <style> or <link>). ...
... 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/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...
PromiseRejectionEvent - Web APIs
omise rejection events, see promise rejection events in using promises. ...
...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/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 promiserejectionev...
RTCIceTransport: gatheringstatechange event - Web APIs
e for a single transport. examples this example creates a handler for gatheringstatechange events on each rtcrtpsender associated with a given rtcpeerconnection. ...
...{ 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. candidate recommendation ...
RTCIceTransport - Web APIs
it also offers the following properties: component read only the ice component being used by the transport. ...
...state of the ice agent is. 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. see the rtcicetransportstate enumerated type for a complete list of states. methods also includes methods from event
target, the parent interface. getlocalcandidates() returns an array of rtcicecandidate objects, each describing one of the ice candidates that have been gathered so far for the local device. these are the same candidates which have already been sent to the remote peer by sending an icecandidate event to the rtcpeerconnection for transmission. getlocalparameters() returns a rtciceparameters object ...
RTCPeerConnection.createOffer() - Web APIs
the value "video-offer" to the other peer. the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend entirely on your design. ...
...ue "video-offer" to the other peer. the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend entirely on your design. ...
RTCPeerConnection: icegatheringstatechange event - Web APIs
techange events and checking for the value of icegatheringstate to become complete, you can also simply have your handler for the icecandidate event look to see if its candidate property is null. this also indicates that collection of candidates is finished. examples this example creates a handler for icegatheringstatechange events. ...
... 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 "gathering": /* 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 tha...
RTCSctpTransport - Web APIs
csctptransport objects yourself; instead, you get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property. possibly the most useful property on this interface is its maxmessagesize property, which you can use to determine the upper limit on the size of messages you can send over a data channel on the peer connection. properties also inherits properties from: event
target rtcsctptransport.maxchannelsread only an integer value indicating the maximum number of rtcdatachannels that can be open simultaneously. rtcsctptransport.maxmessagesizeread only an integer value indicating the maximum size, in bytes, of a message which can be sent using the rtcdatachannel.send() method. rtcsctptransport.stateread only a domstring enumerated value indicating the state o...
... a domstring enumerated value indicating the state of the sctp transport. rtcsctptransport.transportread only an rtcdtlstransport object representing the dtls transport used for the transmission and receipt of data packets. event handlers rtcsctptransport.onstatechange fired when the rtcsctptransport.state changes. methods this interface has no methods, but inherits methods from: event
target example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsctptransport' in that specification. candidate recommendation initial definition. ...
RadioNodeList - Web APIs
f radio elements in a <form> or a <fieldset> element. ...
...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 i...
ResizeObserverEntry.borderBoxSize - Web APIs
izontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. ...
...text directions. examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.
target.style.borderradius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.
target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of '
target' in that specification. editor's draft initial defini...
ResizeObserverEntry.contentBoxSize - Web APIs
e box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. ...
...tion gives you nice square corners that scale with the box size. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.
target.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.
target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of '
target' in that specification. editor's draft initial defini...
Resize Observer API - Web APIs
nged causing the containing <div> to change width. this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport. ...
... ...
SVGTransformList - Web APIs
st associated with an svg element. ...
...svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.
target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.
target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform o...
ServiceWorkerRegistration - Web APIs
. the lifetime of a service worker registration is beyond that of the serviceworkerregistration objects that represent them within the lifetime of their corresponding service worker clients. the browser maintains a persistent list of active serviceworkerregistration objects. note: this feature is available in web workers. properties also implements properties from its parent interface, event
target. serviceworkerregistration.scope read only returns a unique identifier for a service worker registration. this must be on the same origin as the document that registers the serviceworker. serviceworkerregistration.installing read only returns a service worker whose state is installing. this is initially set to null. serviceworkerregistration.waiting read only returns a service worker w...
...the sw explainer at some point, but as yet has not been implemented anywhere. event handlers serviceworkerregistration.onupdatefound read only an eventlistener property called whenever an event of type updatefound is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker. methods also implements methods from its parent interface, event
target. serviceworkerregistration.getnotifications() returns a promise that resolves to an array of notification objects. serviceworkerregistration.shownotification() displays the notification with the requested title. serviceworkerregistration.update() checks the server for an updated version of the service worker without consulting caches. serviceworkerregistration.unregister() unregisters t...
SpeechRecognition - Web APIs
e. note: on some browsers, like chrome, using speech recognition on a web page involves a server-based recognition engine. your audio is sent to a web service for recognition processing, so it won't work offline. constructor speechrecognition.speechrecognition() creates a new speechrecognition object. properties speechrecognition also inherits properties from its parent interface, event
target. speechrecognition.grammars returns and sets a collection of speechgrammar objects that represent the grammars that will be understood by the current speechrecognition. speechrecognition.lang returns and sets the language of the current speechrecognition. if not specified, this defaults to the html lang attribute value, or the user agent's language setting if that isn't set either. speechr...
... the maximum number of speechrecognitionalternatives provided per result. the default value is 1. speechrecognition.serviceuri specifies the location of the speech recognition service used by the current speechrecognition to handle the actual recognition. the default is the user agent's default speech service. methods speechrecognition also inherits methods from its parent interface, event
target. speechrecognition.abort() stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognitionresult. speechrecognition.start() starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current speechrecognition. speechrecognition.stop() stops the speech recognition service f...
SpeechSynthesis - Web APIs
speechsynthesis.paused read only a boolean that returns true if the speechsynthesis object is in a paused state. ...
... paused state. speechsynthesis.pending read only a boolean that returns true if the utterance queue contains as-yet-unspoken utterances. speechsynthesis.speaking read only a boolean that returns true if an utterance is currently in the process of being spoken — even if speechsynthesis is in a paused state. methods speechsynthesis also inherits methods from its parent interface, event
target. speechsynthesis.cancel() removes all utterances from the utterance queue. speechsynthesis.getvoices() returns a list of speechsynthesisvoice objects representing all the available voices on the current device. speechsynthesis.pause() puts the speechsynthesis object into a paused state. speechsynthesis.resume() puts the speechsynthesis object into a non-paused state: resumes it if it wa...
StaticRange - Web APIs
staticrange are not available from web workers. ...
...ff" 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...
StorageEvent - Web APIs
ss to is changed within the context of another document. ...
..." 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/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( ...
TaskAttributionTiming - Web APIs
ng implicated, on the whole, for a long task. ...
...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/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 taskattributiontimi...
TextEncoder.prototype.encodeInto() - Web APIs
syntax b1 = encoder.encodeinto(string, uint8array); parameters string is a usvstring containing the text to encode. ...
... the maximum allocation size s.length * 3, and to have a chosen (as a tradeoff between memory usage and speed) threshold t such that if rounduptobucketsize(s.length) + t >= s.length * 3, you simply allocate for s.length * 3. otherwise, first allocate for rounduptobucketsize(s.length) and convert. if the read item it the return dictionary is s.length, the conversion is done. if not, reallocate the
target buffer to written + (s.length - read) * 3 and then convert the rest by taking a substring of s starting from index read and a subbuffer of the
target buffer starting from index written. above rounduptobucketsize() is a function that rounds up to the allocator bucket size. for example, if your wasm allocator is known to use power-of-two buckets, rounduptobucketsize() should return the argument if...
TextTrack - Web APIs
texttrack.activecues read only a texttrackcuelist object listing the currently active set of text track cues. track cues are active if the current playback position of the media is between the cues' start and end times. ...
...stants. the default is disabled, unless the <track> element's default boolean attribute is specified, in which case the default mode is started. events cuechange fired when cues are entered and exited. a given text cue appears when the cue is entered and disappears when the cue is exited. also available via the oncuechange property. methods this interface also inherits methods from event
target. texttrack.addcue() adds a cue (specified as a texttrackcue object to the track's list of cues. texttrack.removecue() removes a cue (specified as a texttrackcue object from the track's list of cues. example tbd specifications specification status comment html living standardthe definition of 'texttrack' in that specification. living standard ...
TextTrackList - Web APIs
to represent a list of the text tracks defined by the <track> element, with each track represented by a separate texttrack object in the list. retrieve an instance of this object with htmlmediaelement.texttracks. the individual tracks can be accessed using array syntax or functions such as foreach() for example. properties this interface also inherits properties from its parent interface, event
target. length read only the number of tracks in the list. event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new text track has been added to the media element. onchange an event handler to be called when the change event occurs. onremovetrack an event handler to call when the removetrack event is sent, indicating that a text track...
...en the addtrack event is fired, indicating that a new text track has been added to the media element. onchange an event handler to be called when the change event occurs. onremovetrack an event handler to call when the removetrack event is sent, indicating that a text track has been removed from the media element. methods this interface also inherits methods from its parent interface, event
target. gettrackbyid() returns the texttrack found within the texttracklist whose id matches the specified string. if no match is found, null is returned. events addtrack fired when a new text track has been added to the media element. also available via the onaddtrack property. change fired when a text track has been made active or inactive. also available via the onchange property. remo...
TimeEvent - Web APIs
ific contextual information associated with time events. ...
..."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 ...
Touch.force - Web APIs
the sensitivity in levels of pressure, may vary. example this example illustrates using the touch interface's touch.force property. this property is a relative value of pressure applied, in the range 0.0 to 1.0, where 0.0 is no pressure, and 1.0 is the highest level of pressure the touch device is capable of sensing. in following code snippet, the touchstart event handler iterrates through the
targettouches list and logs the force value of each touch point but the code could invoke different processing depending on the value. someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force. for (var i=0; i < e.
targettouches.length; i++) { // add code to "switch" based on the force value. for example //...
... value. someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force. for (var i=0; i < e.
targettouches.length; i++) { // add code to "switch" based on the force value. for example // minimum pressure vs. maximum pressure could result in // different handling of the user's input. console.log("
targettouches[" + i + "].force = " + e.
targettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition. ...
Touch events - Web APIs
this behavior is not...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but still allow panning with both fingers; android wi...
UIEvent - Web APIs
oardevent, wheelevent, inputevent, and compositionevent. ...
...t="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="#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 o...
VideoTrackList - Web APIs
esent a list of the video tracks contained within a <video> element, with each track represented by a separate videotrack object in the list. retrieve an instance of this object with htmlmediaelement.videotracks. the individual tracks can be accessed using array syntax or functions such as foreach() for example. properties this interface also inherits properties from its parent interface, event
target. length read only the number of tracks in the list. selectedindex read only the index of the currently selected track, if any, or −1 otherwise. event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the media element. onchange an event handler to be called when the change event occurs — that...
...ler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive. onremovetrack an event handler to call when the removetrack event is sent, indicating that a video track has been removed from the media element. methods this interface also inherits methods from its parent interface, event
target. gettrackbyid() returns the videotrack found within the videotracklist whose id matches the specified string. if no match is found, null is returned. events addtrack fired when a new video track has been added to the media element. also available via the onaddtrack property. change fired when a video track has been made active or inactive. also available via the onchange property. ...
WebGL2RenderingContext.texStorage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. levels a glint specifying the number of texture levels. internalformat a glenum specifying the texture store format. ...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. levels a glint specifying the number of texture levels. internalformat a glenum specifying the texture store format. ...
WebGLContextEvent - Web APIs
roperties and methods from its parent interface, event. ...
...l="#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/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 p...
WebGLRenderingContext.bindFramebuffer() - Web APIs
the webglrenderingcontext.bindframebuffer() method of the webgl api binds a given webglframebuffer to a
target. syntax void gl.bindframebuffer(
target, framebuffer); parameters
target a glenum specifying the binding point (
target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. ...
...gl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. framebuffer a webglframebuffer object to bind. return value none. exceptions a gl.invalid_enum error is thrown if
target is not gl.framebuffer, gl.draw_framebuffer, or gl.read_framebuffer. examples binding a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, framebuffer); getting current bindings to check the current frame buffer binding, query the framebuffer_binding constant. gl.getp...
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. ...
...ntext, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures. when using the ovr_multiview2 extension, the following value can be returned additionally: ext.framebuffer_incomplete_view_
targets_ovr: if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete. examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); // ... gl.checkframebufferstatus(gl.framebuffer); specifications ...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used. ...
...sional sub-rectangle for a texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used. syntax // webgl 1: void gl.compressedtexsubimage2d(
target, level, xoffset, yoffset, width, height, format, arraybufferview? pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(
target, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(
target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters
target a glenum specifying the binding point (
target) of the active compressed texture. possible values: gl.texture_2d: a two-dimensional texture.
WebGLRenderingContext.copyTexImage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. ...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. ...
WebGLRenderingContext.getBufferParameter() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. ...
... 'glgetbufferparameteriv' in that specification. standard man page of the (similar) opengl es 2 api. webgl 2.0the definition of 'getbufferparameter' in that specification. editor's draft updated definition for webgl. opengl es 3.0the definition of 'glgetbufferparameter' in that specification. standard man page of the (similar) opengl es 3 api. adds new
target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy. ...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
te system underlying the entire 3d canvas. the player, avatar, or camera; the origin of this space is used as the camera position for rendering the scene to be displayed to the user. the hand and/or hand controller; each of these represents one of the user's hands, either in the form of the hand itself or a controller (or both). the origin is generally the center of the user's fisted hand. the
target ray; each controller or other handheld device may have a
targeting ray associated with it, which is represented by a space whose origin is at the point on the controller at which the ray is emitted, and is oriented so that -z extends in the direction of the
target it's pointing at. because each of these is defined using a reference space as its foundation, the webxr device api can easily be use...
...r reference space. this is done using poses. a pose, simply put, describes a position and orientation relative to the origin of the reference space from which it was created. in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the original space, converts it to the
target space. thus a pose can be used to not only convert and determine positions, but also rotational information. there is only one way to create an xrpose, and that's using the getpose() method on an animation frame as given using an xrframe object. this means that most frequently, you'll be using poses within your frame rendering code, which is executed as a callback from the xrframe method request...
Starting up and shutting down a WebXR session - Web APIs
ion, and is kept up to date with the specification. additionally, it is updated to maintain compatibility with browsers as their support for webxr and other technologies related to it and to the implementation of the polyfill change over time. be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer javascript features your
target browsers include. webxr api emulator extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, which emulates the webxr api, simulating a variety of compatible devices such as the htc vive, the oculus go and oculus quest, samsung gear, and google cardboard. with the extension in place, you can open up a developer tools panel th...
...schange event to detect the addition or removal of xr input controllers, and the various select and squeeze action events. you may want to watch for the xrsystem event devicechange so you can be advised when the set of available immersive devices changes. obtain a webgl context for the canvas into which you intend to render your frames by calling the htmlcanvaselement method getcontext() on the
target context. set up your webgl data and models and prepare to render the scene. set the webgl context as the source for the xr system by creating an xrwebgllayer and passing set the value of the session's renderstate property baselayer. perform calculations for the initial position and scale of your objects as needed. begin the frame rendering cycle. in basic form, code to do this final setup m...
WebXR Device API - Web APIs
human vision—one for the left eye and a second for the right eye. one view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. the view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment. xrinputsource represents any input device the user can use to perform
targeted actions within the same virtual space as the viewer. input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the xr device. other input devices such as keyboards, mice, and gamepads are not presented as xrinputsource instances. xrwebgllayer a layer which serves as a webgl frame buffer into which a scene's vie...
... tutorial, we use information learned throughout the webxr documentation to create a scene containing a rotating cube which the user can move around using both vr headset and keyboard and mouse. inputs and input sources a guide to input sources and how to efficiently manage the input devices being used to control the webxr session, and how to receive and process user inputs from those devices.
targeting and hit detection how to use an input source's
targeting ray mode and
targeting ray space to display a
targeting ray, identify
targeted surfaces or objects, and perform related tasks. using webxr input profiles a guide to interpreting the json data provided by the webxr input profiles registry, which can be used to determine what options and controls are available on the user's available i...
Web Audio API - Web APIs
such as <audio>, oscillator, stream create effects nodes, such as reverb, biquad filter, panner, compressor choose final destination of audio, for example your system speakers connect the sources up to the effects, and the effects to the destination. timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to
target specific samples, even at a high sample rate. so applications such as drum machines and sequencers are well within reach. the web audio api also allows us to control how audio is spatialized. using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener). you can read about the ...
...each. the web audio api also allows us to control how audio is spatialized. using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener). you can read about the theory of the web audio api in a lot more detail in our article basic concepts behind web audio api. web audio api
target audience the web audio api can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. however, it can also ...
Window: copy event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
Window: cut event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
Window: paste event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
Worker - Web APIs
l and channel attributes are always null. (fetch is also available, with no such restrictions.) in firefox extensions, if you want to use workers with access to js-ctypes, use chromeworker object instead. constructors worker() creates a dedicated web worker that executes the script at the specified url. this also works for blob urls. properties inherits properties from its parent, event
target, and implements properties from abstractworker. event handlers abstractworker.onerror an eventlistener called whenever an errorevent of type error bubbles through to the worker. this is inherited from abstractworker. worker.onmessage an eventlistener called whenever a messageevent of type message bubbles through the worker — i.e. when a message is sent to the parent document from the wor...
...ever a messageevent of type message bubbles through the worker — i.e. when a message is sent to the parent document from the worker via dedicatedworkerglobalscope.postmessage. the message is stored in the event's data property. worker.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. methods inherits methods from its parent, event
target, and implements methods from abstractworker. worker.postmessage() sends a message — consisting of any javascript object — to the worker's inner scope. worker.terminate() immediately terminates the worker. this does not let worker finish its operations; it is halted at once. serviceworker instances do not support this method. events message fires when the worker's parent receives a...
WorkerGlobalScope - Web APIs
orkernavigator object. each workerglobalscope has its own event loop. this interface is usually specialized by each worker type: dedicatedworkerglobalscope for dedicated workers, sharedworkerglobalscope for shared workers, and serviceworkerglobalscope for serviceworker. the self property returns the specialized scope for each context. properties this interface inherits properties from the event
target interface and windoworworkerglobalscope and windoweventhandlers mixins. standard properties workerglobalscope.navigator read only returns the workernavigator associated with the worker. it is a specific navigator object, mostly a subset of the navigator for browsing scopes, but adapted to workers. workerglobalscope.self read only returns a reference to the workerglobalscope itself. most ...
...ia the workerglobalscope.onclose property. rejectionhandled an event handler for handled promise rejection events. also available via the workerglobalscope.onrejectionhandled property. unhandledrejection an event handler for unhandled promise rejection events. also available via the workerglobalscope.onunhandledrejection property. methods this interface inherits methods from the event
target interface and windoworworkerglobalscope and windoweventhandlers mixins. standard methods workerglobalscope.importscripts() imports one or more scripts into the worker's scope. you can specify as many as you'd like, separated by commas. for example: importscripts('foo.js', 'bar.js'); non-standard methods workerglobalscope.dump() allows you to write a message to stdout — i.e. in your...
HTML in XMLHttpRequest - Web APIs
sed. otherwise, the file is decoded as utf-8. handling html on older browsers xmlhttprequest originally supported only xml parsing. html parsing support is a recent addition. ...
...tprequest originally supported only xml parsing. html parsing support is a recent addition. ...
XRInputSource - Web APIs
pace for more details on how to use this space. handednessread only a domstring that indicates which hand the device represented by this xrinputsource is being used in, if any. the value will be left, right, or none. profilesread only an array of domstring objects, each specifying the name of an input profile describing the preferred visual representation and behavior of this input source.
targetraymoderead only a domstring indicating the methodology used to produce the
target ray: gaze, tracked-pointer, or screen.
targetrayspaceread only an xrspace object defining the origin of the
target ray and the direciton in which it extends. this space is established using the method defined by
targetraymode. methods the xrinputsource interface defines no methods. usage notes actions ...
...ead only a domstring indicating the methodology used to produce the
target ray: gaze, tracked-pointer, or screen.
targetrayspaceread only an xrspace object defining the origin of the
target ray and the direciton in which it extends. this space is established using the method defined by
targetraymode. methods the xrinputsource interface defines no methods. usage notes actions and the
target ray if the device provides an indication of the direction in which it is pointed, this is done using a
target ray. this is a ray extending from the position of the device outward in the direction in which it is pointed. a
target ray emitted by a hand controller. if the device includes a trigger or other squeezable input, such as a hand gesture device that recognizes when the user squeezes ...
XRInputSourcesChangeEvent.added - Web APIs
en newly made available for use. syntax let addedinputs = xrinputsourceschangeevent.added; value an array of zero or more xrinputsource objects, each representing one input device added to the xr system. examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system. ...
...nputsource objects, each representing one input device added to the xr system. examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system. it looks for new and removed devices whose
targetraymode is tracked-pointer. 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. working draft ini...
XRInputSourcesChangeEvent.removed - Web APIs
removed from the xrsession. syntax removedinputs = xrinputsourceschangeevent.removed; value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system. examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system. ...
...source objects, each representing one input device removed from the xr system. examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system. it looks for new and removed devices whose
targetraymode is tracked-pointer. 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. working draft i...
XRReferenceSpace - Web APIs
due to physical obstacles or due to limitations of the xr hardware. see the article using bounded reference spaces to protect the viewer for more on using boundaries to keep the user from colliding with obstacles both physical and virtual. properties in addition to the properties inherited from xrspace (of which there are none at this time), xrreferencespace also inherits the properties of event
target. xrreferencespace defines no additional properties. methods in addition to the methods inherited from its parent interface, xrspace (there are none at this time), xrreferencespace inherits methods from event
target. xrreferencespace also provides the following methods. getoffsetreferencespace() creates and returns a new reference space object as the same type as the one on which you call t...
...he new reference space can be used to transform a coordinate from the reference space of the object on which the method is called into a different coordinate space. this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or orientation in 3d space. events in addition to other events that may be sent to xrspace or event
target objects, the following also apply to xrreferencespace objects. reset the reset event is sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin relative to the user's environment or location. this can happen, for example, after the user recalibrates their xr device, or if the device automatically adjusts its origin after ...
XRSession.onsqueeze - Web APIs
nputsource, event.frame); } }; finishing an ongoing squeeze action this example exapnds somewhat on the previous example by demonstrating a way to implement the ability for the user to drop an object that was previously picked up by the user.. this is just a snippet of code, but should establish the general idea. after checking that the event occurred on the user's dominant hand, the pose's
target ray is obtained. then we pass the currently held object and the
target ray's transform matrix into a function we call dropobjectusingray() to drop the object, using the
target ray to determine the surface upon which the object should be placed. this also clears the value of heldobject so we know that there's no longer an object in hand. xrsession.onsqueeze = event => { if (event.inputsource.ha...
...ently held object and the
target ray's transform matrix into a function we call dropobjectusingray() to drop the object, using the
target ray to determine the surface upon which the object should be placed. this also clears the value of heldobject so we know that there's no longer an object in hand. xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let
targetraypose = event.frame.getpose(event.inputsource.
targetrayspace, myrefspace); if (user.heldobject &&
targetraypose) { dropobjectusingray(user.heldobject,
targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach. specifications specification status co...
XRSession.onsqueezestart - Web APIs
earn more about how to use and handle webxr controller inputs, see inputs and input sources. syntax xrsession.onsqueezestart = squeezestarthandlerfunction; value a function to be invoked whenever the xrsession receives a squeezestart event. ...
...hich responds only to events on the user's dominant hand by getting the
target ray, then calling a function findobjectusingray() to identify the object that the user is pointing at. this object is then stored in a heldobject variable in the user object we're using to represent user information. xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let
targetraypose = event.frame.getpose(event.inputsource.
targetrayspace, myrefspace; if (
targetraypose) { user.heldobject = findobjectusingray(
targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification. working draft initial definition. ...
XRSession - Web APIs
estsession() method. with xrsession methods, you can poll the viewer's position and orientation (the xrviewerpose), gather information about the user's environment, and present imagery to the user. xrsession supports both inline and immersive virtual and augmented reality modes. properties in addition to the properties listed below, xrsession inherits properties from its parent interface, event
target. environmentblendmode read only returns this session's blend mode which denotes how much of the real-world environment is visible through the xr device and how the device will blend the device imagery with it. note: environmentblendmode() is part of the webxr augmented reality module, which has not been completed. inputsources read only returns a list of this session's xrinpu...
... near and far clipping planes (distances defining how close and how far away objects can be and still get rendered), as well as field of view information. visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the
target for user events. methods xrsession provides the following methods in addition to those inherited from its parent interface, event
target. cancelanimationframe() removes a callback from the animation frame painting callback from xrsession's set of animation frame rendering callbacks, given the identifying handle returned by a previous call to requestanimationframe(). end() ends the webxr s...
ARIA live regions - Accessibility
with aria-atomic="true", the screenreader announces "the set year is: changedvalue" advanced use case: roster a chat site would like to display a list of users currently logged in. display a l...
... with aria-atomic="true", the screenreader announces "the set year is: changedvalue" advanced use case: roster a chat site would like to display a list of users currently logged in. display a list of users where a user's log-in and log-out status will be ...
ARIA Test Cases - Accessibility
item, screen reader should indicate that item can be an object that can be dragged. once marked for drag and drop, screen reader should announce that this item has been picked up, to distinguish it from others that may be draggable, but are currently not selected for the operation. (al) i'm not sure if there is a way for the screen reader to know when something has been marked for drag & drop.
target nodes where the item can be dropped should be indicated from now on when they receive focus or arrowing onto them with the virtual cursor. after drag and drop operation has completed, the new location of the item should be indicated in the virtual buffer representation. if the drag and drop operation caused a menu to open, focus should be tracked in that menu, and the user should be able to comp...
...drag and drop operation has completed, the new location of the item should be indicated in the virtual buffer representation. if the drag and drop operation caused a menu to open, focus should be tracked in that menu, and the user should be able to complete further interaction via the keyboard as usual. optional but desired: at should provide simple method to navigate only among the current drop
targets. markup used: aria-grab aria-dropeffect notes: (mz) there is no equivalent place in any of the known operating systems where draggable items are denoted and
targets being indicated as such. all drag and drop operations screen readers traditionally perform within the operating system are hit and miss games that are performed on pixel locations. the above is a suggested series of behavi...
ARIA: button role - Accessibility
"audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
... javascript function handlebtnclick(event) { togglebutton(event.
target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to stop scrolling when space is pressed event.preventdefault(); togglebutton(event.
target); } } function togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
s, before we can call this one. msaa decision-making guide use msaa whenever you have created custom controls where you're handling the drawing, mouse and keyboard accessibility in your own code. msaa is the only way to let all at's know what your code is doing. don't use msaa if you're not running on a windows platform ... hope that one was obvious. don't use msaa if you're only windows
target for accessibility is longhorn. don't use msaa if you're not going to take it all the way via testing with assistive technologies and working with at vendors. don't use msaa for exposing documents or other specialized data, if it's important that the user get access to formatting information. you will have to expose interfaces that contain more info than msaa does. this information may be in the...
...to get focused in a different window, make sure you focus a window before you fire your own focus events for objects inside it. test using accessible event watcher in the msaa sdk, and use the settings panel to watch subsets of accessibility events. count on the assistive technology to make sense out the jumble of extra system-generated events, it's not your problem. no unique child id for event
target in window problem: msaa expects events to be reported using notifywinevent(eventnum, hwnd, worldid, childid), and there may not be an obvious way to get a window handle and a 32 bit childid for an object. you may be using windowless controls, or have an entire document with lots of objects in a given window. the child id must be unique, because this is what the assistive technology will use to r...
Mobile accessibility checklist - Accessibility
note: the original version of this document was written by yura zenevich. ...
...e its completion is available or an option to undo the action after its completion the up-event will undo any action that was triggered on a down event it is essential to trigger the action on the down event. for example, playing a game or a piano application. touch
targets must be large enough for the user to interact with (see the bbc mobile accessibility guidelines for useful touch
target size guidelines). note: the original version of this document was written by yura zenevich. ...
Operable - Accessibility
2.1 ensure that for functionality that can be triggered by a) device motion (like shaking, tilting) or b) user gestures detected by device sensors (including a camera) that both of the following are true: 1) motion actuation can be disabled, and 2) the functionality can be operated without using device motion or user gestures. exceptions exist. ...
...motion (like shaking, tilting) or b) user gestures detected by device sensors (including a camera) that both of the following are true: 1) motion actuation can be disabled, and 2) the functionality can be operated without using device motion or user gestures. exceptions exist. understanding motion actuation 2.5.5
target size (aaa) added in 2.1 the size of an actionable item's touch
target must be at least 44 css pixels in both width and height. exceptions exist. understanding
target size 2.5.6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input devices. an essential exception exists. ...
::before (:before) - CSS: Cascading Style Sheets
note that there are no icons used, and the check-mark is actually the ::before that has been styled in css. go ahead and get some stuff done. result special characters as this is css; not html, you can not use markup entities in content values. if you need to use a speci...
...note that there are no icons used, and the check-mark is actually the ::before that has been styled in css. go ahead and get some stuff done. result special characters as this is css; not html, you can not use markup entities in content values. if you need to use a special character, and can not enter it ...
size - CSS: Cascading Style Sheets
size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions. ...
... portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page. in most cases, the dimensions and orientation of the
target sheet are used. landscape the content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal). portrait the content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). this is the default orientation. <length> any length value (see <length>). the first value corresponds to the width of the page box and the second one ...
Border-radius generator - CSS: Cascading Style Sheets
nager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.
target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventliste...
...itselector(this.topic + '-w'); var unith = new unitselector(this.topic + '-h'); var unitr = new unitselector(this.topic); unit_selector.appendchild(unitw.container); unit_selector.appendchild(unith.container); unit_selector.appendchild(unitr.container); node.appendchild(radius); subject.appendchild(handle); unitw.select.addeventlistener('change', function(e) { this.setunitx(e.
target.value | 0); }.bind(this)); unith.select.addeventlistener('change', function(e) { this.setunity(e.
target.value | 0); }.bind(this)); unitr.select.addeventlistener('change', function(e) { this.setunitr(e.
target.value | 0); }.bind(this)); if (x === 'left' && y == 'top') handle.classname = 'handle handle-top-left' if (x === 'right' && y == 'top') handle.classname = 'handle handl...
Box-shadow generator - CSS: Cascading Style Sheets
type = node.getattribute('data-unit'); var input = document.createelement('input'); var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.
target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var dec...
...ss : addcssclass, disableclass : disableclass, deleteshadow : deleteshadow, setactiveclass : setactiveclass, setactiveshadow : setactiveshadow } })(); /** * layer manager */ var layermanager = (function layermanager() { var stacks = []; var active = { node : null, stack : null } var elements = {}; var mouseevents = function mouseevents(e) { var node = e.
target; var type = node.getattribute('data-type'); if (type === 'subject') setactivestack(stacks[node.id]); if (type === 'disable') { tool.disableclass(node.parentnode.id); setactivestack(stacks['element']); } if (type === 'add') active.stack.addlayer(); if (type === 'layer') active.stack.setactivelayer(node); if (type === 'delete') active.stack.deletela...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
is item will always be dealt with via the auto-placement rules. the other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid. <div class="grid"> i am a string and will become an anonymous item <div>a grid item</div> <div>a grid item</div> </div> anonymous items are always auto-placed because there is no way to
target them. therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules. use cases for auto-placement auto-placement is useful whenever you have a collection of items. that could be items that do not have a logical order such as a gallery of photos, or product listing. in th...
... <dd>pied wagtail</dd> <dd>owl</dd> </dl> </div> dl { display: grid; grid-template-columns: auto 1fr; max-width: 300px; margin: 1em; line-height: 1.4; } dt { grid-column: 1; font-weight: bold; } dd { grid-column: 2; } what can’t we do with auto-placement (yet)? there are a couple of things that often come up as questions. currently we can’t do things like
target every other cell of the grid with our items. a related issue may have already come to mind if you followed the last guide about named lines on the grid. it would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.there is an issue raised about this on the csswg github repository, and you would be welcome to add your own use ...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
nd flexible track sizes you can create a grid with fixed track sizes – using pixels for example. this sets the grid to the specified pixel which fits to the layout you desire. you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose. item placement you can place items into a precise location on the grid using line numbers, names or by
targeting an area of the grid. grid also contains an algorithm to control the placement of items not given an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a contai...
...s on the left-hand side of the grid. in a right-to-left language, it is on the right-hand side of the grid. lines can also be named, and we will look at how to do this in a later guide in this series. positioning items against lines we will be exploring line based placement in full detail in a later article. the following example demonstrates doing this in a simple way. when placing an item, we
target the line – rather than the track. in the following example i am placing the first two items on our three column track grid, using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. it begins at row line 1 a...
Using CSS gradients - CSS: Cascading Style Sheets
ting-radial-gradient() to create a gradient that radiates repeatedly from a central point. the colors get cycled over and over as the gradient repeats. ...
...y from a central point. the colors get cycled over and over as the gradient repeats. ...
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
these shorthands have no physical equivalent. property purpose border-block sets border-color, border-style, and border-width for both block borders. border-block-color sets border-color for both block borders. border-block-style sets border-style for both block borders. border...
...-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch. you can also try changing the writing-mode from horizontal-tb to vertical-rl. again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second. margin shorthands as we can now
target both sides of a box — either both inline sides or both block sides — there are new shorthands available, margin-inline and margin-block, which accept two values. the first value will apply to the start of that dimension, the second to the end. if you only use one value it is applied to both. in a horizontal writing mode this css would apply a 5px margin to the top of the box and a 10px margi...
align-content - CSS: Cascading Style Sheets
working draft adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values. c...
... working draft adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values. css flexible box layout modulethe definition of 'align-content' in that specification. candidate ...
align-items - CSS: Cascading Style Sheets
working draft update to latest syntax definitions. css flexible box layout modulethe definition of 'a...
... working draft update to latest syntax definitions. css flexible box layout modulethe definition of 'align-items' in that specification. candidate recommendation initial definition ...
mask - CSS: Cascading Style Sheets
candidate recommendation extends its usage to html elements. extends its syntax by making it a shorthand for the new mask...
... candidate recommendation extends its usage to html elements. extends its syntax by making it a shorthand for the new mask-* properties defined in that specification. ...
scroll-padding-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
scroll-padding-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
scroll-padding-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
scroll-padding-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
text-transform - CSS: Cascading Style Sheets
g>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> </p> <p>text-transform: capitalize <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> </p> span { text-transform: capitalize; } strong { float: right; } this demostrates how initial punctuations of a word are ignored. the keyword
target the first letter, that is the first unicode character part of the letter or number general category. capitalize (symbols) <p>initial string <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p> <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> </p> span { text-transform: capitalize; } strong { float: right; } this demon...
...r part of the letter or number general category. capitalize (symbols) <p>initial string <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p> <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> </p> span { text-transform: capitalize; } strong { float: right; } this demonstrates how initial symbols are ignored. the keyword
target the first letter, that is the first unicode character part of the letter or number general category. 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;...
regexp:match() - EXSLT
regexpstring the javascript style regular expression to evaluate. flagsstringoptional an optional string containing character flags. ...
... regexpstring the javascript style regular expression to evaluate. flagsstringoptional an optional string containing character flags. ...
Mobile Web Development - Developer guides
by mobile devices, such as orientation and geolocation. cross-browser development write cross-browser code to create web sites that will work acceptably across different mobile browsers: try to avoid using browser-specific features, such as vendor-prefixed css properties. if you do need to use these features, check whether other browsers implement their own versions of these features, and
target them too. for browsers that don't support these features, provide an acceptable fallback. for example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient() property. if you don't do that, at least make sure that the default background contrasts with the...
...table fallback. for example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient() property. if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not
targeted by your linear-gradient rule. see this list of gecko-specific properties, and this list of webkit-specific properties, and peter beverloo's table of vendor-specific properties. using tools like css lint can help find problems like this in code, and preprocessors like sass and less can help you to produce cross-browser code. take care with user agent sniffing it's preferable for web sites to...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the color picker's value. then two event handlers are added to deal with input from the <input type="color"> element. let colorpicker = document.getelementbyid("colorpicker"); let box = document.getelementbyid("box"); let output = document.getelementbyid("output"); box.style.bordercolor = colorpicker.value; colorpicker.addeventlistener("input", function(event) { box.style.bordercolor = event.
target.value; }, false); colorpicker.addeventlistener("change", function(event) { output.innertext = "color set to " + colorpicker.value + "."; }, false); the input event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. each time this event arrives, we set the box's border color to match the color picker's current value. the ch...
...wikipedia's entry on color theory, which has a lot of great information from a technical perspective. it's not really a resource for helping you with the color sleection process, but is still full of useful information. color and accessibility there are several ways color can be an accessibility problem. improper or careless use of color can result in a website or app that a percentage of your
target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. so it's important to consider your use of color carefully. you should do at least basic research into color blindness. there are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and...
<button>: The Button element - HTML: Hypertext Markup Language
es the method attribute of the button's form owner. formnovalidate html5 if the button is a submit button, this boolean attribute specifies that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the button's form owner. this attribute is also available on <input type="image"> and <input type="submit"> elements. form
target html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. this is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). if this attribute is specified, it overrides the
target attribute of the button's form owner. the following keywords hav...
...g wcag 2.0 size and proximity size interactive elements such as buttons should provide an area large enough that it is easy to activate them. this helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. a minimum interactive size of 44×44 css pixels is recommended. understanding success criterion 2.5.5:
target size | w3c understanding wcag 2.1
target size and 2.5.5 | adrian roselli quick test: large touch
targets - the a11y project proximity large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. this spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the ...
<form> - HTML: Hypertext Markup Language
thod attributes on <button>, <input type="submit">, or <input type="image"> elements. novalidate this boolean attribute indicates that the form shouldn't be validated when submitted. if this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
target indicates where to display the response after submitting the form. in html 4, this is the name/keyword for a frame. in html5, it is a name/keyword for a browsing context (for example, tab, window, or iframe). the following keywords have special meanings: _self (default): load into the same browsing context as the current one. _blank: load into a new unnamed browsing context. _parent: loa...
...s the current one. _blank: load into a new unnamed browsing context. _parent: load into the parent browsing context of the current one. if no parent, behaves the same as _self. _top: load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). if no parent, behaves the same as _self. this value can be overridden by a form
target attribute on a <button>, <input type="submit">, or <input type="image"> element. examples html <!-- form which will send a get request to the current url --> <form> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form which will send a post request to the current url --> <form method="post"> <label>name: <input name...
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
w the resource should be downloaded after other higher-priority page resources. loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. name a
targetable name for the embedded browsing context. this can be used in the
target attribute of the <a>, <form>, or <base> elements; the form
target attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method. referrerpolicy indicates which referrer to send when fetching the frame's resource: no-referrer: the referer header will not be sent. no-referrer-w...
...oads to occur with a gesture from the user. allow-forms: allows the resource to submit forms. if this keyword is not used, form submission is blocked. allow-modals: lets the resource open modal windows. allow-orientation-lock: lets the resource lock the screen orientation. allow-pointer-lock: lets the resource use the pointer lock api. allow-popups: allows popups (such as window.open(),
target="_blank", or showmodaldialog()). if this keyword is not used, the popup will silently fail to open. allow-popups-to-escape-sandbox: lets the sandboxed document open new windows without those windows inheriting the sandboxing. for example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to. allow-same-origin: if this token is not used, ...
<input type="submit"> - HTML: Hypertext Markup Language
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. formnovalidate a boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server form
target the browsing context into which to load the response returned by the server after submitting the form formaction a string indicating the url to which to submit the data. this takes precedence over the action attribute on the <form> element that owns the <input>. this attribute is also available on <input type="image"> and <button> elements. formenctype a string that identifies the e...
...ata at all. this attribute is also available on <input type="image"> and <button> elements. formnovalidate a boolean attribute which, if present, specifies that the form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="image"> and <button> elements. form
target a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab, window, or <iframe>. a value specified here overrides any
target given by the
target attribute on the <form> that owns this input. in addition to the actual names of tabs, windows, or inline frames, there a...
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
e is changed. this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement. ...
...he cuechange event is also sent to the htmltrackelement. ...
Identifying resources on the Web - HTTP
each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. the identity and the location of resources on the web are mostly given by a single url (uniform resource locator, a kind of uri). there are sometimes reasons identity and location are not given by the same uri: http uses a specific http header, alt-svc when the resource requested wants the client to access it at another location. urls and urns urls the most common form of uri is the uniform resource locator (url), which is known as the web address. ...
...erally only use a few of these url schemes. when referring to subresources — that is, files that are being loaded as part of a larger document — you should only use the http and https schemes. increasingly, browsers are removing support for using ftp to load subresources, for security reasons. ftp is still acceptable at the top level (such as typed directly into the browser's url bar, or the
target of a link), although some browsers may delegate loading ftp content to another application. examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9780141036144 mailto:help@supercyberhelpdesk.info specifications specification title rfc 7230, section 2.7: uniform resource ide...
HTTP caching - HTTP
the server. it likewise improves offline browsing of cached content. shared proxy caches a shared cache is a cache that stores responses to be reused by more than one user. for example, an isp or your company might have set up a web proxy as part of its local network infrastructure to serve many users so that popular resources are reused a number of times, reducing network traffic and latency.
targets of caching operations http caching is optional, but reusing a cached resource is usually desirable. however, common http caches are typically limited to caching responses to get and may decline other methods. the primary cache key consists of the request method and
target uri (oftentimes only the uri is used as only get requests are caching
targets). common forms of caching entries are: succ...
...like html documents, images or files. permanent redirects: a 301 (moved permanently) response. error responses: a 404 (not found) result page. incomplete results: a 206 (partial content) response. responses other than get if something suitable for use as a cache key is defined. a cache entry might also consist of multiple stored responses differentiated by a secondary key, if the request is
target of content negotiation. for more details see the information about the vary header below. controlling caching the cache-control header the cache-control http/1.1 general-header field is used to specify directives for caching mechanisms in both requests and responses. use this header to define your caching policies with the variety of directives it provides. no caching the cache should not st...
Configuring servers for Ogg media - HTTP
hensive guide to media types and formats on the web. in particular, the article on media container formats will be especially helpful when configuring serers to host media properly. handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek
target position. in addition, gecko uses byte-range requests to seek to the end of the media (assuming you serve the content-length header) in order to determine the duration of the media. your server should accept the accept-ranges: bytes http header if it can accept byte-range requests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually supp...
...byte-range requests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests. your server must also return 206: partial content for the request range: bytes=0- as well. include regular key frames when the browser seeks through ogg media to a specified time, it has to seek to the nearest key frame before the seek
target, then download and decode the video from there until the requested
target time. the farther apart your key frames are, the longer this takes, so it's helpful to include key frames at regular intervals. by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger ...
Large-Allocation - HTTP
at the top level of an user-opened or noopener-opened tab or window. it can occur in these situations: the document with the large-allocation header was loaded in an <iframe>. firefox cannot move an iframe into a new process currently, so the document must load in the current process. ...
...this is for the same reason as above, namely that they can communicate and thus we cannot allow them to switch processes. a large-allocation header was ignored due to the document not being loaded out of process. ...
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. message typeerror: 'this' is not a set object (edge) typeerror: function.prototype.tostring called on incompatible object (firefox) typeerror: function.prototype.bind called on incompatible
target (firefox) typeerror: method set.prototype.add called on incompatible receiver undefined (chrome) typeerror: bind must be called on a function (chrome) error type typeerror what went wrong? when this error is thrown, a function (on a given object), is called with a this not corresponding to the type expected by the function. this issue can arise when using the function.prototype.call() or function.prototype...
...pe expected by the function. this issue can arise when using the function.prototype.call() or function.prototype.apply() methods, and providing a this argument which does not have the expected type. this issue can also happen when providing a function that is stored as a property of an object as an argument to another function. in this case, the object that stores the function won't be the this
target of that function when it is called by the other function. to work-around this issue, you will either need to provide a lambda which is making the call, or use the function.prototype.bind() function to force the this argument to the expected object. examples invalid cases var myset = new set; ['bar', 'baz'].foreach(myset.add); // myset.add is a function, but "myset" is not captured as this. va...
Arrow function expressions - JavaScript
arrow function expressions are ill suited as methods, and they cannot be used as constructors. ...
...signing the value in this to a variable that could be closed over. function person() { var that = this; that.age = 0; setinterval(function growup() { // the callback refers to the `that` variable of which // the value is the expected object. that.age++; }, 1000); } alternatively, a bound function could be created so that a preassigned this value would be passed to the bound
target function (the growup() function in the example above). an arrow function does not have its own this. the this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. so while searching for this which is not present in the current scope, an arrow function ends up finding the this from its enclosing scope. thus, in the following code, the this within...
Array.prototype.copyWithin() - JavaScript
the copywithin() method shallow copies part of an array to another location in the same array and returns it without modifying its length. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arr.copywithin(
target[, start[, end]]) parameters
target zero-based index at which to copy the sequence to. if negative,
target will be counted from the end. if
target is at or greater than arr.length, nothing will be copied. if
target is positioned after start, the copied sequence will be trimmed to fit arr.length. start optional zero-based index at which to start copying elements from. if negative, start will be cou...
...on overlap. the copywithin function is intentionally generic, it does not require that its this value be an array object. the copywithin method is a mutable method. it does not alter the length of this, but it will change its content and create new properties, if necessary. polyfill if (!array.prototype.copywithin) { object.defineproperty(array.prototype, 'copywithin', { value: function(
target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. var relative
target =
target >> 0; var to = relative
target < 0 ? math.max(len + relative
target, 0) : math.min(relative
target, len); // steps 9-11. var...
handler.isExtensible() - JavaScript
the handler.isextensible() method is a trap for object.isextensible(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(
target, { isextensible: function(
target) { } }); parameters the following parameter is passed to the isextensible() method. this is bound to the handler.
target the
target object. return value the isextensible() method must return a boolean value. description the handler.isextensible() method is a trap for object.isextensible(). interceptions this trap can intercept these operations: object.isextensible() reflect.isextensible() invariants if the fol...
...) method must return a boolean value. description the handler.isextensible() method is a trap for object.isextensible(). interceptions this trap can intercept these operations: object.isextensible() reflect.isextensible() invariants if the following invariants are violated, the proxy will throw a typeerror: object.isextensible(proxy) must return the same value as object.isextensible(
target). examples trapping of isextensible the following code traps object.isextensible(). 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. const p = new proxy({}, { isextensible: function(targe...
Proxy.revocable() - JavaScript
the proxy.revocable() method is used to create a revocable proxy object. syntax proxy.revocable(
target, handler); parameters
target a
target object to wrap with proxy. it can be any sort of object, including a native array, a function, or even another proxy. handler an object whose properties are functions define the behavior of proxy p when an operation is performed on it. return value a newly created revocable proxy object is returned. description a revocable proxy is an object with following two properties {proxy: proxy, revoke: revoke}. proxy a proxy object created with new proxy(
target, handler) call. revoke a function with no argument to invalidate (switch off) the proxy. if the revoke() function gets called, the proxy becomes unusable: any trap to a handler will ...
... call. revoke a function with no argument to invalidate (switch off) the proxy. if the revoke() function gets called, the proxy becomes unusable: any trap to a handler will throw a typeerror. once a proxy is revoked, it will remain revoked and can be garbage collected. calling revoke() again has no effect. ...
Reflect.defineProperty() - JavaScript
the static reflect.defineproperty() method is like object.defineproperty() but returns a boolean. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.defineproperty(
target, propertykey, attributes) parameters
target the
target object on which to define the property. propertykey the name of the property to be defined or modified. attributes the attributes for the property being defined or modified. return value a boolean indicating whether or not the property was successfully defined. exceptions a typeerror, if
target is not an object. description the reflect.defineproperty method allows pr...
... ...
Reflect.isExtensible() - JavaScript
f an object is extensible (whether it can have new properties added to it). it is similar to object.isextensible(), but with some differences. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.isextensible(
target) parameters
target the
target object which to check if it is extensible. return value a boolean indicating whether or not the
target is extensible. exceptions a typeerror, if
target is not an object. description the reflect.isextensible method allows you determine if an object is extensible (whether it can have new properties added to it). it is the same method as object.isextensible...
... that can be changed. reflect.preventextensions(empty) reflect.isextensible(empty) // === false // sealed objects are by definition non-extensible. let sealed = object.seal({}) reflect.isextensible(sealed) // === false // frozen objects are also by definition non-extensible. let frozen = object.freeze({}) reflect.isextensible(frozen) // === false difference to object.isextensible() if the
target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.isextensible(), a non-object first argument will be coerced to an object at first. reflect.isextensible(1) // typeerror: 1 is not an object object.isextensible(1) // false specifications specification ecmascript (ecma-262)the definition of 'reflect.isextensible' in that speci...
Reflect.preventExtensions() - JavaScript
ed to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(), but with some differences. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.preventextensions(
target) parameters
target the
target object on which to prevent extensions. return value a boolean indicating whether or not the
target was successfully set to prevent extensions. exceptions a typeerror, if
target is not an object. description the reflect.preventextensions() method allows you to prevent new properties from ever being added to an object (i.e., prevents future extensions to t...
... to the object). it is similar to object.preventextensions(). examples using reflect.preventextensions() see also object.preventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.preventextensions(empty) reflect.isextensible(empty) // === false difference from object.preventextensions() if the
target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.preventextensions(), a non-object
target will be coerced to an object. reflect.preventextensions(1) // typeerror: 1 is not an object object.preventextensions(1) // 1 specifications specification ecmascript (ecma-262)the definition of 'reflect.preventextensions' in that specif...
Reflect.setPrototypeOf() - JavaScript
totype]] property) of a specified object to another object or to null, and returns true if the operation was successful, or false otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.setprototypeof(
target, prototype) parameters
target the
target object of which to set the prototype. prototype the object's new prototype (an object or null). return value a boolean indicating whether or not the prototype was successfully set. exceptions a typeerror, if
target is not an object or if prototype is neither an object nor null. description the reflect.setprototypeof method changes the protot...
...type is neither an object nor null. description the reflect.setprototypeof method changes the prototype (i.e. the value of the internal [[prototype]] property) of the specified object. examples using reflect.setprototypeof() reflect.setprototypeof({}, object.prototype) // true // it can change an object's [[prototype]] to null. reflect.setprototypeof({}, null) // true // returns false if
target is not extensible. reflect.setprototypeof(object.freeze({}), null) // false // returns false if it cause a prototype chain cycle. let
target = {} let proto = object.create(
target) reflect.setprototypeof(
target, proto) // false specifications specification ecmascript (ecma-262)the definition of 'reflect.setprototypeof' in that specification. ...
String - JavaScript
nce string comparestring comes before, after, or is equivalent to the given string in sort order. string.prototype.match(regexp) used to match regular expression regexp against a string. string.prototype.matchall(regexp) returns an iterator of all regexp's matches. string.prototype.normalize([form]) returns the unicode normalization form of the calling string value. string.prototype.padend(
targetlength [, padstring]) pads the current string from the end with a given string and returns a new string of the length
targetlength. string.prototype.padstart(
targetlength [, padstring]) pads the current string from the start with a given string and returns a new string of the length
targetlength. string.prototype.repeat(count) returns a string consisting of the elements of the object repeated...
...type.valueof() method. string.prototype.@@iterator() returns a new iterator object that iterates over the code points of a string value, returning each code point as a string value. html wrapper methods deprecated. avoid these methods. they are of limited use, as they provide only a subset of the available html tags and attributes. ...
Mobile first - Progressive web apps (PWAs)
r the overall experience during the planning stage, look at what subset of features will be available on mobile, desktop, etc. in tandem and how they will be implemented. then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate. this means that mobiles (often the
target devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default stylin...
...ng, but they are likely to be in a car with bad lighting, or in a noisy bar with the sport on tv in the background! you need to consider this, and again make sure your content/functionality is simple, legible and distraction-free as much as possible. mobile navigation when developing mobile app layouts, you often run into problems with navigation menus. the concept is the same regardless of the
target device — you want to provide a mechanism for users to search for things and get to different views/pages of the application — but because mobile screens are so much smaller, a reasonable desktop navigation can spoil the experience by filling up most of the initial view of the app, covering up the content. there several ways to solve the problem of navigation getting in the way on mobile, a f...
SVG Presentation Attributes - SVG: Scalable Vector Graphics
herit; animatable: yes clip deprecated it defines what portion of an element is visible. value: auto|<shape()>|inherit; animatable: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its
target. value: nonezero|evenodd|inherit; animatable: yes color it provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. value: <color>|inherit; animatable: yes color-interpolation it specifies the color space for gradient interpolations, color animations, and alpha compositing. value: auto|srgb|linearrgb|inheri...
...points. value: see css mask; animatable: yes opacity it specifies the transparency of an object or a group of objects. value: <opacity-value>; animatable: yes overflow specifies whether the content of a block-level element is clipped when it overflows the element's box. value: visible|hidden|scroll|auto|inherit; animatable: yes pointer-events defines whether or when an element may be the
target of a mouse event. value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering hints about what tradeoffs to make as the browser renders <path> element or basic shapes. value: auto|optimizespeed|crispedges|geometricprecision |inherit; animatable: yes solid-color - value:; animatable: - solid-opacity - value:; animatab...
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. ...
..."/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable. xml this value specifies that the value of attributename is the name of an xml attribute defined as animatable in the default xml namespace for the
target element. auto this value specifies that the implementation should match the attributename to an attribute for the
target element. user agents first search through the list of css properties for a matching property name, and if none is found, search the default xml namespace for the element. specifications specification status comment scalable vector graphics (svg)...
gradientTransform - SVG: Scalable Vector Graphics
this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. ...
... specifications specification status comment css transforms level 1the definition of 'surfacescale for <fespecularlighting>' in that specification. working draft defines the <transformation-list> value. scalable vector graphics (svg) 2the definition of 'gradienttransformation for <lineargradient>' in that specification. candidate ...
pointer-events - SVG: Scalable Vector Graphics
note: as a presentation attribute pointer-events can be used as a css property. 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. ...
..."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>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes val...
rendering-intent - SVG: Scalable Vector Graphics
the rendering-intent attribute permits the specification of a color profile rendering intent other than the default. rendering-intent is applicable primarily to color profiles corresponding to cmyk color spaces. the different options cause different methods to be used for translating colors to the color gamut of the
target rendering device. only one element is using this attribute: <color-profile> usage notes value auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric default value auto animatable yes auto this value allows the user agent to determine the best intent based on the content type. perceptual this value preserves the relationship between colors. it attempts to maintain relative color values among the pix...
... auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric default value auto animatable yes auto this value allows the user agent to determine the best intent based on the content type. perceptual this value preserves the relationship between colors. it attempts to maintain relative color values among the pixels as they are mapped to the
target device gamut. sometimes pixel values that were originally within the
target device gamut are changed in order to avoid hue shifts and discontinuities and to preserve as much as possible the overall appearance of the scene. note: this method should be used for images. relative-colorimetric this value preserves the relative saturation (chroma) values of the original pixels. colors that are ou...
xlink:href - SVG: Scalable Vector Graphics
then those alternate glyphs are rendered instead of the characters that are inside of the <altglyph> element. value <iri> default value none animatable no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the
target of this animation and which therefore will be modified over time. the
target element must be part of the current svg document fragment. the value must point to exactly one
target element which is capable of being the
target of the given animation. if the xlink:href attribute is not provided, the
target element will be the immediate parent element of the current animation element. refer to the...
... value <iri> default value none animatable no color-profile for <color-profile>, xlink:href defines the location of an icc profile resource. ...
xlink:show - SVG: Scalable Vector Graphics
the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors. in case of a conflict, the
target attribute has priority, since it can express a wider range of values. only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace animatable no new this value specifies that the referenced resource is opened in a new window or tab. this is similar to the effect achieved by an html <a> element with
target set to _blank. replace this value specifies that the referenced resource is opened in the same window or tab. this is similar to the effect achieved by an html <a> element with
target set to _self. embed this value specifies that ins...
... none this value specifies that there is no indication for how to refer to the linked resource. ...
SVG Attribute reference - SVG: Scalable Vector Graphics
pe spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues
target targetx
targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox view
target visibility w w...
...terlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute
target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event att...
<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform element animates a transformation attribute on its
target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. 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 attrib...
... specifications specification status comment svg animations level 2the definition of '<animatetransform>'...
<set> - SVG: Scalable Vector Graphics
value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, o...
...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. the value must match the requirements of the
target attribute. value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes clas...
2015 MDN Fellowship Program - Archive of obsolete content
h to increase the effectiveness of their teaching and communications. what seven weeks of partnering closely with mozilla to (1) build curriculum, code, or likely both; and (2) receive coaching, training and best practices for effectively communicating and educating with technical information. we expect this to be between 5-10 hours of your time per week. specific projects (we encourage you to
target one of these in your application): testthewebforward brief project description mozilla participates in an important w3c open testing initiative, testthewebforward.com. to support our efforts, the fellow will review various technical specifications to identify gaps between the documentation and current situation and refine existing tests to adapt to this cross-browser test harness. activitie...
Window: deviceproximity event - Archive of obsolete content
the deviceproximity event is fired when fresh data is available from a proximity sensor. note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308). bubbles no cancelable no interface deviceproximityevent
target defaultview (window) default action none event handler property window.ondeviceproximity specification proximity sensor other properties property type description value read only double (float) the measured proximity of the distant device (distance in centimetres). min read only double (float) the minimum value in the range the sensor detects (if available, 0 otherwise).
Window: userproximity event - Archive of obsolete content
the userproximity event is fired when fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). bubbles no cancelable no interface userproximityevent
target defaultview (window) default action none event handler property window.onuserroximity specification proximity sensor note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308). other properties property type description near read only boolean the current user proximity state. specifications specification status proximity sensorthe definition of 'proximity...
Content Scripts - Archive of obsolete content
self"); var pagemod = pagemods.pagemod({ include: ['*'], contentscriptfile: self.data.url("content-script.js"), onattach: startlistening }); function startlistening(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } // content-script.js window.addeventlistener('click', function(event) { self.port.emit('click', event.
target.tostring()); event.stoppropagation(); event.preventdefault(); }, false); self.port.on('warning', function(message) { window.alert(message); }); in the add-on above there are two messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string back to the page-mod from tab.attach() the tab.attach() method returns the ...
SDK API Lifecycle - Archive of obsolete content
ule is deprecated. attempts to use a deprecated module at runtime will log an error to the error console. the amo validator will throw errors when deprecated modules are used, and these add-ons will therefore fail amo review. all warnings should include links to further information about what to use instead of the deprecated module and when the module will be completely removed. removal the
target removal date is 18 weeks after deprecation. in preparation for this date the sdk team will decide whether to go ahead with removal: this will depend on how many developers have successfully migrated from the deprecated module, and on how urgently the module needs to be removed. if it's ok to remove the module, it will be removed. the sdk team will remove the corresponding documentation, and comm...
/loader - Archive of obsolete content
ful for combining default and passed properties: override({ a: 1, b: 1 }, { b: 2, c: 2 }) // => { a: 1, b: 2, c: 2 } descriptor() this utility function takes an object and as an argument and returns property descriptor map for its own properties. it is useful when working with object functions introduced in es5 (object.create, object.defineproperties, ..): // define properties of `source` on `
target`. object.defineproperties(
target, descriptor(source)) ...
lang/functional - Archive of obsolete content
nd returns a method associated with an object. when the method is invoked on an instance of the object, the original function is called. it is passed the object instance (i.e. this) as the first parameter, followed by any parameters passed into the method. 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. returns function : the wrapped lambda. defer(fn) takes a function and returns a wrapped version of the function. callin...
places/bookmarks - Archive of obsolete content
platform. separator properties group the group instance that the bookmark group lives under. index the index of the bookmark group within its group. updated a unix timestamp indicating when the bookmark was last updated on the platform. placesemitter the placesemitter is not exported from the module, but returned from the save and search functions. the placesemitter inherits from event/
target, and emits data, error, and end. data events are emitted for every individual operation (such as: each item saved, or each item found by a search query), whereas end events are emitted as the aggregate of an operation, passing an array of objects into the handler. events data the data event is emitted when a bookmark item that was passed into the save method has been saved to the platform. th...
places/history - Archive of obsolete content
ons are 'title', 'date', 'url', 'visitcount', 'keyword', 'dateadded' and 'lastmodified'. descending boolean a boolean specifying whether the results should be in descending order. by default, results are in ascending order. placesemitter the placesemitter is not exposed in the module, but returned from the search functions. the placesemitter inherits from event/
target, and emits data, error, and end. data events are emitted for every individual search result found, whereas end events are emitted as an aggregate of an entire search, passing in an array of all results into the handler. events data the data event is emitted for every item returned from a search. arguments object : this is an object representing a history entry. contains url, time, accesscoun...
remote/child - Archive of obsolete content
ontent frame is opened (for example, the user opened a new tab). the event listener gets a frame object as an argument. 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). frame a frame represents a content frame in this process and provides a way to communicate frame specific events to the main process. methods addeventlistener(event, listener, iscapturing) adds an event listener for dom events dispatched by this content frame. this can include load and ...
ui/button/action - Archive of obsolete content
to get or set window-specific state, this needs to be the window object for which you wish to set a specific state, or the string "window" to select the currently active window. to get or set tab-specific state this needs to be the tab object for which you wish to set a specific state, or the ...
ui/button/toggle - Archive of obsolete content
to get or set window-specific state, this needs to be the window object for which you wish to set a specific state, or the string "window" to select the currently active window. to get or set tab-specific state this needs to be the tab object for which you wish to set a specific state, or the ...
Using XPCOM without chrome - Archive of obsolete content
using sdk xpcom with the low-level module sdk/platform/xpcom , it's possible to exclude chrome and xpcomutils in some cases. below is an example for the xpcom bookmark observer. examples bookmarks observer normally, a bookmark observer would require chrome components and xpcomutils as described in the following links: (observing changes to bookmarks and tags) , (creating event
targets). however, with the sdk module , we can remove this need. below is an example, where we extend the xpcom module's unknown class with an nsinavbookmarkobserverinterface and one of its optional interface methods (onitemchanged). we can then create an object from it and add it as an observer to the bookmarks service. // this removes the need to import ci and the xpcomutils const { class } = re...
Tutorials - Archive of obsolete content
es structure your add-on in separate modules to make it easier to develop, debug, and maintain. create reusable packages containing your modules, so other add-on developers can use them too. unit testing writing and running unit tests using the sdk's test framework. chrome authority get access to the components object, enabling your add-on to load and use any xpcom object. creating event
targets enable the objects you define to emit their own events. listen for load and unload get notifications when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line. using third-party modules (jpm) install and use additional modules which don't ship with the sdk itself. localization writing localizable code. mobile development develo...
Examples and demos from articles - Archive of obsolete content
applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. [article] pure-css tooltips [html] this shows the use of the ::after pseudo-element in conjunction with the attr() css expression and a data-descr custom data attribute to create a pure-css, glossary-like tooltip. [article] pure-css lightbox [html] the :
target pseudo-class is useful to switch on/off some invisible elements. in this way you can create a pure-css lightbox. [article] pure-css editable (pseudo)<select> [html] this example shows how it's possible to simulate an editable <select> through a fieldset of radioboxes and textboxes. [article] expandable elements [html] this example shows how it is possible to show/hide classes of elements in p...
HTML in XUL for rich tooltips - Archive of obsolete content
tion 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 custom html while(div.firstchild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.clas...
Miscellaneous - Archive of obsolete content
dispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.item(i). addeventlistener("focus", function(e) {onfocusinput(e);}, false); inputlist.item(i). ...
Rosetta - Archive of obsolete content
ttrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ? ...
Running applications - Archive of obsolete content
run other programs from your chrome javascript code, using mozilla xpcom interfaces. there are two ways to run programs. using nsiprocess the recommended way is to use the nsiprocess interface because it is crossplatform. using nsilocalfile.launch() this method is not implemented on all platforms, especially not on unix/linux! see nsilocalfile.launch() for details and make sure that all your
target platforms support this method! this method has the same effect as if you double-clicked the file, so for executable files—it will just run the file without any parameters. for more information on nsifile/nsilocalfile, see file i/o. var file = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); file.initwithpath("c:\\myapp.
Windows - Archive of obsolete content
the components.classes is undefined and the components object is deprecated. it will soon be removed. draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. the following code does not care which element is clicked on, simply responding to all mousedown events equally. you could improve this code by checking the event.
target element and only setting the startpos if the element matches some criteria. 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;...
Communication between HTML and your extension - Archive of obsolete content
eipt of the ajax request. after the html component was update with the result of the ajax request, i created and dispatched the event like this: var event = document.createevent("events"); event.initevent("my-custom-event", true, true); document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i added this code: var doc = aevent.original
target; // doc is document that triggered "onload" event // do something with the loaded page. // doc.location is a location object (see below for a link). // you can use it to make your code executed on certain pages only. if (doc && doc.addeventlistener) doc.addeventlistener("my-custom-event", myextension.customreceived, false); since the event is dispatched after the element in the ...
Enhanced Extension Installation - Archive of obsolete content
ten (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. ("active" items are items that are enabled.) a whole new world install locations we have several
targets for where items can be installed. these include: the application profile directory <profile>/extensions/ the application install directory <application>/extensions/ any location specified in a text file with a {guid} name placed in one of the above locations, useful for developing extensions at another location, e.g. a nfs home directory and simply placing a text "link" file in the applicab...
Extension Theming Guidelines - Archive of obsolete content
e content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly
target the right windows. css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting with content that other extensions add to the window. xul guidelines xbl bindings xbl bindings are applied using style rules. however these are rarely part of the style of the widgets but more about ...
How to convert an overlay extension to restartless - Archive of obsolete content
equirements first off, what kind of add-on are we talking about here? well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. next, what's the minimum version of firefox we should require (preferably an esr)? this guide
targets firefox 17 esr or later (or anything else gecko 17+, such as seamonkey 2.14+). this is two esrs back (as of this writing), which should be plenty. using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade. there will be no usage of the add-on sdk or any other external libraries here. everything will use apis ...
Listening to events in Firefox extensions - Archive of obsolete content
nts there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser> elements to hear about changes relating to loads of the content contained within them. simple dom events registering for a dom event is done using with code such as the following: function callback(evt) { // do your processing here. check evt.
target for the
target of the event. } b.addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from. keep in mind that the events may come from any frame within the browser or, for a tabbrowser, any of the browsers within it. some of the more interesting dom events you may wish to monitor are listed here: event description d...
Chapter 1: Introduction to Extensions - Archive of obsolete content
in web applications to provide certain pieces of information. new feature extensions fixme: update this. extensions can add completely new features to firefox. this class of extension requires a greater level of knowledge and programming ability. greasemonkey userchrome.js both of these provide an environment for running user scripts (javascript) in firefox itself, where the scripts can
target specific websites. adblock plus blocks the display of unwanted advertisements on web pages. all-in-one gestures adds mouse-gesture functionality. application level extensions fixme: update this. these are sophisticated extensions that can be considered full-scale applications in their own right, essentially using firefox as the development platform. one-trick gag extensions fixme: ...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
plement commands that reflect user input in real time. <vbox align="start"> <textbox/> <textbox multiline="true" rows="5" cols="15"/> </vbox> listing 16: textbox examples figure 13: output from listing 16 autocomplete adding type="autocomplete" to a textbox element enables an automatic completion function for it. note that to actually use this function, you must also specify a search
target for the autocomplete text using the autocompletesearch attribute. if you want to use the location bar history, set the value for this to history; if you want it to be the search bar history, use search-history; and if you want it to be another form’s input history, use form-history; this attribute can take one value or multiple space-delimited values. also, in order to actually read in a histo...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
local file paths can be converted to file urls, such as file:///c/temp/temp.txt, as shown in listing 11. listing 12 shows the opposite conversion. listing 11: converting a local file path to a url var path = 'c:\\temp\\temp.txt'; var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(path); var io...
Mozilla Documentation Roadmap - Archive of obsolete content
ars and see what's inside. but this is very awkward and limited. it would be much better to be able to search and navigate through the huge code base with some ease. luckily, mozilla provides exactly that in the mozilla cross-reference. the main index in this page gives you options to look into the different product branches in development at mozilla. make sure you pick the one that matches your
target versions. all of these provide advanced search capabilities, including regular expression search and file path search. you'll be able to navigate the full source tree, inspect the change history for all files, and link to specific code lines. it takes a little getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information. mozilla blogs...
The Essentials of an Extension - Archive of obsolete content
spanish (es) localization for spain (es). you can add as many <em:localized> sections as you need. for firefox 2, localizing this file is a little more complicated. we'll discuss localization further ahead in this section. <em:type>2</em:type> this specifies that the add-on being installed is an extension. you can read about different possible types in the install.rdf specification. <em:
targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:
targetapplication> this node specifies the
target application and
target versions for the extension, specifically firefox, from version 4 up to version 10. the uuid is firefox's unique id. other mozilla and m...
Extensions support in SeaMonkey 2 - Archive of obsolete content
starting with seamonkey 2 alpha 1 seamonkey supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. the basics to support seamonkey 2 as a
target application, you need to add it to the list of
target applications in the extension's install.rdf file. the code for that will look something like this: <em:
targetapplication> <!-- seamonkey --> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:
targetapplication> the install.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open dif...
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
vantage i just mentioned. not every browser will be able to support the css used to replace table layouts. in those cases, the browser will either render your documents with many bugs, or you'll have to consciously choose to hide certain bits of style information from browsers that can't support css adequately enough. what are the browser percentages of your current user base, and what about your
target user base (which may be different)? will the majority of your users be viewing your pages with a newer, standards-compliant browser? going through the initial conversion may take longer for some sites, depending on the organization and complexity of the data. pages which draw their content from a database will probably require less labor to convert than sorting through hundreds of flat html file...
CSS3 - Archive of obsolete content
adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule. selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] . new pseudo-classes: :
target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not. pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line ...
dischargingtimechange - Archive of obsolete content
the dischargingtimechange event is fired when the dischargingtime attribute of the battery api has changed. general info specification battery interface event bubbles no cancelable no
target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method. property type description batterymanager.dischargingtime double (float) the remaining time in seconds until the system's battery is completely discharged and the system is about to be suspended. returns positive infinity if the battery is charging, if the implementation is unable to report the remaining discharging time, or if there is no battery att...
downloading - Archive of obsolete content
the downloading event is fired after checking for an application cache update, if the user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time. general info specification offline interface event bubbles no cancelable no
target applicationcache default action none properties property type description
target event
target (dom element) the event
target (the topmost
target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate progress cached ...
Makefile - .mk files - Archive of obsolete content
makefile description client.mk top level makefile which controls the overall build config/android-common.m config/autoconf.mk config/rules.mk
targets (export, deps, libs, tools) and generic build rules config/static-checking-config.mk config/version.mk makefile description config/myconfig.mk user defined build configuration values config/myrules.mk user defined makefile rules for building $(topsrcdir)/$(moz_build_app)/app-config.mk application specific build configuration ...
Same-origin policy for file: URIs - Archive of obsolete content
in gecko 1.8 or earlier, any two file: uris are considered to be same-origin. in other words, any html file on your local disk can read any other file on your local disk. starting in gecko 1.9, files are allowed to read only certain other files. specifically, a file can read another file only if the parent directory of the originating file is an ancestor directory of the
target file. directories cannot be loaded this way, however. for example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html. this policy affects anything that does same-origin checks, including xmlht...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
us@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl. you can also see the code online. 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. the control currently reads plug-ins from your most current netscape 4.x and ie installations. there is no support for mozilla or ns 6.x yet. a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de32-...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamonkey --> <em:
targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:
targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by the...
Drag and Drop - Archive of obsolete content
nction invokedragsession should be called to start a drag inside an ondraggesture event handler. once this function is called, a drag has started. the function invokedragsession takes four parameters, as described below: invokedragsession(element, transferablearray, region, actions) element a reference to the element that is being dragged. this can be retrieved by getting the property event.
target during the event handler. transferablearray an array of nsitransferable objects, one for each item being dragged. an array is used because you might want to drag several objects at once, such as a set of files. region a region used for feedback indication. this should usually be set to null. actions the actions that the drag uses. this should be set to one of the following constants, or sev...
Building Firefox with Rust code - Archive of obsolete content
is obsolete. please instead refer to the documentation found within the modern firefox build system documentation; specifically, the section called including rust code in firefox. firefox uses the rust programming language extensively. this page is a rough guide for people using rust in firefox. see also the documentation on this topic on the oxidation wiki page. adding rust code we generally
target stable rust, but sometimes issues temporarily require a beta or custom toolchain build. our goal is to always ship a firefox release build with a stable rust toolchain release. if you don't have rust already, use the rustup tool to install it and update as new releases become available, or use the ./mach bootstrap command. the build system will generate a special 'rust unified library' crate, co...
Content states and the style system - Archive of obsolete content
we will focus on describing how changes in content state are handled. generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants. this is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
ed listeners are used later during content dispatch. api calls to load a new uri. these can come in via nsiwebnavigation (a scriptable embedding interface) or nsilinkhandler (an internal interface used for link clicks). both interfaces are implemented by nswebshell/nsdocshell. these api calls will typically pass in a uri string or object to load, and may include information like the name of the
target frame (for <a
target="something">, e.g.). nsdocshell::internalload() handles
targeting to the correct docshell (if the load has a
target window associated with it), scrolling to anchors (if the load is an anchor within the current page), and session history issues. it calls douriload(). douriload() creates a channel, massages it to have the right post data, load flags, cache key, referrer, etc.
Microsummary XML grammar reference - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this article provides detailed information about the xml grammar used to build microsummary generators, describing each element and their attributes. for an introduction to how to create a microsummary, read the article creating a microsummary. ...
LIR - Archive of obsolete content
i integer call subroutine that returns an int 35 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 37 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to address in table 41 label void a jump
target (no machine code is emitted for this) 42 not in use guards 43 x void exit always 44 xt void exit if true 45 xf void exit if false 46 xtbl void exit via indirect jump 47 xbarrier void a lir_xbarrier cause no code to be generated, but it acts like a never-taken guard in that it inhibits certain optimisations, ...
Nanojit - Archive of obsolete content
lir_loop instruction. it won't be reached, but there's // an assertion in nanojit that trips if a fragment doesn't end with // a guard (a bug in nanojit). lins *rec_ins = out.insskip(sizeof(guardrecord) + sizeof(sideexit)); guardrecord *guard = (guardrecord *) rec_ins->payload(); memset(guard, 0, sizeof(*guard)); sideexit *exit = (sideexit *)(guard + 1); guard->exit = exit; guard->exit->
target = f; f->lastins = out.insguard(lir_loop, out.insimm(1), rec_ins); // compile the fragment. 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. typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_c...
Overview of how downloads work - Archive of obsolete content
there are two ways of downloading files in mozilla. 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. things like file|save page as, save image as, etc. are all part of the second codepath. this document describes both codepaths (see below for the second one). click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. 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. get the .dia file here: mozilla_downloads_path2.dia ori...
New Skin Notes - Archive of obsolete content
weak it to what the designer feels is the right size for the designers eye(s). if the designer wants smaller text, tweak his ua's text size off of the base, for 100% page specified text. and when done, verify that the designer did not break the page with a "normal" font setting, by using a default profile. and no, break in that sense does not mean "font is too big" it means, still useable for the
target audience. --callek 12:02, 26 aug 2005 (pdt) the font size isn't the problem, and we indeed shouldn't change it. the menu bar at the right, however, is too large in the new system, but is fine on the current (non-test) system. --mmondor 12:25, 26 aug 2005 (pdt) hmm, note that when logged-in, the theme is all fine like the old one, it's when a user doesn't login and reads the docs through the tes...
PyDOM - Archive of obsolete content
rence 'foo' via globals as shown. note that you can stick arbitrary values on any dom object - this is what js calls 'expandos'. 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. the event handler could also have used getelementbyid - the point is that both the event handler and top-level script share the sam...
Static Analysis for Windows Code under Linux - Archive of obsolete content
n mozilla windows code static analysis is hooked into mozilla repository from mozilla 2. you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --
target=i686-mingw32 ac_add_options --enable-default-toolkit=cairo-windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw32. ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests ac_add_options --disable-embedding-tests ac_add...
Supporting per-window private browsing - Archive of obsolete content
e permanent download history). to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is related to the content in question. as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant window is the one that owns the element being
targeted by the context menu (element.ownerdocument.defaultview). if some action triggered by a chrome element (such as a button) requires an api that takes a privacy context, the most relevant window is the one that contains the chrome element. in some cases, there is no logical window object to use (such as when data or an action originate from some other source than web content). in these cases, it i...
Tamarin Roadmap - Archive of obsolete content
ing current best thinking and is subject to change. comments or questions are welcome and encouraged via the tamarin-devel mailing list. tc jan '09 feature links status integrate the tt string class tamarin:string implementation tamarin:strings bug 465506 complete enhanced c++ profiler enhance memory profiler to work in release builds and be more performant in progress enable lir for arm
targets bug 460764 complete amd64 nanojit bug 464476 in progress port nanojit to powerpc bug 458077 complete add mac-x64 and linux-x64 buildbots complete fail build on assertion in acceptance tests complete merge tracking bug bug 469836 in progress tc feb '09 spring backlog tbd. ...
The Download Manager schema - Archive of obsolete content
each download entry; however, if you feel like poking directly into the table, you can do so using the storage api. the schema table field name type description id integer a unique id for the download. this field is the primary key for the table. name text the download's file name. source text the source uri for the download.
target text the destination uri for the download. temppath text the path of the temporary file being used for the download. starttime integer the download's start time. endtime integer the download's end time. state integer the download's current state. see the constants list in the nsidownloadmanager documentation. referrer t...
Event Handlers - Archive of obsolete content
nd they are registered by default for bubbling events. this means that <handler event="click" action="foo()"/> is analogous to onclick="foo()" defined on the bound element. the phase attribute specifies the phase of event flow that the handler is registered for. the default value is bubbling, which means that the event handler will fire during the bubbling phase. the other possible values are
target, which means the handler will only fire if event.original
target is the same as the
target to which the handler is attached, and capturing, which indicates the handler should fire during the capturing phase of event flow. xbl event handlers always fire last, after all other event handlers at the same position in the event flow. since xbl handlers usually constitute the default actions for a widge...
XML in Mozilla - Archive of obsolete content
r is extensible and it is easy to implement support for other schemes - have a look at the api. the xpath1() scheme was implemented using this extensible mechanism. there is also a proprietary api from scripts to the xpointer processor. there is a testcase for xpointers that you can also study. lastly, there is a pref you might want to try (especially useful with fixptr) that will select the link
target when you traverse it. there is no ui for setting this pref yet, so you will need to manually edit the preferences file. 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. mozilla currently implements only the load() method and the document.async property. outside supported xml w3c reco...
Creating XPI Installer Modules - Archive of obsolete content
gnate archives that use mozilla's xpinstall to install themselves. for barley, that installation script should read as follows: // initinstall(name + version, name, version); var err = initinstall("barley v", "barley", ""); logcomment("initinstall: " + err); addfile("barley grain", // displayname from contents.rdf "barley.jar", // jar source getfolder("chrome"), //
target folder ""); //
target subdir // registerchrome(type, location, source) registerchrome(package | delayed_chrome, getfolder("chrome","barley.jar"), "content/"); if (err==success) performinstall(); else cancelinstall(err); note that there is no version number on barley, and so the name + version parameter has a "v" and then nothing else. note also the use of resource ...
popupshowing - Archive of obsolete content
the popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible. the default action of the event can be prevented to prevent the popup to appear. general info specification xul interface popupevent bubbles yes cancelable yes
target element default action a popup is displayed properties property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
XUL Events - Archive of obsolete content
ent except it is only sent when the user double clicks with the mouse. this is an alternative to checking the detail property in the click event. attribute: ondblclick dommousescroll this event is sent when the mouse wheel is moved, whether it results in content being scrolled or not. the
target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event. focus the focus event is sent to an element when it receives the focus. once an element has the focus, keyboard events are sent to it. the focus can be changed by clicking on another eleme...
Index - Archive of obsolete content
xul, xul attributes, xul reference no summary! 357 tabindex xul attributes, xul reference no summary! 358 tabmodalpromptshowing xul, xul methods, xul reference no summary! 359 tabs.onselect xul attributes, xul reference no summary! 360 tabscrolling xul attributes, xul reference no summary! 361
targets xul attributes, xul reference no summary! 362 template xul attributes, xul reference no summary! 363 template.container xul attributes, xul reference no summary! 364 textbox.autofill no summary! 365 textbox.crop xul attributes, xul reference no summary! 366 textbox.disableautocomplete ...
List of commands - Archive of obsolete content
der cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwith
target cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewli...
eventNode - Archive of obsolete content
« xul reference eventnode type: event
target indicates the node where keyboard navigation events listener is set up. the initial value for this property is determined by the value of the eventnode attribute. ...
Sorting and filtering a custom tree view - Archive of obsolete content
orcomparison(o) { if (typeof o == "string") { return o.tolowercase(); } return o; } function gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.
target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filterelement = document.getelementbyid("filter"); filterelement.focus(); filterelement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Keyboard Shortcuts - Archive of obsolete content
wn while an element has the focus. note that the event will be called as soon as the key is pressed, even if it hasn't been released yet. keyup called when a key is released while an element has the focus. key events are only sent to the element that has the focus. typically, this will include textboxes, buttons, checkboxes and so forth. if no element is focused, the key event will instead be
targeted at the xul document itself. in this case, you can add an event listener to the window tag. normally though, if you want to respond to keys globally, you will use a keyboard shortcut as described earlier. the key event object has two properties which hold the key that was pressed. the keycode property holds the key code and may be compared to one of the constants from the key table earlier in t...
XPCOM Examples - Archive of obsolete content
the window focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the focus to this window. ...
Using Remote XUL - Archive of obsolete content
ttons or select the menu items. for that we need to add javascript code. <?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"> <script type="application/javascript"> function loadurl(event) { var contentframe = document.getelementbyid("contentframe"); var url = event.
target.getattribute("value"); if (url) contentframe.setattribute("src", url); } </script> ... </window> the code to load the urls is simple. first we write an event handler function that receives an event, extracts a url from the value attribute of the element where the event occurred (a.k.a. the
target element), and loads the url in the iframe. we add an id attribute to the iframe ele...
XUL Questions and Answers - Archive of obsolete content
onprogresschange = function() { return 0 }; listobj.onstatuschange = function() { return 0 }; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local html "template" file loading, and run xslt transormations. in addition i need to evaluate the browser contentdocument dom in order to clean "
target" attributes on links, and so on. */ how do i create xul elements dynamically in javascript? use the following snippet of code to add a new element under an existing element: var elem = document.getelementbyid(xul_element_id); var node = document.createelement(xul_element_name); node.setattribute(attribute, value); node.setattribute(attribute, value); elem.appendchild(node); how do i ac...
XUL Template Primer - Bindings - Archive of obsolete content
computed in the <conditions>, or it may refer to another <binding>'s object variable.[1] in our example, the second <binding>'s subject does this: the value for the ?addr variable is computed by the first <binding> the predicate must name the uri of an rdf property, in this case, nc:address. the object must name a variable. the value of the object's variable will be computed by invoking the get
target() method using the object's value as the asource argument, and the predicate's resource as the aproperty argument. (see the nsirdfdatasource interface for more details.) in our example, the <rule> will be instantiated three times: once each for alison, jack, and lumpy. however, in lumpy's case, we won't be able to bind the ?addr variable because lumpy has no home! (well, there are no statements ...
XUL accessibility guidelines - Archive of obsolete content
udio or visual alerts alone to signal urgent events. users who have audio turned down or off and users who are deaf or hard of hearing may not be able to recognize audio only alerts. users with visual disabilities will not be able to observe alerts that are purely visual (unless such alerts are presented in functional text that is accessible to a screen reader). interactive elements avoid small
targets, which are difficult to see and click on. verify that the layout and contrast is sufficient to distinguish interactive elements one from another and from static portions of the application. error recovery when the user causes an error in an application allow for graceful recovery. for example, if the user provides letters where numbers are required in a form, this should not break the applicat...
colorpicker - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the ord...
key - Archive of obsolete content
modifiers preceding it are optional. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. phase type: string the event phase where the handler is invoked. this should be set to the value capturing to indicate during the event capturing phase or
target to indicate at the
target element or left out entirely for the bubbling phase. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persis...
notificationbox - Archive of obsolete content
is an array of button descriptions. each description is an object with the following properties: accesskey - the accesskey to appear on the button callback - function to be called when the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the
target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - ...
preference - Archive of obsolete content
however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the...
prefwindow - Archive of obsolete content
hat can't (or shouldn't) be handled as preferences, such as saving passwords or updating sqlite data. to do this, you can set the prefwindow's onunload attribute to a function that will be run when the prefwindow is closed. <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="my-config-dialog" title="my application: configuration" onunload="onunload(event.
target)"> </prefwindow> function onunload(prefwindow) { // do actions there like saving values, password setting (that is not handled as a preference), etc. return true; } opening a modal sub dialog a sub dialog can only be opened via document.documentelement and not via window. therefore, an example call to opensubdialog() would look like this: document.documentelement.opensubdialog("chrome://...
resizer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element used for window resizing. if you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a
target element using the element attribute, to use the resizer to resize the specified element instead of the window. 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="...
tabbox - Archive of obsolete content
ted, the tabbox will switch to the next tab when the control and tab keys are pressed. if the shift key is also held down, the previous tab will be displayed. if this attribute is set to false, these keys do not navigate between tabs. properties accessibletype type: integer a value indicating the type of accessibility object for the element. eventnode type: event
target indicates the node where keyboard navigation events listener is set up. the initial value for this property is determined by the value of the eventnode attribute. handlectrlpageupdown type: boolean gets and sets the value of the handlectrlpageupdown attribute. handlectrltab type: boolean gets and sets the value of the handlectrltab attibute. selectedindex type: int...
tabbrowser - Archive of obsolete content
) return type: no return value loads a set of uris, specified by the array uris, into tabs. if loadinbackground is true, the tabs are loaded in the background, and if replace is true, the currently displayed tabs are replaced with the specified uris instead of adding new tabs. the properties of params are following: boolean inbackground boolean replace boolean allowthirdpartyfixup tab
targettab number newindex object postdatas number usercontextid note: this is the xul method on <browser> / <tabbrowser>, not the global function in chrome://browser/content/browser.js. please check which one you're documenting! (this one has no post data parameter, see loaduriwithflags for a version that does) loaduri( uri, referrer, charset ) return type: no return value ...
treecol - Archive of obsolete content
/treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type). on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if
targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x.. treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechild...
Application Update - Archive of obsolete content
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. use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.url", "https://yourserver.net/update/3/%product%/%version%/%build_id%/%build_
target%/%locale%/%channel%/%os_version%/%distribution%/%distribution_version%/update.xml"); // url user can browse to manually if for some reason all update installation // attempts fail. pref("app.update.url.manual", "http://yourserver.net/yourpage"); // a default value for the "more information about this update" link // supplied in the "an update is available" page of the update wizard. pref("app.u...
Building XULRunner with Python - Archive of obsolete content
.getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } function jserror(str) { components.utils.reporterror(str); } a final tip is to use task manager to check for a zombie xulrunner process after a crash. a zombie will keep old code open and cause confusion when you make changes and run xulrunner again. deploying python must be installed on the
target machine. perhaps eventually a xulrunner with a minimal python installation can be generated with something like py2exe or pyinstaller. untill then simply deploy thedist\bin folder and the xul application. don't copy any.pyo files that exist for python modules in the application or errors will occur on the
target machine. it is possible to test for python in a batch file using something like rem...
reftest opportunities files - Archive of obsolete content
er/htmlparser/tests/html/usascii.html parser/htmlparser/tests/html/title01.html parser/htmlparser/tests/html/title.html parser/htmlparser/tests/html/tiny.html parser/htmlparser/tests/html/thead001.html parser/htmlparser/tests/html/text003.html parser/htmlparser/tests/html/text002.html parser/htmlparser/tests/html/text001.html parser/htmlparser/tests/html/tbody001.html parser/htmlparser/tests/html/
target01.html parser/htmlparser/tests/html/tag008.html parser/htmlparser/tests/html/tag007.html parser/htmlparser/tests/html/tag006.html parser/htmlparser/tests/html/tag005.html parser/htmlparser/tests/html/tag004.html parser/htmlparser/tests/html/tag003.html parser/htmlparser/tests/html/tag002.html parser/htmlparser/tests/html/tag001.html parser/htmlparser/tests/html/tableall.html parser/htmlparser/tes...
2006-11-03 - Archive of obsolete content
ent.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. 11 2006. when he builds using the disable.crypto option he encounters the following problem: no rule to make
target `../../dist/lib/components/libpipboot.a', needed by `minimo'. he has also created a bug entry on bugzilla with the bug id of opened bug #344854. problem compiling with vs 2003 .net phil is trying to compile firefox for the first time and is getting an error when doing so: building deps for /cygdrive/c/mozilla/toolkit/airbag/airbag/src/common/windows/guid_string.cc make[1]: leaving director...
2006-10-13 - Archive of obsolete content
announcements sunbird and lightning 0.3rc2 sunbird and lightning 0.3rc2 were released on october 7th. firefox 1.5.0.x and vista firefox 1.5.0.x was added to the vista compatibility list firefox 2 rc3 code freeze the firefox 2 rc3 code was frozen on oct. 10; the
target release date for rc3 is october 17 new tinderbox and bonsai servers the build team would like help testing out the new tinderbox and bonsai servers. sunbird and lighting 0.3 sunbird and lighting 0.3 were released on october 11 discussions release process discussion discussion from last week regarding speeding up and automation of the release process continued. firefox feature brainstorming you can help suggest features for firefox 3 here meetings project meeting a project meeting was held on oct. ...
NPAPI plugin reference - Archive of obsolete content
8 character, which may be comprised of multiple nputf8 bytes. npvariant npvariant is a struct that holds a value and the type of that value. the value is held in a union, and the type is one of types defined in the npvarianttype enumeration. npvarianttype npvarianttype is an enumeration that is used to identify the data type of an npvariant structure. npwindow contains information about the
target into which the plug-in instance can draw. ...
SAX - Archive of obsolete content
"', 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 }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfac...
Tamarin Tracing Build Documentation - Archive of obsolete content
illa.org/tamarin-tracing $ cd tamarin-tracing $ mkdir objdir-debug $ cd objdir-debug $ python ../configure.py --enable-shell $ make ... $ shell/avmshell avmshell 1.0 build cyclone ... that's all. the avmplus executable is avmshell. for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose windows mobile to build for arm: $ python ../configure.py --
target=arm-windows --enable-shell; make to build for thumb: $ python ../configure.py --
target=thumb-windows --enable-shell; make platform-specific builds project files for specific platforms/ides (microsoft visual studio, xcode, etc) are included in the source tree under tamarin-tracing/platform, but are not formally supported. running tamarin compliance tests follow the same steps as the tamarin ce...
Building a Theme - Archive of obsolete content
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. --> <em:
targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:
targetapplication> <!-- front end metadata --> <em:name>my theme...
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. --> <em:
targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:
targetapplication> <!-- front end metadata --> <!-- my_theme --> ...
Using the W3C DOM - Archive of obsolete content
s. some browsers have non-standard properties, such as internet explorer's document.all[], that are not part of the w3c document object model (dom) standards and may cause javascript errors in standards-compliant browsers. the w3c document object model provides interfaces dom elements to scriptable objects. w3c dom standards are well supported by modern browsers, however the standards are moving
target so support for newer features should be tested before use. using w3c standards means that code will run in compliant browsers with minimal need for cross-browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents. unsupported dom-related properties the following ie proprietary document object properties are not supported in ...
Reflect.enumerate() - Archive of obsolete content
the static reflect.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. syntax reflect.enumerate(
target) parameters
target the
target object on which to get the property. return value an iterator with the enumerable own and inherited properties of the
target object. exceptions a typeerror, if
target is not an object. description the reflect.enumerate method returns an iterator with the enumerable own and inherited properties of the
target object. 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.
Archived JavaScript Reference - Archive of obsolete content
be assigned a value and runs a function when that occurs.object.unobserve()the object.unobserve() method was used to remove observers set by object.observe(), but has been deprecated and removed from browsers. you can use the more general proxy object instead.reflect.enumerate()the static reflect.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 Overview - Archive of obsolete content
when programming in javascript, you can use a wrapper object to access methods and fields of the java object; calling a method or accessing a property on the wrapper results in a call on the java object. ...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
es spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards. also since you know which engine you're
targeting, you're free to confidently use advanced built in controls such as xml processing via e4x, xpath, and xslt. let's take a tour through some of the top features of jaxer through code examples. jaxer – server-side ajax via the firefox browser engine on the server although server-side javascript is not a new concept, jaxer implements it in a unique fashion. by taking...
forEach - Archive of obsolete content
s of code. i've removed the lengthy example, while still linking to it and provided a much simpler and leaner implementation. dotnetcarpenter 30 june 2012 <hr> i have released the write access restriction, but i will be watching changes closely. jswisher 01 october 2011 <hr> there is some mistype in array.prototype.foreach: kvalue = o[ pk ]; should be kvalue = o[ k ]; <hr> this page has been the
target of a revert war, and so write access to it has been restricted. if you wish to make changes, and especially if you wish to revert another user's changes, please either add a comment here, or post to dev-mdc@lists.mozila.org, explaining the change you desire. jswisher 15 aug 2011 <hr> is this a from _core_ of javascript 1.5? if so, is js 1.5 gecko only? those extra features like foreach are gecko...
XForms Custom Controls - Archive of obsolete content
to a node of type xsd:integer then the typelist attribute will be "http://www.w3.org/2001/xmlschema#integer http://www.w3.org/2001/xmlschema#decimal". this is because xsd:integer is inherited from the xsd:decimal data type. we recommend that you use this attribute to create the css binding rule for your custom control. this will allow you to bind your custom control for the data type that you are
targeting and any type derived from that
target type. so if you want an input bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www.w3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xform...
Implementation Status - Archive of obsolete content
cution of xforms actions supported 10.18 iteration of xforms actions supported 11. xforms submission model section title status notes bugs 11.1 submission partial from 1.1 we do not yet support @mode, @indent, @replace='text', @separator, @serialize, @
target, header or method child elements 11.2 xforms-submit partial we currently limit (for security reasons) submission only back to the server that served the document. but the user can choose to remove this restriction on a site by site basis via a preference. click for more details. 330557; 11.3 xforms-submit-serialize suppor...
Mozilla XForms Specials - Archive of obsolete content
because of non-specified behaviour of these for (x)html. instead you have to use :-moz-read-only and :-moz-read-write for now. (limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ). 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 { ... } the pseudo elements are defined in the css3 basic user interface specification . (limitation tracked in bug 271724) optional parameters in xpath functions optional parameters in xpath functions are not supported, you will have to specify all parameters when calling a functi...
XForms Submit Element - Archive of obsolete content
upon receiving a domactivate event, this form control dispatches a xforms-submit event to the submission element (see the spec) specified in its submission attibute. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. ...
Mozilla XForms User Interface - Archive of obsolete content
. range allows the user to choose a value from within a specific range of values. it is represented by a slider widget (see the spec). trigger allows the user to initiate actions (see the spec). it can have the following representations: button - default representation. link/clickable text - used when appearance = 'minimal'. submit invokes the submission of the selected instance data to its
target destination, which could be local or remote (see the spec). it can have the following representations: button - default representation. link/clickable text - used when appearance = 'minimal'. select list control. allows the user to choose one or multiple values from a list of pre-defined values (see the spec). it can have the following representations: listbox - default representation ...
Window: devicelight event - Archive of obsolete content
the devicelight event is fired when fresh data is available from a light sensor. note: this event has been disabled by default in firefox 62, behind the device.sensors.ambientlight.enabled preference (bug 1462308). bubbles no cancelable no interface sensorcallback
target defaultview (window) other properties property type description value read only double (float) the sensor data for ambient light in lux. min read only double (float) the minimum value in the range the sensor detects (if available, 0 otherwise). max read only double (float) the maximum value in the range the sensor detects (if available, 0 otherwise). examples window.addeventlistener('devicelig...
RDF in Mozilla FAQ - Archive of obsolete content
; // now observer's methods will be called-back as // the load progresses. } note that the observer will remain attached to the rdf/xml datasource unless removexmlsinkobserver is called. how do i access the information in a datasource? the nsirdfdatasource interface is the means by which you access and manipulate the assertions in a datasource. boolean hasassertion(asource, aproperty, a
target, atruthvalue). this tests the datasource to see if it has the specified tuple. nsirdfnode get
target(asource, aproperty, atruthvalue). nsisimpleenumerator get
targets(asource, aproperty, atruthvalue). nsirdfresource getsource(aproperty, a
target, atruthvalue). nsisimpleenumerator getsources(aproperty, a
target, atruthvalue). nsisimpleenumerator arclabelsin(a
target). nsisimpleenumerator arclab...
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. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. there are many reasons older documentation can be useful. ...
Common causes of memory leaks in extensions - Extensions
ned up when the document is unloaded, or stored as weak references. be careful with setinterval/settimeout using window.setinterval() or window.settimeout() can be problematic, too, when it comes to zombie compartments. consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.original
target; 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. however, while this is still true, the window.setinterval() in the example originates from ...
Game monetization - Game development
dverts. there are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings. google adsense is said to be the most effective one, but it's not designed for games and it's a pretty bad practice to use it for that purpose. instead of risking of having your account closed and all the money blocked try to use the usual, gamedev
targeted portals like leadbolt. they offer easy to implement systems to show the adverts in your games and split the earnings with you. video ads are getting more and more popular, especially in the form of a pre-roll — they are shown at the beginning of your game while it's still loading. and on the topic of where to put the advertisements in your game it really depends on you. it should be as subtl...
Plug-in Development Overview - Gecko Plugin API Reference
e message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file on disk. drawing a plug-in instance before drawing itself on the page, the plug-in must provide information about itself, set the window or other
target in which it draws, arrange for redrawing, and handle events. a windowless plug-in can call the following netscape methods to draw itself: npn_forceredraw: force a paint message for windowless plug-ins. npn_invalidaterect: invalidate an area in a windowless plug-in before repainting or refreshing. npn_invalidateregion: invalidate an area in a windowless plug-in before repainting or refreshin...
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. ajax allows you to update parts of the dom of an html page instead without the need for a full page refresh. ajax also lets you work asynchronously, meaning your code continues to run while the
targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading). with interactive websites and modern web standards, ajax is gradually being replaced by functions within javascript frameworks and the official fetch api standard. ...
Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
ozilla project and used in many apps/devices, including firefox and firefox os. web browsers need software called a layout engine to interpret html, css, javascript, and embedded content (like images) and draw everything to your screen. besides this, gecko makes sure associated apis work well on every operating system gecko supports, and that appropriate apis are exposed only to relevant support
targets. this means that gecko includes, among other things, a networking stack, graphics stack, layout engine, a javascript virtual machine, and porting layers. since all firefox os apps are web apps, firefox os uses gecko as its app runtime as well. learn more general knowledge gecko on wikipedia technical reference the gecko documentation on mdn ...
Gonk - MDN Web Docs Glossary: Definitions of Web-related terms
os and consists of a linux kernel (based on the android open source project (aosp)) and userspace hardware abstraction layer (hal). the kernel and several of the userspace libraries are common open-source projects: linux, libusb, bluez, and so forth. some other parts of the hal are shared with aosp: gps, camera, and others. you could call gonk a very simple linux distribution. gonk is a porting
target of gecko (just as gecko has been ported to os x, windows, and android). since firefox os has full control over gonk, we can expose interfaces to gecko that aren't accessible on other operating systems, for example the full telephony stack and display frame buffer. learn more gonk page on the firefox os zone ...
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. internationalization is the design and development of a product, application or document content that enables easy localization for
target audiences that vary in culture, region, or language. (the w3c definition) among other things, i18n requires support for multiple character sets (usually via unicode) units of measure (currency, °c/°f, km/miles, etc.) time and date formats keyboard layouts text directions learn more general knowledge i18n on wikipedia technical reference i18n on w3c i18n on gala-global.org learn about it i18n material on i18nguy.com ...
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp navigation directives are used in a content-security-policy header and govern to which location a user can navigate to or submit a form to, for example. navigation directives don't fall back to the default-src directive. list of csp navigation directives form-action restricts the urls which can be used as the
target of a form submissions from a given context. frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc. learn more https://www.w3.org/tr/csp/#directives-navigation other kinds of directives: fetch directive do...
CSS and JavaScript accessibility best practices - Learn web development
s in detail. complex functionality like 3d games are not so easy to make accessible — a complex 3d game created using webgl will be rendered on a <canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of. it is arguable that such a game doesn't really have this group of people as a part of its main
target audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies. the problem with too much javascript the problem often comes when people rely on javascript too much. sometimes you'll see a w...
Accessible multimedia - Learn web development
ample, see flash captions, using timed text captions (for flash), or playing subtitles with videos in silverlight. however, other multimedia is not so easy to make accessible. if for example you are dealing with an immersive 3d game or virtual reality app, it really is quite difficult to provide text alternatives for such an experience, and you might argue that blind users are not really in the
target audience bracket for such apps. you can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible. remember that accessibility is about doing as much as you can, rather than striving for 100% accessibility all the time, which is often impossible. test your skills! ...
WAI-ARIA basics - Learn web development
in terms of making non-focusable code focusable, wai-aria extends the tabindex attribute with some new values: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. this is the most useful value of tabindex. tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via javascript, or as the
target of links. we discussed this in more detail and showed a typical implementation back in our html accessibility article — see building keyboard accessibility back in. accessibility of non-semantic controls this follows on from the previous section — when a series of nested <div>s along with css/javascript is used to create a complex ui-feature, or a native control is greatly enhanced/chang...
What is accessibility? - Learn web development
t accessibility issues. you have only started to consider accessibility and uncovered related issues in the late stages of a project. if however, you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal. when planning your project, factor accessibility testing into your testing regime, just like testing for any other important
target audience segment (e.g.
target desktop or mobile browsers). test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image alternative text or bad link text — see element relationships and context) and doing some testing with disabled user groups to see how well more complex site features work for them. for example: is m...
Backgrounds and borders - Learn web development
bout the box model, we discovered how borders affect the size of our box. in this lesson we will look at how to use borders creatively. typically when we add borders to an element with css we use a shorthand property that sets the color, width, and style of the border in one line of css. ...
Cascade and inheritance - Learn web development
er rules. however, the rules above it win, because class selectors have higher specificity than element selectors. both elements have a class of better, but the 2nd one has an id of winning too. since ids have an even higher specificity than classes (you can only have one element with each unique id on a page, but many elements with the same class — id selectors are very specific in what they
target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class. the 2nd element does get the red background color, but no border. why? because of the !important declaration in the second rule — including this after border: none means that this declaration will ...
Fundamental CSS comprehension - Learn web development
usiness card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that
targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that
targets all these elements and sets their margin to 0. to stop the image from spilling out...
Images, media, and form elements - Learn web development
sy to style and tend to behave just like other boxes on your page. the default styling of these elements will differ however based on the operating system and browser that your user visits the site with. in the example below we have styled some text inputs using css — you can see that things such as borders, margins and padding all apply as you would expect. we are using attribute selectors to
target the different input types. try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding. important: you should take care when changing the styling of form elements to make sure it is still obvious to the user they are form elements. you could create a form input with no borders and background that is almost indistinguishable...
Test your skills: Images and Form elements - Learn web development
o not mind if some part of the image is cropped. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following changes to the way this form looks: use attribute selectors to
target the search field and button inside .myform. make the form field and button use the same text size as the rest of the form. give the form field and button 10 px of padding. give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px. try updating the live code below to recreate the example as displayed in the image: for assessment o...
Test your skills: Selectors - Learn web development
x grey bottom border only to list items that are a direct child of the ul with a class of list. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors five in this final task add css using attribute selectors to do the following:
target the <a> element with a title attribute and make the border pink (border-color: pink).
target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange).
target the <a> element with an href value starting with https and give it a green border (border-color: green). try updating the live code below to recreate...
Grids - Learn web development
tibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <aside> <h2>other things</h2> <p>nam vulputate diam nec tempor bibendum. donec luctus augue eget malesuada ultrices. phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> </aside> <footer>contact me@mysite.com</footer> </div> note: you can also use the value -1 to
target the end column or row line, and count inwards from the end using negative values. however this only works for the explicit grid. the value -1 will not
target the end line of the implicit grid. positioning with grid-template-areas an alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name. remove the line-base...
Legacy layout methods - Learn web development
h container with your required content. great! creating a fluid grid our grid works nicely, but it has a fixed width. we really want a flexible (fluid) grid that will grow and shrink with the available space in the browser viewport. to achieve this we can turn the reference pixel widths into percentages. the equation that turns a fixed width into a flexible percentage-based one is as follows.
target / context = result for our column width, our
target width is 60 pixels and our context is the 960 pixel wrapper. we can use the following to calculate a percentage. 60 / 960 = 0.0625 we then move the decimal point 2 places giving us a percentage of 6.25%. so, in our css we can replace the 60 pixel column width with 6.25%. we need to do the same with our gutter width: 20 / 960 = 0.02083333333...
Test your skills: position - Learn web development
overed. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. positioning one in this task you need to position the item with a class of
target to the top and right of the container, which has the 5px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can you change the
target to display underneath the text? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. position two in the below example if...
Supporting older browsers - Learn web development
r technology. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand how to provide support for your layouts on older browsers that might not support the features you want to use. what is the browser landscape for your site? every website is different in terms of
target audience. before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. this is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. if you have no analytics or this is a brand new site, then there are sites such as stat...
How CSS is structured - Learn web development
<p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file. as an altenative, you can also use the interactive editor below. read on and have fun! selectors a selector
targets html to apply styles to content. we have already discovered a variety of selectors in the getting started with css tutorial. if css is not applying to content as-expected, your selector may not match the way you think it should match. each css rule starts with a selector—or a list of selectors—in order to tell the browser which element or elements the rules should apply to. all the examples...
What do common web layouts contain? - Learn web development
less prominent global information like legal notices or contact info. these elements are quite common in all form factors, but they can be laid out different ways. here are some examples (1 represents header, 2 footer; a main content; b1, b2 things on the side): 1-column layout. especially important for mobile browsers so you don't clutter the small screen up. 2-column layout. often used to
target tablets, since they have medium-size screens. 3-column layouts. only suitable for desktops with big screens. (even many desktop-users prefer viewing things in small windows rather than full-screen.) the real fun begins when you start mixing them all together: … these are just examples and you're quite free to lay things out as you want. you may notice that, while the content can ...
What is a URL? - Learn web development
mine what that distinction means in more detail. the required parts of a url depend to a great extent on the context in which the url is used. in your browser's address bar, a url doesn't have any context, so you must provide a full (or absolute) url, like the ones we saw above. you don't need to include the protocol (the browser uses http by default) or the port (which is only required when the
targeted web server is using some unusual port), but all the other parts of the url are necessary. when a url is used within a document, such as in an html page, things are a bit different. because the browser already has the document's own url, it can use this information to fill in the missing parts of any url available inside that document. we can differentiate between an absolute url and a relativ...
What is accessibility? - Learn web development
row way to think of accessibility. think of it as a wonderful way to empower people and serve more customers. what can the people in brazil do with your english website? can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? they'll go somewhere else. in general, we must think about our product from the viewpoints of all our
target customers, and adapt accordingly. hence accessibility. web accessibility in the specific context of the web, accessibility means that anyone can benefit from your content, regardless of disability, location, technical limitations, or other circumstances. let's consider video: hearing impairment how does a hearing-impaired person benefit from a video? you have to provide subtitles —or eve...
What software do I need to build a website? - Learn web development
os) browsing websites as you already know, you need a web browser to view websites. there are dozens of browser options for your personal use, but when you're developing a website you should test it at least with the following major browsers, to make sure your site works for most people: mozilla firefox google chrome microsoft internet explorer apple safari if you're
targeting a specific group (e.g., technical platform or country), you may have to test the site with additional browsers, like opera, konqueror, or uc browser. but testing gets complicated because some browsers only run on certain operating systems. apple safari runs on ios and mac os, while internet explorer runs only on windows. it's best to take advantage of services like browsershots or browserstac...
Advanced form styling - Learn web development
buttons: custom radio button styling. toggle switch example: a checkbox styled to look like a toggle switch. if you view these checkboxes in a browser that doesn't support appearance, your custom design will be lost, but they will still look like checkboxes and be usable. note: while internet explorer doesn't support any version of appearance, the input[type=checkbox]::-ms-check enables the
targeting of checkboxes in ie only. this technique works for radio buttons too, despite the name -ms-check. what can be done about the "ugly" elements? now let's turn our attention to the "ugly" controls — the ones that are really hard to thoroughly style. in short, these are drop-down boxes, complex control types like color and datetime-local, and feedback—oriented controls like <progress> and ...
Web forms — Working with user data - Learn web development
provides an introduction to styling forms with css, including all the basics you might need to know for basic styling tasks. advanced form styling here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements. ui pseudo-classes an introduction to the ui pseudo-classes enabling html form controls to be
targeted based on their current state. validating and submitting form data client-side form validation sending data is not enough — we also need to make sure that the data users enter into forms is in the correct format to process it successfully, and that it won't break our applications. we also want to help our users to fill out our forms correctly and not get frustrated when trying to use our...
Dealing with files - Learn web development
our-image-filename. for example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png. insert the file path into your html code between the double quote marks of the src="" code. save your html file, then load it in your web browser (double-click the file). you should see your new webpage displaying your image! some general rules for file paths: to link to a
target file in the same directory as the invoking html file, just use the filename, e.g. my-image.jpg. to reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg. to link to a
target file in the directory above the invoking html file, write two dots. so for example, if index.html was inside a subfolder of test-site and my-...
HTML basics - Learn web development
ng tag and the content together comprise the element. elements can also have attributes that look like the following: attributes contain extra information about the element that you don't want to appear in the actual content. here, class is the attribute name and editor-note is the attribute value. the class attribute allows you to give the element a non-unique identifier that can be used to
target it (and any other elements with the same class value) with style information and other things. an attribute should always have the following: a space between it and the element name (or the previous attribute, if the element already has one or more attributes). the attribute name followed by an equal sign. the attribute value wrapped by opening and closing quotation marks. note: simple a...
Installing basic software - Learn web development
ver or webstorm). office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. web browsers, to test code in. currently, the most-used browsers are firefox, chrome, opera, safari, internet explorer and microsoft edge. you should also test how your site performs on mobile devices and on any old browsers your
target audience may still be using (such as ie 8–10.) lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users. a graphics editor, like gimp, figma, paint.net, photoshop, or xd, to make images or graphics for your web pages. a version control system, to manage files on servers, collaborate on a project with a team, share code and assets and...
Add a hitmap on top of an image - Learn web development
acceptable. the image must make it clear what happens when people follow image links. alt text is mandatory, of course, but many people never see it. the image must clearly indicate where hotspots begin and end. hotspots must be large enough to tap comfortably, at any viewport size. how large is large enough? 72 × 72 css pixels is a good minimum, with additional generous gaps between touch
targets. the map of the world at 50languages.com (as of time of writing) illustrates the problem perfectly. it’s much easier to tap russia or north america than albania or estonia. you insert your image much the same way as always (with an <img> element and alt text). if the image is only present as a navigation device, you may write alt="", provided you furnish appropriate alt text in the <area> el...
Document and website structure - Learn web development
ideal semantic element to group some items together or wrap some content. sometimes you might want to just group a set of elements together to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily
targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[editor's note: at this point in the play, the...
HTML text fundamentals - Learn web development
they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so css/javascript can effectively
target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the sh...
From object to iframe — other embedding technologies - Learn web development
perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. also, there is no need to be scared and not use <iframe>s — you just need to be careful. read on... browser makers and web developers have learned the hard way that iframes are a common
target (official term: attack vector) for bad people on the web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. because of this, spec engineers and browser developers have developed various security mechanisms...
Video and audio content - Learn web development
combination of codecs and container can be a complicated task. see choosing the right container in media container formats (file types) for help selecting the container file format best suited for your needs; similarly, see choosing a video codec in web video codec guide and choosing an audio codec in web audio codec guide for help selecting the first media codecs to use for your content and your
target audience. one additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. on top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). ...
Introduction to web APIs - Learn web development
which allows you to do things like displaying your latest tweets on your website. map apis like mapquest and the google maps api allows you to do all sorts of things with maps on your web pages. the facebook suite of apis enables you to use various parts of the facebook ecosystem to benefit your app, for example by providing app login using facebook login, accepting in-app payments, rolling out
targetted ad campaigns, etc. the telegram apis allows you to embed content from telegram channels on your website, in addition to providing support for bots. the youtube api, which allows you to embed youtube videos on your site, search youtube, build playlists, and more. the pinterest api provides tools to manage pinterest boards and pins to include them in your website. the twilio api, which provi...
Server-side web frameworks - Learn web development
the update information as "post data" within the body of the request. the http request may also include information about the current session or user in a client-side cookie. web frameworks provide programming-language-appropriate mechanisms to access this information. for example, the httprequest object that django passes to every view function contains methods and properties for accessing the
target url, the type of request (e.g. an http get), get or post parameters, cookie and session data, etc. django can also pass information encoded in the structure of the url by defining "capture patterns" in the url mapper (see the last code fragment in the section above). abstract and simplify database access websites use databases to store information both to be shared with users, and about users. ...
Introduction to client-side frameworks - Learn web development
you easier access to javascript's powers so you can build for today's web. if you want to see code samples from this section in action, you can check out a working version of the app on codepen, which also allows users to add and delete new tasks. read more about the javascript used in this section: document.createelement() document.createtextnode() document.createdocumentfragment() event
target.addeventlistener() node.appendchild() node.removechild() another way to build uis every javascript framework offers a way to write user interfaces more declaratively. that is, they allow you to write code that describes how your ui should look, and the framework makes it happen in the dom behind the scenes. the vanilla javascript approach to building out new dom elements in repetition was d...
Accessibility in React - Learn web development
e keyboard, or users who use a screen reader. to improve the experience for keyboard and screen-reader users, we should manage the browser’s focus ourselves. 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.
targeting our elements in order to focus on an element in our dom, we need to tell react which element we want to focus on and how to find it. react’s useref hook creates an object with a single property: current. this property can be a reference to anything we want and look that reference up later. it’s particularly useful for referring to dom elements. change the import statement at the top of t...
Starting our Svelte Todo list app - Learn web development
ent; in this case we have a name prop being specified when we instantiate the app component inside src/main.js, which isn't used inside app. the console should currently give you a message along the lines of "<app> was created with unknown prop 'name'". to get rid of this, remove the name prop from src/main.js; it should now look like so: import app from './app.svelte' const app = new app({
target: document.body }) export default app now if you check your testing server url you'll see our todos.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like. copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte -->...
TypeScript support in Svelte - Learn web development
velte for vs code. we can also see that the setuptypescript.js file made a couple of changes to our project. the main.js file has been renamed to main.ts, which means that vs code can provide hover-information on our svelte components: we also get type-checking for free. 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. moreover, thanks to type inference, in many cases we won't even need to specify types to get code assistance. for example, if you start adding an ms property to the alert component call, typescript will infer from the default value that the ms property sh...
Getting started with Svelte - Learn web development
om or other complex reconciliation mechanism. note the use of : in on:click. that's svelte's syntax for listening to dom events. inspecting main.js: the entry point of our app let’s open src/main.js, which is where the app component is being imported and used. this file is the entry point for our app, and it initially looks like this: import app from './app.svelte'; const app = new app({
target: document.body, props: { name: 'world' } }); export default app; main.js starts by importing the svelte component that we are going to use. then in line 3 it instantiates it, passing an option object with the following properties:
target: the dom element inside which we want the component to be rendered, in this case the <body> element. props: the values to assign to each prop of th...
Dynamic behavior in Svelte: working with variables and props - Learn web development
on to the <script> section of todos.svelte file: let newtodoname = '' now we will use this value in the <input> for adding new tasks. to do that we need to bind our newtodoname variable to the todo-0 input, so that the newtodoname variable value stays in sync with the input's value property. we could do something like this: <input value={newtodoname} on:keydown={(e) => newtodoname = e.
target.value} /> whenever the value of the variable newtodoname changes, it will be reflected in the value attribute of the input, and whenever a key is pressed in the input, we will update the contents of the variable newtodoname. this is a manual implementation of two-way data binding for an input box. but we don't need to do this — svelte provides an easier way to bind any property to a varia...
Implementing feature detection - Learn web development
so here we're applying the top set of rules only to browsers that do support flexbox, and the bottom set of rules only to browsers that don't (no-flexbox). note: bear in mind that all of modernizr's html and javascript feature tests are also reported in these class names, so you can quite happily apply css selectiv...
Tools and testing - Learn web development
on. the most popular vcs (at least among web developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them. this module aims to teach you what you need to know about both of them. cross browser testing this module looks specifically at the area of testing web projects across different browsers. here we look at identifying your
target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. ...
Mozilla accessibility architecture
cache; for example, if the name or href attribute on an anchor element changes, or the usemap attribute of an img changes. these cases are not very likely, but we should try to think of real-world scenarios where it might happen. if we do this, the code would go into nsdocaccessible::attrmodified(). unique 32-bit identifiers in msaa in msaa, we must hand out a unique 32 bit child number for each
target accessible with the event. to get this value we currently take the pointer to the dom node, turn it into an integer, and then negate it. when the msaa client calls back for the accessible node using accessibleobjectfromevent(), windows asks our doc accessible for a child with that child id. this is handled in in nsdocaccessiblewrap::get_accchild(), where we check for a negative child number and ...
Embedding API for Accessibility
noyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open","noaccess"); // or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open","noaccess"); // override popping up new windows on
target=anything user_pref("browser.block.
target_new_window", true); // override popup windows at beginning of new page load (blocks most popup advertisements) user_pref("dom.disable_open_during_load", true); moz 0.8 client side redirects set...
Multiprocess on Windows
ype release semantics stauniqueptr<t> forces reference to be released on the main thread. mtauniqueptr<t> forces reference to be released on an mta thread. proxyuniqueptr<t> in the chrome process, forces reference to be released on the main thread. in the content process, forces reference to be released on an mta thread. interceptor
targetptr<t> no-op deleter: used to annotate pointers whose reference counts must never be touched. these pointers all use mozilla::uniqueptr under the hood. use the mozilla::mscom::to*uniqueptr functions in ipc/mscom/ptr.h to create new instances of these. there is also a mozilla::mscom::getter_addrefs() function that allows these pointers to receive outparams. simple example now you know a...
Testopia
allows users to attach bugs to test case run results for centralized management of the software engineering process. requirements as our development has moved forward, we have decided to try to keep abreast of the latest stable release from bugzilla (currently 5.0). this gives us a stable code base to work from. developing plugins or extensions for any software is like trying to hit a moving
target. this decision allows us to focus our time more on releasing new features often and early rather than back porting. however, this means that most major feature will not be back ported to earlier versions unless and until we have time to do so. anyone wishing to help in this effort is more than welcome. bugzilla 4.x mysql 5.0 or postgresql 8.3 mozilla compatible browser ;-) ...
What to do and what not to do in Bugzilla
e blocker severity. the exceptions to this rule are platform-specific or compiler-specific bugs. basically, anything that prevents builds from building, running, or being used for dogfood (able to use bugzilla, tinderbox, lxr, etc.) is a blocker. bug reports about crashes, hangs, data-loss, or severe security exploits (e.g. remote execution of arbitrary code) get the critical severity. priority/
target milestone as stated in the bugzilla etiquette, you must not change the
target milestone and priority fields. these fields are reserved for the developers. this also applies to bugs with
target milestones in the past. reassigning bugs if a bug belongs to a different product or component it should be reassigned. when performing bug reassignments, keep the following things in mind: always reme...
Chrome registration
tentaccessible flag, any extension designed to work with both firefox 3 and older versions of firefox will need to provide a fallback. for example: content packagename chrome/path/ content packagename chrome/path/ contentaccessible=yes os extensions (or themes) may offer different features depending on the operating system on which firefox is running. the value is compared to the value of os_
target for the platform. os=winnt os=darwin see os_
target for a more complete list of os names. the os name is case insensitive. osversion an extension or theme may need to operate differently depending on which version of an operating system is running. for example, a theme may wish to adopt a different look on mac os x 10.5 than 10.4: osversion>=10.5 abi if a component is only compatible wi...
Creating JavaScript callbacks in components
is even a specific interface for this form of push callbacks, nsiobserverservice. javascript functions as callbacks another common use of the pattern is found in addeventlistener / removeeventlistener. a nice feature of addeventlistener is that you can pass a javascript function in place of the callback listener interface. ...
Debugging OpenGL
e will match where the call was issued, rather than some time in the future when it happens to run and crash. if an opengl error occurred when executing the call, an error message is output. note: you can download debug builds from mozilla taskcluster — click an appropriate platform's debug build on the left, e.g. linux64-debug, then find the build link on the right hand side (this would be
target.tar.bz2 for linux,
target.dmg for macos, and
target.zip for windows). if you need more verbose debug output, you can enable the verbose debug mode by defining the environment variable moz_gl_debug_verbose. with this enabled, messages are printed before and after every opengl call. this can help make it much easier to debug crashes and hangs that make the computer unusable (thereby stymieing att...
Debugging on Windows
uncher process. this means that visual studio will only attach to the first process it finds, and will not hit any break-point (and even notifies you that it cannot find their location). microsoft child process debugging power tool allows automatically attaching to child processes, such as web content process, gpu process, etc. enable it by going its configuration menu in "debug > other debugging
targets > child process debugging settings", and ticking the box. if you have followed the steps in building firefox for windows and have a local debug build, you can execute ./mach run --debug from the same command line. it would open visual studio with firefox's run options configured. you can click "start" button to run firefox then, already attached in the debugger. alternatively, if you have gene...
Building Firefox with Debug Symbols
uced (like "-g3"). by default it uses "-g" on linux and macos. this value takes precedence over the flags set in moz_debug_flags note that this will override the values provided for cflags and cxxflags. breakpad symbol files after the build is complete, run the following command to generate an archive of breakpad symbol files: mach buildsymbols the tinderbox uses an additional uploadsymbols
target to upload symbols to a socorro server. see https://dxr.mozilla.org/mozilla/source/toolkit/crashreporter/tools/upload_symbols.sh for more information about the environment variables used by this
target. make package if you use make package to package your build, symbols will be stripped. if you want to keep the symbols in the patches, you need to add this to your mozconfig: ac_add_options --di...
Gecko Logging
e log. rust we're gradually adding more rust code to gecko, and rust crates typically use a different approach to logging. many rust libraries use the log crate to log messages, which works together with env_logger at the application level to control what's actually printed via rust_log. you can set an overall logging level, though it could be quite verbose: set rust_log="debug" you can also
target individual modules by path: set rust_log="style::style_resolver=debug" for linux/macos users, you need to use export rather than set. if you're only interested in the content process you can use rust_log_child rather than rust_log. the log crate lists the available log levels: log level purpose rust logging levels error designates very serious errors. ...
Frame script environment
events besides the regular dom events being captured/bubbling up from content the current content object the following additional events get fired in a frame script environment: unload fires when the frame script environment is shut down, i.e. when a tab gets closed. if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.
target is set to the contentframemessagemanager global object in order to avoid handling unload events from content. does not bubble. domwindowcreated fires when a new content object is created. this can be used if a framescript needs to interact with individual dom windows instead of simply listening for events bubbling up from content. another use is to intera...
Limitations of frame scripts
.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); this will no longer work. in the content process the root tree item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second getinterface call here will fail. if you want a chrome window: send a message from the content process using the message manager. the
target property of the object passed into the message handler in the chrome process is the xul <browser> receiving the message, and you can get the chrome window from that (note: i'm not really sure how...). nsiaboutmodule by default, custom about: pages registered using nsiaboutmodule are loaded in the chrome process. this means that you can't access their content from the content process (via xhr, f...
Frame script environment
m events being captured/bubbling up from content the current content object the following additional events get fired in a frame script environment: unload bubbles no fires when the frame script environment is shut down, i.e. when a tab gets closed. if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.
target is set to the contentframemessagemanager global object to avoid handling unload events from content. domwindowcreated fires when a new content object is created. this can be used if a framescript needs to interact with individual dom windows instead of simply listening for events bubbling up from content. another use is to interact with the content very early ...
Frame script loading and lifetime
n your frame script, listen for the unload event of the message manager (which is the global this), and sending a message. if you did not set the third argument to true in bootstrap.js on services.mm.addmessagelistener, sending this message during, and after, the unloading event will do nothing. ...
Limitations of frame scripts
.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); this will no longer work. in the content process, the root tree item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second getinterface call here will fail. if you want a chrome window: send a message from the content process using the message manager. the
target property of the object passed into the message handler in the chrome process is the xul <browser> receiving the message, and you can get the chrome window from that (i'm not sure how). nsiaboutmodule by default, custom about: pages registered using nsiaboutmodule are loaded in the chrome process. this means that you can't access their content from the content process (via xhr, for example). th...
Message manager overview
process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate. multiprocess firefox has th...
mozbrowseractivitydone
ceiving app's activity definition in its manifest does not include returnvalue or returnvalue is false, no mozbrowseractivitydone event will be generated as of the landing of bug 1194525 in firefox os 2.5. postresult and posterror calls made on such an activity will be ignored and have no effect. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserasyncscroll
rack. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserasyncscroll event is fired when the content of a browser <iframe> is scrolled. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowseraudioplaybackchange
t on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseraudioplaybackchange event is fired when audio starts or stops playing within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsercaretstatechanged
also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>. this is used by the embedder to show a context menu for clipboard actions. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserclose
se it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserclose event is fired when the content of a browser <iframe> calls the window.close() method. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event ...
mozbrowserdocumentfirstpaint
on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserdocumentfirstpaint event is fired when a new paint occurs on any document in the browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event ...
mozbrowsererror
on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsererror event is fired when an error occurs while trying to load content within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserfindchange
bilities between implementations and the behavior may change in the future. the mozbrowserfindchange event is fired when a search method is invoked in the browser <iframe> content. this includes htmliframeelement.findall(), htmliframeelement.findnext(), and htmliframeelement.clearmatch(). general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserfirstpaint
will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserfirstpaint event is fired when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank). general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event ...
mozbrowsericonchange
ompatibilities between implementations and the behavior may change in the future. the mozbrowsericonchange event is sent when a new icon (e.g. <link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content. it will be fired once for each icon available. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserloadend
to firefox os apps. the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load. this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserloadstart
ations and the behavior may change in the future. the mozbrowserloadstart event is fired when the browser <iframe> starts to load a new page. this can be used when the embedder wants to start spinning a loading indicator, or update the ui in some other way to indicate loading has started. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event ...
mozbrowserlocationchange
facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserlocationchange event is fired when a browser <iframe>'s location changes — it is fired every time navigation occurs. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsermanifestchange
een implementations and the behavior may change in the future. the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes. by this, we are referring to the href of the manifest, as defined in <link rel="manifest" href=" … ">. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsermetachange
not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermetachange event is fired when a <meta> element related to web applications is added, removed or changed. see below for the applicable types. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowseropensearch
y also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropensearch event is fired when a link to a search engine is found — i.e. when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowseropentab
ature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link
target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only ...
mozbrowserresize
rack. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserscroll
a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscroll event is fired when the browser <iframe> content scrolls. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserscrollareachanged
large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserscrollviewchange
ot use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollviewchange event is fired when asynchronous scrolling (i.e. apcz) starts or stops. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsersecuritychange
he web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsersecuritychange event is fired when the browser <iframe> has connected to the server, and when the mixed content state changes. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserselectionstatechanged
etween implementations and the behavior may change in the future. the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes. note that this is deprecated, and current implementations should use mozbrowsercaretstatechanged instead. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsershowmodalprompt
not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowsertitlechange
s facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsertitlechange event is fired when the title of a browser <iframe> (i.e. the contents of the <title> element) changes. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowserusernameandpasswordrequired
nameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification. the embedder is supposed to retrieve the necessary credentials, usually using a dialog or a database of username/passwords, and then call authenticate() or cancel() as appropriate. general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
mozbrowservisibilitychange
rk for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowservisibilitychange event is fired when the visibility state of the current browser iframe <iframe> changes, for example due to a call to setvisible(). general info specification non standard interface customevent bubbles yes cancelable yes
target <iframe> default action none properties property type description
target read only event
target the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. deta...
MozScrolledAreaChanged
nd document.scrollheight to watch for changes to the document size, reading these properties can trigger document reflow, which can make them computationally expensive. this event, introduced in gecko 1.9.2, is fired whenever either or both of these values change. specification mozilla specific interface uievent bubbles yes cancelable yes
target defaultview, document default action none properties property type description
targetread only event
target the event
target (the topmost
target in the dom tree). typeread only domstring the type of event. bubblesread only boolean whether the event normally bubbles or not. cancelableread only boo...
Overview of Mozilla embedding APIs
tances of xpcom components. the component manager is also responsible for registering and managing the class factories used for component creation... contract-id: ns_componentmanager_contractid implemented interfaces: nsicomponentmanager nsiinterfacerequestor requestor interfaces: nsiservicemanager related interfaces: nsifactory nsuriloader the nsuriloader service is responsible for
targeting a uri at an appropriate content handler. a content handler may be an existing or new window, a helper application or the unknown content handler - if no other handler can be found for the content-type. contract-id: ns_uri_loader_contractid implemented interfaces: nsiuriloader related interfaces: nsiuricontentlistener nsunknowncontenttypehandler the unknowncontenttypehandler service is ...
Embedding Tips
wserpersist interface on that to save uris and documents. this is recommended if you intend anything other than the uri or document your browser is looking at. register your own nsiwebprogresslistener object to listen for progress and state notifications. how do i save / upload a document / data to a web or ftp site? again, use the webbrowser persist object, but specify a remote location as the
target uri. your web progress listener must also implement nsiauthprompt if you want to be able to upload to a password protected location (e.g. an ftp site). the nsiauthprompt interface allows the networking layer to pose a user / password prompt to obtain the values needed for authentication. your own implementation should pose this dialog, or fill in the values that are needed for the upload to succ...
Extending a Protocol
tr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } errorresult rv; auto echochild = getechochild(rv); puts("[navigator.cpp] sending echo!"); // let's send astring to the parent! ...
JavaScript-DOM Prototypes in Mozilla
getelementsbytagname (function) text_node (number property, constant) ... all those properties come from the interfaces that the c++ image object (nshtmlimageelement) implements and chooses to expose to xpconnect through the object's class info. one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomevent
target, nsidomeventlistener, nsidom3node, and so on. the prototype object that xpconnect creates for the classes that have class info are shared within a scope (window). because of this, the following holds true (assuming img1 and img2 are two different image objects in the same document): img1.__proto__ === img2.__proto__ if img1 would come from one document and img2 from another document, then the...
JavaScript Tips
ndow(atype) != null for a single window. don't query interfaces unless you need to access methods and properties of that interface. you do not have to query interfaces to compare objects, nor to pass objects as parameters (this is different from c++, where you do have to query interfaces in both cases). don't call queryinterface unless you expect to succeed. instead, use instanceof, e,g,: if (
target instanceof components.interfaces.nsirdfresource) return
target.value; if (
target instanceof components.interfaces.nsirdfliteral) return
target.value; return null; don't test the return value of queryinterface, it always returns the original variable if it succeeds. xpconnect knows all about tearoffs and modifies the object that you queryinterface or instanceof to cache all its known inter...
UpdateInfo
check performed by addonupdatechecker. attributes attribute type description version string the version of the update. updateurl string the updateurl that the update can be downloaded from. updatehash string a hash for the update's file. updateinfourl string a url containing simple release notes for the update.
targetapplications object[] information about what applications the update is compatible with. each item in the array contains "id", "minversion", and "maxversion" properties. ...
DownloadError
a downloaderror object provides detailed information about a download failure. properties attribute type description result read only nsresult the result code associated with this error. becausesourcefailed read only boolean indicates an error occurred while reading from the remote location. because
targetfailed read only boolean indicates an error occurred while writing to the local
target. inherits properties from error. ...
Interfacing with the Add-on Repository
n order to randomly select a recommended add-on and offer to install it. however, the code to perform a search term based query would be very similar. when the user clicks a toolbar button to initiate the query, the following code gets run to start the request: addonrepository.retrieverecommendedaddons(10, this); this asks the repository to fetch up to 10 add-ons, using the object this as the
target for callbacks. the callback object needs to implement the searchcallback interface, providing the methods that get called when a search either fails or completes successfully. handling failed requests the callback object must have a searchfailed() method; this gets called when a repository search fails to execute. the most common cause of failure (other than the search url preference being inco...
WebChannel.jsm
is channel. webchannel(string webchannelid, string originorpermission); 2nd argument is a permission for which the permission manager will be checked to determine if the request is allowed. note that in addition to the permission manager check, the request must be made over https. method overview listen(function callback); stoplistening(); send(object message, event
target target); attributes id string webchannel id methods listen() registers the callback for messages on this channel. registers the channel itself with the webchannelbroker. parameters callback callback function containing function(id, message, sendercontext) parameters. id - webchannel id of the incoming messages message - incoming message object...
Application Translation with Mercurial
has saved the web page to your local disk, click with the right mouse button on the page in the sidebar and choose "properties" from the context menu which gets opened. rename it something meaningful, e.g. "firefox <version number> translation". after you saved the dialog, click with the left mouse button on the page in the sidebar to open the locally saved copy. opening english files and the
target locale side-by-side the localization report shows the ids of added or removed texts, but the english text itself is still unknown. we get this by comparing the english version of the file with the one of the locale we are translating in. to do so, launch winmerge. from its "file" menu, choose "save project". for the file path of the left directory, go to the downloaded mozilla-aurora source...
Index
teps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a testable package to see his or her work as they progress to a final version. 28 mozilla l10n style guide localization cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and
target languages. 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. it means a meeting to begin a project. to translate it, you can follow one of two approaches: 29 mozilla content localized in your language localization, mdn, mozilla, reference, style guide no summary! 30 mozill...
L10n Checks
in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and some statistics on how many strings are changed or not, excluding access and command keys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general; mid 80s should be the
target, though. options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de output mode you can change the look and feel of the output by setting the -o parameter to 0 (tree; default), 1 (full tree) or 2 (full relative paths), e.g.: check-l10n-completeness -...
Mozilla Content Localized in Your Language
usand separator) using comma or period. acronyms do you translate widely accepted acronyms such as cd, dvd, mb? if translated, is there an equavilent acronym and widely accepted in the language? gender are there exceptions to standard gender conventions within your language? if so, what are they? tone/register what is the appropriate tone for your translations? does it vary by product and
target audience? if so, how? what are formality to avoid? list products and their tones if different. capitalization what is the appropriate form of expressing capitalization in your language? note: if this doens't apply, how is expressed in your language to indicate importance or name of a movie, book title, product uis (save, file...). hyphens and compounds what is the appropriate form of expre...
Localizing extension descriptions
n-us. if a preference isn't set and there isn't a matching em:localized property for the current locale or en-us, then the properties specified directly on the install manifest are used as a last resort, as they were always used before gecko 1.9. localizing before gecko 1.9 before gecko 1.9, add-on developers must go through a special process to define localized add-on descriptions for add-ons
targeting toolkit-based apps (such as firefox or thunderbird). if you do not currently have them, create localized properties files. make sure to use utf-8 encoding (without bom) to ensure foreign characters display correctly. add the following line to each of your localization properties files (where extension_id matches your extension id (<em:id> from install.rdf) and localized_description is the...
Localizing with Mozilla Translator
gnore "cvs" and ".svn" directories it finds. if you have opted for the first solution, you will find yourself with some new products completely untranslated (once you update each of them). to migrate the existing translation in the old product, you need to export partial glossaries from the old product, selecting the ''link'' origin (see the previous section) and importing them into the ''link''
target. defining symbolic links for browser this is an example just for browser, without shared components, but it should suffice to get the idea. ; assuming we are in a directory containing mozilla-central/ $ mkdir locale-only $ cd locale-only $ mkdir -p browser extensions/reporter other-licenses/branding/firefox/ $ cd browser; ln -s ../../mozilla-central/browser/locales/; cd .. $ cd e...
Creating localizable web content
uld be localized. image 1. bad. if the screenshot shows the application that the website directly relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version. image 2. acceptable. if however the screenshot shows a third-party application or website, it's acceptable to use the english version if it's not available in the
target language. ...
Writing localizable code
ut the processing into the content code and reference different key-value pairs in l10n. use a good source directory structure be sure to put the localizable files in the right place. the addition of new top-level directories is a compromise between module ownership in the cvsroot repository and the ease of localization. use a good chrome directory structure for a particular module mod, a
target path jar:ab-cd.jar!/locale/ab-cd/mod/foo.dtd has been widely tested and is a good place for your files referenced as chrome://mod/locale/foo.dtd. using a directory structure like this eases the localization process without the source code and is especcially recommended to extension authors. jar manifests can make this easy. l10n impact on frozen trees, there is the rule to not check in l10n-impa...
gettext
n the first argument (which is the string returned by gettext) will be replaced with the value of $num. for english, the above code will produce the following output: 1 user likes this. 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. msgstr[2]. gettext will return one of the msgstrs, depending on the number passed to the gettext function in the code ($num in the above example). to determine which form to return, gettext uses a plural rule, which should be declared in the po file header. for example, for english, the plural rul...
Mozilla projects on GitHub
project and mozilla code in general. debugger.html the debugger.html, a modern universal js debugger for firefox devtools, node, and every other js environment. dxr an intelligent tool for browsing source code. emscripten the emscripten llvm-to-javascript compiler. fxdt-adapters the firefox developer tools adapter that lets you debug various remote
targets from the firefox developer tools. firefox-dev.tools a web page to help new mozilla contributors find bugs to work on that relate to the firefox developer tools. gecko-dev a read-only mirror of the mercurial repositories used for mozilla private code. kitsune kitsune is the platform that drives the mozilla support web site, sumo. kuma the django pro...
Profiling with the Gecko Profiler and Local Symbols on Windows
iler automatically reads symbols from the pdb files that are generated during the build process. you probably need a 64 bit build of firefox for this to work, though. it looks like we consume too much memory when creating the symbol table for this to work in 32 bit firefox builds. unfortunately, 32 bit is still the default when building firefox locally. you need to add the lines ac_add_options --
target=x86_64-pc-mingw32 and ac_add_options --host=x86_64-pc-mingw32 to your mozconfig in order to build a 64 bit build of firefox. profiling local talos runs if you would like to use the gecko profiler with a local talos run of a local build of firefox for windows, you will need to point talos to a zipfile containing breakpad-style symbols for your build. follow the steps below: note: you only need ...
Preferences system
="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. you should be careful to read the higs for the platforms you are
targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each
targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when cal...
NSPR release procedure
e.sh. source tarball binary distributions right now i use the mozilla/nsprpub/admin/repackage.sh script to generate the binary distributions published on ftp.mozilla.org. as the name of the shell script implies, repackage.sh merely repackages binary distributions in a different format. before you run repackage.sh, you need to have built the binary distributions using the "gmake release" makefile
target. these binary distributions are jar files, which are really zip files, and they are published in the directory /share/builds/components. this design comes from the netscape days. the repackage.sh script repackages the jar files into the form most commonly used on that platform. so on unix it repackages the jar files into gzipped tar files, and on windows it repackages the jar files into zip files...
Long Long (64-bit) Integers
tions you use to perform 64-bit integer operations. the functions define a portable api that can be used reliably in any environment. where 64-bit integers are desired, use of nspr's implementation is recommended to ensure cross-platform compatibility. most of the 64-bit integer operations are implemented as macros. the specific implementation of each macro depends on whether the compiler for the
target platform supports 64-bit integers. for a specific
target platform, if 64-bit integers are supported for that platform, define have_long_long at compile time. 64-bit integer types nspr provides two types to represent 64-bit integers: print64 pruint64 64-bit integer functions the api defined for the 64-bit integer functions is consistent across all supported platforms. limits and initial...
Named Shared Memory
n windows, the name is significant, but there is no file associated with the name. no assumptions about the persistence of data in the named file should be made. depending on platform, the shared memory may be mapped onto system paging space and be discarded at process termination. all names provided to pr_opensharedmemory should be valid filename syntax or name syntax for shared memory for the
target platform. referenced directories should have permissions appropriate for writing. limits on shared memory resources different platforms have limits on both the number and size of shared memory resources. the default system limits on some platforms may be smaller than your requirements. these limits may be adjusted on some platforms either via boot-time options or by setting the size of the syst...
PRBool
boolean value. syntax #include <prtypes.h> typedef enum { pr_false = 0, pr_true = 1 } prbool; description wherever possible, do not use prbool in mozilla c++ code. use standard c++ bool instead. otherwise, use prbool for variables and parameter types. use pr_false and pr_true for clarity of
target type in assignments and actual arguments. use if (bool), while (!bool), (bool) ? x : y, and so on to test boolean values, just as you would c int-valued conditions. ...
PR_ClearInterrupt
clears the interrupt request for the calling thread. syntax #include <prthread.h> void pr_clearinterrupt(void); description interrupting is a cooperative process, so it's possible that the thread passed to pr_interrupt may never respond to the interrupt request. for example, the
target thread may reach the agreed-on control point without providing an opportunity for the runtime to notify the thread of the interrupt request. in this case, the request for interrupt is still pending with the thread and must be explicitly canceled. therefore it is sometimes necessary to call pr_clearinterrupt to clear a previous interrupt request. if no interrupt request is pending, pr_clearinterrupt is a no-op. ...
PR_EXTERN
used to define the prototypes for functions or variables that are to be exported from a shared library. syntax #include <prtypes.h> pr_extern(type)prototype description pr_extern is used to define externally visible routines and globals. for syntax details for each platform, see prtypes.h. the macro includes the proper specifications to declare the
target extern and set up other required linkages. warning: some platforms do not allow the use of the underscore character (_) as the first character of an exported symbol. ...
PR_FindSymbolAndLibrary
o by the parameter lib contains a pointer to the library that contains that symbol. the location must be pre-allocated by the caller. the function returns null if no such function can be found. the order in which the known libraries are searched in not specified. this function is equivalent to calling first pr_loadlibrary, then pr_findsymbol. the identity returned from this function must be the
target of a pr_unloadlibrary in order to return the runtime to its original state. ...
PR_SetThreadPriority
it is preferable for a thread to specify itself in the thread parameter when it calls pr_setthreadpriority. ...
Building NSS
sources for nss and nspr--which may not be part of a stable release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific release, see nss releases. build build nss using our build script: nss/build.sh this builds both nspr and nss. build with make alternatively, there is a make
target called "nss_build_all", which produces a similar result. this supports some alternative options, but can be a lot slower. make -c nss nss_build_all use_64=1 the make-based build system for nss uses a variety of variables to control the build. below are some of the variables, along with possible values they may be set to. build_opt 0 build a debug (non-optimized) version of nss. thi...
HTTP delegation
uests to fail if the network environment requires the use of a proxy. there are two possible solutions to this limitation. instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application callback functions. if provided by the application, nss will use the registered http client for querying an oscp responder. this nss feature is currently
targeted to first appear in nss version 3.11.1. more details can be found in bug 152426. in order to use the http delegation feature in your nss-based application, you need to implement several callback functions. your callback functions might be a full implementation of a http client. or you might choose to leverage an existing http client library and implement the callback functions as a thin layer th...
HTTP delegation
uests to fail if the network environment requires the use of a proxy. there are two possible solutions to this limitation. instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application callback functions. if provided by the application, nss will use the registered http client for querying an oscp responder. this nss feature is currently
targeted to first appear in nss version 3.11.1. more details can be found in bug 152426. in order to use the http delegation feature in your nss-based application, you need to implement several callback functions. your callback functions might be a full implementation of a http client. or you might choose to leverage an existing http client library and implement the callback functions as a thin layer th...
Introduction to Network Security Services
aries. on platforms for which these shared libraries exist, nss 3.2 will fail if these shared libs are not present. so, an application must include these files in its distribution of nss shared libraries. these shared libraries should be installed in the same directory where the other nss shared libraries (such as libnss3.so) are installed. both shared libs should always be installed whether the
target system has a 32-bit cpu or a 64-bit cpu. nss will pick the right one for the local system at run time. note that nss 3.x is also available in the lp64 model for these platforms, but the lp64 model of nss 3.x does not have these two extra shared libraries. what you should already know before using nss, you should be familiar with the following topics: concepts and techniques of public-key cr...
Build instructions for JSS 4.3.x
generates a "win95" configuration by default on windows. we recommend most applications use the "win95" configuration. if you want jss to be used with your applet and the firefox browser than you must build win95. (see jss faq) the "win95" configuration supports all versions of windows. the "win95" name is historical; it should have been named "win32". to generate a "winnt" configuration, set os_
target=winnt and build nspr/nss/jss win95. mac os x it has been recently reported that special build instructions are necessary to succeed building jss on osx. please see howto_successfully_compile_jss_and_nss_for_32_and_64_bits_on_osx_10.6_(10.6.7) for contributed instructions. build jss. cd mozilla/security/jss gmake sign the jss jar. if you're intention is to modif...
JSS Provider Notes
uld be wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the
target token from the encoded bits. both of these operations will fail if the source key is not extractable. the class java.security.spec.pbekeyspec in jdk versions earlier than 1.4 does not contain the salt and iteration fields, which are necessary for pbe key generation. these fields were added in jdk 1.4. if you are using a jdk (or jre) version earlier than 1.4, you cannot use cla...
Mozilla-JSS JCA Provider notes
s case, the key should be wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the
target token from the encoded bits. both of these operations will fail if the source key is not extractable. the class java.security.spec.pbekeyspec in jdk versions earlier than 1.4 does not contain the salt and iteration fields, which are necessary for pbe key generation. these fields were added in jdk 1.4. if you are using a jdk (or jre) version earlier than 1.4, you cannot use class java.security.sp...
NSS_3.12_release_notes.html
ug 402308: fix miscellaneous compiler warnings in nss/cmd bug 402777: lib/util can't be built stand-alone. bug 407866: contributed improvement to security/nss/lib/freebl/mpi/mp_comba.c bug 410587: ssl_getchannelinfo returns secsuccess on invalid arguments bug 416508: fix a _msc_ver typo in sha512.c, and use sec_begin_protos/sec_end_protos in secport.h bug 419242: 'all' is not the default makefile
target in lib/softoken and lib/softoken/legacydb bug 419523: export cert_newtempcertificate. bug 287061: crl number should be a big integer, not ulong bug 301213: combine internal libpkix function tests into a single statically linked program bug 324740: add generation of sia and aia extensions to certutil bug 339737: libpkix ocsp checking calls cert_verifycert bug 358785: merge nss_libpkix_branch back ...
NSS 3.14.1 release notes
only used with servers that negotiate a cipher suite that supports forward secrecy. note: the criteria for false start may change again in future nss releases. bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=5216669;resolution=fixed;query_format=advanced;bug_status=resolved;bug_status=verified;
target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.14.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible ...
NSS 3.14.3 release notes
ir research. in addition, thanks to adam langley (google) for the development of a mitigation for the issues raised in the paper, along with emilia kasper and bodo möller (google) for assisting in the review and improvements to the initial patches. bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;
target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.14.3 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible...
NSS 3.14 release notes
ions to disable ssl 2, ssl 3 and tls 1.0 have been removed and replaced with a new -v option that specifies the enabled range of protocol versions (see usage output of those tools). bugs fixed in nss 3.14 this bugzilla query returns all the bugs fixed in nss 3.14: https://bugzilla.mozilla.org/buglist.cgi?list_id=4643675;resolution=fixed;classification=components;query_format=advanced;product=nss;
target_milestone=3.14 ...
NSS 3.15.1 release notes
secmod.h. bug 876352 - certutil now warns if importing a pem file that contains a private key. bug 565296 - fix the bug that shlibsign exited with status 0 even though it failed. the nss_survive_double_bypass_failure build option is removed. bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;
target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.15.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible...
NSS 3.15.2 release notes
re the handshake is finished. bug 848384 - deprecate the ssl cipher policy code, as it's no longer relevant. it is no longer necessary to call nss_setdomesticpolicy because all cipher suites are now allowed by default. a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&
target_milestone=3.15.2&product=nss&list_id=7982238 compatibility nss 3.15.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.15.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will re...
NSS 3.15.3.1 release notes
a patch release to revoke trust of a subordinate ca certificate that was mis-used to generate a certificate used by a network appliance. bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&
target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.15.3.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain comp...
NSS 3.15.3 release notes
-2013-1741, cve-2013-5605 and cve-2013-5606. bugs fixed in nss 3.15.3 bug 850478 - list rc4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&
target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.15.3 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible ...
NSS 3.15.5 release notes
hould still take care when converting struct iov to priovec because the iov_len members of the two structures have different types (size_t vs. int). size_t is unsigned and may be larger than int. bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&
target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.15.5 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible ...
NSS 3.20 release notes
as been increased to use 2048 bit parameters. the selfserv utility has been enhanced to support the new dhe features. nss no longer supports c compilers that predate the ansi c standard (c89). bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.20 compatibility nss 3.20 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.20 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.21 release notes
compatibility nss 3.21 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21 shared libraries without recompiling or relinking.
NSS 3.22 release notes
is updated to 13 notable changes in nss 3.22 nss c++ tests are built by default, requiring a c++11 compiler. set the nss_disable_gtests variable to 1 to disable building these tests. bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.22 compatibility nss 3.22 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.22 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.23 release notes
certain asn.1 structures. an attacker could create a specially-crafted certificate which, when parsed by nss, would cause a crash or execution of arbitrary code with the permissions of the user. bugs fixed in nss 3.23 this bugzilla query returns all the bugs fixed in nss 3.23: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.23 acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528. compatibility nss 3.23 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.23 shared libraries without recompiling or relinki...
NSS 3.24 release notes
ed attack. disable support for dtls compression. improve support for tls 1.3. this includes support for dtls 1.3. note that tls 1.3 support is experimental and not suitable for production use. bugs fixed in nss 3.24 this bugzilla query returns all the bugs fixed in nss 3.24: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.24 acknowledgements the nss development team would like to thank yuval yarom for responsibly disclosing the cachebleed attack by providing advance copies of their research. compatibility nss 3.24 shared libraries are backward-compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.24 shared libraries without rec...
NSS 3.25 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.25 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.26 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.26 shared libraries without recompiling or relinking. applications that restrict their use of nss apis, to the functions listed in nss public functions, will remain compatible with future versions of th...
NSS 3.27 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.27 shared libraries without recompiling or relinking. applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the ...
NSS 3.28 release notes
by old wosign and startcom cas, after october 21, 2016. this is equivalent to the behavior that mozilla will release with firefox 51. background information can be found in mozilla's blog post. bugs fixed in nss 3.28 this bugzilla query returns all the bugs fixed in nss 3.28: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.28 compatibility nss 3.28 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.29 release notes
n the signature scheme flexibility that causes connectivity issues between ios 8 clients and nss servers with ecdsa certificates (bug1334114). tls 1.3 is now enabled by default in (bug1311296). bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.29 compatibility nss 3.29 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.29 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.30 release notes
s with a modulus bit length that is not a multiple of 8 are now supported. the pk12util tool now supports importing and exporting data encrypted in the aes based schemes defined in pkcs#5 v2.1. bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.30 compatibility nss 3.30 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.30 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.31 release notes
seeding mechanism for *nix systems now using only /dev/urandom. this is used only when seed_only_dev_urandom is set at compile time. cert_asciitoname can handle oids in dotted decimal form now. bugs fixed in nss 3.31 this bugzilla query returns all the bugs fixed in nss 3.31: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.31 compatibility nss 3.31 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.31 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.32 release notes
ugs fixed in nss 3.32 nss versions 3.28.x, 3.29.x. 3.30.x and 3.31.x contained a bug in function cert_comparename, which caused the first rdn to be ignored. nss version 3.32 fixed this bug. (cve-2018-5149, bug 1361197) this bugzilla query returns all the bugs fixed in nss 3.32: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.32 compatibility nss 3.32 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.32 shared libraries, without recompiling, or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future ve...
NSS 3.33 release notes
zallocaligned - allocate aligned memory. port_zallocalignedoffset - allocate aligned memory for structs. in ssl.h ssl_getexperimentalapi - access experimental apis in libssl. bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.33 compatibility nss 3.33 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.33 shared libraries, without recompiling, or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future ve...
NSS 3.34.1 release notes
om certdata.txt for actively distrusted certificates that have expired (bug 1409872). the version of the ca list was set to 2.20. new in nss 3.34 new functionality none new functions bugs fixed in nss 3.34.1 this bugzilla query returns all the bugs fixed in nss 3.34.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.34.1 compatibility nss 3.34.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.34 release notes
upported on certificates. certificates with rsa-pss or rsa-pkcs#1v1.5 keys can be used to create an rsa-pss signature on a certificate, using the --pss-sign argument to certutil. new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.34 compatibility nss 3.34 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future ve...
NSS 3.35 release notes
erimental apis might get removed from nss without announcing removals in the release notes. this section might be incomplete. the experimental api ssl_usealtserverhellotype has been disabled. bugs fixed in nss 3.35 this bugzilla query returns all the bugs fixed in nss 3.35: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.35 compatibility nss 3.35 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.35 shared libraries, without recompiling, or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future ve...
NSS 3.36.1 release notes
regression with operating systems that are limited to 600 k iterations. nss 3.36.1 has been changed to use the same 600 k limit. bugs fixed in nss 3.36.1 certain smartcard operations could result in a deadlock. this bugzilla query returns all the bugs fixed in nss 3.36.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.36.1 compatibility nss 3.36.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.36.2 release notes
ugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.36 release notes
n nss 3.36 new functionality experimental apis for tls session cache handling. notable changes in nss 3.36 replaced existing vectorized chacha20 code with verified hacl* implementation. bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.36 compatibility nss 3.36 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.37.1 release notes
ugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.37.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.37 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.37 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.38 release notes
x, if it is located on a network filesystem that's known to benefit from caching. when repeatedly importing the same certificate into an sql database, the existing nickname will be kept. bugs fixed in nss 3.38 this bugzilla query returns all the bugs fixed in nss 3.38: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.38 compatibility nss 3.38 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.38 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.39 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.39 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.40 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.40 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.41.1 release notes
bugs fixed in nss 3.41.1 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare cms crash. thanks to hanno böck and damian poddebniak for the discovery and fixes. (cve-2018-18508) this bugzilla query returns all bugs fixed in 3.41.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.41.1 compatibility nss 3.41.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.41.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.41 release notes
a program linked with older nss 3.x shared libraries will work with nss 3.41 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.42.1 release notes
functions to fix a rare cms crash. thanks to hanno böck and damian poddebniak for the discovery and fixes. this was originally announced in nss 3.42, but was mistakenly not included in the release. (cve-2018-18508) this bugzilla query returns all the bugs fixed in nss 3.42.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.42.1 compatibility nss 3.42.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.42.1 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futur...
NSS 3.42 release notes
very and fixes. note: this was mistakenly not in release 3.42, and is instead in nss 3.42.1. bug 1513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.42 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.43 release notes
cvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align tls 1.3 hkdf trace levels bug 1530102 - use getentropy on compatible versions of freebsd. this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.43 compatibility nss 3.43 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.43 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.52 release notes
ock seed ecb inputs. bug 1630925 - guard all instances of nsscmssigneddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.52 compatibility nss 3.52 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.52 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.54 release notes
arnings in nss. bug 1644774 - ssl gtests to use clearservercache when resetting self-encrypt keys. bug 1645479 - don't use secitem_makeitem in secutil.c. bug 1646520 - stricter enforcement of asn.1 integer encoding. this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.54 compatibility nss 3.54 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.54 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
NSS 3.55 release notes
1643528 - fix compilation error with -werror=strict-prototypes. bug 1646324 - advertise pkcs#1 schemes for certificates in the signature_algorithms extension. bug 1652331 - update nss 3.55 nspr version to 4.27. this bugzilla query returns all the bugs fixed in nss 3.55: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.55 compatibility nss 3.55 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.55 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future vers...
nss tech note2
using the pkcs #11 module logger nss technical note: 2 modes of operation extracting output from log files the logger displays all activity between nss and a specified pkcs #11 module. it works by inserting a special set of entry points between nss and the module. to enable the module logger, you must set the environment variable nss_debug_pkcs11_module to the name of the
target module. 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. for example, to log the softoken on windows, use: set nss_debug_pkcs11_module=nss internal pkcs #11 module the logger is available by default in debug builds. for o...
NSS release notes template
functions in ___.h function - description new types in ___.h type - description. new macros in ___.h macro - description notable changes in nss 3.xx ... bugs fixed in nss 3.xx this bugzilla query returns all the bugs fixed in nss 3.xx: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&
target_milestone=3.xx (make a link) acknowledgements the nss development team would like to thank ... for responsibly disclosing the issue by providing advance copies of their research. compatibility nss 3.xx.y shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.xx.y shared libraries without recompili...
PKCS 12 functions
sec_pkcs12decoderfinish mxr 3.2 and later sec_pkcs12decodergetcerts mxr 3.4 and later sec_pkcs12decoderimportbags mxr 3.2 and later sec_pkcs12decoderiterateinit mxr 3.10 and later sec_pkcs12decoderiteratenext mxr 3.10 and later sec_pkcs12decoderset
targettokencas mxr 3.8 and later sec_pkcs12decoderstart mxr 3.2 and later sec_pkcs12decoderupdate mxr 3.2 and later sec_pkcs12decodervalidatebags mxr 3.2 and later sec_pkcs12decoderverify mxr 3.2 and later sec_pkcs12destroyexportcontext mxr 3.2 and later...
Build instructions
these instructions are outdated. use the building nss page for more recent information. numerous optional features of nss builds are controlled through make variables. gmake is gnu make, usually your linux-distro-regular "make" binary file, unless maybe it is a bsd make. make variables may be set on the gmake command line, e.g., gmake variable=value variable=value
target1
target2 or defined in the environment, e.g. (for posix shells), variable=value; export variable gmake
target1
target2 here are some (not all) of the make variables that affect nss builds: build_opt: if set to 1, means do optimized non-debug build. default is debug, non-optimized build. use_debug_rtl: if set to 1, on windows, causes build with debug version of the c run-time library. ns_use_gcc: on p...
Installation guide
so right now you need to manually install the headers, libraries, and programs in the directories you want. ...
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. where <obj-dir> would vary according to the type of build and the platform. ...
NSS functions
sec_pkcs12decoderfinish mxr 3.2 and later sec_pkcs12decodergetcerts mxr 3.4 and later sec_pkcs12decoderimportbags mxr 3.2 and later sec_pkcs12decoderiterateinit mxr 3.10 and later sec_pkcs12decoderiteratenext mxr 3.10 and later sec_pkcs12decoderset
targettokencas mxr 3.8 and later sec_pkcs12decoderstart mxr 3.2 and later sec_pkcs12decoderupdate mxr 3.2 and later sec_pkcs12decodervalidatebags mxr 3.2 and later sec_pkcs12decoderverify mxr 3.2 and later sec_pkcs12destroyexportcontext mxr 3.2 and later...
NSS tools : modutil
se no security lapses or loss of database integrity. -jar jar-file add a new pkcs #11 module to the database using the named jar file. use this command with the -installdir and -tempdir arguments. the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the
target machine, including the pkcs #11 module library file and other files such as documentation. this is covered in the jar installation file section in the man page, which details the special script needed to perform an installation through a server or with modutil. -list [modulename] display basic information about the contents of the secmod.db file. specifying a modulename displays detailed i...
NSS reference
these functions are listed in this section. error codes based on "nss and ssl error codes" in the ssl reference. nss environment variable...
sslintro.html
ets a single configuration parameter of a specified socket. this function must be called once for each parameter whose settings you want to change from those established with ssl_optionsetdefault. optional. ssl_configsecureserver. for servers only. configures the socket with the information needed to handshake as an ssl server. required for servers. ssl_seturl. for clients only. records the
target server url for comparison with the url specified by the server certificate. required for clients. callbacks and helper functions allow you to specify such things as how authentication is accomplished and what happens if it fails. ssl_setpkcs11pinarg. sets the argument passed to the pkcs #11 password callback function. required. ssl_authcertificatehook. specifies a callback function used ...
NSS Tools certutil
an also list, generate, modify, or delete certificates within the cert8.db file and create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key3.db file. starting from nss 3.35, the database format was upgraded to support sqlite as described in this document. it means that cert9.db and key4.db files may be
targeted instead. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database. this document discusses certificate and key database management. for information security module database management, see using the security module database tool. availability see the release notes for the platfor...
NSS Tools modutil
nd -mechanisms arguments. -jar jar-file add a new pkcs #11 module to the database using the named jar file. use this option with the -installdir and -tempdir arguments. the jar file uses the netscape server pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags. the jar file should also contain any files to be installed on the
target machine, including the pkcs #11 module library file and other files such as documentation. see the section jar installation file for information on creating the special script needed to perform an installation through a server or with the security module database tool (that is, in environments without javascript support). for general installation instructions and to install a module in environmen...
certutil
eate an individual certificate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the
target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). argum...
NSS tools : modutil
ar-file add a new pkcs #11 module to the database using the named jar file. use this command with the -installdir and -tempdir arguments. the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the
target machine, including the pkcs #11 module library file and other files such as documentation. this is covered in the jar installation file section in the man page, which details the special script needed to perform an installation through a server or with modutil. -list [modulename] display basic information about the contents of the secmod...
Installing Pork
ld.h fi if test ${host_system} = sys_cygwin; then if you don't do this, mcpp will get the wrong set of automatic definitions and you'll end up with an unpleasant hybrid x86-64/i686 build system. $ export path=/builds/gcc-3.4.6-installed/bin:$path $ export cppflags=-m32 $ cc=gcc34 cxx=g++34 cppflags=-m32 ldflags=-m32 ../src/configure --enable-replace-cpp --prefix=/builds/gcc-3.4.6-installed --
target=i686-pc-linux $ make $ make install program_transform_name= ...
Small Footprint
a.javascript.regexp can be removed. rhino will continue to run, although it will not be able to execute any regular expression matches. this change saves 47,984 bytes of class files. debug information debug information in rhino classes consumes about 25% of code size and if you can live without that, you can recompile rhino to remove it. smalljs.jar ant build script in rhino supports smalljar
target that will generate smalljs.jar that does not include tools, optimizer, javaadapter and class generation library, regular expressions, e4x implementataion and deprecated files. to build such minimalist jar without debug information, run the following command from the top directory of rhino distribution: ant clean ant -ddebug=off -dno-regexp=true -dno-e4x=true smalljar if you omit -dno-regexp=tr...
Rhino optimization
e data and type flow analysis is performed to determine which javascript variables can be allocated to java vm registers, and which variables are used only as numbers. local common sub-expressions are collapsed (currently this only happens for property lookup, but in the future more expressions may be optimized). all local variables and parameters are allocated to java vm registers. function call
targets are speculatively pre-cached (based on the name used in the source) so that dispatching can be direct, pending runtime confirmation of the actual
target. arguments are passed as object/number pairs to reduce conversion overhead. note some language features (indirect calls to eval, use of the arguments property of function objects) were previously not supported in higher optimization levels. ...
64-bit Compatibility
nityfilter in nanojit will catch it while generating code. if this happens you will get an assert that points directly to the ill-typed lir. not all pointer-width values are actually pointers. to avoid equivocating, the rest of this article will use the term "native integers". a native integer is the size used for intptr_t/uintptr_t, which is usually the width of a general-purpose register on the
target cpu. loading and storing native integers the harder cases to detect usually involve runtime value truncation. for example, this code will not load a native integer correctly on a 64-bit machine: struct object { void *data; }; lir->insload(lir_ld, objins, ins->insimm(offsetof(object, data))); lir_ld is 32-bit. on 64-bit machines you must use lir_ldq. luckily there is an alias that will choose...
Property cache
ed, changing any of x's own methods will change its shape.) extensibility guarantee — if at time t0 an object x of shape s is extensible, and at time t1 an object y has shape s, and no shape-regenerating gc occurred, then at t1 y is extensible. (informally: marking an object as not extensible changes its shape. without this guarantee, every property assignment would have to check that the
target object is extensible, even though changing an object's extensibility is rare.) prototype change guarantee — if at time t0 the object x has shape s, and the object y has prototype z, and either x is y or x is on y's prototype chain, and at time t1 the object x has shape s, and no shape-regenerating gc occurred, then at t1 y has prototype z. (informally: changing an object's prototype chang...
Tracing JIT
f three major states: monitoring, recording, or executing. the transitions between these states are somewhat complex and delicate, but the overall picture is simple: monitoring the trace monitor's initial state is monitoring. this means that spidermonkey is interpreting bytecode. every timespidermonkey interprets a backward-jump bytecode, the monitor makes note of the number of times the jump-
target program-counter (pc) value has been jumped-to. this number is called the hit count for the pc. if the hit count of a particular pc reaches a threshold value, the
target is considered hot. when the monitor decides a
target pc is hot, it looks in a hashtable of fragments to see if there is a fragment holding native code for that
target pc. if it finds such a fragment, it transitions to executing m...
JSAutoCompartment
this article covers features introduced in spidermonkey 24 raii helper to enter a different compartment on the given context and automatically leave it once the jsautocompartment instance gets out of scope. syntax jsautocompartment(jscontext *cx, jsobject *
target); jsautocompartment(jscontext *cx, jsscript *
target); name type description cx jscontext * the context on which a cross-compartment call is needed.
target jsobject * / jsscript * the object in a different compartment to be accessed. this implicitly identifies the compartment to be entered. description every jscontext has a current compartment. only objects in the current compartment can be accessed, so to access an object in a different compartment, this...
JSDeletePropertyOp
j[id] to evaluate to false in non-strict mode code, and to throw a typeerror in strict mode code. if no error occurred and the deletion wasn't disallowed (this is *not* the same as saying that a deletion actually occurred -- deleting a non-existent property, or an inherited property, is allowed -- it's just pointless), set *succeeded to true and return true. this hook is not called when the
target property is jsprop_permanent and is an own property of the
target object. an attempt to delete such a property fails early, returning false, before the delproperty hook is reached. js_clearscope does not call this hook either. see also mxr id search for jsdeletepropertyop bug 858677 jsclass ...
JSNewEnumerateOp
f spidermonkey's default [[enumerate]] internal method. when an ordinary object is enumerated, that object and each object on its prototype chain is tested for an enumerate op, and those ops are called in order. the properties each op adds to the properties vector are added to the set of values the for-in loop will iterate over. all of this is nonstandard. an object is "enumerated" when it's the
target of a for-in loop or js_enumerate. all other property inspection, including object.keys(obj), goes through [[ownkeys]]. the callback's job is to populate properties with all property keys that the for-in loop should visit. before jsapi 37, jsnewenumerateop was the type of jsclass.enumerate. to use a jsnewenumerateop in a jsclass, set the jsclass_new_enumerate bit in the jsclass.flags field and...
JSObjectOps.defaultValue
efaultvalue and jsclass.convert callbacks to convert objects to primitive values. syntax typedef jsbool (*jsconvertop)(jscontext *cx, jsobject *obj, jstype type, jsval *vp); name type description cx jscontext * pointer to the js context in which the conversion is needed. obj jsobject * the object to be converted. type jstype the
target type. vp jsval * out parameter. on success, the callback must store the converted value here. description the jsobjectops.defaultvalue callback corresponds to the [[defaultvalue]] method defined in ecma 262-3 §8.6.2.6. many expressions in the ecmascript language, such as a+b, involve implicit conversion of the operands using [[defaultvalue]]. the default [[defaultvalue]] ...
JSPropertyOp
a prototype and not on obj itself. in this case obj points to the object from which the property is being accessed, not the object on which the property was defined. jsclass hooks jsclass offers following hooks: jspropertyop jsclass.addproperty is called just after a new property is added to an object. this happens when a program sets a property that isn't already an own property of the
target object. it also happens in jsapi functions such as js_defineproperty. on entry, *vp contains the value provided by the code defining or setting the property. the callback may modify *vp. on success, the post-callback value of *vp becomes the initial stored value of the new property. in js_threadsafe builds, this callback is called with obj locked. it is therefore dangerous for the callback to ...
JS_EnterCompartment
this article covers features introduced in spidermonkey 24 note: the preferred way of changing a context's current compartment is using jsautocompartment. enter a different compartment on the given context, so that objects in that compartment can be accessed. syntax jscompartment * js_entercompartment(jscontext *cx, jsobject *
target); name type description cx jscontext * the context on which a cross-compartment call is needed.
target jsobject * the object in a different compartment to be accessed. this implicitly identifies the compartment to be entered. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by calling js_entercompartment an...
JS_EnterCrossCompartmentCall
d at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.1 js_entercrosscompartmentcall has been removed in bug 786068. use js_entercompartment instead. enter a different compartment on the given context, so that objects in that compartment can be accessed. syntax jscrosscompartmentcall * js_entercrosscompartmentcall(jscontext *cx, jsobject *
target); name type description cx jscontext * the context on which a cross-compartment call is needed.
target jsobject * the object in a different compartment to be accessed. this implicitly identifies the compartment to be entered. description every jscontext has a current compartment. any access to an object in a different compartment must...
JS_ValueToECMAInt32
2 operator specified in ecma 262-3 9.5. js_valuetoecmauint32 implements the touint32 operator specified in ecma 262-3 9.6. js_valuetouint16 implements the touint16 operator specified in ecma 262-3 9.7. all three functions first convert v to a floating-point number as if by calling js_valuetonumber; nan values are then converted to zero. if that succeeds, the result is then converted to the
target integer type. this second conversion cannot fail. on success, js_valuetoecmaint32 stores the converted value in *ip and returns js_true. on error or exception, it returns js_false, and the value left in *ip is undefined. see also js::touint16 js::toint32 js::touint32 js::toint64 js::touint64 js::tonumber bug 933810 bug 933946 ...
compare-locales
wser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and words, and some statistics on how many strings are changed or not, excluding access- and commandkeys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general, mid 80s should be the
target, though. pass --json to get just the summary in json format. ...
Secure Development Guidelines
& → & < → < > → > " → " ' → ' 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 database (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 =...
Gecko object attributes
e is exposed, which indicates the type is numeric. for more information please read about schema datatypes. applied to: any widget that accepts input exposed via aria: aria-datatype exposed in xforms: from boud instance node datatype draggable true when the accessible object can be grabbed. dropeffect indicates what functions can be performed when the dragged object is released on the drop
target. refer to aria-dropeffect for the list of possible values. grabbed true when the accessible object has been selected for dragging. haspopup true when the object displays a pop-up menu or window when invoked. applied to: state_haspopup exposed in aria: aria-haspopup note: this is only supported on atk/at-spi. on msaa, state_system_haspopup is used. sort if "ascending" or "descending", the...
Gecko events
cts with transient children. is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has changed. is supported: yes
targets: table_cell - the cell of <xul:tree/>, any accessible for html element when @title or @alt attribute is changed. event_description_change an object's description property has changed. is supported: no event_value_change an object's value property has changed. is supported: yes event_help_change an object's help has changed. is supported: no event_defaction_change an object's default actio...
XForms Accessibility
e (see the spec, the docs). this element is represented by upload. range allows the user to choose a value from within a specific range of values (see the spec, the docs). currently it is represented by a slider only. trigger allows the user to initiate actions (see the spec, the docs). this element is represented by button. submit invokes the submission of the selected instance data to its
target destination (see the spec, the docs). this element is represented by button. select allows the user to choose one or multiple values from a list of pre-defined values (see the spec, the docs). it can have the following representations: listbox checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the docs). it can have the foll...
History Service Design
all tables, indexes and triggers, calling related inittables static methods of other dependant services. finally temporary tables, indexes and triggers are created, this happens at every run since those entities are removed when closing the connection. temporary storage is used to avoid too frequent writes to the disk, since those are most likely to cause fsyncs (to ensure data integrity) on the
target filesystem. the temporary data (actually visits and pages) are synced to disk either on a timer and on bookmark's inserts. performance to ensure performance a bunch of statements, commonly used when adding or reading visit informations, are created at startup. these statements can be reused avoiding the overhead due to createstatement calls, before closing the connection these statements need t...
Creating the Component Code
es of xpcom. what we'll be working on the component we'll be working on in this book controls a special mode in your browser that prevents users from leaving the current domain or a set of safe domains. 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. web lock user interface shows the icon that is used to activate the web lock mode (leftmost in the status bar) once you have installed the weblock component and the extra user interface. web lock user interface most of the actual work in the weblock component is preparing the component itself, finding the xpcom interf...
XPCOM Stream Guide
tream @mozilla.org/network/file-input-stream;1 nsifileinputstream stream.init(file, ioflags, perm, behaviorflags); zip nsjarinputstream n/a nsiinputstream zipreader.getinputstream(zipentry); similarly, each of these implements nsioutputstream. ...
Introduction to XPCOM for the DOM
yet been reviewed by the dom gurus, it might contain some errors. this document is an introduction to the use of xpcom in the context of the dom code. the use of xpcom and nscomptr's described in this document covers about 80% of what you need to know to read the dom code, and even write some. for more advanced topics, please see the xpcom page. the tracking bug for this document is bug 99592.
target audience: people who would like a quick introduction to the use of c++ and xpcom in the dom code. the understanding of the content of this document is a requirement to read the rest of the dom hacking guide. important note: this document assumes some knowledge of c++, specially the object-oriented part of it. i learned c++ by reading "c++ primer" from stanley lippman and josee lajoie, then expe...
Components.lastResult
ng the result of xpcom methods that can return interesting 'success' codes. this is because failure result codes get converted by xpconnect into exceptions that are thrown into the calling javascript method. most interfaces only return one success code -- ns_ok -- so components.lastresult is rarely necessary. in cases where components.lastresult is used, it is best to get it right away after the
target call is made and save it in a local variable to test its value rather than doing multiple tests against components.lastresult. this is because many 'components' properties and methods are themselves implemented using xpconnect and subsequent calls to components.lastresult might reflect the result of 'implicit' xpconnect calls rather than the result of the
target call. example in the following e...
Components.utils.Sandbox
, by default, when working with dom objects across origin boundaries. this is primarily visible for chrome code accessing content. however, it also occurs during cross-origin access between two content pages, since each page sees a "vanilla" view of the other. the protection is bidirectional: the caller sees the bonafide dom objects without being confused by sneakily-redefined properties, and the
target receives appropriate privacy from having its expandos inspected by untrusted callers. in situations where only unidirectional protection is needed, callers have the option to waive the x-ray behavior using wrappedjsobject or xpcnativewrapper.unwrap(). in general, when accessing same-origin content, script gets a transparent wrapper rather than an xray wrapper. however, sandboxes are often used ...
Components.utils.importGlobalProperties
y of strings. each string is the name of an object to import. 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. import from jsm this method worked until blob and file were no longer apart of jsm modules. it is suspected this works up till firefox 35. this imports blob, file, along with the regular services. the reason this works is because js code modules actually have blob and file. cu.import() will return the full global of ...
Observer Notifications
l-ready - sent when the inspector's tree panel is opened and initialized. inspector-unhighlighting - sent every time the highlighter stops highlighting a node. remote-listening string sent after when the remote agent is listening for incoming connections after remoteagent.listen() is called. the data is a string containing a fully qualified url to the main
target’s websocket endpoint. telemetry topic data description gather-telemetry - note: this is obsolete and planned to be removed as it's not firing at the proper times. sent by the telemetry service when it's time to start gathering telemetry data, since the telemetry ping is coming soon. plugins topic data descr...
NS_ConvertASCIItoUTF16
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
NS_ConvertUTF16toUTF8
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
NS_ConvertUTF8toUTF16
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
NS_LossyConvertUTF16toASCII
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsAdoptingCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsAdoptingString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsAutoString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsCAutoString
pace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param a...
nsCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsDependentCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsDependentString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsFixedCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsFixedString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsPromiseFlatCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsPromiseFlatString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
nsXPIDLCString
ce this method strips whitespace throughout the string. replacechar void replacechar(char, char) - source swaps occurence of 1 string for another parameters char aoldchar char anewchar void replacechar(const char*, char) - source parameters char* aset char anewchar replacesubstring void replacesubstring(const nscstring&, const nscstring&) - source parameters nscstring& a
target nscstring& anewvalue void replacesubstring(const char*, const char*) - source parameters char* a
target char* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param aeliminatetrailin...
nsXPIDLString
tespace throughout the string. replacechar void replacechar(prunichar, prunichar) - source swaps occurence of 1 string for another parameters prunichar aoldchar prunichar anewchar void replacechar(const char*, prunichar) - source parameters char* aset prunichar anewchar replacesubstring void replacesubstring(const nsstring&, const nsstring&) - source parameters nsstring& a
target nsstring& anewvalue void replacesubstring(const prunichar*, const prunichar*) - source parameters prunichar* a
target prunichar* anewvalue trim void trim(const char*, prbool, prbool, prbool) - source this method trims characters found in atrimset from either end of the underlying string. @param aset -- contains chars to be trimmed from both ends @param aeliminateleading @param ...
inIDOMUtils
element aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the content state flags are used in a bitmask. value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :
target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element. nsiarray getbindingurls( in nsidomelement aelement ); parameters aelement a dom element to retrieve the bindings of. return value an array of nsiuri objects representing the current xbl binding (if any) for the element a...
mozIStorageVacuumParticipant
rview boolean onbeginvacuum(); void onendvacuum(in boolean asucceeded); attributes attribute type description databaseconnection mozistorageconnection a connection to the database file to be vacuumed. expecteddatabasepagesize long the expected page size, in bytes, for the database. the vacuum manager will try to correct the page size when the browser is idle, using this value as a
target. valid page sizes are in the range 512 to 65,536. the recommended value is mozistorageconnection::default_page_size. note: if the database is using the wal journal node and the current page size is not the expected one, the journal node will be changed to truncate because wal doesn't allow page size changes. the vacuum manager will try to restore wal mode, but this will only work reliably if the ...
nsIAbstractWorker
dom/interfaces/threads/nsidomworkers.idlscriptable this interface is an abstract interface used to implement the web workers architecture. 1.0 66 introduced gecko 1.9.1 inherits from: nsidomevent
target last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onerror nsidomeventlistener the error listener for the worker. see also using web workers nsiworkermessageport nsiworkermessageevent nsiworkerscope nsiworkerglobalscope nsiworker ...
nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to get accessibility and dom interfaces for the event and its
target. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event. may return null if no accessible is available. read only. accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event
target nsiaccessible resides in. this can be used to get the dom window, the dom document and the window handler, among other things. read only. domnode nsidomnode the nsidomnode associated wit...
nsICommandLine
e. read only. preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example). this flag allows the default action to be prevented. state unsigned long the type of command line being processed. see state constants. read only. windowcontext nsidomwindow a window to be
targeted by this command line. in most cases, this will be null (xremote will sometimes set this attribute). read only. workingdirectory nsifile the working directory for this command line. use this property instead of the working directory for the current process, since a redirected command line may have had a different working directory. read only. constants state constants constant value desc...
nsIComponentManager
ions allowed in a regular chrome manifest, see the chrome registration documentation for details. this method was introduced in gecko 8 to let bootstrapped add-ons provide content at chrome:// uris. until gecko 10 you had to call this method manually from within the add-on's startup() method (with a matching removebootstrappedmanifestlocation() call in the add-on's shutdown() method). if you're
targeting gecko 10 or higher there should be no need to call this method, since the bootstrapped add-on's chrome.manifest is loaded automatically now. void addbootstrappedmanifestlocation( in interface nsilocalfile alocation ); parameters alocation the directory or xpi from which to load the chrome.manifest. createinstance() creates an instance of the class specified by classid. unlike getse...
nsICookieManager
thrown. typically, the arguments to this method will be obtained directly from the desired nsicookie object. void remove( in autf8string ahost, in acstring aname, in autf8string apath, in boolean ablocked, in jsval aoriginattributes ); parameters ahost the host or domain for which the cookie was set. see nsicookiemanager2.add() for a description of acceptable host strings. if the
target cookie is a domain cookie, a leading dot must be present. aname the name specified in the cookie. apath the path for which the cookie was set. ablocked indicates if cookies from this host should be permanently blocked. aoriginattributes the originattributes of this cookie. removeall() this method is called to remove all cookies from the cookie list. void removeall(); parameters non...
nsIDOMEventGroup
inherits from: nsisupports last changed in gecko 1.7 method overview boolean issameeventgroup(in nsidomeventgroup other); methods issameeventgroup() reports whether or not another event group is the same as this one. boolean issameeventgroup( in nsidomeventgroup other ); parameters other instance of nsidomeventgroup object to compare against. ...
nsIDOMWindow
nts normal (unzoomed) size. native code only! top nsidomwindow the root window for the hierarchy of windows that contain this nsidomwindow. this is the window itself if there is no parent, or if the parent is of a different type. the window hierarchy does not cross chrome-content boundaries. this attribute is "replaceable" in javascript. read only. windowroot nsidomevent
target the window root for this window. this is useful for connecting event listeners to this window as well as every other window nested in that window root. read only. native code only! note: prior to gecko 7.0 this attribute was part of nsidomwindow2. methods getcomputedstyle() see dom-window-getcomputedstyle for details. nsidomcssstyledeclaration getcomputedstyle( in nsidomelement elt...
nsIDOMWindow2
(gecko 1.9) to allow dom windows to take on new features. dom windows implement nsidomwindow2, which is a subclass of nsidomwindow. in gecko 7.0 this interface has been merged into nsidomwindow. attributes attribute type description applicationcache nsidomofflineresourcelist the application cache object for this window. read only. windowroot nsidomevent
target the window root for this window. this is useful for connecting event listeners to this window as well as every other window nested in that window root. not accessible from scripts. read only. see also dom nsidomwindow ...
nsIDOMWindowInternal
self nsidomwindowinternal readonly: returns an object reference to the window object. navigator nsidomnavigator readonly: returns a reference to the navigator object. screen nsidomscreen readonly: return...
nsIDroppedLinkHandler
astring droplink( in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit ); parameters aevent a drop event. aname the link title if it exists, or an empty string otherwise. return value a uri, or null if there is no valid link to be dropped. exceptions thrown ns_error_dom_security_err error will be thrown and the event canceled if the receiving
target should not load the uri for security reasons. this will occur if the source of the drag initiated a link for dragging that it itself cannot access. this prevents a source document from tricking the user into a dragging a chrome url for example. droplinks() given a drop event, determines the link being dragged. if non-empty links array is returned the caller can, for instance, load it. if empty...
nsIFrameMessageListener
olean value indicating whether or not the message should be handled synchronously. if true, the response should be returned in the specified json object. json the json object in which to return the response if the message is being handled synchronously. objects unimplemented an array of cpow, or null if sync is false. when the listener is called, the this value is the
target of the message. void receivemessage(); parameters none. see also content process event handling nsiframelistener ...
nsIMsgDatabase
boolean methods open() opens a database folder. void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); parameters afoldername the name of the folder to create. acreate whether or not the file should be created. aleaveinvaliddb set to true if you do not want the database to bedeleted if it is invalid. exceptions thrown ns_error_file_
target_does_not_exist afoldername doesn't exist and acreate was false. ns_msg_error_folder_summary_out_of_date the database is present (and was opened), but the summary file is out of date. ns_msg_error_folder_summary_missing the database is present (and was opened), but the summary file is missing. forcefolderdbclosed() void forcefolderdbclosed(in nsimsgfolder afolder); parameters afolder close() ...
nsIMsgFilter
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority //
target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority;
targetfolderuri //
target folder.. throws an exception if the action is not move to folder attribute acstring
targetfolderuri; label //
target label. throws an exception if the action is not label attribute nsmsglabelvalue label; junkscore attribute long junkscore; strvalue attribute autf8string strvalue; customid // action id if type is custom attribute acstring customid; customaction // custom action associated with customid // (which must be set prior to reading this attribute) readonly attribute nsimsgfiltercustomactio...
nsIMsgFilterList
) writestrattr() void nsimsgfilterlist::writestrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) writewstrattr() void nsimsgfilterlist::writewstrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) matchorchangefilter
target() boolean nsimsgfilterlist::matchorchangefilter
target ( in acstring olduri, in acstring newuri, in boolean caseinsensitive ) clearlog() void nsimsgfilterlist::clearlog () ensurelogfile() void nsimsgfilterlist::ensurelogfile () flushlogifnecessary () void nsimsgfilterlist::flushlogifnecessary () const const nsmsgfilterfileattribvalue nsimsgfilterlist...
nsIMsgRuleAction
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl [scriptable, uuid(190a2a18-d245-473a-a402-9f0814598c7f)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; //
target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; //
target folder.. throws an exception if the action is not move to folder attribute acstring
targetfolderuri; //
target label. throws an exception if the action is not label attribute nsmsglabelvalue label; // junkscore throws an exception if the action type is not junkscore attribute long junkscore; attribute autf8string strvalue; // action id if type is custom attribute acstring customid; // custom action associated with customid //...
nsINavHistoryQueryOptions
2 query's type is unified. redirects mode constants constant value description redirects_mode_all 0 include both redirected-from and redirected-to pages in the results. redirects_mode_source 1 include redirected-from pages but not redirected-to pages in the results. redirects_mode_
target 2 include redirected-to pages but not redirected-from pages in the results. methods clone() this method creates a new options item with the same parameters of this one. nsinavhistoryqueryoptions clone(); parameters none. return value returns the newly created cloned options. see also places using the places history service places query uris querying places nsina...
nsIServerSocket
ver socket. read only. methods asynclisten() this method puts the server socket in the listening state. it will asynchronously listen for and accept client connections. the listener will be notified once for each client connection that is accepted. the listener's onsocketaccepted() method will be called on the same thread that called asynclisten() (the calling thread must have an nsievent
target). the listener will be passed a reference to an already connected socket transport (nsisockettransport). see nsiserversocketlistener for more details. void asynclisten( in nsiserversocketlistener alistener ); parameters alistener the listener to be notified when client connections are accepted. close() this method closes a server socket. this does not affect already connected client ...
nsISocketTransportService
t( in array<acstring> asockettypes, in autf8string ahost, in long aport, in nsiproxyinfo aproxyinfo ); parameters asockettypes array of socket type strings. currently "starttls", "ssl" and "udp" are supported. pass an empty array [] if the default socket type should be used. you do not need to specify the strings "socks" or "socks4", use the aproxyinfo instead. ahost specifies the
target hostname or ip address literal of the peer for this socket. aport specifies the
target port of the peer for this socket. aproxyinfo specifies the transport-layer proxy type to use. set to null if no proxy should be used. for more details on communicating information about proxies like socks (which are transparent to upper protocols), see nsiproxiedprotocolhandler , nsiprotocolproxyservice or...
nsIThread
this interface provides a high-level abstraction for an operating system thread. threads have a built-in event queue, and a thread is an event
target that can receive nsirunnable objects (events) to be processed on the thread. to create a thread, use the nsithreadmanager interface. xpcom/threads/nsithread.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsievent
target method overview void shutdown() boolean haspendingevents() boolean processnextevent(in boolean maywait) attributes attribute type description prthread prthread the nspr thread object corresponding to the nsithread. read only. methods shutdown() shuts down the thread. this causes events to...
nsIThreadPool
when you send events to the thread pool, the pool creates a new thread to process the event, up to the number of threads specified by the threadlimit attribute. ...
nsITimer
ct passed to initwithcallback(). read only. closure voidptr the opaque pointer pass to initwithfunccallback(). read only. native code only! delay unsigned long the timeout delay in millisecond. note: re-setting the delay on a one-shot timer that has already fired doesn't restart the timer. call one of the init() methods to restart a one-shot timer.
target nsievent
target the nsievent
target to which the callback is dispatched. this
target must be set before calling any of the initialization methods. type unsigned long defines the timer type: one shot, repeating slack or repeating precise. must be one of the constants defined under constants on this page. constants constant value description type_...
xptcall FAQ
m compiled code to be distributed. what does xptcall really do? the core invoke function has the declaration: xptc_public_api(nsresult) xptc_invokebyindex(nsisupports* that, pruint32 methodindex, pruint32 paramcount, nsxptcvariant* params); nsxptcvariant is a discriminated union of the types that can be passed as parameters to the
target function (including void* to represent arbitrary pointer types). given the correct set of parameters, this function can call any method on any xpcom interface. xpconnect uses information from typelib files to reflect arbitrary xpcom interfaces into javascript and to make calls from javascript to xpcom using xptc_invokebyindex. the information in the typelibs allows xpconnect to convert function ...
Xptcall Porting Guide
requires the implementation of the following on each platform (from xptcall/public/xptcall.h): xptc_public_api(nsresult) ns_invokebyindex(nsisupports* that, pruint32 methodindex, pruint32 paramcount, nsxptcvariant* params); calling code is expected to supply an array of nsxptcvariant structs. these are discriminated unions describing the type and value of each parameter of the
target function. the platform specific code then builds a call frame and invokes the method indicated by the index methodindex on the xpcom interface that. here are examples of this implementation for win32 and linux x86, netbsd x86, and freebsd. these implementations use the basic strategy of: figure out how much stack space is needed for the params, make the space in a new frame, copy the params to t...
Xptcall Porting Status
nt> os/2 john fairhurst <mjf35@cam.ac.uk> i never heard exactly who did what. but mozilla has been working on os/2 for a long time now. <font color="white">done</font> openvms alpha colin r. blake <colin@theblakes.com> colin says this is passing all the tests on openvms alpha! <font color="white">done</font> nt alpha bob meader <bob@guiduck.com> bob writes: enclosed is xptcall for alpha/nt
target.. it is a variation of the iris port (only
targeted for win32). notice the last 2 files (the change to mozilla\xpcom\build\makefile.win and mozilla\xpcom\build) are needed because i was unable to figure how to do a "declspecexport" from the assembler asaxp ... if some knows how to do that then those last 2 files won't be needed. i have had someone look over this code at bridge.com (the entry poin...
Address Book examples
d when the editor wants to populate the contact editor * input fields with information about acard's photo. note that * this does not make acard's photo appear in the contact editor - * this is left to the onshow function. returns true on success. * if the function returns false, the generic photo handler onload * function will be called. * * onshow: function(acard, adocument, a
targetid): * called when the editor wants to show this photo type. * the onshow method should take the input fields in the document, * and render the requested photo in the img tag with id * a
targetid. note that onshow does not save the photo for acard - * this job is left to the onsave function. returns true on success. * if the function returns false, the generic photo handler onsh...
Building a Thunderbird extension 3: install manifest
hierarchy and paste the following text into the file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:
targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>5.0.*</em:maxversion> </description> </em:
targetapplication> </description> </rdf> the following items (shown in bold) should be customized for your application: <em:id>myfirstext@jen.zed</em:id>: this is the id of the e...
customDBHeaders Preference
s/content/superfluous_overlay.xul install.rdf: <?xml version='1.0' encoding='utf-8'?> <rdf xmlns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:em='http://www.mozilla.org/2004/em-rdf#'> <description about='urn:mozilla:install-manifest'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:type>2</em:type> <!-- 2 is type 'extension' --> <em:
targetapplication> <description> <!-- this next line identifies tbird as
target --> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>2*</em:minversion> <em:maxversion>3.0.0.*</em:maxversion> </description> </em:
targetapplication> <em:name>superfluous</em:name> <em:description>test superfluous extension</em:descri...
Toolkit version format
the following preferences: app.extensions.version, extensions.lastappversion versions returned by nsixulappinfo. ...
Using JS in Mozilla code
js language features that are implemented in the mozilla js engine are ordinarily safe to use in mozilla code. however, there are a few exceptions, listed here. js language features proper tail calls are not implemented. js standard library features feature standard can be used in code new proxy(
target, handler) es2015 yes, but getprototypeof and setprototypeof handlers are not yet implemented. arraybuffer.transfer() proposed for es2016 no, nightly-only for now sharedarraybuffer, sharedint8array..., atomics proposed for es2016 no, nightly-only for now typedobject proposed for es2016 no, nightly-only for now simd proposed for es2016 no, nightly-only for now ...
Working with windows in chrome code
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. the second parameter is the window's name; the name can be used in links or forms as the
target attribute. this is different from the user-visible window title, which is specified using xul. the third, and optional, parameter is a list of special window features the window should have. the window.opendialog function works similarly, but lets you specify optional arguments that can be referenced from the javascript code. it also handles window features a little differently, including alway...
Using Objective-C from js-ctypes
el_registername receives the name of the selector, and returns the selector. sel sel_registername(const char *str); sel is defined as follows, in /usr/include/objc/objc.h. it's also an opaque type. typedef struct objc_selector *sel; in this example, we need to send alloc, its selector can be retrieved with the following code: sel alloc = sel_registername("alloc"); sending a message once
target class and selector are ready, you can send a message. this message can be sent using the objc_msgsend function, and its variants, which are declared in /usr/include/objc/message.h. objc_msgsend function, receives the instance which receives the message, the selector, and variable argument list for the message, returning the returned value from the method. id objc_msgsend(id self, sel op, ...); ...
PointerType
ype object to declare the new type as a pointer to that type. return value a ctype object describing the newly created data type. exceptions thrown typeerror thrown if the parameter isn't a ctype. 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. read only. properties inherited from ctype these properties are available on all ctype objects. property type description name string the type's name. read only. for primitive types, this is just the name of the corresponding c type. for structure and opaque pointer types, this is simply the...
Plug-in Basics - Plugins
functionality. note, however, that plug-ins are windowed by default, because windowed plug-ins are in general easier to develop and more stable to use. a windowed plug-in is drawn into its own native window on a web page. windowed plug-ins are opaque and always come to the top html section of a web page. a windowless plug-in need not be drawn in a native window; it is drawn in its own drawing
target. windowless plug-ins can be opaque or transparent, and can be invoked in html sections. whether a plug-in is windowed or windowless depends on how you define it. the way plug-ins are displayed on the web page is determined by the html element that invokes them. this is up to the content developer or web page author. depending on the element and its attributes, a plug-in can be visible or hidde...
Plug-in Development Overview - Plugins
e message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file on disk. drawing a plug-in instance before drawing itself on the page, the plug-in must provide information about itself, set the window or other
target in which it draws, arrange for redrawing, and handle events. a windowless plug-in can call the following netscape methods to draw itself: npn_forceredraw: force a paint message for windowless plug-ins. npn_invalidaterect: invalidate an area in a windowless plug-in before repainting or refreshing. npn_invalidateregion: invalidate an area in a windowless plug-in before repainting or refreshin...
Structures - Plugins
nformation saved after the plug-in is deleted; can be returned to the plug-in. npsetwindowcallbackstruct contains information about the plug-in's unix window environment. npstream represents a stream of data either produced by the browser and consumed by the plug-in, or produced by the plug-in and consumed by the browser. npwindow contains information about the
target into which the plug-in instance can draw. « previousnext » ...
Preferences System
="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. you should be careful to read the higs for the platforms you are
targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each
targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when cal...
Accessibility Inspector - Firefox Developer Tools
"jump" listed. value — the value of the item. this can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the url in the corresponding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. 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. description — any further description provided on the element, usually by the content of a title attribute. keyboardshortcut — any keyboard shortcut that is available to activate the element, as specified in an accesskey attribute. note that thi...
Browser Toolbox - Firefox Developer Tools
. altogether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor performance network monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages.
targeting a document in the normal toolbox, there's a button in the toolbar enabling you to
target specific iframes in the document. the same button appears in the browser toolbox where it lists all the top-level chrome and content windows as well as any iframes they contain. this enables you to inspect documents in individual chrome windows and popups, as well as in content tabs. for example, here's ...
Highlight and inspect DOM nodes - Firefox Developer Tools
if you hover over a dom node in the watch expresions, it will be highlighted in the page. when you are working with dom notes in the debugger, you can easily highlight the node on the page or view it in the page inspector. a dom object in the watch expressions area, for example, includes a
target. hover over the
target to highlight the item on the page, click on the
target to switch to the page inspector with the item highlighted. also, when you view the details of a dom node in the code panel, objects that you can highlight in the list will also have a
target next to them. you can click any one of these
targets to switch to the page inspector with this item highlighted. ...
Debugger - Firefox Developer Tools
s and breakpoints. setting this to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal javascript. this is an accessor property with a getter and setter. it is initially false in a freshly created debugger instance. setting this flag to true is intended for uses of subsystems of the debugger api (e.g, debugger.source) for purposes other than step debugging a
target javascript program. allowwasmbinarysource a boolean value indicating whether webassembly sources will be available in binary form. the webassembly text generation will be disabled. collectcoverageinfo a boolean value indicating whether code coverage should be enabled inside each debuggee of this debugger instance. changing this flag value will recompile all jit code to add or remove code ...
Index - Firefox Developer Tools
e interpreter. 156 working with iframes debugging, devtools, developer tools, frames, tools you can point the developer tools at a specific iframe within a document. 157 about:debugging debugger, remote debugging, about:debugging the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging
targets. at the moment it supports three main sorts of
targets: restartless add-ons, tabs, and workers. 158 about:debugging (before firefox 68) the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging
targets. at the moment it supports three main sorts of
targets: restartless add-ons, tabs, and workers. ...
Edit Shape Paths in CSS - Firefox Developer Tools
same way as circle() in the shape path editor. an ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. inset() if the value of shape-outside is inset() then you are using the inset basic shape, which enables the creation of offset values pulling the content in from the margin box. each side of the rectangle can be
targeted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the values for the top, right, bottom, and left offset values. polygon() if the value of shape-outside is polygon() then you are using the polygon basic shape. this is the most complex of the basic shape values, therefore the tool gives you more options when editing these: clicking on ...
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
. 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. a name label to represent the grid, consisting of a selector identifying the html element that has the grid applied to it. clicking this also toggles the grid overlay on and off. a
target icon that when clicked immediately selects the html element that this grid entry relates to, inside the html pane. a color picker icon that allows you to change the primary color of the grid overlay. this is useful for selecting different colors so you can easily tell your grids apart. inspecting a subgrid when the page contains a grid with a subgrid, the entry for the subgrid is indented und...
Animation inspector example: CSS transitions - Firefox Developer Tools
sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { 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); ...
Animation inspector example: Web Animations API - Firefox Developer Tools
t', 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); ...
Work with animations - Firefox Developer Tools
the animation's easing (or timing function). the animation's fill the playback rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to. if you hover over this selector, the element is highlighted in the page. click the selector to select the element in the inspector. to the left of the selector is a "
target" icon (). clicking this icon locks the highlighter on the element. animation details if you click one of the bars, you'll see details of all the properties that were changed in the animation. for example, try clicking on the bar for img#icon's animation: this is telling us that two properties were modified: filter and transform. each dot represents an entry for that property in the set of ke...
Animating CSS properties - Firefox Developer Tools
something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the timeline details. waterfall overview this is showing a compressed view of the waterfall. the predominance of green is telling us that we're spending a lot of time painting. frame rate this is showing frame rate. average frame rate here is 46.67fps, well below the
target of 60fps. worse, though, is that the frame rate is very jagged, with lots of dips into the twenties and teens. it's unlikely you'll see a smooth animation here, especially when you add in user interaction. waterfall the rest of the recording shows the waterfall view. if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation fram...
Waterfall - Firefox Developer Tools
the marker type. markers the markers for operations are color-coded and labeled. the following operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event. event type for example, "click" or "message". event phase for example, "
target" or "capture". javascript functions executed in the page are labeled with the reason the function was called: script tag setinterval settimeout requestanimationframe promise callback promise init worker javascript uri event handler stack call stack, with links to functions. parse ...
Settings - Firefox Developer Tools
s something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox. new tools are often included in firefox but not enabled by default. available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar. 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. the "select element" button is now always shown. themes this enables you to choose one of two themes. there's a light theme, which is the default: ...
Toolbox - Firefox Developer Tools
you to switch between the different tools hosted by the toolbox. the array may include the following tools: web console javascript debugger page inspector style editor profiler network monitor note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging
target is not the firefox instance that launched the window, not all the hosted tools will be shown). extra tools next there's an array of buttons that can be added or removed in the developer tool settings. by default this array includes: toggle split console responsive design mode select a frame as the currently
targeted document (this is only included by default from firefox 41 onwards). the...
Console messages - Firefox Developer Tools
: time the time the message was recorded. method the specific http request method. if the request was made as an xmlhttprequest, there's an additional "xhr" tag indicating this. if more information is available, a disclosure triangle lets you display it, in an embedded panel that is identical to the network monitor request details. uri the
target uri. summary the http version, response code, and time taken to complete. clicking the response code takes you to the reference page for that code. the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches conte...
Web Console remoting - Firefox Developer Tools
s very long. console api messages the window.console api calls send internal messages throughout gecko which allow us to do whatever we want for each call. the web console actor sends these messages to the remote debugging client. we use the objectactor from dbg-script-actors.js without a threadactor, to avoid slowing down the page scripts - the debugger deoptimizes javascript execution in the
target page. the lifetime of object actors in the web console is different than the lifetime of these objects in the debugger - which is usually per pause or per thread. the web console manages the lifetime of objectactors manually. prior to firefox 23 we used a different actor (webconsoleobjectactor) for working with javascript objects through the protocol. in bug 783499 we did a number of changes th...
Working with iframes - Firefox Developer Tools
you can point the developer tools at a specific iframe within a document. you'll see a button in the toolbar: click it, and you'll see a popup listing all the iframes in the document, as well as the main document itself. if you select an entry in the list, all the tools in the toolbox - the inspector, the console, the debugger and so on - will now
target only that iframe, and will essentially behave as if the rest of the page does not exist. ...
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". ...
about:debugging - Firefox Developer Tools
opening the about:debugging page there are two ways to open about:debugging: type about:debugging in the firefox url bar. in the tools > web developer menu, click remote debugging. when about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup: setup use the setup tab to configure the connection to your remote device. ...
Firefox Developer Tools
single element. measure a portion of the page measure a specific area of a web page. rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition. download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll
target the document hosted by the currently active tab. but you can attach the tools to a variety of other
targets, too, both within the current browser and in different browsers or even different devices. about:debugging debug add-ons, content tabs, and workers running in the browser. connecting to firefox for android connect the developer tools to an instance of firefox running on an android de...
Animation() - Web APIs
although in the future other effects such as sequenceeffects or groupeffects might be possible, the only kind of effect currently available is keyframeeffect. this can be null (which is the default) to indicate that there should be no effect applied. ...
Animation.effect - Web APIs
the animation.effect property of the web animations api gets and sets the
target effect of an animation. the
target effect may be either an effect object of a type based on animationeffectreadonly, such as keyframeeffect, or null. syntax var effect = animation.effect; animation.effect = animationeffectreadonly value a animationeffectreadonly object describing the
target animation effect for the animation, or null to indicate no active effect. specifications specification status comment web animationsthe definition of 'animation.effect' in that specification. working draft editor's draft. ...
Animation.oncancel - Web APIs
animation that is initially idle does not trigger a cancel event on the new animation. syntax var cancelhandler = animation.oncancel; animation.oncancel = cancelhandler; value a function to be executed when the animation is cancelled, or null if there is no cancel event handler. examples if this animation is canceled, remove its element. animation.oncancel = function() { animation.effect.
target.remove(); }; specifications specification status comment web animationsthe definition of 'animation.oncancel' in that specification. working draft editor's draft. ...
Animation.updatePlaybackRate() - Web APIs
may be a positive number (to speed up or slow down the animation), a negative number (to make it play backwards), or zero (to effectively pause the animation). return value none. examples a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('input', evt => { cartoon.updateplaybackrate(parsefloat(evt.
target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status comment web animationsthe definition of 'updateplaybackrate()' in that specification. working draft ...
AudioContext.createMediaStreamDestination() - Web APIs
n"); 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 ...
AudioNode.connect() - Web APIs
syntax var destinationnode = audionode.connect(destination, outputindex, inputindex); audionode.connect(destination, outputindex); parameters destination the audionode or audioparam to which to connect. outputindex optional an index specifying which output of the current audionode to connect to the destination. ...
AudioParam.value - Web APIs
vious call to setvalueattime(), the value is changed to the value passed into setvalueattime(). if any gradiated or ramped value changing methods have been called and the current time is within the time range over which the graduated change should occur, the value is updated based on the appropriate algorithm. these ramped or gradiated value-changing methods include linearramptovalueattime(), set
targetattime(), and setvaluecurveattime(). thus, the value of a parameter is maintained to accurately reflect the state of the parameter over time. example this example instantly changes the volume of a gainnode to 40%. const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); gainnode.gain.value = 0.4; //which is identical to: gainnode.gain.setvalueattime(0.4, audioctx.currentti...
AudioParam - Web APIs
es the new value at the time given in the endtime parameter. audioparam.exponentialramptovalueattime() schedules a gradual exponential change in the value of the audioparam. the change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter. audioparam.set
targetattime() schedules the start of a change to the value of the audioparam. the change starts at the time specified in starttime and exponentially moves towards the value given by the
target parameter. the exponential decay rate is defined by the timeconstant parameter, which is a time measured in seconds. audioparam.setvaluecurveattime() schedules the values of the audioparam to follow a set of v...
AudioProcessingEvent - Web APIs
singevent represents events that occur when a scriptprocessornode input buffer is ready to be processed. note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audioworklet. properties the list below includes the properties inherited from its parent, event. property type description
target read only event
target the event
target (the topmost
target in the dom tree). type read only domstring the type of event. bubbles read only boolean does the event normally bubble? cancelable read only boolean is it possible to cancel the event? playbacktime read only double the time when the audio will be played, as defined by ...
BlobEvent - Web APIs
blobevent interface represents events associated with a blob. these blobs are typically, but not necessarily, associated with media content. constructor blobevent() creates a blobevent event with the given parameters. properties inherits properties from its parent event. blobevent.data read only a blob representing the data associated with the event. the event was fired on the event
target because of something happening on that specific blob. blobevent.timecode read only a domhighrestimestamp indicating the difference between the timestamp of the first chunk in data and the timestamp of the first chunk in the first blobevent produced by this recorder. note that the timecode in the first produced blobevent does not need to be zero. methods no specific method; inherits metho...
Bluetooth - Web APIs
the bluetooth interface of the web bluetooth api returns a promise to a bluetoothdevice object with the specified options. interface interface bluetooth : event
target { promise<boolean> getavailability(); attribute eventhandler onavailabilitychanged; [sameobject] readonly attribute bluetoothdevice? referringdevice; promise<sequence<bluetoothdevice>> getdevices(); promise<bluetoothdevice> requestdevice(optional requestdeviceoptions options = {}); }; bluetooth includes bluetoothdeviceeventhandlers; bluetooth includes characteristiceventhandlers; bluetooth includes serviceeventhandlers; properties inherits properties from its parent event
target. bluetooth.referringdevice read only returns a reference to the device, if any, from which the user opened the current page. for e...
BluetoothRemoteGATTCharacteristic - Web APIs
bluetoothremotegattcharacteristic.uuidread only returns a domstring containing the uuid of the characteristic, for example '00002a37-0000-1000-8000-00805f9b34fb' for the heart rate measure...
Body.text() - Web APIs
hen the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article> element equal to the text object. ...
CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the
target of an event or animated using the web animations api. instances of this interface may be obtained by calling element.pseudo(). properties csspseudoelement.element read only returns the originating/parent element of the pseudo-element. csspseudoelement.type read only returns the pseudo-element selector as a cssomstring. methods csspseudoelement extends event
target, so it inherits the following methods: event
target.addeventlistener() registers an event handler of a specific event type on the pseudo-element. event
target.dispatchevent() dispatches an event to this pseudo-element. event
target.removeeventlistener() removes an event listener from the pseudo-element. examples basic example usi...
Using images - Web APIs
ermits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas. using other canvas elements just as with normal images, we access other canvas elements using either the document.getelementsbytagname() or document.getelementbyid() method. be sure you've drawn something to the source canvas before using it in your
target canvas. one of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas. creating an image from scratch another option is to create new htmlimageelement objects in our script. to do this, you can use the convenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png'; // set source path ...
Clients.openWindow() - Web APIs
if (!hadwindowtofocus) clients.openwindow(e.notification.data.url).then(windowclient => windowclient ? windowclient.focus() : null); })); }); ...
Clipboard - Web APIs
ations it is usually implemented as an anonymous, temporary data buffer, sometimes called the paste buffer, that can be accessed from most or all programs within the environment via defined programming interfaces. a typical application accesses clipboard functionality by mapping user input such as keybindings, menu selections, etc. to these interfaces. methods clipboard is based on the event
target interface, and includes its methods. read() requests arbitrary data (such as images) from the clipboard, returning a promise. when the data has been retrieved, the promise is resolved with a datatransfer object that provides the data. readtext() requests text from the system clipboard; returns a promise which is resolved with a domstring containing the clipboard's text once it's available. ...
DataTransfer.getData() - Web APIs
" 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(allowdropevent) { 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.getele...
DataTransferItem.getAsFile() - Web APIs
object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the
target node data[i].getasstring(function (s){ ev.
target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is...
DataTransferItem.getAsString() - Web APIs
return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. 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...
DataTransferItem.kind - Web APIs
a file. 'string' if the kind of drag data item is a plain unicode string. example this example shows the use of the kind property. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the
target node data[i].getasstring(function (s){ ev.
target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image...
DataTransferItem.type - Web APIs
taitem.type; return value a domstring representing the drag data item's type. example this example shows the use of the type property. 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...
Document: animationcancel event - Web APIs
an animationend event. this might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using css. therefore, either directly or because any of its containing nodes are hidden. bubbles yes cancelable no interface animationevent event handler property onanimationcancel the original
target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationcancel. examples this code adds a listener to the animationcancel event. document.addeventlistener('animationcancel', () => { console.log('animation can...
Document: animationend event - Web APIs
ationend event is fired when a css animation has completed. if the animation aborts before reaching completion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired. bubbles yes cancelable no interface animationevent event handler property onanimationend the original
target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationend. examples this example listens for the animationend event: document.addeventlistener('animationend', () => { console.log('animation ended'); }); th...
Document: animationiteration event - Web APIs
ent is fired when an iteration of a css animation ends, and another one begins. this event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one. bubbles yes cancelable no interface animationevent event handler property onanimationiteration the original
target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationiteration. examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0; docum...
Document: animationstart event - Web APIs
re once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original
target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: document.addeventlistener('animationstart', () => { conso...
Document.cookie - Web APIs
ie along with cross-site requests. possible values are lax, strict or none. the lax value value will send the cookie for all same-site requests and top-level navigation get requests. this is sufficient for user tracking, but it will prevent many csrf attacks. this is the default value in modern browsers. the strict value will prevent the cookie from being sent by the browser to the
target site in all cross-site browsing contexts, even when following a regular link. the none value explicitly states no restrictions will be applied. the cookie will be sent in all requests—both cross-site and same-site. the cookie value string can use encodeuricomponent() to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in coo...
Document: dragexit event - Web APIs
bubbles yes cancelable no default action none. interface dragevent event handler property ondragexit examples see the drag event for example code or this jsfiddle demo. ...
Document: dragleave event - Web APIs
bubbles yes cancelable no default action none. interface dragevent event handler property ondragleave examples see the drag event for example code or this jsfiddle demo. ...
Document: dragover event - Web APIs
bubbles yes cancelable yes default action reset the current drag operation to "none". interface dragevent event handler property ondragover examples see the drag event for example code or this jsfiddle demo. ...
Document: drop event - Web APIs
bubbles yes cancelable yes default action varies interface dragevent event handler property ondrop examples see the drag event for example code or this jsfiddle demo. ...
Document.getAnimations() - Web APIs
this array includes css animations, css transitions, and web animations. syntax var allanimations = document.getanimations(); parameters none. return value an array of animation objects, each representing one animation currently associated with elements which are descendants of the document on which it's called. examples the following code snippet will slow down all animations on a page by halving their animation.playbackrate. ...
Document: keydown event - Web APIs
yup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). 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): event
target.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. <p>focus the iframe first (e.g. by clicking in it), then try pressing some keys.</p> <p id="log"></p> document.addeventlistener('keydown', logke...
Document: keyup event - Web APIs
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). 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): event
target.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. addeventlistener keyup example <p>focus the iframe first (e.g. by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.getelementbyid('log'); docu...
Document.onfullscreenchange - Web APIs
the document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a document transitions into or out of full-screen mode. syntax
targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler which is invoked whenever the document receives a fullscreenchange event, indicating that the document is transitioning into or out of full-screen mode. usage notes the fullscreenchange event does not directly specify whether the transition is into or out of full-screen mode, so your event handler should look at the value of document.fullscreenelement. if it's null, the event indicates a transition out of full-screen mode. otherwise, the specified element is about to take over the screen. example document.o...
Document: transitioncancel event - Web APIs
the transitioncancel event is fired when a css transition is canceled. see globaleventhandlers.ontransitioncancel for more information. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel the original
target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitioncancel. examples this code adds a listener to the transitioncancel event: document.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel propert...
Document: transitionend event - Web APIs
is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original
target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionend. examples this code adds a listener to the transitionend event: document.addeventlistener('transitionend', () => { console.log('transition ended')...
Document: transitionstart event - Web APIs
ansitionstart and transitionrun is that transitionrun fires when the transition is created (i.e. at the start of any delay) and transitionstart fires when the actual animation has begun (i.e. at the end of any delay). bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original
target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. examples this code adds a listener to the transitionstart event: document.addeventlistener('transitionstart', () => { console.log('started tran...
DocumentOrShadowRoot - Web APIs
e following features are included in both document and shadowroot. properties documentorshadowroot.activeelementread only returns the element within the shadow tree that has focus. documentorshadowroot.fullscreenelementread only returns the element that's currently in full screen mode for this document. documentorshadowroot.pointerlockelement read only returns the element set as the
target for mouse events while the pointer is locked. it returns null if lock is pending, the pointer is unlocked, or if the
target is in another document. documentorshadowroot.stylesheetsread only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document. methods documentorshadowroot.caretpositionfrompoint() returns a caretposition objec...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ng parent tag you will not get the result you are expecting. the text node would be selected instead of the element you want to affect. as another example, if you have a certain subset of elements that you want to do something to based on whether they are empty (have no child nodes) or not, you could check whether each element is empty using something like node.haschildnodes(), but again, if any
target elements contain text nodes, you could end up with false results. whitespace helper functions the javascript code below defines several functions that make it easier to deal with whitespace in the dom: /** * throughout, whitespace is defined as one of the characters * "\t" tab \u0009 * "\n" lf \u000a * "\r" cr \u000d * " " spc \u0020 * * this does not use javascript's "\s" becaus...
Document Object Model (DOM) - Web APIs
, the event handlers get executed. to learn more about what the dom is and how it represents documents, see our article introduction to the dom. dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event event
target htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified. to achieve this, the following int...
DragEvent.dataTransfer - Web APIs
transfer property holds the drag operation's data (as a datatransfer object). this property is read only . syntax let data = dragevent.datatransfer; return value data a datatransfer object which contains the drag event's data. example this example illustrates accessing the drag and drop data within the dragend event handler. function processdata(d) { // process the data ... } drag
target.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. living standard html 5.1the definition of 'dragevent.datatra...
EXT_disjoint_timer_query.beginQueryEXT() - Web APIs
must be ext.time_elapsed_ext. query a webglquery object for which to start the time querying. return value none. examples var ext = gl.getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); ext.beginqueryext(ext.time_elapsed_ext, query); // ... ...
EXT_disjoint_timer_query.endQueryEXT() - Web APIs
must be ext.time_elapsed_ext. return value none. examples var ext = gl.getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); ext.beginqueryext(ext.time_elapsed_ext, query); // ... ...
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
the ext_disjoint_timer_query.getqueryext() method of the webgl api returns information about a query
target. syntax any ext.getqueryext(
target, pname); parameters
target a glenum specifying the
target of the time query. must be ext.timestamp_ext or ext.time_elapsed_ext. pname a glenum specifying which information to return. must be ext.current_query_ext or ext.query_counter_bits_ext. return value depends on pname: if pname is ext.current_query_ext: a webglquery object, which is the currently active query for the given
target. if pname is ext.query_counter_bits_ext: a glint indicating the number of bits used to hold the query result for the given
target. examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); ext.querycounterext(...
Element: DOMActivate event - Web APIs
<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); <...
Element: DOMMouseScroll event - Web APIs
with the direction indicated by the value's sign. note: trusted events are never sent with a value of 0 for detail. trusted events are never fired with 0. note: if the platform's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is computed using the line height of the nearest scrollable ancestor element of the event's
target. if that element's font size is smaller than mousewheel.min_line_scroll_amount, that preference's value is used as the line height. ...
Element: MozMousePixelScroll event - Web APIs
es indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left. if the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the
target element. note: on macos, the scroll distance (and therefore the value of detail) is computed based on the accelerated scroll distance. the value of detail is never 0 if the events are legitimate. ...
Element: click event - Web APIs
ressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements. click fires after both the mousedown and mouseup events have fired, in that order. usage notes the mouseevent object passed into the event handler for click has its detail property set to the number of times the
target was clicked. in other words, detail will be 2 for a double-click, 3 for triple-click, and so forth. this counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. the interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to m...
Element.closest() - Web APIs
ex: p:hover, .toto + q return value closestelement is the element which is the closest ancestor of the selected element. it may be null. ...
Element: contextmenu event - Web APIs
e button, or by pressing the context menu key. in the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the
targeted element. bubbles yes cancelable yes interface mouseevent event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the se...
Element.getAnimations() - Web APIs
heduled to do so in future. it can optionally return animation objects for descendant elements too. note: this array includes css animations, css transitions, and web animations. syntax const animations = element.getanimations(options); parameters options optional an options object containing the following property: subtree a boolean value which, if true, causes animations that
target descendants of element to be returned as well. this includes animations that
target any css pseudo-elements attached to element or one of its descendents. defaults to false. return value an array of animation objects, each representing an animation currently
targetting the element on which this method is called, or one of its descendant elements if { subtree: true } is specified. examples...
Element.insertAdjacentElement() - Web APIs
the insertadjacentelement() method of the element interface inserts a given element node at a given position relative to the element it is invoked upon. syntax
targetelement.insertadjacentelement(position, element); parameters position a domstring representing the position relative to the
targetelement; must match (case-insensitively) one of the following strings: 'beforebegin': before the
targetelement itself. 'afterbegin': just inside the
targetelement, before its first child. 'beforeend': just inside the
targetelement, after its last child. 'afterend': after the
targetelement itself. element the element to be inserted into the tree. return value the element that was inserted, or null, if the insertion failed. exceptions exception explanation ...
Element: keydown event - Web APIs
yup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). 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): event
target.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 inside the <input> element. <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselec...
Element: keyup event - Web APIs
ydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). 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): event
target.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.queryselec...
Element.onfullscreenerror - Web APIs
example this example attempts to switch into full-screen mode from outside a handler for a user-initiated event (such as a click or keypress event). ...
Element.part - Web APIs
d to change the part identifiers of each tab so the correct styling is applied to the active tab when tabs are clicked. let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.
target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification. working draft ...
Element: wheel event - Web APIs
oll event. the default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop of the
target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. <div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } funct...
Event.composed - Web APIs
tched ui events are composed (click/touch/mouseover/copy/paste, etc.). most other types of events are not composed, and so will return false. for example, this includes synthetic events that are created without their composed option wil set to true. propagation only occurs if the bubbles property is also true. however, capturing only composed events are also handled at host as if they were in at_
target phase. you can determine the path the event will follow through the shadow root to the dom root by calling composedpath(). if this value is false, the shadow root will be the last node to be offered the event. examples in our composed-composed-path example (see it live), we define two trivial custom elements, <open-shadow> and <closed-shadow>, both of which take the contents of their text attr...
Event.composedPath() - Web APIs
the composedpath() method of the event interface returns the event’s path which is an array of the objects on which listeners will be invoked. this does not include nodes in shadow trees if the shadow root was created with its shadowroot.mode closed. syntax var composed = event.composedpath(); parameters none. return value an array of event
target objects representing the objects on which an event listener will be invoked. examples in our composed-composed-path example (see it live), we define two trivial custom elements, <open-shadow> and <closed-shadow>, both of which take the contents of their text attribute and insert them into the element's shadow dom as the text content of a <p> element. the only difference between the two is that their shadow roots are attached with their modes ...
Event.isTrusted - Web APIs
syntax var eventistrusted = event.istrusted; value boolean example if (e.istrusted) { /* the event is trusted */ } else { /* the event is not trusted */ } specification specification status comment domthe definition of 'event.istrusted' in that specification. ...
Event.msConvertURL() - Web APIs
the future. the msconverturl method instructs the html paste operation on how to modify the src attribute that corresponds to each file in the clipboarddata.files collection, allowing otherwise inaccessible files to be converted to blob or data uris. this proprietary method is specific to internet explorer and the microsoft edge browser. syntax var retval = dragevent.msconverturl(file,
targettype,
targeturl); parameters file [in] type: file the file object to be converted.
targettype [in] type: domstring one of the following values indicating the desired conversion type: "specified", "base64", or "unchanged".
targeturl [in, optional] type: url the
target url. return value this method does not return a value. example var bloblist = []; document.getelementbyid("pas...
Event.preventDefault() - Web APIs
nt that if the event does not get explicitly handled, its default action should not be taken as it normally would be. the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once. as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via event
target.dispatchevent(), without specifying cancelable: true has no effect. syntax event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.geteleme...
Event.srcElement - Web APIs
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. it's supported in all major browser engines, but only for compatibility reasons. use event.
target instead. specifications specification status comment domthe definition of 'event.srcelement' in that specification. living standard ...
EventListener.handleEvent() - Web APIs
syntax eventlistener.handleevent(event); parameters event an event object describing the event that has been fired and needs to be processed. return value undefined. if you return a value, the browser will ignore it. specifications specification status comment domthe definition of 'eventlistener.handleevent()' in that specification. living standard no change. ...
EventListener - Web APIs
note: due to the need for compatibility with legacy content, eventlistener accepts both a function and an object with a handleevent() property function. this is shown in the example below. properties this interface neither implements, nor inherits, any properties. methods this interface doesn't inherit any methods. eventlistener.handleevent() a function that is called whenever an event of the specified type occurs. ...
Fetch API - Web APIs
rom other sites are silently ignored. fetch() won’t send cookies, unless you set credentials: 'same-origin'. in august 2017, the spec changed the default credentials policy to 'same-origin'. the following browsers shipped and outdated native fetch, and were updated in these versions: firefox version 61.0b13. safari version 12. chrome version 68. if you are
targetting older versions of these browsers, be sure to include credentials: 'same-origin' init option on all api requests that may be affected by cookies/user login state. note: find out more about using the fetch api features in using fetch, and study concepts in fetch basic concepts. aborting a fetch browsers have started to add experimental support for the abortcontroller and abortsignal ...
File.lastModified - Web APIs
e. syntax const time = instanceoffile.lastmodified; value a number that represents the number of milliseconds since the unix epoch. 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 out below: dynamically created files if a file is created dynamically, the last modified time can be supplied in the new file() constructor function. if it is missing, lastmodified inherits the current time from date.n...
File.webkitRelativePath - Web APIs
occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. 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].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification. draft initial specification.
FileReader() - Web APIs
for details about how to use filereader, see using files from web applications. syntax var reader = new filereader(); parameters none. ...
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
the filereader.onload property contains an event handler executed when the load event is fired, when content read with readasarraybuffer, readasbinarystring, readasdataurl or readastext is available. 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 - Web APIs
a handler for the loadstart event. this event is triggered each time the reading is starting. filereader.onloadend a handler for the loadend event. this event is triggered each time the reading operation is completed (either in success or failure). filereader.onprogress a handler for the progress event. this event is triggered while reading a blob content. as filereader inherits from event
target, all those events can also be listened for by using the addeventlistener method. methods filereader.abort() aborts the read operation. upon return, the readystate will be done. filereader.readasarraybuffer() starts reading the contents of the specified blob, once finished, the result attribute contains an arraybuffer representing the file's data. filereader.readasbinarystring() starts ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
ault is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the
target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdir...
FileSystemDirectoryEntry.getFile() - Web APIs
ault is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the
target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdir...
FileSystemFlags.create - Web APIs
he filesystemflags dictionary is used to indicate whether or not the file should be created if it's missing. filesystemflags is only used when calling filesystemdirectoryentry.getfile() or filesystemdirectoryentry.getdirectory(). syntax filesystemflags.create = booleanvalue values the table below describes the result of each possible combination of these flags depending on whether or not the
target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdir...
FileSystemFlags.exclusive - Web APIs
eate property to determine whether or not it's acceptable to require that the file not already exist when the reference to it is created by calling filesystemdirectoryentry.getfile() or filesystemdirectoryentry.getdirectory(). syntax filesystemflags.exclusive = booleanvalue values the table below describes the result of each possible combination of these flags depending on whether or not the
target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdir...
FileSystemFlags - Web APIs
ault is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the
target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdir...
Introduction to the File and Directory Entries API - Web APIs
ectory entries api offers client-side storage for use cases that are not addressed by databases. if you want to have large mutable chunks of data, the file and directory entries api is a much more efficient storage solution than a database. while firefox supports blob storage for indexeddb, chrome currently does not (chrome is still implementing support for blob storage in indexeddb). if you are
targeting chrome for your app and you want to store blobs, the file and directory entries api and app cache are your only choices. however, appcache storage isn't locally mutable, and doesn't allow for fine-grained client-side management. in chrome, you can use the file and directory entries api with the quota management api, which lets you ask for more storage and manage your storage quota. sample ...
FocusEvent() - Web APIs
the focusevent() constructor returns a newly created focusevent object with an optional event
target. when the event has both a source and a destination, the related
target value must be set to the other
target. syntax var focusevent = new focusevent(typearg[, focuseventinit]); properties the focusevent() constructor also inherits arguments from uievent() and from event(). typearg is a domstring representing the name of the event. focuseventinit optional is a focuseventinit dictionary, having the following fields: "related
target", optional and defaulting to null, is an event
target representing the secondary
target of a focusevent. the focuseventinit dictionary also accepts fields from the uieventinit and eventinit dictionaries. specifications specification ...
Using the Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the browser's event loop. a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common
target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of each frame event. this data can be used to help identify areas that take too long to provide a good user experience. this document describes how to use the performanceframetiming interfaces including exa...
Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the browser's event loop. a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common
target for a good responsive user experience. this means the browser should process a frame in about 16.7 ms. 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. this data can be used to help identify areas that take too long to provide a good ...
Using the Geolocation API - Web APIs
the following example the geolocation api is used to retrieve the user's latitude and longitude. if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location. ...
Geolocation API - Web APIs
the following example the geolocation api is used to retrieve the user's latitude and longitude. if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location. ...
GlobalEventHandlers.onanimationcancel - Web APIs
n animationcancel event is sent when a css animation unexpectedly aborts, that is, any time it stops running without sending an animationend event. this can happen, for example, when the animation-name is changed such that the animation is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using css. syntax var animcancelhandler =
target.onanimationcancel;
target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the
target, where the
target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. exa...
GlobalEventHandlers.onanimationiteration - Web APIs
the onanimationiteration property of the globaleventhandlers mixin is the eventhandler for processing animationiteration events. the animationiteration event is sent when a css animation reaches the end of an iteration. an iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step. syntax var animiterationhandler =
target.onanimationiteration;
target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the
target, where the
target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent...
GlobalEventHandlers.onblur - Web APIs
the function receives a focusevent object as its sole argument. example this example uses onblur and onfocus to change the text within an <input> element. ...
GlobalEventHandlers.oncancel - Web APIs
the oncancel property of the globaleventhandlers mixin is an eventhandler for processing cancel events sent to a <dialog> element. the cancel event fires when the user indicates a wish to dismiss a <dialog>. this event handler prevents the event from bubbling, so any parent handlers are not notified of the event. syntax
target.oncancel = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one oncancel handler can be assigned to an object at a time. you may prefer to use the event
target.addeventlistener() method instead, since it's more flexible. specifications specification status comment html living standardthe definition of 'oncancel' in that specification. living stand...
GlobalEventHandlers.onclose - Web APIs
the onclose property of the globaleventhandlers mixin is an eventhandler for processing close events sent to a <dialog> element. the close event fires when the user closes a <dialog>. note: to handle the closing of a window, use onbeforeunload or onunload. syntax
target.onclose = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one onclose handler can be assigned to an object at a time. you may prefer to use the event
target.addeventlistener() method instead, since it's more flexible. specifications specification status comment html living standardthe definition of 'onclose' in that specification. living standard ...
GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events. the contextmenu event typically fires when the right mouse button is clicked on the window. unless the default behavior is prevented, the browser context menu will activate. syntax
target.oncontextmenu = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the event
target.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try openi...
GlobalEventHandlers.ondblclick - Web APIs
the ondblclick property of the globaleventhandlers mixin is an eventhandler that processes dblclick events on the given element. the dblclick event is raised when the user double clicks an element. it fires after two click events. syntax
target.ondblclick = functionref; value functionref is a function name or a function expression. the function receives a mouseevent object as its sole argument. within the function, this will be the element upon which the event was triggered. only one ondblclick handler can be assigned to an object at a time. you may prefer to use the event
target.addeventlistener() method instead, since it's more flexible. example this example logs the position of double clicks. html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log =...
GlobalEventHandlers.onerror - Web APIs
when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the element that initiated the load, and the onerror() handler on the element is invoked. ...
GlobalEventHandlers.onfocus - Web APIs
the onfocus property of the globaleventhandlers mixin is an eventhandler that processes focus events on the given element. the focus event is raised when the user sets focus on an element. for onfocus to fire on non-input elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details). note: the opposite of onfocus is onblur. syntax
target.onfocus = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example this example uses onblur and onfocus to change the text within an <input> element. html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus;...
GlobalEventHandlers.onformdata - Web APIs
the onformdata property of the globaleventhandlers mixin is the eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed. this happens when the form is submitted, but can also be triggered by the invocation of a formdata() constructor. onformdata is available on htmlformelement. syntax
target.onformdata = functionref; value functionref is a function name or a function expression. the function receives a formdataevent object as its sole argument. examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new form...
GlobalEventHandlers.ongotpointercapture - Web APIs
the ongotpointercapture property of the globaleventhandlers mixin is an eventhandler that processes gotpointercapture events. syntax
target.ongotpointercapture = functionref; value functionref is a function name or a function expression. the function receives a pointerevent object as its sole argument. example function overhandler(event) { // determine the
target event's gotpointercapture handler let gotcapturehandler = event.
target.ongotpointercapture; } function init() { let el = document.getelementbyid('
target'); el.ongotpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'ongotpointercapture' in that specification. recommendation ...
GlobalEventHandlers.oninvalid - Web APIs
the oninvalid property of the globaleventhandlers mixin is an eventhandler that processes invalid events. the invalid event fires when a submittable element has been checked and doesn't satisfy its constraints. the validity of submittable elements is checked before submitting their owner form, or after the checkvalidity() method of the element or its owner form is called. syntax
target.oninvalid = functionref; var functionref =
target.oninvalid; value functionref is a function name or a function expression. the function receives a event object as its sole argument. example this example demonstrates oninvalid and onsubmit event handlers on a form. html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="text" id="city...
GlobalEventHandlers.onkeydown - Web APIs
the function receives a keyboardevent object as its sole argument. example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element. ...
GlobalEventHandlers.onkeyup - Web APIs
the function receives a keyboardevent object as its sole argument. example this example logs the keyboardevent.code value whenever you release a key inside the <input> element. ...
GlobalEventHandlers.onlostpointercapture - Web APIs
the onlostpointercapture property of the globaleventhandlers mixin is an eventhandler that processes lostpointercapture events. syntax
target.onlostpointercapture = functionref; value functionref is a function name or a function expression. the function receives a pointerevent object as its sole argument. example function overhandler(event) { // determine the
target event's lostpointercapture handler let lostcapturehandler = event.
target.onlostpointercapture; } function init() { let el = document.getelementbyid('
target'); el.onlostpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'onlostpointercapture' in that specification. recommendation ...
GlobalEventHandlers.onmousedown - Web APIs
the function receives a mouseevent object as its sole argument. example this example reveals part of an image when you press and hold a mouse button. it uses the onmousedown, onmouseup, and onmousemove event handlers. ...
GlobalEventHandlers.onmouseup - Web APIs
the function receives a mouseevent object as its sole argument. example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
GlobalEventHandlers.onplay - Web APIs
javascript function specifying the handler for the event. 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. living standard ...
GlobalEventHandlers.onpointercancel - Web APIs
the onpointercancel property of the globaleventhandlers mixin is an eventhandler that processes pointercancel events. syntax
targetelement.onpointercancel = cancelhandler; var cancelhandler =
targetelement.onpointercancel; value cancelhandler the pointercancel event handler for element
targetelement. example this example shows two ways to use onpointercancel to handle an element's pointercancel events. <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 ... </div> </body> </html> specifications ...
GlobalEventHandlers.onpointerenter - Web APIs
the onpointerenter property of the globaleventhandlers mixin is an eventhandler that processes pointerenter events. syntax
targetelement.onpointerenter = enterhandler; var enterhandler =
targetelement.onpointerenter; value enterhandler the pointerenter event handler for element
targetelement. example this example shows two ways to use onpointerenter to set an element's pointerenter event handler. <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 ... </div> </body> </html> specifications specificat...
GlobalEventHandlers.onpointermove - Web APIs
the onpointermove property of the globaleventhandlers mixin is an eventhandler that processes pointermove events. syntax
targetelement.onpointermove = movehandler; var movehandler =
targetelement.onpointermove; value movehandler the pointermove event handler for element
targetelement. example this example shows two ways to use onpointermove to set an element's pointermove event handler. <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 ... </div> </body> </html> specifications specification status c...
GlobalEventHandlers.onpointerout - Web APIs
the onpointerout property of the globaleventhandlers mixin is an eventhandler that processes pointerout events. syntax
targetelement.onpointerout = outhandler; var outhandler =
targetelement.onpointerout; value outhandler the pointerout event handler for element
targetelement. example this example shows two ways to use onpointerout to set an element's pointerout event handler. <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 ... </div> </body> </html> specifications specification status comment ...
GlobalEventHandlers.onpointerover - Web APIs
the onpointerover property of the globaleventhandlers mixin is an eventhandler that processes pointerover events. syntax
targetelement.onpointerover = overhandler; var overhandler =
targetelement.onpointerover; value overhandler the pointerover event handler for element
targetelement. example this example shows two ways to use onpointerover to set an element's pointerover event handler. <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 ... </div> </body> </html> specifications specification status ...
GlobalEventHandlers.onpointerup - Web APIs
the onpointerup property of the globaleventhandlers mixin is an eventhandler that processes pointerup events. syntax
targetelement.onpointerup = uphandler; var uphandler =
targetelement.onpointerup; value uphandler the pointerup event handler for element
targetelement. example this example shows two ways to use onpointerup to set an element's pointerup event handler. <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 ... </div> </body> </html> specifications specification status comment pointer ev...
GlobalEventHandlers.ontouchcancel - Web APIs
not widely implemented. syntax var cancelhandler = someelement.ontouchcancel; return value cancelhandler the touchcancel event handler for element someelement. example this example shows two ways to use ontouchcancel to set an element's touchcancel event handler. <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 ... </div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version. ...
GlobalEventHandlers.ontouchend - Web APIs
a global event handler for the touchend event. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var endhandler =
targetelement.ontouchend; return value endhandler the touchend event handler for element
targetelement. example this example shows two ways to use ontouchend to set an element's touchend event handler. <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 ... </div> </body> <...
GlobalEventHandlers.ontouchmove - Web APIs
ribute is not widely implemented. syntax var movehandler = someelement.ontouchmove; return value movehandler the touchmove event handler for element someelement. example this example shows two ways to use ontouchmove to set an element's touchmove event handler. <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 ... </div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version. ...
GlobalEventHandlers.ontouchstart - Web APIs
bute is not widely implemented. syntax var starthandler = someelement.ontouchstart; return value starthandler the touchstart event handler for element someelement. example this example shows two ways to use ontouchstart to set an element's touchstart event handler. <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 ... </div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version. ...
HTMLMediaElement: canplay event - Web APIs
the canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.oncanplay specification html5 media examples these examples add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play thro...
HTMLMediaElement: canplaythrough event - Web APIs
the canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplaythrough', (event) => { console.log('i think i can play thro...
HTMLMediaElement: durationchange event - Web APIs
the durationchange event is fired when the duration attribute has been updated. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.ondurationchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector...
HTMLMediaElement: emptied event - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onemptied specification html5 media examples these examples add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh. the media is empty. did you call load()?'); }); ...
HTMLMediaElement: ended event - Web APIs
the ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. this event occurs based upon htmlmediaelement (<audio> and <video>) fire ended when playback of the media reaches the end of the media. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const ...
HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings. examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadeddata', (event) => { console.log('yay!
HTMLMediaElement: pause event - Web APIs
est to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method. the event is sent once the pause() method returns and after the media element's paused property has been changed to true. general info bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onpause specification html5 media examples these examples add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.ad...
HTMLMediaElement: play event - Web APIs
the play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onplay specification html5 media examples these examples add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('play', (event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.'...
HTMLMediaElement: playing event - Web APIs
the playing event is fired when playback is ready to start after having been paused or delayed due to lack of data. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onpla...
HTMLMediaElement: ratechange event - Web APIs
the ratechange event is fired when the playback rate has changed. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onratechange specification html5 media examples these examples add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log(...
HTMLMediaElement: seeked event - Web APIs
the seeked event is fired when a seek operation completed, the current playback position has changed, and the boolean seeking attribute is changed to false. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onseeked specification html5 media examples these examples add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler prope...
HTMLMediaElement: seeking event - Web APIs
the seeking event is fired when a seek operation starts, meaning the boolean seeking attribute has changed to true and the media is seeking a new position. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onseeking specification html5 media examples these examples add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video ...
HTMLMediaElement: stalled event - Web APIs
the stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onstalled specification html5 media examples these examples add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); ...
HTMLMediaElement: suspend event - Web APIs
the suspend event is fired when media data loading has been suspended. bubbles no cancelable no interface event
target element default action none event handler property globaleventhandlers.onsuspend specification html5 media examples these examples add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('dat...
IDBIndex.objectStore - Web APIs
idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.
target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.openCursor() - Web APIs
a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.
target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.unique - Web APIs
e our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.
target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBKeyRange.bound() - Web APIs
y 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.'); } }; }; specification specification status comment i...
IDBKeyRange.lower - Web APIs
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.'); } }; }; specification specification status comment ...
IDBKeyRange.lowerBound() - Web APIs
ng 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 specification status comment ...
IDBKeyRange.lowerOpen - Web APIs
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 displayed.'); } }; }; specification specification status comment in...
IDBKeyRange.only() - Web APIs
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 specification status comment in...
IDBKeyRange.upper - Web APIs
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.'); } }; }; specification specification status comment ...
IDBKeyRange.upperBound() - Web APIs
ng 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 specification status comment ...
IDBKeyRange.upperOpen - Web APIs
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 displayed.'); } }; }; specification specification status comment ...
IDBKeyRange - Web APIs
ng 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 status comment indexed database api 2...
IDBObjectStore.createIndex() - Web APIs
pulate the task list with // all the to-do list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open(). (see above.) // it is only implemented in recent browsers. ...
IDBObjectStore.index() - Web APIs
r a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.
target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBObjectStore.openCursor() - Web APIs
r key range is invalid. 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 } }; specification specification status comment indexed database api 2.0the definition of 'opencursor()' in that specification. recommendation ...
IDBOpenDBRequest.onblocked - Web APIs
h // all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the // database needs to be created. either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers 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 ...
ImageCapture - Web APIs
e referenced through a valid mediastreamtrack. constructor imagecapture() creates a new imagecapture object which can be used to capture still frames (photos) from a given mediastreamtrack which represents a video stream. properties imagecapture.track read only returns a reference to the mediastreamtrack passed to the constructor. methods the imagecapture interface is based on event
target, so it includes the methods defined by that interface as well as the ones listed below. imagecapture.takephoto() takes a single exposure using the video capture device sourcing a mediastreamtrack and returns a promise that resolves with a blob containing the data. imagecapture.getphotocapabilities() returns a promise that resolves with a photocapabilities object containing the ranges of ava...
Basic concepts - Web APIs
cularly magical, as it can be many different things, depending on how the request was generated (for example, an idbcursor instance, or the key for a value that you just inserted into the database). indexeddb uses dom events to notify you when results are available. dom events always have a type property (in indexeddb, it is most commonly set to "success" or "error"). dom events also have a
target property that indicates where the event is headed. in most cases, the
target of an event is the idbrequest object that was generated as a result of doing some database operation. success events don't bubble up and they can't be canceled. error events, on the other hand, do bubble, and can be cancelled. this is quite important, as error events abort whatever transactions they're running in, unless...
Checking when a deadline is due - Web APIs
we then loop through all the items in the cursor for as long as there is a valid item left in the cursor. switch(cursor.value.month) { case "january": var monthnumber...
IntersectionObserver.unobserve() - Web APIs
if the specified element isn't being observed, this method does nothing and no exception is thrown. return value undefined. example this snippet simply shows an observer being created, an element being observed, and then being unobserved. var observer = new intersectionobserver(callback); observer.observe(document.getelementbyid("elementtoobserve")); /* ... ...
IntersectionObserverEntry.boundingClientRect - Web APIs
the intersectionobserverentry interface's read-only boundingclientrect property returns a domrectreadonly which in essence describes a rectangle describing the smallest rectangle that contains the entire
target element. syntax var boundsrect = intersectionobserverentry.boundingclientrect; value a domrectreadonly which describes the smallest rectangle that contains every part of the
target element whose intersection change is being described. this value is obtained using the same algorithm as element.getboundingclientrect(), so refer to that article for details on precisely what is done to obtain this rectangle and what is and is not included within its bounds. in the general case, however, it's safe to simply think of this as the bounds rectangle of the
target element. specific...
IntersectionObserverEntry.isIntersecting - Web APIs
the intersectionobserverentry interface's read-only isintersecting property is a boolean value which is true if the
target element intersects with the intersection observer's root. if this is true, then, the intersectionobserverentry describes a transition into a state of intersection; if it's false, then you know the transition is from intersecting to not-intersecting. syntax var isintersecting = intersectionobserverentry.isintersecting; value a boolean value which indicates whether the
target element has transitioned into a state of intersection (true) or out of a state of intersection (false). example in this simple example, an intersection callback is used to update a counter of how many
targeted elements are currently intersecting with the intersection root. function intersectionca...
IntersectionObserverEntry.rootBounds - Web APIs
syntax var rootbounds = intersectionobserverentry.rootbounds; value a domrectreadonly which describes the root intersection rectangle. for roots which are the document's viewport, this rectangle is the bounds rectangle of the entire document. otherwise, it's the bounds of the root element. this rectangle is offset by the values in intersectionobserver.rootmargin. ...
IntersectionObserverEntry.time - Web APIs
the intersectionobserverentry interface's read-only time property is a domhighrestimestamp that indicates the time at which the intersection change occurred relative to the time at which the document was created. syntax var time = intersectionobserverentry.time; value a domhighrestimestamp which indicates the time at which the
target element experienced the intersection change described by the intersectionobserverentry. the time is specified in milliseconds since the creation of the containing document. example see timing element visibility with the intersection observer api for a complete example which uses the time property to track how long elements are visible to the user. specifications specification status comment intersection observerthe definit...
Key Values - Web APIs
mposition keys keys used when using an input method editor (ime) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard. common examples include chinese, japanese, korean, and hindi. some keys are common across multiple languages, while others exist only on keyboards
targeting specific languages. in addition, not all keyboards have all of these keys. common ime keys keyboardevent.key value description virtual keycode windows mac linux android "allcandidates" the all candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input. gdk_key_multiplecandidat...
KeyboardEvent.keyCode - Web APIs
lly the decimal ascii (rfc 20) or windows 1252 code corresponding to the key. if the key can't be identified, this value is 0. you should avoid using this if possible; it's been deprecated for some time. instead, you should use keyboardevent.code, if it's implemented. unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all
target browsers. web developers shouldn't use the keycode attribute for printable characters when handling keydown and keyup events. as described above, the keycode attribute is not useful for printable characters, especially those input with the shift or alt key pressed. when implementing a shortcut key handler, the keypress event is usually better (at least when gecko is the runtime in use). see gec...
KeyframeEffect - Web APIs
the keyframeeffect interface of the web animations api lets us create sets of animatable properties and values, called keyframes. these can then be played using the animation() constructor. constructor keyframeeffect() returns a new keyframeeffect object instance, and also allows you to clone an existing keyframe effect object instance. properties keyframeeffect.
target gets and sets the element, or originating element of the pseudo-element, being animated by this object. this may be null for animations that do not
target a specific element or pseudo-element. keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object. this may be null for animations that do not
target a pseudo-element. keyframeeffect.iterationcomposite g...
KeyframeEffectOptions - Web APIs
te is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. pseudoelement optional the selector of the pseudo-element to be
targeted, if any. defaults to null. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the nu...
Location - Web APIs
ia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :
target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :
target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.st...
MediaDevices - Web APIs
the mediadevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. in essence, it lets you obtain access to any hardware source of media data. properties inherits properties from its parent interface, event
target. events devicechange fired when a media input or output device is attached to or removed from the user's computer. also available via the ondevicechange property. methods inherits methods from its parent interface, event
target. enumeratedevices() obtains an array of information about the media input and output devices available on the system. getsupportedconstraints() returns an object conforming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamt...
MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status changing. this is basically an alias for event
target.addeventlistener(), for backwards compatibility purposes. older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from event
target in newer browsers. syntax mediaquerylist.addlistener(func) parameters func a function or function reference representing the callback function you want to run when the media query status changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard function...
MediaQueryList.removeListener() - Web APIs
syntax mediaquerylist.removelistener(func) parameters func a function or function reference representing the callback function you want to remove. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, and the callback is a standard function. return value void. ...
MediaQueryList - Web APIs
starts or stops evaluating to true). this is very useful for adaptive design, since this makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status. properties the mediaquerylist interface inherits properties from its parent interface, event
target. matchesread only a boolean that returns true if the document currently matches the media query list, or false if not. mediaread only a domstring representing a serialized media query. methods the mediaquerylist interface inherits methods from its parent interface, event
target. addlistener() adds to the mediaquerylist a callback which is invoked whenever the media query status—wh...
Recording a media element - Web APIs
merge the chunks into a single blob whose mime type is "video/webm" by taking advantage of the fact that the blob() constructor concatenates arrays of objects into one object. then url.createobjecturl() is used to create an url that references the blob; this is then made the value of the recorded video playback element's src attribute (so that you can play the video from the blob) as well as the
target of the download button's link. then the download button's download attribute is set. while the download attribute can be a boolean, you can also set it to a string to use as the name for the downloaded file. so by setting the download link's download attribute to "recordedvideo.webm", we tell the browser that clicking the button should download a file named "recordedvideo.webm" whose contents ar...
Using the MediaStream Recording API - Web APIs
first, we display a prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip container, which is an <article> element. <article class="clip"> <audio controls></audio> <p>your clip name</p> ...
MediaTrackSettings - Web APIs
erty, specifying true if echo cancellation is enabled, otherwise false. latency a double-precision floating point value indicating the current value of the latency property, specifying the audio latency, in seconds. latency is the amount of time which elapses between the start of processing the audio and the data being available to the next stop in the audio utilization process. this value is a
target value; actual latency may vary to some extent for various reasons. noisesuppression a boolean which indicates the current value of the noisesupression property, which is true if noise suppression is enabled and is false otherwise. samplerate a long integer value indicating the current value of the samplerate property, specifying the sample rate in samples per second of the audio data. stan...
MessagePort.close() - Web APIs
the close() method of the messageport interface disconnects the port, so it is no longer active. this stops the flow of messages to that port. note: this feature is available in web workers. syntax port.close() returns void. parameters none. example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using event
target.addeventlistener. channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specificat...
MouseEvent.offsetX - Web APIs
syntax var xoffset = instanceofmouseevent.offsetx; return value a double floating point value. early versions of the spec defined this as an integer. see the browser compatibility section for details. ...
MouseEvent.offsetY - Web APIs
syntax var yoffset = instanceofmouseevent.offsety; return value a double floating point value. early versions of the spec defined this as an integer. see the browser compatibility section for details. ...
MouseScrollEvent - Web APIs
levent. method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomevent
target related
targetarg, in long axis); attributes attribute type description axis read only long indicates scroll direction. constants delta modes constant value description horizontal_axis 0x01 the event is caused by horizontal wheel operation. vertical_axis 0x02 the event is caused by vertical wheel operation...
MutationEvent - Web APIs
n events. mutation events list the following is a list of all 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 event
target.addeventlistener() as follows: element.addeventlistener("domnodeinserted", function (event) { // ... }, false); the event object is passed to the listener in a mutationevent (see its definition in the specification) for most events, and mutationnameevent for domattributenamechanged and domelementnamechanged. ...
MutationObserver.disconnect() - Web APIs
tions that have already been detected, but not yet reported to the observer, are discarded. usage notes if the element being observed is removed from the dom, and then subsequently released by the browser's garbage collection mechanism, the mutationobserver is likewise deleted. example this example creates an observer, then disconnects from it, leaving it available for possible reuse. const
targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(
targetnode, observeroptions); /* some time later... */ observer.disconnect(); specifications specification status comment domthe definition of 'mutationobserver.disconnect()' in that speci...
MutationObserver.takeRecords() - Web APIs
jects, each describing one change applied to the observed portion of the document's dom tree. note: the queue of mutations which have occurred, but not been delivered to the observer's callback is left empty after calling takerecords(). example in this example, we demonstrate how to handle any undelivered mutationrecords by calling takerecords() just before disconnecting the observer. 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... */ /* handle any still-pending mutations */ let mutations = observer.takerecords(); observer.disconnect(); if (mutations) { callback(m...
MutationObserverInit.characterData - Web APIs
o start observing the node or subtree is called any time the contents of a text node are changed. you can expand the capabilities of attribute mutation monitoring using other options: characterdataoldvalue lets you specify whether or not you want the previous value of changed text nodes to be provided using the mutationrecord's oldvalue property. subtree lets you specify whether to watch the
target node and all of its descendants (true), or just the
target node (false). if you set characterdataoldvalue to true, characterdata is automatically assumed to be true, even if you don't expressly set it as such. example specifications specification status comment domthe definition of 'mutationobserverinit.characterdata' in that specification. living standard ...
MutationObserverInit.characterDataOldValue - Web APIs
rocessinginstruction, and comment interfaces. syntax var options = { characterdataoldvalue: true | false } value a boolean value indicating whether or not to set the mutationrecord's oldvalue property to be a string containing the value of the character node's contents prior to the change represented by the mutation record. by default, only changes to the text of the node specified as the
target parameter when you called observe() are monitored. to watch for changes to the text contents of all descendants of
target, set the subtree option to true. if you set characterdataoldvalue to true, characterdata is automatically assumed to be true, even if you don't expressly set it as such. example specifications specification status comment domthe definition of 'm...
MutationObserverInit.childList - Web APIs
rue, your callback will be invoked any time nodes are added to or removed from the dom node or nodes being watched. syntax var options = { childlist: true | false } value a boolean value indicating whether or not to invoke the callback function when new nodes are added to or removed from the section of the dom being monitored.. if subtree is false, only the node indicated by the observer's
target node is monitored for changes. setting subtree to true causes addition or removal of nodes anywhere within the subtree rooted at
target to be reported. example specifications specification status comment domthe definition of 'mutationobserverinit.childlist' in that specification. living standard ...
MutationObserverInit.subtree - Web APIs
the mutationobserverinit dictionary's optional subtree property can be set to true to monitor the
targeted node and all of its descendants. the default value, false, indicates only the
target node itself is to be monitored for changes. subtree can be used in concert with the other options to extend monitoring of attributes, text content, and child lists to the entire subtree rooted at the
target node. syntax var options = { subtree: true | false } value a boolean value. the default, false, indicates that only the
target node specified when calling mutationobserver.observe() is to be monitored for changes. changing this value to true causes the entire subtree rooted at the specified
target node to be monitored for the changes indicated by the other options. for example, to watch the tar...
MutationRecord - Web APIs
dividual dom mutation. it is the object that is passed to mutationobserver's callback. 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. mutationrecord.
target node returns the node the mutation affected, depending on the mutationrecord.type. for attributes, it is the element whose attribute changed. for characterdata, it is the characterdata node. for childlist, it is the node whose children changed. mutationrecord.addednodes nodelist return the nodes added. will be an empty nodelist if no nodes were added. mut...
NDEFReader - Web APIs
tible nfc devices, e.g. nfc tags supporting ndef, when these devices are within the reader's magnetic induction field. constructor ndefreader.ndefreader() returns an ndefreader with configuration specified in the parameters or default ones if no parameters are specified. properties in addition to the properties listed below, ndefreader inherits properties from its parent interface, event
target. ndefreader.onreading an event handler for reading event, that notifies about availability of a new reading. ndefreader.onerror an event handler for error event which is called to notify that an error occured during reading. methods the ndefreader interface inherits the methods of event
target, its parent interface. ndefreader.scan() called to activate the reader (after ensuring...
Navigator.registerContentHandler() - Web APIs
syntax navigator.registercontenthandler(mimetype, uri, title); mimetype is the desired mime type as a string. uri is the uri to the handler as a string. title is the title of the handler presented to the user as a string. ...
Node.nodeValue - Web APIs
specifications specification status comment domthe definition of 'node: nodevalue' in that specification. living standard ...
Notation - Web APIs
inherits methods and properties from node. its nodename is the notation name. has no parent. properties notation.publicid read only is a domstring. notation.systemid read only is a domstring. specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'notation' in that specification. ...
Notification - Web APIs
the notification is displayed. methods static methods these methods are available only on the notification object itself. notification.requestpermission() requests permission from the user to display notifications. instance methods these properties are available only on an instance of the notification object or through its prototype. the notification object also inherits from the event
target interface. notification.close() programmatically closes a notification instance. 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 gra...
Using the Notifications API - Web APIs
tion. close triggered once the notification is closed. error triggered if something goes wrong with the notification; this is usually because the notification couldn't be displayed for some reason. show triggered when the notification is displayed to the user. these events can be tracked using the onclick, onclose, onerror, and onshow handlers. because notification also inherits from event
target, it's possible to use the addeventlistener() method on it. replacing existing notifications it is usually undesirable for a user to receive a lot of notifications in a short space of time — for example, what if a messenger application notified a user for each incoming message, and they were being sent a lot? to avoid spamming the user with too many notifications, it's possible to modify the p...
OVR_multiview2 - Web APIs
views of the framebuffer object attachment. framebuffer_attachment_texture_base_view_index_ovr base view index of the framebuffer object attachment. max_views_ovr the maximum number of views. most vr headsets have two views, but there are prototypes of headset with ultra-wide fov using 4 views which is currently the maximum number of views supported by multiview. framebuffer_incomplete_view_
targets_ovr if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete. calling checkframebufferstatus for a framebuffer in this state returns framebuffer_incomplete_view_
targets_ovr. methods framebuffertexturemultiviewovr() simultaneously renders to multiple elements of a 2d te...
OfflineAudioContext.OfflineAudioContext() - Web APIs
an audiobuffer. this works in exactly the same way as when you create a new audiobuffer with the audiocontext.createbuffer() method. for more detail, read audio buffers: frames, samples and channels from our basic concepts guide. return value a new offlineaudiocontext object whose associated audiobuffer is configured as requested. like a regular audiocontext, an offlineaudiocontext can be the
target of events, therefore it implements the event
target interface. example const offlinectx = new offlineaudiocontext({ numberofchannels: 2, length: 44100 * 40, samplerate: 44100, }); const source = offlinectx.createbuffersource(); // etc... for a full working example, see our offline-audio-context-promise github repo (see the source code too.) specifications specification stat...
PerformanceEventTiming - Web APIs
pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns the associated event's cancelable attribute. performanceeventtiming.
target returns the associated event's last
target, if it is not removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const ...
PointerEvent.isPrimary - Web APIs
ce compatibility mouse events (see pointer_events for more information about pointer, mouse and touch interaction). syntax var isprimary = pointerevent.isprimary; return value isprimary returns true if the pointer for this event is the primary pointer and returns false otherwise. example this example illustrates using the value of isprimary to call the appropriate processing function.
target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_pointer(event); }, false); specifications specification status comment pointer events – level 2the definition of 'isprimary' in that specification. recommendation non-stable version. pointer eventsthe definition ...
PointerEvent.pointerId - Web APIs
alue may be randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointerevent.pointerid; return value id the pointer event's unique identifier number. example the following code snippet compares a previously saved pointerid with the one of the pointerdown event that was just fired. let id; // let's assume that this is a previously saved pointerid
target.addeventlistener('pointerdown', function(event) { // compare previous event's id that was cached // to current event's id and handle accordingly if (id === event.pointerid) process_event(event); }, false); specifications specification status comment pointer events – level 2the definition of 'pointerid' in that specification. recommendation non-stable versi...
PointerEvent.pointerType - Web APIs
the device type cannot be detected by the browser, the value can be an empty string (""). if the browser supports pointer device types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different types of devices. example this example illustrates using the value of the pointertype property to call the appropriate pointer type processing function. ...
PointerEvent.width - Web APIs
ent may produce a different value. if the input hardware cannot report the contact geometry to the browser, the width defaults to 1. syntax var contactwidth = pointerevent.width; return value contactwidth the width of the event's contact area (in css pixels). example this example illustrates using the pointerevent interface's width and height properties to calculate the contact area.
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. recommendation non-stable version. pointer eventsthe definition of 'width' in that specification. obsolete ...
PointerEvent - Web APIs
the pointerevent interface represents the state of a dom event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc. a pointer is a hardware agnostic representation of input devices (such as a mouse, pen or contact point on a touch-enable surface). the pointer can
target a specific coordinate (or set of coordinates) on the contact surface such as a screen. a pointer's hit test is the process a browser uses to determine the
target element for a pointer event. typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media. constructors pointerevent() creates a synthetic—and untrusted—pointerev...
RTCConfiguration - Web APIs
ansportpolicy optional the current ice transport policy; this must be one of the values from the rtcicetransportpolicy enumeration. if the policy isn't specified, all is assumed by default, allowing all candidates to be considered. a value of relay limits the candidates to those relayed through another server, such as a stun or turn server. peeridentity optional a domstring which specifies the
target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the given name. rtcpmuxpolicy optional the rtcp mux policy to use when gathering ice candidates, in order to support non-multiplexed rtcp. the value must be one of those from the rtcrtcpmuxpolicy enum. the defau...
RTCOutboundRtpStreamStats - Web APIs
{domxref("rtcstats.id", "id")}} of the rtcaudiosenderstats or rtcvideosenderstats object containing statistics about this stream's rtcrtpsender. slicount an integer indicating the number of times this sender received a slice loss indication (sli) frame from the remote peer, indicating that one or more consecutive video macroblocks have been lost or corrupted. available only for video streams.
targetbitrate a value indicating the bit rate the rtcrtpsender's codec is configured to attempt to achieve in its output media. totalencodedbytes
target a cumulative sum of the
target frame sizes (the
targeted maximum size of the frame in bytes when the codec is asked to compress it) for all of the frames encoded so far. this will likely differ from the total of the actual frame sizes. totalencodetim...
RTCPeerConnection() - Web APIs
tun and/or turn servers. if this isn't specified, the connection attempt will be made with no stun or turn server available, which limits the connection to local peers. icetransportpolicy optional the current ice transport policy; this must be one of the values from the rtcicetransportpolicy enum. if this isn't specified, "all" is assumed. peeridentity optional a domstring which specifies the
target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the given name. rtcpmuxpolicy optional the rtcp mux policy to use when gathering ice candidates, in order to support non-multiplexed rtcp. the value must be one of those from the rtcrtcpmuxpolicy enum. the defau...
RTCPeerConnection: idpassertionerror event - Web APIs
an event handler for this event can be added using the rtcpeerconnection.onidpassertionerror property. bubbles no cancelable no interface rtcidentityerrorevent event handler property onidpassertionerror warning: this event is no longer used; instead, you can detect an assertion error by detecting when the promise returned by rtcpeerconnection.peeridentity is rejected. ...
TextTrack: cuechange event - Web APIs
e is changed. this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement. 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 standardthe definition of 'cuechange' in that specification. living standard ...
TextTrackCue - Web APIs
d work with those derived types. these cues represent a string of text that is presented for some duration of time during the performance of a texttrack. the cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information. properties this interface also inherits properties from event
target. texttrackcue.track read only the texttrack that this cue belongs to, or null if it doesn't belong to any. texttrackcue.id a domstring that identifies the cue. texttrackcue.starttime a double that represents the video time that the cue will start being displayed, in seconds. texttrackcue.endtime a double that represents the video time that the cue will stop being displayed, in seconds.
Touch() - Web APIs
the touch() constructor creates a new touch object. 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 event
target, 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. "clienty", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, excluding any scroll offset. "screenx", optional and defaulting to 0, of type doubl...
Touch - Web APIs
including any scroll offset. touch.pagex read only returns the x coordinate of the touch point relative to the left edge of the document. unlike clientx, this value includes the horizontal scroll offset, if any. touch.pagey read only returns the y coordinate of the touch point relative to the top of the document. unlike clienty, this value includes the vertical scroll offset, if any. touch.
target read only returns the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in ...
TouchEvent() - Web APIs
r creates a new touchevent. syntax event = new touchevent(typearg, toucheventinit); values typearg is a domstring representing the name of the event. 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. "ctrlkey", optional and defaulting to...
TouchEvent.touches - Web APIs
touches is a read-only touchlist listing all the touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they've changed or what their
target element was at touchstart time. you can think of it as how many separate fingers are able to be identified as touching the screen. syntax var touches = touchevent.touches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their
target element was at touchstart time. example this example illustrates the touchevent object's touchevent.touches property. the touchevent.touches property is a touchlist object and containing a list of touch objects for every poin...
Supporting both TouchEvent and MouseEvent - Web APIs
, noting the browser may fire both touch events and mouse events in response to the same user input. this section describes the requirement that may affect an application. if the browser fires both touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events. consequently, if an application does not want mouse events fired on a specific touch
target element, the element's touch event handlers should call preventdefault() and no additional mouse events will be dispatched. here is a code snippet of the touchmove event handler calling preventdefault(). // touchmove handler function process_touchmove(ev) { // call preventdefault() to prevent any further handling ev.preventdefault(); } event order although the specific ordering of touch ...
TrackDefaultList - Web APIs
the trackdefaultlist interface represents a simple container list for multiple trackdefault objects. the trackdefaultlist associated with a particular sourcebuffer can be retrieved using the sourcebuffer.trackdefaults property. constructor trackdefaultlist() constructs and returns a new trackdefaultlist object. properties inherits properties from its parent interface, event
target. trackdefaultlist.length read only returns the number of trackdefault objects in the list. methods inherits properties from its parent interface, event
target. trackdefaultlist.trackdefault() this getter allows the trackdefault objects in the list to be accessed with an array operator (i.e. [].) examples tbd. ...
TrackEvent - Web APIs
letrackevent, 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": ...
UIEvent.initUIEvent() - Web APIs
once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific event constructors, like uievent(). the page on creating and triggering events gives more information about the way to use these. ...
UIEvent.layerX - Web APIs
ue is relative to the top left of the positioned element. syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
UIEvent.layerY - Web APIs
e is relative to the top left of the positioned element. syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
UIEvent.pageY - Web APIs
is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document, when the mouse event fired. this property takes into account any vertical scrolling of the page. ...
URL - Web APIs
ally create a new url object by specifying the url as a string when calling its constructor, or by providing a relative url and a base url. you can then easily read the parsed components of the url or make changes to the url. if a browser doesn't yet support the url() constructor, you can access a url object using the window interface's window.url property. be sure to check to see if any of your
target browsers require this to be prefixed. note: this feature is available in web workers. constructor new url() creates and returns a url object referencing the url specified using an absolute url string, or a relative url string and a base url string. properties hash a usvstring containing a '#' followed by the fragment identifier of the url. host a usvstring containing the domain (tha...
URL API - Web APIs
perty is ?user=someguy&page=news. 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 destination within the site. other functions within urlsearchparams let you change the value of keys, add and delete keys and their values, and even sort the list of parameters. url api interfaces the url api is a simple one, with only a couple of int...
USBDevice.controlTransferIn() - Web APIs
en received from the usb device. syntax var promise = usbdevice.controltransferin(setup, length) parameters setup an object that sets options for . 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". request: a vendor-specific command. value: vender-specific request parameters. index: the interface number of the recipient. length the maximum number of bytes to read from the device. the actual data is in the usbintransferresult in the resolved promise. return value promise that resolves with a u...
USBDevice.controlTransferOut() - Web APIs
een transmitted to the usb device. syntax var promise = usbdevice.controltransferout(setup, data) parameters setup an object that sets options for . 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". request: a vendor-specific command. value: vender-specific request parameters. index: the interface number of the recipient. data a typedarray containing the data that will be transfered to the device. not all commands require data; some commands can send data just through the value parameter. check w...
VisualViewport - Web APIs
l window has a visual viewport that's distinct from the layout viewport. therefore, it's generally only the visualviewport object of the top-level window that's useful. for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like document.documentelement.clientwidth. properties visualviewport also inherits properties from its parent, event
target. visualviewport.offsetleft read only returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in css pixels. visualviewport.offsettop read only returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in css pixels. visualviewport.pageleft read only returns the x coordinate of the visual viewport rela...
Visual Viewport API - Web APIs
t pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewport origin. var viewport = event.
target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + ...
WEBGL_depth_texture - Web APIs
l.depth_component and gl.depth_stencil. the type parameter now accepts gl.unsigned_short, gl.unsigned_int, and ext.unsigned_int_24_8_webgl. the pixels parameter now accepts an arraybufferview of type uint16array and uint32array. this extension extends webglrenderingcontext.framebuffertexture2d(): the attachment parameter now accepts gl.depth_stencil_attachment. incorrectly stated as the
target parameter in the specification, see https://www.khronos.org/bugzilla/show_bug.cgi?id=674. examples var ext = gl.getextension('webgl_depth_texture'); gl.teximage2d(gl.texture_2d, 0, gl.depth_component, 512, 512, 0, gl.depth_component, gl.unsigned_short, null); specifications specification status comment webgl_depth_texturethe definition of 'webgl_depth_texture' in ...
WebGL2RenderingContext.beginQuery() - Web APIs
possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. ...
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format. syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(
target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(
target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters
target a glenum specifying the binding point (
target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of det...
WebGL2RenderingContext.endQuery() - Web APIs
possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. return value none. ...
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
the webgl2renderingcontext.framebuffertexturelayer() method of the webgl 2 api attaches a single layer of a texture to a framebuffer. this method is similar to webglrenderingcontext.framebuffertexture2d(), but only a given single layer of the texture level is attached to the attachment point. syntax void gl.framebuffertexturelayer(
target, attachment, texture, level, layer); parameters
target a glenum specifying the binding point (
target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible values:...
WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed information about a given
target. syntax any gl.getindexedparameter(
target, index); parameters
target a glenum specifying the
target for which to return information. possible values: gl.transform_feedback_buffer_binding: returns a webglbuffer. gl.transform_feedback_buffer_size: returns a glsizeiptr. gl.transform_feedback_buffer_start: returns a glintptr. gl.uniform_buffer_binding: returns a webglbuffer. gl.uniform_buffer_size: returns a glsizeiptr. gl.uniform_buffer_start: returns a glintptr. index a gluint specifying the index of the
target that is queried. return value depends on the requested information (as specified with
target). examples var binding = gl.get...
WebGL2RenderingContext.getQuery() - Web APIs
the webgl2renderingcontext.getquery() method of the webgl 2 api returns the currently active webglquery for the
target, or null. syntax webglquery gl.getquery(
target, pname); parameters
target a glenum specifying the
target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. pname a glenum specifying the query object
target. must be gl.current_query. return value a webglquery object. ex...
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. attachments an array of glenum specifying the attachment points to invalidate. ...
WebGLRenderbuffer - Web APIs
description the webglrenderbuffer object does not define any methods or properties of its own and its content is not directly accessible. ...
WebGLRenderingContext.bindRenderbuffer() - Web APIs
the webglrenderingcontext.bindrenderbuffer() method of the webgl api binds a given webglrenderbuffer to a
target, which must be gl.renderbuffer. syntax void gl.bindrenderbuffer(
target, renderbuffer); parameters
target a glenum specifying the binding point (
target). possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. renderbuffer a webglrenderbuffer object to bind. return value none. exceptions a gl.invalid_enum error is thrown if
target is not gl.renderbuffer. examples binding a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); gl.bindrenderbuffer(gl.renderbuffer, renderbuffer); getting current bindings to check the curren...
WebGLRenderingContext.bindTexture() - Web APIs
the webglrenderingcontext.bindtexture() method of the webgl api binds a given webgltexture to a
target (binding point). syntax void gl.bindtexture(
target, texture); parameters
target a glenum specifying the binding point (
target). possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. texture a webgltexture object to bind. return value none. exceptions a gl.invalid_enum error is thrown if
target is not gl.texture_2d, gl.texture_cube_map, gl.texture_3d, or gl.texture_2d_array. examples binding a texture var canvas = document.g...
WebGLRenderingContext.createRenderbuffer() - Web APIs
the webglrenderingcontext.createrenderbuffer() method of the webgl api creates and initializes a webglrenderbuffer object. syntax webglrenderbuffer gl.createrenderbuffer(); parameters none. return value a webglrenderbuffer object that stores data such an image, or can be source or
target of an rendering operation. examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'createrenderbuffer' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgenrenderbuffers' in that specification. standard man page of the (similar) opengl a...
WebGLRenderingContext.generateMipmap() - Web APIs
generates a set of mipmaps for a webgltexture object. mipmaps are used to create distance with objects. a higher-resolution mipmap is used for objects that are closer, and a lower-resolution mipmap is used for objects that are farther away. it starts with the resolution of the texture image and halves the resolution until a 1x1 dimension texture image is created. syntax void gl.generatemipmap(
target); parameters
target a glenum specifying the binding point (
target) of the active texture whose mipmaps will be generated. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a tw...
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. pname a glenum specifying the information to query. possible values: gl.renderbuffer_width: returns a glint indicating the width of the image of the currently bound renderbuffer. ...
WebGLRenderingContext.getTexParameter() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. pname a glenum specifying the information to query. ...
WebGLRenderingContext.hint() - Web APIs
possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap(). when using the oes_standard_derivatives extension: ext.fragment_shader_derivative_hint_oes: accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth. ...
WebGLRenderingContext.makeXRCompatible() - Web APIs
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 handlestartbuttonclick(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 ...
WebGLRenderingContext.renderbufferStorage() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. internalformat a glenum specifying the internal format of the renderbuffer. possible values: gl.rgba4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits. gl.rgb565: 5 red bits, 6 green bits, 5 blue bits. ...
WebGLRenderingContext.texParameter[fi]() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. ...
WebGLRenderingContext.vertexAttribPointer() - Web APIs
n bytes of the first component in the vertex attribute array. must be a multiple of the byte length of type. return value none. exceptions a gl.invalid_value error is thrown if offset is negative. a gl.invalid_operation error is thrown if stride and offset are not multiples of the size of the data type. a gl.invalid_operation error is thrown if no webglbuffer is bound to the array_buffer
target. when using a webgl 2 context, a gl.invalid_operation error is thrown if this vertex attribute is defined as a integer in the vertex shader (e.g. uvec4 or ivec4, instead of vec4). description let's assume we want to render some 3d geometry, and for that we will need to supply our vertices to the vertex shader. each vertex has a few attributes, like position, normal vector, or texture coordina...
Color masking - Web APIs
e = 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]...
Raining rectangles - Web APIs
't get any animation. timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to relative position inside the canvas. // in addition we need to remember that vertical position in // webgl increases from bottom to top, unlike in the browser // window. var position = [ evt.pagex - evt.
target.offsetleft, gl.drawingbufferheight - (evt.pagey - evt.
target.offsettop), ]; // if the click falls inside the rectangle, we caught it. // increment score and create a new rectangle. var diffpos = [ position[0] - rainingrect.position[0], position[1] - rainingrect.position[1] ]; if ( diffpos[0] >= 0 && diffpos[0] < rainingrect.size[0] && diffpos[1] >= 0 && diffpos[1] < ...
Compressed texture formats - Web APIs
re_s3tc extension.) these can then be used with compressedteximage[23]d or compressedtexsubimage[23]d instead of teximage2d calls. note that webgl makes no functionality available to compress or decompress textures: they must already be in a compressed format and can then be directly uploaded to video memory. all formats support 2d textures. which formats support texture_2d_array and texture_3d
targets (in combination with compressedteximage3d) are noted in the following table. compressed texture extensions and which
targets they support. extension notes texture_2d_array texture_3d webgl_compressed_texture_astc yes yes webgl_compressed_texture_atc not usable with compressedtexsubimage2d/copytexsubimage2d. no no webgl_compre...
WebGL constants - Web APIs
0x8824 maximum number of draw buffers oes_vertex_array_object constant name value description vertex_array_binding_oes 0x85b5 the bound vertex array object (vao). ext_disjoint_timer_query constant name value description query_counter_bits_ext 0x8864 the number of bits used to hold the query result for the given
target. current_query_ext 0x8865 the currently active query. query_result_ext 0x8866 the query result. query_result_available_ext 0x8867 a boolean indicating whether or not a query result is available. time_elapsed_ext 0x88bf elapsed time (in nanoseconds). timestamp_ext 0x8e28 the current time. gpu_disjoint_ext 0x8fbb...
Matrix math for the web - Web APIs
re written for clarity of explanation, not for speed or memory management. these functions create a lot of new arrays, which can be particularly expensive for real-time operations due to garbage collection. in real production code it would be best to use optimized functions. glmatrix is an example of a library that has a focus on speed and performance. the focus in the glmatrix library is to have
target arrays that are allocated before the update loop. translation matrix a translation matrix is based upon the identity matrix, and is used in 3d graphics to move a point or object in one or more of the three directions (x, y, and/or z). the easiest way to think of a translation is like picking up a coffee cup. the coffee cup must be kept upright and oriented the same way so that no coffee is spi...
WebGL: 2D and 3D graphics for the web - Web APIs
s webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcontext interface. it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render
targets, fragment depth. see also the blog post "webgl 2 lands in firefox" and webglsamples.org/webgl2samples for a few demos. guides and tutorials below, you'll find an assortment of guides to help you learn webgl concepts and tutorials that offer step-by-step lessons and examples. guides data in webgl a guide to variables, buffers, and other types of data used when writing webgl code. webgl ...
High-level guides - Web APIs
ecture, the life cycle of a webrtc connection, and basic security and technological issues you might run into as you explore and build web content or apps using the webrtc api. in addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know which parts of the overall suite of webrtc features can be safely used given your
target audience. there are no subpages at this time. when you're ready to explore webrtc in more depth, be sure to take a look at our low-level guide to webrtc. ...
WebRTC API - Web APIs
rtcpeerconnection.getstats(). details about using webrtc statistics can be found in webrtc statistics api. rtcicecandidate represents a candidate interactive connectivity establishment (ice) server for establishing an rtcpeerconnection. rtcicetransport represents information about an ice transport. rtcpeerconnectioniceevent represents events that occur in relation to ice candidates with the
target, usually an rtcpeerconnection. only one event is of this type: icecandidate. rtcrtpsender manages the encoding and transmission of data for a mediastreamtrack on an rtcpeerconnection. rtcrtpreceiver manages the reception and decoding of data for a mediastreamtrack on an rtcpeerconnection. rtctrackevent the interface used to represent a track event, which indicates that an rtcrtpreceiver obj...
Lighting a WebXR setting - Web APIs
factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation relative to each polygon, and so forth. the viewer position and distance. the surface material and reflectivity. the concavity or convexity of the surface at the
target location. the position, color, directionality, and brightness of each light source in the scene. the color and brightness of any ambient light in the scene; this is light which is applied equally throughout the scene, with no source and thus no shadows or variation in brightness. the effect of light reflected off of other surfaces within the scene; the color, directionality, and brightness of ...
WebXR performance guide - Web APIs
in this guide, we'll examine a variety of suggestions and recommendations that will help you make your webxr app as performant as possible. rendering tips ... ...
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original
target for this event is the document that has loaded. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on the document: domcontentloaded event. a different event, load, should be used only to detect a fully-loaded page. it is a common mistake to use load where domcontentloaded would be more appropriate. examples basic...
Window: animationcancel event - Web APIs
an animationend event. this might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using css. therefore, either directly or because any of its containing nodes are hidden. bubbles yes cancelable no interface animationevent event handler property onanimationcancel the original
target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationcancel. examples this code adds a listener to the animationcancel event. window.addeventlistener('animationcancel', () => { console.log('animation cancele...
Window: animationend event - Web APIs
ationend event is fired when a css animation has completed. if the animation aborts before reaching completion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired. bubbles yes cancelable no interface animationevent event handler property onanimationend the original
target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationend. examples this example listens for the animationend event: window.addeventlistener('animationend', () => { console.log('animation ended'); }); the sa...
Window: animationiteration event - Web APIs
ent is fired when an iteration of a css animation ends, and another one begins. this event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one. bubbles yes cancelable no interface animationevent event handler property onanimationiteration the original
target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationiteration. examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0; window.
Window: animationstart event - Web APIs
re once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original
target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: window.addeventlistener('animationstart', () => { console.l...
Window.name - Web APIs
gets/sets the name of the window's browsing context. 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. browsing contexts do not need to have names. it has also been used in some frameworks for providing cross-domain messaging (e.g., sessionvars and dojo's dojox.io.windowname) as a more secure alternative to jsonp. modern web applications hosting sensitive data should, however, not rely on window.name for cross-domain messaging ...
Window.ondragdrop - Web APIs
; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered. the window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener. see addeventlistener for details. example fire an alert on dragdrop in this example, an event listener is added to the window (the event
target). if, from an external source, a tab, a link, marked text or a file is dragged and dropped onto this window, the alert is fired. note how event.stoppropagation(); prevents the browser from loading the dropped tab, link or file. <html> <head><title>dragdroptest</title> <script type="text/javascript"> window.addeventlistener("dragdrop", testfunc, false); function testfunc(event) { alert("dr...
Window: orientationchange event - Web APIs
event is fired when the orientation of the device has changed. 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 specification. living standard...
Window: transitioncancel event - Web APIs
the transitioncancel event is fired when a css transition is canceled. see globaleventhandlers.ontransitioncancel for more information. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel the original
target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitioncancel. examples this code adds a listener to the transitioncancel event: window.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property in...
XRInputSourceEvent() - Web APIs
nected. squeezestart sent to an xrsession when an input source begins its primary squeeze action, indicating that the user has begun to grab, squeeze, or grip the controller. examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene. 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. working draft initial definition. ...
XRInputSourceEvent.inputSource - Web APIs
e user input event. this event indicates an action the user has taken using a webxr input controller, such as a hand controller, motion sensing device, or other input apparatus. example the snippet below shows a handler for the select event which looks specifically for events which happen on gaze input devices. the device type is identified by looking at the xrinputsource in inputsource and its
targetraymode property. 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. working draft initial definition. ...
XRInputSourceEvent - Web APIs
nected. squeezestart sent to an xrsession when an input source begins its primary squeeze action, indicating that the user has begun to grab, squeeze, or grip the controller. examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene. 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. working draft initial definition. ...
XRInputSourcesChangeEvent - Web APIs
. examples the following example shows how to set up an event handler which uses inputsourceschange events to detect newly-available pointing devices and to load their models in preparation to display them in the next animation frame. ...
XRRenderState - Web APIs
the xrrenderstate interface of the webxr device api contains configurable values which affect how the imagery generated by an xrsession gets composited. these properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the xrwebgllayer being used as the
target for rendering the scene prior to it being presented on the xr device's display or displays. when you apply changes using the xrsession method updaterenderstate(), the specified changes take effect after the current animation frame has completed, but before the next one begins. properties the followiing properties are available on xrrenderstate objects. baselayer read only the xrwebgllayer from which the bro...
XRSession.onselect - Web APIs
t event. example this example handles select event which occur on the user's main hand (as given by a user object's handedness property); if that value matches the value of the xrinputsource property handedness, we know that the device is held in the user's main hand. 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. working draft initial definition...
XRSession.onsqueezeend - Web APIs
eference to an object representing the held item. if heldobject has an object reference, that object is passed to a function called cancelobjectdrag(), which would be written to return the object to its original position. this takes care of the situation in which the drag is aborted or canceled. xrsession.onsqueezeend = event => { if (event.inputsource.handedness == user.handedness) { let
targetraypose = event.frame.getpose(event.inputsource.
targetrayspace, myrefspace; if (user.heldobject) { cancelobjectdrag(user.heldobject); } } }; this code presumes that if the user actually intentionally completed the drag, user.heldobject will be null here. that's because (in this example, at least) the handler for the squeeze event has already dropped the object into its new loca...
XRSpace - Web APIs
cts may move within the space, the space itself remains fixed in place. there are exceptions to this static nature; most commonly, an xrreferencespace may move in order to adjust based on reconfiguration of the user's headset or other motion-sensitive device. properties the xrspace interface defines no properties of its own; however, it does inherit the properties of its parent interface, event
target. methods the xrspace interface provides no methods of its own. however, it inherits the methods of event
target, its parent interface. specifications specification status comment webxr device apithe definition of 'xrspace' in that specification. working draft initial definition. ...
XRSystem - Web APIs
the webxr device api interface xrsystem provides methods which let you get access to an xrsession object representing a webxr session. with that xrsession in hand, you can use it to interact with the augmented reality (ar) or virtual reality (vr) device. properties while xrsystem directly offers no properties, it does inherit properties from its parent interface, event
target. methods in addition to inheriting methods from its parent interface, event
target, the xrsystem interface includes the following methods: issessionsupported() returns a promise which resolves to true if the browser supports the given xrsessionmode. resolves to false if the specified mode isn't supported. requestsession() returns a promise that resolves to a new xrsession with the specified xrsessionmode. e...
ARIA: Main role - Accessibility
ssible, prefer using it instead. 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.). this allows the user to access the main content of the page faster. adding an id attribute to the element with a declaration of role="main" allows it to be a
target of a skip navigation link. <body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <div id="main-content" role="main"> <!-- main page content --> </div> </body> webaim: "skip navigation" links added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen re...
ARIA: switch role - Accessibility
">speaker power</label> javascript this javascript code defines and applies a function to handle click events on switch widgets. the function changes the aria-checked attribute from true to false, or vice versa. document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.addeventlistener("click", handleclickevent, false); }); function handleclickevent(evt) { let el = evt.
target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. button.switch { margin: 0; padding: 0; width: 70px; height: 26px; border: 2px solid black; displ...
ARIA: textbox role - Accessibility
be maintained, and forms submission on enter or return on a single line textbox needs to be handled. focus event handler and aria-activedescendent attribute if you are implementing a composite widget, such as a combobox composed of a text box and a listbox, you need to manage the aria-activedescendent attribute using a handler. before using this technique, ensure that the browsers you need to
target currently support it. see the specification of aria-descendent for further information. it is a better practice to use an <input> element with type="text", or a <textarea> element instead of the aria textbox role. when using either semantic element, the aria textbox role is not necessary. see notes on using aria in html. possible effects on user agents and assistive technology when the tex...
Understanding the Web Content Accessibility Guidelines - Accessibility
standable: the content must be understandable to its users. robust: the content must be developed using well-adopted web standards that will work across different browsers, now and in the future. should i use wcag 2.0 or 2.1? wcag 2.1 is the most recent and relevant accessibility standard. use wcag 2.1 to help more people with disabilities and reduce the future legal risk for web site owners.
target wcag 2.0 first when allocating resources. then step up to wcag 2.1. what is wcag 2.1? wcag 2.1 was published as an official recommendation on 05 june 2018. the european union (eu) adopted wcag 2.1 as the digital accessibility standard in september 2018. w3c published a press release wcag 2.1 adoption in europe. wcag 2.1 includes: all of wcag 2.0 (verbatim, word-for-word) 17 new success c...
-webkit-touch-callout - CSS: Cascading Style Sheets
this property allows disabling that behavior. /* keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed. none the callout is disabled. ...
::slotted() - CSS: Cascading Style Sheets
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more information). this only works when used inside css placed within a shadow dom. note also that this selector won't select a text node placed into a slot; it only
targets actual elements. /* selects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* selects any <span> placed inside a slot */ ::slotted(span) { font-weight: bold; } syntax ::slotted( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-s...
:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an element (such as a button) that is being activated by the user. when using a mouse, "activation" typically starts when the user presses down the primary mouse button. /* selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button> elements. other common
targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>. styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :active rule after all other link-related rules, as defined by the...
:any-link - CSS: Cascading Style Sheets
ndent of whether it has been visited. in other words, it matches every <a>, <area>, or <link> element that has an href attribute. thus, it matches all elements that match :link or :visited. /* 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 ':any-link' in that specification. working draft initial definit...
:dir() - CSS: Cascading Style Sheets
n from their parent. (similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in contrast, :dir() will match the value calculated by the user agent, even if inherited. note: in html, the direction is determined by the dir attribute. other document types may have different methods. syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to
target. parameters ltr
target left-to-right elements. rtl
target right-to-left elements. 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 specifi...
:first-of-type - CSS: Cascading Style Sheets
te: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be
targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.
:indeterminate - CSS: Cascading Style Sheets
ndeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. ...
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
for example, the following css: /* 3-deep (or more) unordered lists use a square */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, ul ol ul, ul ul u...
:lang() - CSS: Cascading Style Sheets
'; } note: in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers). for other document types there may be other document methods for determining the language. syntax formal syntax :lang( <language-code> ) parameter <language-code> a <string> representing the language you want to
target. acceptable values are specified in the html spec. examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators. note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. also note that unicode values are used to specify some of the special quote characters. htm...
:last-of-type - CSS: Cascading Style Sheets
note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be
targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type { backgrou...
:link - CSS: Cascading Style Sheets
default, most browsers apply a special color value to visited links. thus, the links in this example will probably have special font colors only before you visit them. (after that, you'll need to clear your browser history to see them again.) however, the background-color values are likely to remain, as most browsers do not set that property on visited links by default. 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. living standard selectors level 4the d...
@page - CSS: Cascading Style Sheets
in the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet. marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. ...
Adjacent sibling combinator - CSS: Cascading Style Sheets
the adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. /* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element +
target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification. working draft renames it the "next-sibling" combinator. selectors level 3the definition of 'adjacent sibling combinator' in that specification. recommend...
Using CSS animations - CSS: Cascading Style Sheets
loaded in order to set things up. var element = document.getelementbyid("watchme"); element.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for event
target.addeventlistener(). the last thing this code does is set the class on the element we'll be animating to “slidein”; we do this to start the animation. why? because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. so we’ll start the animation ourselves by setting the class of the element to the style that gets animated after ...
Styling Columns - CSS: Cascading Style Sheets
as column boxes created inside multicol containers are anonymous boxes, there is little we can do to style them. however, we do have a few things that we can do. this guide explains how to change the gap and style rules between columns. can i style the column boxes? sadly, not at present. the anonymous boxes that make up your columns can’t be
targeted in any way, meaning it isn’t possible to change a box's background color or have one column larger than the others. perhaps in future versions of the specification it might be. for now, however, we are able to change the spacing and add lines between columns. the column-gap property the gap between our columns is controlled by the column-gap property. this property was originally defined in the multi-column layout specification. however, i...
Basic concepts of flexbox - CSS: Cascading Style Sheets
flex-wrap into the flex-flow shorthand. the first value specified is flex-direction and the second value is flex-wrap. in the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap. properties applied to flex items to have more control over flex items we can
target them directly. we do this by way of three properties: flex-grow flex-shrink flex-basis we will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide controlling ratios of flex items on the main axis. before we can make sense of these properties we need to consider the concept of available space. what we are doing when we change the va...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
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". flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - collapsed items this behaviour is useful if you want to
target flex items using javascript to show and hide content for example. the example in the specification demonstrates one such pattern. in the following live example i have a non-wrapped flex container. the third item has more content than the others yet is set to visibility: collapse and therefore the flex container is retaining a strut of the height required to display this item. if you remove visib...
Ordering Flex Items - CSS: Cascading Style Sheets
ab order continues to follow the order that the items are listed in the source. in the same way that changing the value of flex-direction does not change the order in which items are navigated to, changing this value does not change paint order. it is a visual reversal of the items only. the order property in addition to reversing the order in which flex items are visually displayed, you can
target individual items and change where they appear in the visual order with the order property. the order property is designed to lay the items out in ordinal groups. what this means is that items are assigned an integer that represents their group. the items are then placed in the visual order according to that integer, lowest values first. if more than one item has the same integer value, then with...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
the future we may not need to make a container a flex container just to centre a single item, as the box alignment properties will ultimately be implemented in block layout. for now however, if you need to properly centre one thing inside another, flexbox is the way to do it. as in the above example, make a container into a flex container, and then use either align-items on the parent element or
target the flex item itself with align-self. card layout pushing footer down whether you use flexbox or css grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. this means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. any content inside uses regular block layou...
Block and inline layout in normal flow - CSS: Cascading Style Sheets
box can break onto a new line. the lines created are known as line boxes. in the following example, we have three inline boxes created by a paragraph with a <strong> element inside it. the boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot
target directly. the line box size in the block direction (so the height when working in english) is defined by the tallest box inside it. in the next example, i have made the <strong> element 300%; that content now defines the height of the line box on that line. find out more about how block and inline boxes behave in our guide to the visual formatting model. the display property and flow layout ...
General sibling combinator - CSS: Cascading Style Sheets
the general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element. /* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~
target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification. working draft...
Mozilla CSS extensions - CSS: Cascading Style Sheets
moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-drag
targetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communica...
CSS reference - CSS: Cascading Style Sheets
oll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:
targettarget-counter()
target-counters()
target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offs...
border - CSS: Cascading Style Sheets
nnot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none. the border shorthand is especially useful when you want all four borders to be the same. to make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side. alternatively, you can
target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties. borders vs. outlines borders and outlines are very similar. however, outlines differ from borders in the following ways: outlines never take up space, as they are drawn outside of an element's content. according to the spec, outlines don't have to be rectangular, although the...
clip-path - CSS: Cascading Style Sheets
candidate recommendation extends its application to html elements. the clip-path property replaces the deprecated clip property. scalable vector graphics (svg) 1.1 (second edition)the definition of 'clip-path...
<color> - CSS: Cascading Style Sheets
stead. -moz-comboboxtext text color for combo-boxes. should be used with the -moz-combobox background color. in versions prior to 1.9.2, use -moz-fieldtext instead. -moz-dialog background color for dialog boxes. should be used with the -moz-dialogtext foreground color. -moz-dialogtext text color for dialog boxes. should be used with the -moz-dialog background color. -moz-drag
targetzone -moz-eventreerow background color for even-numbered rows in a tree. should be used with the -moz-fieldtext foreground color. in gecko versions prior to 1.9, use -moz-field. see also -moz-oddtreerow. -moz-html-cellhighlight background color for highlighted item in html <select>s. should be used with the -moz-html-cellhighlighttext foreground color. prior to gecko 1.9, use -moz-cell...
filter - CSS: Cascading Style Sheets
ntage><hue> = <number> | <angle> examples applying filter functions examples of using the predefined functions are shown below. see each function for a specific example. .mydiv { filter: grayscale(50%); } /* gray all images by 50% and blur by 10px */ img { filter: grayscale(0.5) blur(10px); } applying svg filters examples of using the url function with an svg resource are as follows: .
target { filter: url(#c1); } .mydiv { filter: url(commonfilters.xml#large-blur); } specifications specification status comment filter effects module level 1the definition of 'filter' in that specification. working draft initial definition. ...
justify-content - CSS: Cascading Style Sheets
working draft adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values. css flexible box layout modulethe definition of 'justify-content' in that sp...
touchstart - Event reference
the touchstart event is fired when one or more touch points are placed on the touch surface. two types of object can be the
target of this event. element: touchstart document: touchstart bubbles yes cancelable yes interface touchevent event handler property ontouchstart specifications specification status touch events recommendation ...
Adding captions and subtitles to HTML5 video - Developer guides
subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions. the ::cue pseudo-element is the key to
targetting individual text track cues for styling, as it matches any defined cue. there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the text colour of the text track c...
Setting up adaptive streaming media sources - Developer guides
bout these tools at using http live streaming. index files (playlists) the hls index file (much like mpeg-dash's .mpd file) contains the information on where all the media segments reside, as well as other meta data such as bandwidth application. apple uses the .m3u8 format (an extension of its .m3u playlist format) for index files — see below for an example: #ext-x-version:3 #extm3u #ext-x-
targetduration:10 #ext-x-media-sequence:1 # old-style integer duration; avoid for newer clients. #extinf:10, http://media.example.com/segment0.ts # new-style floating-point duration; use for modern clients. #extinf:10.0, http://media.example.com/segment1.ts #extinf:9.5, http://media.example.com/segment2.ts #ext-x-endlist note: comprehensive information on how to encode media for apple's hls format c...
DOM onevent handlers - Developer guides
function or object that is registered to be notified of events or more specifically, to the mechanism of registering event listeners via on… attributes in html or properties in web apis, such as <button onclick="alert(this)"> or window.onload = function() { … }. when discussing the various methods of listening to events: event listener refers to a function or object registered via event
target.addeventlistener() event handler refers to a function registered via on… attributes or properties specifications specification status comment html living standardthe definition of 'event handlers' in that specification. living standard html5the definition of 'event handlers' in that specification. recommendation browser compatibility...
Using HTML sections and outlines - Developer guides
n be nested inside of other sectional html elements. you do not nest an <aside> inside an <aside>. meaning a call out box would not have a call-out box inside. using html5 elements in non-html5 browsers sections and headings elements can be made to work in most non-html5 browsers with a couple of extra steps, and in this section we'll show you how. if a significant percentage of your particular
target audience is using internet explorer 8 or older, then you can follow the below instructions to make them behave as expected. however, global usage of these browsers is now very small, so this is unlikely. html5 semantic elements don't need a special dom interface, but they will need a specific css styling in older browser that don't support them explicitly. unknown elements are styled as display:...
Mobile-friendliness - Developer guides
low connection.” though things have been getting better in recent years, browsing the internet over a wireless data connection can still be pretty painful. this makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need. know your audience while not strictly a part of the definition of being mobile friendly, defining who your
target audience is makes these goals much more concrete. for example, it is absolutely critical to keep in mind which browsers and devices you will
target when picking a mobile strategy. if your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. on the other hand, if many of your site’s users are on devices with less capable browsers, that ma...
Separate sites for mobile and desktop - Developer guides
. even more important than that, though, is the fact that user-agent detection is inherently flawed, and anything but future-proof. every time a new browser comes out, you must adjust your algorithm to accommodate it. and false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally. when it is right to choose this option firstly, if your
target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. this is because the default browsers on some feature-phones do not support the same markup that you would use to code a website
targeted at the desktop, but instead understand formats like xhtml-mp or the older wml. this factor aside, there is one...
Printing - Developer guides
er and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process). note: you can also use window.onbeforeprint and window.onafterprint to assign handlers for these events, but using event
target.addeventlistener() is preferred. examples here are some common examples. 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/ht...
HTML attribute: required - HTML: Hypertext Markup Language
ired, but has no bearing on the optionality of the element. attribute interactions because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or textarea is required. in addition,
target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. this improves usability for sited user. 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. constraint v...
HTML attribute: size - HTML: Hypertext Markup Language
the size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. if css
targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. <label for="fruit">enter a fruit</label> <input type="text" size="15" id...
<dfn>: The Definition element - HTML: Hypertext Markup Language
r? aperiendum est igitur, quid sit voluptas; quid enim? non est igitur voluptas bonum. urgent tamen et nihil remittunt. quid enim possumus hoc agere divinius? </p> <p>because of all of that, we decided to use the <code><a href="#definition-dfn"><dfn></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. result the resulting content looks like this: using abbreviations and definitions together in some cases, you may wish to use an abbreviation for a term when defining it. this can be done by using the <dfn> and <abbr> elements in tandem, like this: ht...
<frame> - HTML: Hypertext Markup Language
reen readers. instead of the <frame> element, <iframe> may be preferred. attributes like all other html elements, this element supports the global attributes. src this attribute specifies the document that will be displayed by the frame. name this attribute is used for labeling frames. without labeling, every link will open in the frame that it’s in – the closest parent frame. see the
target attribute for more information. noresize this attribute prevents resizing of frames by users. scrolling this attribute defines the existence of a scrollbar. if this attribute is not used, the browser adds a scrollbar when necessary. 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. marginheight thi...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
with an indication of leaving the current site. this attribute is not well understood nor supported, even by the defining browser, internet explorer 4. prefetch secure context this attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. this allows the user agent to respond faster when the resource is requested in the future.
target defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource. obsolete attributes charset this attribute defines the character encoding of the linked resource. the value is a space- and/or comma-delimited list of character sets as defined in rfc 2045. the default value is iso-8859-1. usage note: to produce the same e...
<main> - HTML: Hypertext Markup Language
laring 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.). this lets the user access the main content of the page faster. adding an id attribute to the <main> element lets it be a
target of a skip navigation link. <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 convert...
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
ement. <nav> is intended only for major block of navigation links; typically the <footer> element often has a list of links that don't need to be in a <nav> element. a document may have several <nav> elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility, see example. user agents, such as screen readers
targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content. examples in this example, a <nav> block is used to contain an unordered list (<ul>) of links. with appropriate css, this can be presented as a sidebar, navigation bar, or drop-down menu. <nav class="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a>...
<span> - HTML: Hypertext Markup Language
that accepts flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlspanelement (before html5, the interface was htmlelement) attributes this element only includes the global attributes. 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. living standard html5the definition of '<span>' in that specification. recommendation the dom interface is now htmlspanelement. ht...
<template>: The Content Template element - HTML: Hypertext Markup Language
me 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. } the result is the original html table, with two new rows appended to it via javascript: table { background: #000; } table td { background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid
target for various events, as such it is often preferable to clone or refer to the elements within it. consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>click me</div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function clickhandler(event) { alert("...
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the
target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null). this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well). note that when noopener is used, nonempty
target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab. specifications specifica...
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the
target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified. specifications specification status comment html living standardthe definition of 'noreferrer' in that specification. living standard ...
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the
target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. specifications specification status comment html living standardthe definition of 'preconnect' in that specification. living standard ...
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need the
target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. specifications specification status comment html living standardthe definition of 'prefetch' in that specification. living standard ...
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the rel attribute of the <link> element is a hint to browsers that the user might need the
target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen. specifications specification status comment html living standardthe definition of 'prerender' in that specification. living standard ...
MIME types (IANA media types) - HTTP
on of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later. audio and video types as is the case for images, html doesn't mandate that web browsers support any specific file and codec types for the <audio> and <video> elements, so it's important to consider your
target audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media. our media container formats guide provides a list of the file types that are commonly supported by web browsers, including information about what their special use cases may be, any drawbacks they have, and compatibility information, along with other deta...
Content-Language - HTTP
r language codes to be used. examples indicating the language a document is written in the global lang attribute is used on html elements to indicate the language of an entire html document or parts of it. <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. content-language: de, en specifications specification title rfc 7231, section 3.1.3.2: content-language hypertext transfer protocol (http/1.1): semantics and content ...
CSP: form-action - HTTP
whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. ...
CSP: sandbox - HTTP
sture from the user. allow-forms allows the page to submit forms. if this keyword is not used, this operation is not allowed. allow-modals allows the page to open modal windows. allow-orientation-lock allows the page to disable the ability to lock the screen orientation. allow-pointer-lock allows the page to use the pointer lock api. allow-popups allows popups (like from window.open,
target="_blank", showmodaldialog). if this keyword is not used, that functionality will silently fail. allow-popups-to-escape-sandbox allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. this will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page. allow-presentation allows embedd...
Content-Security-Policy - HTTP
ricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded. sandbox enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. navigation directives navigation directives govern to which locations a user can navigate or submit a form, for example. form-action restricts the urls which can be used as the
target of a form submissions from a given context. frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc. reporting directives reporting directives contr...
DNT - HTTP
the dnt (do not track) request header indicates the user's tracking preference. it lets users indicate whether they would prefer privacy rather than personalized content. header type request header forbidden header name yes syntax dnt: 0 dnt: 1 dnt: null directives 0 the user prefers to allow tracking on the
target site. 1 the user prefers not to be tracked on the
target site. null the user has not specified a preference about tracking. 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 'dn...
Index - HTTP
ll use this value for it: 34 csp: font-src csp, directive, http, reference, security the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. 35 csp: form-action csp, directive, http, security the http content-security-policy (csp) form-action directive restricts the urls which can be used as the
target of a form submissions from a given context. 36 csp: frame-ancestors csp, directive, http, security the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. 37 csp: frame-src csp, directive, http, reference, security the http content-security-poli...
Location - HTTP
used in the original request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know). all responses with one of these status codes send a location header. in cases of resource creation, it indicates the url to the newly created resource. location and content-location are different: location indicates the
target of a redirection (or the url of a newly created resource), while content-location indicates the direct url to use to access the resource when content negotiation happened, without the need of further content negotiation. location is a header associated with the response, while content-location is associated with the entity returned. header type response header forbidden head...
Firefox user agent string reference - HTTP
in the platform part of the ua string. when firefox runs on a tablet device, there is a tablet; token in the platform part of the ua string instead. for example: mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 the version numbers are not relevant. avoid inferring materials based on these. the preferred way to
target content to a device form factor is to use css media queries. however, if you use ua sniffing to
target content to a device form factor, please look for mobi (to include opera mobile, which uses "mobi") for the phone form factor and do not assume any correlation between "android" and the device form factor. this way, your code will work if/when firefox ships on other phone/tablet operating systems...
HTTP headers - HTTP
web server to decrease the risk of mitm attacks with forged certificates. public-key-pins-report-only sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated. fetch metadata request headers sec-fetch-site it is a request header that indicates the relationship between a request initiator's origin and its
target's origin. it is a structured header whose value is a token with possible values cross-site, same-origin, same-site, and none. sec-fetch-mode it is a request header that indicates the request's mode to a server. it is a structured header whose value is a token with possible values cors, navigate, nested-navigate, no-cors, same-origin, and websocket. sec-fetch-user it is a request header that i...
HTTP Messages - HTTP
an action on the server. their start-line contain three elements: an http method, a verb (like get, put or post) or a noun (like head or options), that describes the action to be performed. for example, get indicates that a resource should be fetched or post means that data is pushed to the server (creating or modifying a resource, or generating a temporary document to send back). the request
target, usually a url, or the absolute path of the protocol, port, and domain are usually characterized by the request context. the format of this request
target varies between different http methods. it can be an absolute path, ultimately followed by a '?' and query string. this is the most common form, known as the origin form, and is used with get, post, head, and options methods. post / ht...
TRACE - HTTP
the final recipient of the request should reflect the message received, excluding some fields described below, back to the client as the message body of a 200 (ok) response with a content-type of message/http. the final recipient is either the origin server or the first server to receive a max-forwards value of 0 in the request. ...
HTTP request methods - HTTP
entation of the specified resource. requests using get should only retrieve data. head the head method asks for a response identical to that of a get request, but without the response body. post the post method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server. put the put method replaces all current representations of the
target resource with the request payload. delete the delete method deletes the specified resource. connect the connect method establishes a tunnel to the server identified by the
target resource. options the options method is used to describe the communication options for the
target resource. trace the trace method performs a message loop-back test along the path to the
target resource. ...
401 Unauthorized - HTTP
this status is sent with a www-authenticate header that contains information on how to authorize correctly. this status is similar to 403, but in this case, authentication is possible. ...
405 Method Not Allowed - HTTP
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the
target resource. the server must generate an allow header field in a 405 response containing a list of the
target resource's currently supported methods. status 405 method not allowed specifications specification title rfc 7231, section 6.5.5: 405 method not allowed hypertext transfer protocol (http/1.1): semantics and content ...
410 Gone - HTTP
if you don't know whether this condition is temporary or permanent, a 404 status code should be used instead. note: a 410 response is cacheable by default. ...
412 Precondition Failed - HTTP
this happens with conditional requests on methods other than get or head when the condition defined by the if-unmodified-since or if-none-match headers is not fulfilled. in that case, the request, usually an upload or a modification of a resource, cannot be made and this error response is sent back. 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. ...
HTTP response status codes - HTTP
i too long the uri requested by the client is longer than the server is willing to interpret. 415 unsupported media type the media format of the requested data is not supported by the server, so the server is rejecting the request. 416 range not satisfiable the range specified by the range header field in the request can't be fulfilled; it's possible that the range is outside the size of the
target uri's data. 417 expectation failed this response code means the expectation indicated by the expect request header field can't be met by the server. 418 i'm a teapot the server refuses the attempt to brew coffee with a teapot. 421 misdirected request the request was directed at a server that is not able to produce a response. this can be sent by a server that is not configured to produce re...
Functions - JavaScript
by the first argument . function multiply(multiplier, ...theargs) { return theargs.map(x => multiplier * x); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6] arrow functions an arrow function expression (previously, and now incorrectly known as fat arrow function) has a shorter syntax compared to function expressions and does not have its own this, arguments, super, or new.
target. arrow functions are always anonymous. see also this hacks.mozilla.org blog post: "es6 in depth: arrow functions". two factors influenced the introduction of arrow functions: shorter functions and non-binding of this. shorter functions in some functional patterns, shorter functions are welcome. compare: var a = [ 'hydrogen', 'helium', 'lithium', 'beryllium' ]; var a2 = a.map(function...
Keyed collections - JavaScript
bject treats each key as a string whether it's a number value, boolean value or any other primitive value. use objects when there is logic that operates on individual elements. weakmap object the weakmap object is a collection of key/value pairs in which the keys are objects only and the values can be arbitrary values. the object references in the keys are held weakly, meaning that they are a
target of garbage collection (gc) if there is no other reference to the object anymore. the weakmap api is the same as the map api. one difference to map objects is that weakmap keys are not enumerable (i.e., there is no method giving you a list of the keys). if they were, the list would depend on the state of garbage collection, introducing non-determinism. for more information and example code, see ...
Regular expressions - JavaScript
case-insensitive search. regexp.prototype.ignorecase m multi-line search. regexp.prototype.multiline s allows . to match newline characters. regexp.prototype.dotall u "unicode"; treat a pattern as a sequence of unicode code points. regexp.prototype.unicode y perform a "sticky" search that matches starting at the current position in the
target string. see sticky. regexp.prototype.sticky to include a flag with the regular expression, use this syntax: var re = /pattern/flags; or var re = new regexp('pattern', 'flags'); note that the flags are an integral part of a regular expression. they cannot be added or removed later. for example, re = /\w+\s/g creates a regular expression that looks for one or more characters follow...
JavaScript technologies overview - JavaScript
rdizes the core document object model, which defines language-agnostic interfaces that abstract html and xml documents as objects, and also defines mechanisms to manipulate this abstraction. among the things defined by the dom, we can find: the document structure, a tree model, and the dom event architecture in dom core: node, element, documentfragment, document, domimplementation, event, event
target, … a less rigorous definition of the dom event architecture, as well as specific events in dom events. other things such as dom traversal and dom range. from the ecmascript point of view, objects defined in the dom specification are called "host objects". html dom html, the web's markup language, is specified in terms of the dom. layered above the abstract concepts defined in dom core, ht...
About the JavaScript reference - JavaScript
these pages often (thus the title "javascript reference"). if you're learning javascript, or need help understanding some of its capabilities or features, check out the javascript guide. the javascript language is intended to be used within some larger environment, be it a browser, server-side scripts, or similar. for the most part, this reference attempts to be environment-agnostic and does not
target a web browser environment. where to find javascript information javascript documentation of core language features (pure ecmascript, for the most part) includes the following: the javascript guide the javascript reference if you are new to javascript, start with the guide. once you have a firm grasp of the fundamentals, you can use the reference to get more details on individual objects a...
SyntaxError: invalid regular expression flag "x" - JavaScript
s'); regular expression flags flag description g global search. i case-insensitive search. m multi-line search. s allow . 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. see sticky examples there are only six valid regular expression flags. /foo/bar; // syntaxerror: invalid regular expression flag "b" did you intend to create a regular expression? an expression containing two slashes is interpreted as a regular expression literal. let obj = { url: /docs/web }; // syntaxerror: invalid regular expression flag "w" or did you mean to create ...
SyntaxError: Unexpected token - JavaScript
the javascript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. this might be a simple typo. 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? a specific language construct was expected, but something else was provided. this might be a simple typo. examples expression expected for example, when chaining expressions, trailing commas are not allowed. for (let i = 0; i < 5,; ++i) { console.log(i); } // syntaxerror: expected expression, got ')...
Number.isInteger() - JavaScript
ive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax number.isinteger(value) parameters value the value to be tested for being an integer. return value a boolean indicating whether or not the given value is an integer. description if the
target value is an integer, return true, otherwise return false. if the value is nan or infinity, return false. the method will also return true for floating point numbers that can be represented as integer. polyfill number.isinteger = number.isinteger || function(value) { return typeof value === 'number' && isfinite(value) && math.floor(value) === value; }; examples using isinteger num...
Object.freeze() - JavaScript
ans are always immutable and that functions and arrays are objects. what is "shallow freeze"? the result of calling object.freeze(object) only applies to the immediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object. if the value of those properties are objects themselves, those objects are not frozen and may be the
target of property addition, removal or value re-assignment operations. 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) // out...
Object.getOwnPropertyDescriptors() - JavaScript
if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. examples creating a shallow clone whereas the object.assign() method will only copy enumerable and own properties from a source object to a
target object, you are able to use this method and object.create() for a shallow copy between two unknown objects: object.create( object.getprototypeof(obj), object.getownpropertydescriptors(obj) ); creating a subclass a typical way of creating a subclass is to define the subclass, set its prototype to an instance of the superclass, and then define properties on that instance. this can get awkwa...
Object.preventExtensions() - JavaScript
on-extensible object, in general, may still be deleted. attempting to add new properties to a non-extensible object will fail, either silently or by throwing a typeerror (most commonly, but not exclusively, when in strict mode). object.preventextensions() only prevents addition of own properties. properties can still be added to the object prototype. this method makes the [[prototype]] of the
target immutable; any [[prototype]] re-assignment will throw a typeerror. this behavior is specific to the internal [[prototype]] property, other properties of the
target object will remain mutable. there is no way to make an object extensible again once it has been made non-extensible. examples using object.preventextensions // object.preventextensions returns the object // being made non-extensibl...
Object - JavaScript
eting a property from an object there isn't any method in an object itself to delete its own properties (such as map.prototype.delete()). to do so, one must use the delete operator. constructor object() creates a new object object. it is a wrapper for the given value. static methods object.assign() copies the values of all enumerable own properties from one or more source objects to a
target object. object.create() creates a new object with the specified prototype object and properties. object.defineproperty() adds the named property described by a given descriptor to an object. object.defineproperties() adds the named properties described by the given descriptors to an object. object.entries() returns an array containing all of the [key, value] pairs of a given object's own ...
Reflect.apply() - JavaScript
the static reflect.apply() method calls a
target function with arguments as specified. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.apply(
target, thisargument, argumentslist) parameters
target the
target function to call. thisargument the value of this provided for the call to
target. argumentslist an array-like object specifying the arguments with which
target should be called. return value the result of calling the given
target function with the specified this value and arguments. exceptions a typeerror, if the
target is not callable. description in es5, you typically use the func...
Reflect.deleteProperty() - JavaScript
the static reflect.deleteproperty() method allows to delete properties. it is like the delete operator as a function. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.deleteproperty(
target, propertykey) parameters
target the
target object on which to delete the property. propertykey the name of the property to be deleted. return value a boolean indicating whether or not the property was successfully deleted. exceptions a typeerror, if
target is not an object. description the reflect.deleteproperty method allows you to delete a property on an object. it returns a boolean indicating whether...
Reflect.get() - JavaScript
the static reflect.get() method works like getting a property from an object (
target[propertykey]) as a function. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.get(
target, propertykey[, receiver]) parameters
target the
target object on which to get the property. propertykey the name of the property to get. receiver optional the value of this provided for the call to
target if a getter is encountered. when used with proxy, it can be an object that inherits from
target. return value the value of the property. exceptions a typeerror, if
target is not an object. description the reflect.g...
Reflect.getPrototypeOf() - JavaScript
method as object.getprototypeof(). it returns the prototype (i.e. the value of the internal [[prototype]] property) of the specified object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.getprototypeof(
target) parameters
target the
target object of which to get the prototype. return value the prototype of the given object. if there are no inherited properties, null is returned. exceptions a typeerror, if
target is not an object. description the reflect.getprototypeof method returns the prototype (i.e. the value of the internal [[prototype]] property) of the specified object. examples us...
Reflect.has() - JavaScript
the static reflect.has() method works like the in operator as a function. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.has(
target, propertykey) parameters
target the
target object in which to look for the property. propertykey the name of the property to check. return value a boolean indicating whether or not the
target has the property. exceptions a typeerror, if
target is not an object. description the reflect.has method allows you to check if a property is in an object. it works like the in operator as a function. examples using reflect.has() reflect.has({x: 0}, 'x') // true re...
Reflect.ownKeys() - JavaScript
the static reflect.ownkeys() method returns an array of the
target object's own property keys. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.ownkeys(
target) parameters
target the
target object from which to get the own keys. return value an array of the
target object's own property keys. exceptions a typeerror, if
target is not an object. description the reflect.ownkeys method returns an array of the
target object's own property keys. its return value is equivalent to object.getownpropertynames(
target).concat(object.getownpropertysymbols(
target)). examples using reflect.ownkeys() ref...
Reflect.set() - JavaScript
the static reflect.set() method works like setting a property on an object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.set(
target, propertykey, value[, receiver]) parameters
target the
target object on which to set the property. propertykey the name of the property to set. value the value to set. receiver optional the value of this provided for the call to
target if a setter is encountered. return value a boolean indicating whether or not setting the property was successful. exceptions a typeerror, if
target is not an object. description the reflect.set method allows you to set ...
RegExp.prototype[@@match]() - JavaScript
the [@@match]() method retrieves the matches when matching a string against a regular expression. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.match](str) parameters str a string that is a
target of the match. return value an array containing the entire match result and any parentheses-captured matched results, or null if there were no matches. description this method is called internally in string.prototype.match(). for example, the following two examples return same result. 'abc'.match(/a/); /a/[symbol.match]('abc'); this method exists for customizing match behavior within rege...
RegExp.prototype[@@matchAll]() - JavaScript
the [@@matchall] method returns all matches of the regular expression against a string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.matchall](str) parameters str a string that is a
target of the match. return value an iterator. description this method is called internally in string.prototype.matchall(). for example, the following two examples return same result. 'abc'.matchall(/a/); /a/[symbol.matchall]('abc'); this method exists for customizing the behavior of matchall() in regexp subclasses. examples direct call this method can be used in almost the same way as string.protot...
RegExp.prototype[@@replace]() - JavaScript
. the replacement can be a string or a function to be called for each match. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.replace](str, newsubstr|function) parameters str a string that is a
target of the replacement. newsubstr (replacement) the string that replaces the substring. a number of special replacement patterns are supported; see the specifying a string as a parameter section in string.prototype.replace() page. function (replacement) a function to be invoked to create the new substring. the arguments supplied to this function are described in the specifying a function as a par...
RegExp.prototype[@@search]() - JavaScript
[@@search]() method executes a search for a match between a this regular expression and a string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.search](str) parameters str a string that is a
target of the search. return value integer if successful, [@@search]() returns the index of the first match of the regular expression inside the string. otherwise, it returns -1. description this method is called internally in string.prototype.search(). for example, the following two examples return the same result. 'abc'.search(/a/); /a/[symbol.search]('abc'); this method exists for customi...
RegExp.prototype[@@split]() - JavaScript
plit]() method splits a string object into an array of strings by separating the string into substrings. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.split](str[, limit]) parameters str the
target of the split operation. limit optional integer specifying a limit on the number of splits to be found. the [@@split]() method still splits on every match of this regexp pattern (or, in the syntax above, regexp), until the number of split items match the limit or the string falls short of this pattern. return value an array containing substrings as its elements. description this method ...
RegExp() constructor - JavaScript
es. in other words, match the beginning or end of each line (delimited by \n or \r), not only the very beginning or end of the whole input string. s ("dotall") allows . to match newlines. u (unicode) treat pattern as a sequence of unicode code points. (see also binary strings). y (sticky) matches only from the index indicated by the lastindex property of this regular expression in the
target string. does not attempt to match from any later indexes. examples literal notation and constructor there are two ways to create a regexp object: a literal notation and a constructor. the literal notation's parameters are enclosed between slashes and do not use quotation marks. the constructor function's parameters are not enclosed between slashes but do use quotation marks. the fol...
RegExp.prototype.compile() - JavaScript
description the compile method is deprecated. you can just use the regexp constructor to achieve the same effect. examples using compile() the following example shows how to recompile a regular expression with a new pattern and a new flag. var regexobj = new regexp('foo', 'gi'); regexobj.compile('new foo', 'g'); specific...
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). a regular expression defined as both sticky and global ignores the global flag. you cannot change this property directly. it is read-only. examples using a regular expression with the sticky flag var str = '#foo#'; var regex = /foo/y; regex.lastindex = 1; regex.test(str); // true regex.lastindex = 5; regex.test(str); // false (la...
RegExp - JavaScript
s is the end' ] note that the order of the patterns in the regular expression matters. 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. let str = '#foo#' let regex = /foo/y regex.lastindex = 1 regex.test(str) // true regex.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, t...
TypedArray.prototype.copyWithin() - JavaScript
the copywithin() method copies the sequence of array elements within the array to the position starting at
target. the copy is taken from the index positions of the second and third arguments start and end. the end argument is optional and defaults to the length of the array. this method has the same algorithm as array.prototype.copywithin. typedarray is one of the typed array types here. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax typedarray.copywithin(
target, start[, end = this.length]) parameters
target target start index position where to copy the elements to. start source start index position w...
WeakRef.prototype.deref() - JavaScript
notes see the notes on weakrefs section of the weakref page for some important notes. examples using deref see the examples section of the weakref page for the complete example. ...
Expressions and operators - JavaScript
syntax. {} object initializer/literal syntax. /ab+c/i regular expression literal syntax. ( ) grouping operator. left-hand-side expressions left values are the destination of an assignment. property accessors member operators provide access to a property or method of an object (object.property and object["property"]). new the new operator creates an instance of a constructor. new.
target in constructors, new.
target refers to the constructor that was invoked by new. super the super keyword calls the parent constructor. ...obj spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected. increment and decrement postfix/prefix increment and postfix/prefix decrement operators. ...
block - JavaScript
y. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax block statement { statementlist } labelled block statement labelidentifier: { statementlist } statementlist statements grouped within the block statement. labelidentifier an optional label for visual identification or as a
target for break. description the block statement is often called compound statement in other languages. it allows you to use multiple statements where javascript expects only one statement. combining statements into blocks is a common practice in javascript. the opposite behavior is possible using an empty statement, where you provide no statement, although one is required. blocks are commonly used...
JavaScript reference - JavaScript
.while for for each...in for...in for...of for await...of while other debugger import label with expressions and operators javascript expressions and operators. ...
MathML attribute reference - MathML
e element. unimplemented indentalign <mo>, <mspace> unimplemented indentalignfirst <mo>, <mspace> unimplemented indentalignlast <mo>, <mspace> unimplemented indentshift <mo>, <mspace> unimplemented indentshiftfirst <mo>, <mspace> unimplemented indentshiftlast <mo>, <mspace> unimplemented indent
target <mo>, <mspace> unimplemented infixlinebreakstyle <mstyle> specifies the default linebreakstyle to use for infix operators. largeop <mo> specifies whether the operator should be drawn larger than normal. length <msline> unimplemented linebreak <mo>, <mspace> unimplemented linebreakmultchar <mo>, <mspace> ...
Autoplay guide for media and Web Audio APIs - Web media technologies
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. handlefirstplay() looks like this: function handlefirstplay(event) { let vid = event.
target; vid.onplay = null; // start whatever you need to do after playback has started } after getting a reference to the video element from the event object's
target, the element's onplay handler is set to null. this will prevent any future play events from being delivered to the handler. that could happen if the video is paused and resumed by the user or automatically by the browser when the do...
Web audio codec guide - Web media technologies
dition, aac is not available in chromium builds. alac (apple lossless audio codec) the apple lossless audio codec (alac or apple lossless) is a lossless codec developed by apple. after initially being a closed format, apple opened it up under an apache license. cross-platform and browser support for alac is not very strong, making it a less than ideal choice for general usage. however, if your
target is primarily macos and ios users, it may be worth considering, as the operating systems have integrated support for alac. otherwise, flac is likely a better choice, if you must use a lossless codec. keep in mind, however, that lossless codecs require substantially more bandwidth and storage capacity, and may not be a good choice outside very specific use cases. supported bit rates b...
Web video codec guide - Web media technologies
econd. less than that, and the video becomes a series of still images. motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. anything from 24 fps upward will generally be seen as satisfactorily smooth; 30 or 60 fps is an ideal
target, depending on your needs. in the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team. codec details av1 the aomedia video 1 (av1) codec is an open format designed by the alliance for open media specifically for internet video. it achieves higher data compression rates than vp9 and h.265/hevc, and as much as 50% higher rates than avc. av1...
The "codecs" parameter in common media types - Web media technologies
ec 22 ebu tech 3213-e 23 – 255 reserved for future use by itu-t or iso/iec tc a two-digit integer indicating the transfercharacteristics for the video. this value is from section 8.2 of iso/iec 23001-8:2016, and indicates the transfer characteristics to be used when adapting the decoded color to the render
target. mc the two-digit value for the matrixcoefficients property. this value comes from the table in section 8.3 of the iso/iec 23001-8:2016 specification. this value indicates which set of coefficients to use when mapping from the native red, blue, and green primaries to the luma and chroma signals. these coefficients are in turn used with the equations found in that same section. ...
Animation performance and frame rate - Web Performance
something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the timeline details. waterfall overview this is showing a compressed view of the waterfall. the predominance of green is telling us that we're spending a lot of time painting. frame rate this is showing frame rate. average frame rate here is 46.67fps, well below the
target of 60fps. worse, though, is that the frame rate is very jagged, with lots of dips into the twenties and teens. it's unlikely you'll see a smooth animation here, especially when you add in user interaction. waterfall the rest of the recording shows the waterfall view. if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation fram...
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
iences from those creating it. by leveraging rum, a business can better understand its users and identify the areas on its site that require the most attention. moreover, rum can help to understand the geographic or channel distribution trends of your users. knowing your user trends helps you better define your business plan and, from a monitoring perspective, allows you to identify key areas to
target for optimization and performance improvements. rum v synthetic synthetic is well suited for catching regressions during development life cycles, especially with network throttling. it is fairly easy, inexpensive, and great for spot-checking performance during development as an effective way to measure the effect of code changes, but it doesn’t reflect what real users are experiencing and prov...
Using dns-prefetch - Web Performance
why use dns-prefetch? when a browser requests a resource from a (third party) server, that cross-origin’s domain name must be resolved to an ip address before the browser can issue the request. this process is known as dns resolution. while dns caching can help to reduce this latency, dns resolution can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. ...
Web Performance
rtant to optimize to reduce causes of lacency and to test site performance emulating high latency to optimizer for users with lousy connections. this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.using dns-prefetchdns-prefetch is an attempt to resolve domain names before resources get requested. this could be a file loaded later or link
target a user tries to follow. beginner's tutorials the mdn web performance learning area contains modern, up-to-date tutorials covering performance essentials. start here if you are a newcomer to performance: web performance: brief overview overview of the web performance learning path. start your journey here. what is web performance? this article starts the module off with a good loo...
Privacy, permissions, and information security
of people to access it, or only allowing the information to be accessed and used for a limited period of time. security security is about the active protection of data or a system against being accessed, downloaded, or operated by people or organizations that don't have permission to do so. good security practices aim to prevent unauthorized access to systems or data, regardless of what the
target is. personal and private information <what kind of information is private or personal?> privacy risks <what are ways personal information can be gotten by third parties?> fingerprinting fingerprinting is a technique used to gather a variety of information that's made available by a user's browser and collating it until it becomes possible to uniquely identify that user's browser. even se...
Graphic design for responsive sites - Progressive web apps (PWAs)
our pages — especially when those graphics and layouts need to adapt to different displays! this is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.) in addition, these days there are so many more technologies to choose from than your humble bmps, jpgs, gifs and pngs. but what should you choose? this really depends on what
target devices you have to support, how complex the graphics need to be, and how much interactivity your graphics require. serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context. for example, if your desktop layout includes a large header graphic and...
accumulate - SVG: Scalable Vector Graphics
this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none animatable no sum specifies that each repeat iteration after the first builds upon the last value of the previous iteration. none specifies that repeat iterations are not cumulative. this attribute is ignored if the
target attribute value does not support addition, or if the animation element does not repeat. this attribute will be ignored if the animation function is specified with only the to attribute. specifications specification status comment svg animations level 2the definition of 'accumulate' in that specification. editor's draft no change scalable vector graphi...
attributeName - SVG: Scalable Vector Graphics
the attributename attribute indicates the name of the css property or attribute of the
target element that is going to be changed during an animation. 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. specifications specification status comm...
id - SVG: Scalable Vector Graphics
none animatable no <id> specifies the element's id. the id must be unique within the node tree, must not be an empty string, and must not contain any whitespace characters. note: you should avoid the use of id values that would be parsed as an svg view specification (e.g., mydrawing.svg#svgview(viewbox(0,200,1000,1000))) or a basic media fragment when used as a url
target fragment. it must be valid in xml documents. a stand-alone svg document uses xml 1.0 syntax, which specifies that valid ids only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character. specifications specification status comment scalable vector gr...
in - SVG: Scalable Vector Graphics
ha has all of the same rules as sourcegraphic except that only the alpha channel is used. backgroundimage this keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked. backgroundalpha same as backgroundimage except only the alpha channel is used. fillpaint this keyword represents the value of the fill property on the
target element for the filter effect. in many cases, the fillpaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts. strokepaint this keyword represents the value of the stroke property on the
target element for the filter effect. in many cases, the strokepaint is opaque everywhere, but tha...
patternUnits - SVG: Scalable Vector Graphics
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" ...
<a> - SVG: Scalable Vector Graphics
e same use cases, see navigator.sendbeacon(). value type: <list-of-urls> ; default value: none; animatable: no referrerpolicy which referrer to send when fetching the url. value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; animatable: no rel the relationship of the
target object to the link object. value type: <list-of-link-types> ; default value: none; animatable: yes
target where to display the linked url. value type: _self|_parent|_top|_blank|<name> ; default value: _self; animatable: yes type a mime type for the linked url. value type: <string> ; default value: none; animatable: yes xlink:href deprecated since svg 2 the url or url fragment that the hy...
<animateColor> - SVG: Scalable Vector Graphics
ad. the <animatecolor> svg element specifies a color transformation over time. usage context categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute
target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface. example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" at...
<feTile> - SVG: Scalable Vector Graphics
the effect is similar to the one of a <pattern>. usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfetileelement interface. ...
<pattern> - SVG: Scalable Vector Graphics
fines the coordinate system for the contents of the <pattern>. value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the
target coordinate system. value type: <transform-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height. value type: userspaceonuse|objectboundingbox; default value: objectboundingbox; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a containe...
<script> - SVG: Scalable Vector Graphics
value type: <string>; default value: ?; animatable: yes href the url to the script to load. value type: <url> ; default value: none; animatable: no type this attribute defines type of th...
Linking - SVG: Scalable Vector Graphics
the
target attribute on the svg <a> element doesn't work in mozilla firefox 1.5. 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. however,
target does not work with mozilla's implementation of the svg <a> element in firefox 1.5. (the problem will be fixed in firefox 2.0.) a...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
fefuncr implemented. fefuncg implemented. fefuncb implemented. fefunca implemented. cursor module cursor not implemented (bug 177193). hyperlinking module a only xlink:href, xlink:show, xlink:
target and xlink:title attributes implemented. view module view implemented in gecko 15.0 (bug 512525). . scripting module script implemented. animation module animate implemented set implemented animatemotion implement...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
pixel: and percent: spatial media fragments implementation status unknown linking to <view> elements does not cause implicit box transformation to show nearest ancestor <svg> element implementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown view
target attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents...
Clipping and masking - SVG: Scalable Vector Graphics
circle "make it" to the final rendering. since the rectangle covers only the upper half of the circle, the lower half of the circle will vanish: screenshotlive sample we now have a semicircle without having to deal with arcs in path elements. for the clipping, every path inside the clippath is inspected and evaluated together with its stroke properties and transformation. then every part of the
target lying in a transparent area of the resulting clippath's content will not be rendered. color, opacity and such have no effect as long as they don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. <svg width="200" height="200" version="1.1" xmlns="h...
SVG fonts - SVG: Scalable Vector Graphics
can simply add a d attribute — this defines a shape for the glyph exactly like how standard svg paths work. the actual glyphs are then defined by <glyph> elements. the most important attribute is unicode. it defines the unicode codepoint represented by this glyph. if you also specify the lang attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the
target) exclusively. again, you can use arbitrary svg to define the glyph, which allows for great effects in supporting user agents. there are two further elements that can be defined inside font: <hkern> and <vkern>. each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. the below ...