ruby-position - CSS: Cascading Style Sheets
under is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts. ...
... under is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts. ...
... under is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts. ...
...And 9 more matches

mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image. /* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. ...
...ultiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outside of the element's box. ...
...he element's box. relative or absolute offsets can be given. note that the position can be set outside of the element's box. ...
...And 8 more matches

<position> - CSS: Cascading Style Sheets
the keyword values are center, top, right, bottom, and left. each keyword represents either an edge of the element's box or the center line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. ...
... the keyword values are center, top, right, bottom, and left. each keyword represents either an edge of the element's box or the center line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. ...
...entage> value or an absolute <length> value. positive values are offset towards the right or the bottom, whichever is appropriate. negative values are offset in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. ...
...And 8 more matches

text-emphasis-position - CSS: Cascading Style Sheets
under draw marks under the text in horizontal writing mode. ...
... under draw marks under the text in horizontal writing mode. ...
... under draw marks under the text in horizontal writing mode. ...
...And 8 more matches

Content-Disposition - HTTP
in a regular http response, the content-disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a web page or as part of a web page, or as an attachment, that is downloaded and saved locally. in a multipart/form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give information about the field it applies to. the subpart is delimited by the boundary defined in the content-type header. used on the body itself, content-disposition has no effect. the content-disposition header is defined in the larger context of mime messages for e-mail, but only a subset of the possible parameters apply to http forms and post requests. only the value form-data, as well as...
...orbidden header name no syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or attachment (indicating it should be downloaded; most browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present). ...
... syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or attachment (indicating it should be downloaded; most browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present). ...
...And 8 more matches

PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in 3d space using the right-hand cartesian coordinate system. the setposition() method's default value of the position is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setposition(0,0,0); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. ...
...you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. ...
...And 7 more matches

object-position - CSS: Cascading Style Sheets
the object-position css property specifies the alignment of the selected replaced element's contents within the element's box. areas of the box which aren't covered by the replaced element's object will show the element's background. you can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property. 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. ...
...djust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property. 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 /* <position> values */ object-position: center top; object-position: 100px 50px; /* global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. formal de...
... of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. ...
...And 7 more matches

AudioListener.setPosition() - Web APIs
the setposition() method of the audiolistener interface defines the position of the listener. the three parameters x, y and z are unitless and describe the listener's position in 3d space according to the right-hand cartesian coordinate system. pannernode objects use this position relative to individual audio sources for spatialisation. the default value of the position vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setposition(1,1,1); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...spatialisation. the default value of the position vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setposition(1,1,1); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...And 6 more matches

SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
... the svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...itioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...And 6 more matches

AudioListener.positionX - Web APIs
the positionx read-only property of the audiolistener interface is an audioparam representing the x position of the listener in 3d cartesian space. note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionx.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...octx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionx.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...And 5 more matches

AudioListener.positionY - Web APIs
the positiony read-only property of the audiolistener interface is an audioparam representing the y position of the listener in 3d cartesian space. note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positiony.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...octx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positiony.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...And 5 more matches

AudioListener.positionZ - Web APIs
the positionz read-only property of the audiolistener interface is an audioparam representing the z position of the listener in 3d cartesian space. note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionz.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...octx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionz.value = 1; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...And 5 more matches

Geolocation.getCurrentPosition() - Web APIs
timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...
... timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...
... timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...
...And 5 more matches

Geolocation.watchPosition() - Web APIs
return value an integer id that identifies the registered handler. ...
... return value an integer id that identifies the registered handler. ...
... return value an integer id that identifies the registered handler. ...
...And 5 more matches

XRPose.emulatedPosition - Web APIs
usage notes there are two basic categories of xr tracking systems. a basic xr headset provides three degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head. ...
... usage notes there are two basic categories of xr tracking systems. a basic xr headset provides three degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head. ...
... usage notes there are two basic categories of xr tracking systems. a basic xr headset provides three degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head. ...
...And 5 more matches

text-underline-position - CSS: Cascading Style Sheets
the text-underline-position css property specifies the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...osition css property specifies the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 5 more matches

Element Positioning - Archive of obsolete content
the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. ...
...the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. ...
...the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. ...
...And 4 more matches

CSSPositionValue.x - Web APIs
the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis. syntax var x = csspositionvalue.x value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
... the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis. syntax var x = csspositionvalue.x value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
... the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis. syntax var x = csspositionvalue.x value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
...And 4 more matches

CSSPositionValue.y - Web APIs
the y property of the csspositionvalue interface returns the item's position along the vertical axis. syntax var y = csspositionvalue.y value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
... the y property of the csspositionvalue interface returns the item's position along the vertical axis. syntax var y = csspositionvalue.y value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
... the y property of the csspositionvalue interface returns the item's position along the vertical axis. syntax var y = csspositionvalue.y value a cssnumericvalue. example the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
...And 4 more matches

CompositionEvent - Web APIs
the dom compositionevent represents events that occur due to the user indirectly entering text. ...
... the dom compositionevent represents events that occur due to the user indirectly entering text. ...
... the dom compositionevent represents events that occur due to the user indirectly entering text. ...
...And 4 more matches

MediaSession.setPositionState() - Web APIs
if the object is empty, the existing playback state information is cleared. return value undefined. ...
...if the object is empty, the existing playback state information is cleared. return value undefined. ...
... user's device in any kind of interface that provides details about ongoing media. this can be particularly useful if your code implements a player for type of media not directly supported by the browser. call this method on the navigator object's mediasession object. ...
...And 4 more matches

list-style-position - CSS: Cascading Style Sheets
the list-style-position css property sets the position of the ::marker relative to a list item. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand list-style. note: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
...: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
... note that there is variance among browsers regarding behavior when a block element is placed first within a list element declared as list-style-position: inside. chrome and safari both place this element on the same line as the marker box, whereas firefox, internet explorer, and opera place it on the next line. for more information on this, see bug 36854. syntax /* keyword values */ list-style-position: inside; list-style-position: outside; /* global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the keyword values listed below. values inside the ::marker is the first element among the list item's contents. outside the ::marker is outside the principal block box. formal definit...
...And 3 more matches

popup.position - Archive of obsolete content
if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). ...
... if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). ...
...ed as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or bottomcenter. ...
...And 2 more matches

Mail composition back end
you also have the ability to save rfc822 files to disk, should you need this data for some reason. included in this functionality is the...
...ns copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them. the mail composition back end is responsible for the assembly and creation of rfc822 messages to be delivered either via smtp or nntp services. you also have the ability to save rfc822 files to disk, should you need this data for some reason. included in this functionality is the code to copy the messages to the appropriate locations after delivery (i.e. a "sent" folder) as well as the ability to store messages for f...
...ll be extracted from this object and any embedded objects or links will be sent as part of the message in mhtml nsimsgidentity *auseridentity, - the user identity for the person doing the send operation. this will be needed to determine the appropriate folder for copy operations. nsimsgcompfields *fields, - the message composition fields. this will contain all of the relevant header information for message creation prbool digest_p, - this is a flag that says that most of the documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed. (it's a minor difference.) prbool ...
...And 2 more matches

DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
example this example inserts line breaks wherever you click. the code for it is below the demo. demo html content <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. ...
... example this example inserts line breaks wherever you click. the code for it is below the demo. demo html content <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. ...
...sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. ...
...And 2 more matches

Element: compositionend event - Web APIs
the compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session. for example, this event could be fired after a user finishes entering a chinese character using a pinyin ime. ...
... the compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session. for example, this event could be fired after a user finishes entering a chinese character using a pinyin ime. ...
...ncels the current composition session. for example, this event could be fired after a user finishes entering a chinese character using a pinyin ime. ...
...s const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...

Element: compositionstart event - Web APIs
the compositionstart event is fired when a text composition system such as an input method editor starts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
... the compositionstart event is fired when a text composition system such as an input method editor starts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
...editor starts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
...s const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...

Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. for example, this event could be fired while a user enters a chinese character using a pinyin ime. ...
... the compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. for example, this event could be fired while a user enters a chinese character using a pinyin ime. ...
...omposition system such as an input method editor. for example, this event could be fired while a user enters a chinese character using a pinyin ime. ...
...s const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...

MediaPositionState.duration - Web APIs
the mediapositionstate dictionary's duration property is used when calling the mediasession method setpositionstate() to provide the user agent with the overall total duration in seconds of the media currently being performed. this information can then, in turn, be used by the user agent to provide a user interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. ...
...this value should always be positive. ...
...this value should always be positive. to indicate media of unknown or indeterminate length, such as an ongoing live stream, specify a value of positive infinity (infinity). ...
...ion; value a floating-point value indicating the overall duration, in seconds, of the media being performed. this value should always be positive. to indicate media of unknown or indeterminate length, such as an ongoing live stream, specify a value of positive infinity (infinity). example in this example, an app performing a live stream provides information to the browser by preparing a mediapositionstate object and submitting it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: infinity; playbackrate: 1.0; position: 0.0; }; navigator.mediasession.setpositionstate(positionstate); specifications specification status comment media session standardthe definition of 'mediapositionstate.duration' in that specification. d...

MediaPositionState.playbackRate - Web APIs
the mediapositionstate dictionary's playbackrate property is used when calling the mediasession method setpositionstate() to tell the user agent the rate at which media is currently being played. this information can then, in turn, be used by the user agent to provide a user interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. ...
...r interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current relative rate at which the media being performed is playing. a value of 1.0 indicates the media is playing forward at normal speed, while higher values indicate that the media is being played faster than normal. lower values indicate t...
... more slowly. negative values can be specified to indicate the media is playing in reverse, with decreasing values then indicating faster and faster reverse playback. note: a value of 0.0 is not permitted. example in this example, an app is updating the browser to let it know that the user has clicked a button causing the playback to shift to a double-speed mode. it begins by creating a mediapositionstate object, then submits it to the browser it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: mymediaduration; playbackrate: 2.0; position: mymediaposition; }; navigator.mediasession.setpositionstate(positionstate); note the value 2.0 as the playbackrate. specifications specification status comment media session standa...
... it to the browser it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: mymediaduration; playbackrate: 2.0; position: mymediaposition; }; navigator.mediasession.setpositionstate(positionstate); note the value 2.0 as the playbackrate. specifications specification status comment media session standardthe definition of 'mediapositionstate.playbackrate' in that specification. draft initial definition. ...

Node.compareDocumentPosition() - Web APIs
the node.comparedocumentposition() method reports the position of the given node relative to another node in any document — not just the given node’s document. the return value is a bitmask of the following values: name value document_position_disconnected 1 document_position_preceding 2 document_position_following 4 document_position_contains 8 document_position_contained_by 16 document_position_implementation_specific 32 syntax comparemask = node.comparedocumentposition(othernode) parameters othernode the other node with which to compare the first node’s document position. return value an integer value whose bits represent the othernode's relationship to the calling node. more than ...
...paredocumentposition(othernode) parameters othernode the other node with which to compare the first node’s document position. return value an integer value whose bits represent the othernode's relationship to the calling node. more than one bit is set if multiple scenarios apply. for example, if othernode is located earlier in the document and contains the node on which comparedocumentposition() was called, then both the document_position_contains and document_position_preceding bits would be set, producing a value of 10 (0x0a). ...
... more than one bit is set if multiple scenarios apply. for example, if othernode is located earlier in the document and contains the node on which comparedocumentposition() was called, then both the document_position_contains and document_position_preceding bits would be set, producing a value of 10 (0x0a). example const head = document.head; const body = document.body; if (head.comparedocumentposition(body) & node.document_position_following) { console.log('well-formed document'); } else { console.error('<head> is not before <body>'); } note: because the result returned by comparedocumentposition() is a bitmask, the bitwise and operator must be used for meaningful results. specifications specification status comment domthe definition of 'node.comparedocumentpo...
...e the result returned by comparedocumentposition() is a bitmask, the bitwise and operator must be used for meaningful results. specifications specification status comment domthe definition of 'node.comparedocumentposition()' in that specification. living standard document object model (dom) level 3 core specificationthe definition of 'node.comparedocumentposition()' in that specification. obsolete initial definition ...

PositionOptions - Web APIs
the positionoptions dictionary describes an object containing option properties to pass as a parameter of geolocation.getcurrentposition() and geolocation.watchposition(). properties positionoptions.enablehighaccuracy secure context is a boolean that indicates the application would like to receive the best possible results. if true and if the device is able to provide a more accurate position, it will do so. note that this can result in slower response times or increased power consumption (with a gps chip on a mobile device for example). on the other hand, if false, the device can take the liberty to save resources by responding more quickly and/or using less power. default: false. ...
...eceive the best possible results. if true and if the device is able to provide a more accurate position, it will do so. note that this can result in slower response times or increased power consumption (with a gps chip on a mobile device for example). on the other hand, if false, the device can take the liberty to save resources by responding more quickly and/or using less power. default: false. positionoptions.timeout secure context is a positive long value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. the default value is infinity, meaning that getcurrentposition() won't return until the position is available. ...
...take the liberty to save resources by responding more quickly and/or using less power. default: false. positionoptions.timeout secure context is a positive long value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. the default value is infinity, meaning that getcurrentposition() won't return until the position is available. positionoptions.maximumage secure context is a positive long value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. if set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. if set to infinity the device must return a cached position regardless of its age. default: 0. specifications ...
...milliseconds of a possible cached position that is acceptable to return. if set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. if set to infinity the device must return a cached position regardless of its age. default: 0. specifications specification status comment geolocation apithe definition of 'positionoptions' in that specification. recommendation initial definition ...

XRRigidTransform.position - Web APIs
the units are meters. note: the w component of the point is always 1.0. ...
...the units are meters. note: the w component of the point is always 1.0. ...
...the units are meters. note: the w component of the point is always 1.0. ...
... working draft initial definition. ...

font-variant-position - CSS: Cascading Style Sheets
the font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript. the glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. /* keyword values */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; /* global values */ font-variant-position: inherit; font-variant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the sa...
...racter in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are merely graphically enhanced, and have no effect on the line-height and other box characteristics. syntax the font-variant-position property is specified as one of the keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs. super activates superscript alternate glyphs. if, in a given run, one such ...
...finition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specification. candidate recommendation initial definition. browser compatibility the compatibility table on this page is generated...
... 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. ...

position - Archive of obsolete content
this attribute is ignored if either an insertbefore or insertafter attribute matches an element. ...
...this attribute is ignored if either an insertbefore or insertafter attribute matches an element. ...
...this attribute is ignored if either an insertbefore or insertafter attribute matches an element. ...

Stack Positioning - Archive of obsolete content
« previousnext » this section will describe how to position items in a stack. placement of stack children normally, the child elements of a stack stretch to fit the size of the stack. however, you may also place the children at specific coordinates. for example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge. the second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge. the position of a child element may be specified by placing two attributes on the element. for the horizontal position, use the left attribute and for the vertical position, use the top attribute. if you don't put these attributes on a child of a stack, the child will stretch to fit the size of the stack. ...
...bute and for the vertical position, use the top attribute. if you don't put these attributes on a child of a stack, the child will stretch to fit the size of the stack. example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes. here, all three children are buttons, but the elements do not have to be same type. they may be any element, including boxes and other stacks. the size of a stack is determined by the positions of the child elements. it is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). ...
...h -moz-stack-sizing: ignore). so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. you can override this size with the various style properties such as width and max-width. you can use a script to adjust the value of the left and top attributes and thus make the elements move around. stacks have the advantage that when one absolutely positioned element changes its position, the position of the other elements is not affected. if you tried to move elements in a regular box, other elements might shuffle their positions around. it is also possible to place the child elements so that they overlap. when drawing the child elements, the elements are shown in the order that they appear in the stack. that is, the first child of the stack appea...

Test your skills: position - Learn web development
the aim of this task is to get you working with the css position property and values covered in our lesson on position. you will be working through two small tasks which use different elements of the material you have just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. positioning one in this task you need to position the item with a class of target to the top and right of the container, which has the 5px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can you ...
...ition the item with a class of target to the top and right of the container, which has the 5px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can you change the target to display underneath the text? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. position two in the below example if you scroll the box the sidebar scrolls with the content. change it so that the sidebar stays in place and only the content scrolls. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help ...
...r are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for position skill test 1". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. ...

nsIDOMGeoPosition
read only. timestamp domtimestamp the time at which the reading was taken. read only. ...
...read only. timestamp domtimestamp the time at which the reading was taken. read only. ...
...table this interface describes a geographical location at a specific time. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) attributes attribute type description address nsidomgeopositionaddress the address of the user's current location, if available. read only. coords nsidomgeopositioncoords the user's current position information. read only. timestamp domtimestamp the time at which the reading was taken. read only. see also using geolocation ...

nsIDOMGeoPositionCoords
read only. ...
...read only. ...
...butes attribute type description latitude double the user's current latitude, in degrees. read only. longitude double the user's current longitude, in degrees. read only. altitude double the user's current altitude, in meters. zero if the device doesn't support altitude detection. read only. accuracy double the accuracy of position information, in meters. read only. altitudeaccuracy double the accuracy of altitude information, in meters. zero if the device doesn't support altitude detection. read only. heading double the current heading at which the user is moving, in degrees. read only. speed double the speed at which the user is moving, in meters per second (confirm this). read...

GeolocationPositionError - Web APIs
the geolocationpositionerror interface represents the reason of an error occurring when using the geolocating device. properties the geolocationpositionerror interface doesn't inherit any property. geolocationpositionerror.code read only secure context returns an unsigned short representing the error code. the following values are possible: value associated constant description 1 permission_denied the acquisition of the geolocation information failed because the page didn't have the permission to do it. 2 position_unavailable the acquisition of the geolocation failed because at least one internal source of position returned an internal error. 3 timeout the time allowed to acquire the geolocation, def...
...ion 1 permission_denied the acquisition of the geolocation information failed because the page didn't have the permission to do it. 2 position_unavailable the acquisition of the geolocation failed because at least one internal source of position returned an internal error. 3 timeout the time allowed to acquire the geolocation, defined by positionoptions.timeout information was reached before the information was obtained. geolocationpositionerror.message read only secure context returns a human-readable domstring describing the details of the error. ...
... geolocation, defined by positionoptions.timeout information was reached before the information was obtained. geolocationpositionerror.message read only secure context returns a human-readable domstring describing the details of the error. specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface. methods the geolocationpositionerror interface neither implements nor inherits any method. specifications specification status comment geolocation apithe definition of 'geolocationpositionerror' in that specification. recommendation initial specification. ...

PannerNode.positionX - Web APIs
depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. ...
... the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var positionx = pannernode.positionx; pannernode.positionx.value = newpositionx; value an audioparam whose value is the x coordinate of the audio source's position, in 3d cartesian coordinates. the default value is 0. example the following example starts an oscillator, and pans it to the left after 1 second, to the right after 2 seconds, and back to the center after 3 seconds. const context = new audio...
...lue is the x coordinate of the audio source's position, in 3d cartesian coordinates. the default value is 0. example the following example starts an oscillator, and pans it to the left after 1 second, to the right after 2 seconds, and back to the center after 3 seconds. const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.positionx.setvalueattime(-1, context.currenttime + 1); panner.positionx.setvalueattime(1, context.currenttime + 2); panner.positionx.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positionx' in that specification. working draft ...

PannerNode.positionY - Web APIs
depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. ...
... the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var positiony = pannernode.positiony; pannernode.positiony.value = newpositiony; value an audioparam whose value is the y coordinate of the audio source's position, in 3d cartesian coordinates. example the following example starts an oscillator and pans it above the listener after 1 second, below the listener after 2 seconds, and back to the center after 3 seconds. note that in this case, the change wil...
...lator and pans it above the listener after 1 second, below the listener after 2 seconds, and back to the center after 3 seconds. note that in this case, the change will mainly affect the timbre of the oscillator, as it's a simple mono wave. const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positiony.setvalueattime(1, context.currenttime + 1); panner.positiony.setvalueattime(-1, context.currenttime + 2); panner.positiony.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positiony' in that specification. working draft ...

PannerNode.positionZ - Web APIs
depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. ...
... the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var positionz = pannernode.positionz; pannernode.positionz.value = newpositionz; value an audioparam whose value is the z coordinate of the audio source's position, in 3d cartesian coordinates. example the following example starts an oscillator and moves it in front of the listener after 1 second, behind the listener after 2 seconds, and back to the listener's position after 3 seconds. note that in this...
... moves it in front of the listener after 1 second, behind the listener after 2 seconds, and back to the listener's position after 3 seconds. note that in this case, the change will mainly affect the timbre and perceived volume of the sound. const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positionz.setvalueattime(1, context.currenttime + 1); panner.positionz.setvalueattime(-1, context.currenttime + 2); panner.positionz.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positionz' in that specification. working draft ...

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
as this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main box alignment page, which details the common features of box alignment across layout methods. note: at the time of writing (may 2018), there is no real support for the box alignment properties in block layout. ...
...container. if a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject. justify-self the justify-self property is used to align an item inside its containing block on the inline axis. this property does not apply to floated elements or table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis...
...d block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. it also does not apply to table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. aligning in these layout methods today as we do not currently have browser support for box alignment in block layout, your options for alignment...

Logical properties for floating and positioning - CSS: Cascading Style Sheets
this guide takes a look at how to use these. mapped properties and values the table below details the properties and values discussed in this guide along with their physical mappings. they assume a horizontal writing-mode, with a left-to-right direction. ...
...ings for left and right. in the example below i have two boxes — the first has the box floated with float: left, the second with float: inline-start. if you change the writing-mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated item follows the direction and writing-mode. example: inset properties for positioned layout positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. to do this we have historically used the physical properties top, right, bottom and left. these properties take a length or a percentage as a value, and relate to the user's screen dimensions. new pr...
... its containing block — we essentially inset the item relative to where it would fall based on normal flow. to do this we have historically used the physical properties top, right, bottom and left. these properties take a length or a percentage as a value, and relate to the user's screen dimensions. new properties have been created in the logical properties specification for when you want the positioning to relate to the flow of text in your writing mode. these are as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end. in the below example i have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position: relative. change the writing-mode proper...

Positions - SVG: Scalable Vector Graphics
« previousnext » in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context. the grid for all elements, svg uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other computer drawing routines). that is, the top left corner of the document is considered to be the point (0,0), or point of origin. positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom. note that this is slightly different than the way you're taught to graph as a kid (y axis is flipped). however, this is ...
... example: the element <rect x="0" y="0" width="100" height="100" /> defines a rectangle from the upper left corner, that spans from there 100px to the right and to the bottom. ...
... example: the element <rect x="0" y="0" width="100" height="100" /> defines a rectangle from the upper left corner, that spans from there 100px to the right and to the bottom. what are "pixels"? in the most basic case one pixel in an svg document maps to one pixel on the output device (a.k.a. the screen). ...

moveToAlertPosition - Archive of obsolete content
...
... ...

position - Archive of obsolete content
...
... ...

nsIDOMGeoPositionAddress
note: this needs to be moved into the dom reference. attributes attribute type description city domstring the city. read only. country domstring the country. read only. ...
... a location, including street, city, and country information, for example. this information may or may not be available, depending on the geolocation service being used. 1.0 66 introduced gecko 1.9.2 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 11 (firefox 11 / thunderbird 11 / seamonkey 2.8) this object is obtained from an nsidomgeopositionaddress object via its address attribute. note: this needs to be moved into the dom reference. attributes attribute type description city domstring the city. read only. country domstring the country. read only. countrycode obsolete since gecko 11 domstring removed in firefox 11, since it isn't defined in the specification; use country instead. county domstring the county. read only. p...

nsIDOMGeoPositionError
last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports attributes attribute type description code short numerical error code; see error constants for a complete list. read only. message domstring human readable error message. read only. gecko 1.9.2 note the message attribute was removed in gecko 1.9.2 (firefox 3.6). error constants constant value description permission_denied 1 the user denied permission to retrieve location data. ...
... numerical error code; see error constants for a complete list. read only. message domstring human readable error message. read only. gecko 1.9.2 note the message attribute was removed in gecko 1.9.2 (firefox 3.6). error constants constant value description permission_denied 1 the user denied permission to retrieve location data. position_unavailable 2 unable to access location data. timeout 3 a timeout occurred while trying to retrieve location data ...

CSSPositionValue - Web APIs
the csspositionvalue interface of the the css typed object model api represents values for properties that take a position, for example object-position. constructor csspositionvalue.csspositionvalue() creates a new csspositionvalue object. properties csspositionvalue.x returns the item's position along the web page's horizontal axis. csspositionvalue.y returns the item's position along the vertical axis. methods none. examples the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
...sspositionvalue object. properties csspositionvalue.x returns the item's position along the web page's horizontal axis. csspositionvalue.y returns the item's position along the vertical axis. methods none. examples the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(35), css.px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned. #image { width: 300px; height: 300px; border: 1px solid black; background-color: #de...

GeolocationPosition - Web APIs
the geolocationposition interface represents the position of the concerned device at a given time. the position, represented by a geolocationcoordinates object, comprehends the 2d position of the device, on a spheroid representing the earth, but also its altitude and its speed. properties the geolocationposition interface doesn't inherit any properties. geolocationposition.coords read only secure context returns a geolocationcoordinates object defining the current location. geolocationposition.timestamp read only secure context returns a domtimestamp representing the time at which the location was retrieved. methods the geolocationposition interface neither implements, nor inherits any methods. specifications specification status comment geoloc...
...coordinates object defining the current location. geolocationposition.timestamp read only secure context returns a domtimestamp representing the time at which the location was retrieved. methods the geolocationposition interface neither implements, nor inherits any methods. specifications specification status comment geolocation apithe definition of 'geolocationposition' in that specification. recommendation initial specification. ...

GeolocationPositionError.code - Web APIs
the geolocationpositionerror.code read-only property is an unsigned short representing the error code. syntax let typeerr = geolocationpositionerrorinstance.code value an unsigned short representing the error code. the following values are possible: value associated constant description 1 permission_denied the acquisition of the geolocation information failed because the page didn't have the permission to do it. 2 position_unavailable the acquisition of the geolocation failed because one or several internal sources of position returned an internal error. 3 timeout the time allowed to acquire the geolocation, defined by positionoptions.timeout information that was reached before the information was obtained. spe...
...uisition of the geolocation failed because one or several internal sources of position returned an internal error. 3 timeout the time allowed to acquire the geolocation, defined by positionoptions.timeout information that was reached before the information was obtained. specifications specification status comment geolocation apithe definition of 'positionerror.code' in that specification. recommendation initial definition ...

MediaPositionState - Web APIs
properties duration a floating-point value giving the total duration of the current media in seconds. this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. playbackrate a floating-point value indicating the rate at which the media is being played, as a ratio relative to its normal playback speed. ...
...m. playbackrate a floating-point value indicating the rate at which the media is being played, as a ratio relative to its normal playback speed. thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. negative values indicate that the media is playing in reverse; -1 indicates playback at the normal speed but backward, -2 is double speed in reverse, and so on. position a floating-point value indicating the last reported playback position of the media in seconds. this must always be a positive value. specifications specification status comment media session standardthe definition of 'mediapositionstate' in that specification. draft initial definition. ...

CSS Positioned Layout - CSS: Cascading Style Sheets
css positioned layout is a module of css that defines how to position elements on the page. reference css properties bottom clear float left position right top z-index guides understanding css z-index presents the notion of stacking context and explains how z-ordering works, with several examples. ...
... css positioned layout is a module of css that defines how to position elements on the page. reference css properties bottom clear float left position right top z-index guides understanding css z-index presents the notion of stacking context and explains how z-ordering works, with several examples. ...

overline-position - SVG: Scalable Vector Graphics
the overline-position attribute represents the ideal vertical position of the overline. the overline position is expressed in the font's coordinate system. ...
... the overline-position attribute represents the ideal vertical position of the overline. the overline position is expressed in the font's coordinate system. ...

strikethrough-position - SVG: Scalable Vector Graphics
« svg attribute reference home the strikethrough-position attribute represents the ideal vertical position of the strikethrough. the strikethrough position is expressed in the font's coordinate system. ...
...erence home the strikethrough-position attribute represents the ideal vertical position of the strikethrough. the strikethrough position is expressed in the font's coordinate system. ...

underline-position - SVG: Scalable Vector Graphics
« svg attribute reference home the underline-position attribute represents the ideal vertical position of the underline. the underline position is expressed in the font's coordinate system. ...
...vg attribute reference home the underline-position attribute represents the ideal vertical position of the underline. the underline position is expressed in the font's coordinate system. ...

position - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the position function returns a number equal to the context position from the expression evaluation context. syntax position() returns an integer equal to the context position from the expression evaluation context. notes note that a node's position in a context is not zero-based. the first node has a position of 1. the context is determined by the rest of the path. <xsl:template match="//a[position() = 5]"> <!-- this template matches the fifth a element anywhere in the document. ...
...ion from the expression evaluation context. notes note that a node's position in a context is not zero-based. the first node has a position of 1. the context is determined by the rest of the path. <xsl:template match="//a[position() = 5]"> <!-- this template matches the fifth a element anywhere in the document. --> </xsl:template> <xsl:template match="//div[@class='foo']/bar[position() = 1]"> <!-- this template matches the first bar element that is a child of a div element with a class attribute equal to "foo" --> </xsl:template> defined xpath 1.0 4.1 gecko support supported. ...

Snap positions - MDN Web Docs Glossary: Definitions of Web-related terms
a scroll container may set snap positions — points that the scrollport will stop moving at after a scrolling operation is completed. this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view. defining snap positions on the scroll container was introduced in the css scroll snap specification. ...

NSPR's Position On Abrupt Thread Termination
i resist including this function in nspr because it results in bad programming practice and unsupportable programs. threads are not processes. abrupt termination has been available in the unix/c environment for some time (exit()), and i assume that the basic semantics defined there are applicable here. in that environment, exit() may be called and any time, and results in the calling thread's immediate termination. in the situation where it was defined (unix), which has only a single thread of execution, that is equivalent to terminating the process. ...

GroupPosition
« nsiaccessible page summary this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. void groupposition( out long agrouplevel, out long asimilaritemsingroup, out long apositioningroup ); parameters agrouplevel 1-based, similar to aria aria-level property asimilaritemsingroup 1-based, similar to aria aria-setsize property, inclusive of the current item. apositioningroup 1-based, similar to aria aria-posinset property. remark alternatively this information is exposed by nsiaccessible.attribute attribute, also see group attributes page. refer to accessible web specifications to get an idea what elements expose group information. ...

GetImagePosition
...

nsIDOMGeoPositionCallback
the nsidomgeopositioncallback interface is called when updated position information is available. you need to implement this interface to accept callbacks after using nsidomgeolocation.watchposition(). dom/interfaces/geolocation/nsidomgeopositioncallback.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void handleevent(in nsidomgeoposition position); methods handleevent() called when new position information is available. void handleevent( in nsidomgeoposition position ); parameters position an nsidomgeoposition object indicating the updated location information. ...

nsIDOMGeoPositionErrorCallback
the nsidomgeopositionerrorcallback interface is used to represent an object that receives callback notifications when geolocation errors occur. dom/interfaces/geolocation/nsidomgeopositionerrorcallback.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void handleevent(in nsidomgeopositionerror position); methods handleevent() called to handle a geolocation error. void handleevent( in nsidomgeoposition position ); parameters position the error that occurred, as an nsidomgeopositionerror object. ...

nsIDOMGeoPositionOptions
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type description enablehighaccuracy boolean if true, high accuracy mode is used. timeout unsigned long maximum time in milliseconds before giving up on an attempt to retrieve location information. ...

Reposition elements in the page - Firefox Developer Tools
new in firefox 48 starting in firefox 48 you can move absolutely positioned elements by dragging them around the page. if an element has its position property set to absolute, relative or fixed and one or more of the top, bottom , left or right properties, the box model view displays a button: if you click that button, two handles appear next to the element: you can use these handles to drag the element around the page. if the element is absolutely positioned, dashed lines are shown representing the offset parent. for relatively positioned elements the dashed lines indicate the original position of the node. the offsets are indicated by a line and a tooltip for each side. ...

CaretPosition - Web APIs
the caretposition interface represents the caret position, an indicator for the text insertion point. you can get a caretposition using the document.caretpositionfrompoint method. properties this interface doesn't inherit any properties. caretposition.offsetnode read only returns a node containing the found node at the caret's position. caretposition.offset read only returns a long representing the character offset in the caret position node. methods caretposition.getclientrect specification specification status comment css object model (cssom) view modulethe definition of 'caretposition' in that specification. working draft ...

CompositionEvent.data - Web APIs
the data read-only property of the compositionevent interface returns the characters generated by the input method that raised the event; its exact nature varies depending on the type of event that generated the compositionevent object. syntax mydata = compositionevent.data value a domstring representing the event data: for compositionstart events, this is the currently selected text that will be replaced by the string being composed. this value doesn't change even if content changes the selection range; rather, it indicates the string that was selected when composition started. for compositionupdate, this is the string as it stands currently as editing is ongoing. for compositionend events, this is the string as committed to the editor. specifications specification statu...

CompositionEvent.locale - Web APIs
the locale read-only property of the compositionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime). syntax mylocale = compositionevent.locale value a domstring representing the locale of current input method. specifications specification status comment document object model (dom) level 3 events specification obsolete no longer in the spec, but still supported. ...

GeolocationPosition.coords - Web APIs
the geolocationposition.coords read-only property returns a geolocationcoordinates object representing a geographic position. it contains the location, that is longitude and latitude on the earth, the altitude, and the speed of the object concerned, regrouped inside the returned value. it also contains accuracy information about these values. syntax let coord = geolocationpositioninstance.coords value a geolocationcoordinates object instance. specifications specification status comment geolocation apithe definition of 'geolocationposition.coords' in that specification. recommendation initial specification. ...

GeolocationPosition.timestamp - Web APIs
the geolocationposition.timestamp read-only property returns a domtimestamp object, represents the date and the time of the creation of the geolocationposition object it belongs to. the precision is to the millisecond. syntax var timestamp = geolocationpositioninstance.timestamp value a domtimestamp object instance. specifications specification status comment geolocation apithe definition of 'geolocationposition.timestamp' in that specification. recommendation initial definition ...

GeolocationPositionError.message - Web APIs
the geolocationpositionerror.message read-only property returns a human-readable domstring describing the details of the error. syntax let msg = geolocationpositionerrorinstance.message value a human-readable domstring describing the details of the error. specifications specification status comment geolocation apithe definition of 'geolocationpositionerror.message' in that specification. recommendation initial definition ...

PositionOptions.enableHighAccuracy - Web APIs
the positionoptions.enablehighaccuracy property is a boolean that indicates the application would like to receive the best possible results. if true and if the device is able to provide a more accurate position, it will do so. note that this can result in slower response times or increased power consumption (with a gps chip on a mobile device for example). on the other hand, if false (the default value), the device can take the liberty to save resources by responding more quickly and/or using less power. syntax positionoptions.enablehighaccuracy = booleanvalue specifications specification status comment geolocation apithe definition of 'positionoptions.enablehighaccuracy' in that specification. recommendation initial definition ...

PositionOptions.maximumAge - Web APIs
the positionoptions.maximumage property is a positive long value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. if set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. if set to infinity the device must return a cached position regardless of its age. syntax positionoptions.maximumage = timelength specifications specification status comment geolocation apithe definition of 'positionoptions.maximumage' in that specification. recommendation initial definition ...

PositionOptions.timeout - Web APIs
the positionoptions.timeout property is a positive long value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. the default value is infinity, meaning that getcurrentposition() won't return until the position is available. syntax positionoptions.timeout = timelength specifications specification status comment geolocation apithe definition of 'positionoptions.timeout' in that specification. recommendation initial definition ...

SecurityPolicyViolationEvent.disposition - Web APIs
the disposition read-only property of the securitypolicyviolationevent interface indicates how the violated policy is configured to be treated by the user agent. syntax let disposition = violationeventinstance.disposition; value a value defined in the securitypolicyviolationeventdisposition enum representing the uri of the blocked resource. possible values are "enforce" or "report" example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.disposition); }); specifications specification status comment content security policy level 3the definition of 'disposition' in that specification. working draft initial definition ...

Index - Web APIs
erface is the base class upon which all dom range types are defined. a range is an object that indicates the start and end points of a section of content within the document. 17 abstractrange.collapsed api, abstractrange, dom, dom api, empty, property, range, reference, collapsed the collapsed read-only property of the abstractrange interface returns true if the range's start position and end position are the same. 18 abstractrange.endcontainer api, abstractrange, dom, dom api, end, node, position, property, range, read-only, reference, container, endcontainer the endcontainer property of the abstractrange interface returns the node in which the end of the range is located. 19 abstractrange.endoffset api, abstractrange, dom, dom api, end, pr...
...container, endcontainer the endcontainer property of the abstractrange interface returns the node in which the end of the range is located. 19 abstractrange.endoffset api, abstractrange, dom, dom api, end, property, range, read-only, reference, endoffset, offset the endoffset property of the abstractrange interface returns the offset into the end node of the range's end position. 20 abstractrange.startcontainer api, abstractrange, dom, dom api, property, range, read-only, reference, start, startcontainer the read-only startcontainer property of the abstractrange interface returns the start node for the range. 21 abstractrange.startoffset api, abstractrange, dom, dom api, property, range, read-only, reference, offset, startoffset ...
...t, startcontainer the read-only startcontainer property of the abstractrange interface returns the start node for the range. 21 abstractrange.startoffset api, abstractrange, dom, dom api, property, range, read-only, reference, offset, startoffset the read-only startoffset property of the abstractrange interface returns the offset into the start node of the range's start position. 22 abstractworker api, 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 abstractwo...
...And 121 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 now...
... cannot enable ime), we call this state "disabled". if ime is enabled but users use direct input mode (e.g., for inputting latin characters), we call it "ime is closed". otherwise, we call it "ime is open". (fyi: "open" is also called "active" or "turned on". "closed" is also called "inactive" or "turned off") so, this document is useful when you're try to fix a bug for text input in gecko. composition string and clauses typical japanese ime can input two or more words into a composition string. when a user converts from hiragana characters to chinese characters the composition string, japanese ime separates the composition string into multiple clauses. for example, if a user types "watasinonamaehanakanodesu", it's converted to hiragana characters, "わたしのなまえはなかのです", au...
...t two or more words into a composition string. when a user converts from hiragana characters to chinese characters the composition string, japanese ime separates the composition string into multiple clauses. for example, if a user types "watasinonamaehanakanodesu", it's converted to hiragana characters, "わたしのなまえはなかのです", automatically (in the following screenshots, the composition string has a wavy underline and the only one clause is called "raw input clause"). when a user presses convert key, japanese ime separates the composition string as "わたしの" (my), "なまえは" (name is) and "なかのです" (nakano). then, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and...
...And 82 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 solvi...
...ch 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 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...
...he 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 = 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 comp...
...And 52 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <d...
... </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webki...
...%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz...
...And 38 more matches

Introduction to CSS layout - Learn web development
e. prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. ...
...sics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. ...
...by understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task. ...
...And 29 more matches

Color picker tool - CSS: Cascading Style Sheets
sivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%...
...(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/...
...83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .inp...
...And 28 more matches

WebGL model view projection - Web APIs
a and move it around in 3d world space. the projection matrix is used to convert world space coordinates into clip space coordinates. a commonly used projection matrix, the perspective projection matrix, is used to mimic the effects of a typical camera serving as the stand-in for the viewer in the 3d virtual world. the view matrix is responsible for moving the objects in the scene to simulate the position of the camera being changed, altering what the viewer is currently able to see. the sections below offer an in-depth look into the ideas behind and implementation of the model, view, and projection matrices. these matrices are core to moving data around on the screen, and are concepts that transcend individual frameworks and engines. clip space in a webgl program, data is typically uploaded to...
... webglbox.prototype.draw = function(settings) {...
... webglbox.prototype.draw = function(settings) { // create some attribute data; these are the triangles th...
...And 25 more matches

Using the Geolocation API - Web APIs
the geolocation api is used to retrieve the user's location, so that it can for example be used to display their position using a mapping api. this article explains the basics of how to use it. the geolocation object the geolocation api is available through the navigator.geolocation object. if the object exists, geolocation services are available. you can test for the presence of geolocation thusly: if('geolocation' in navigator) { /* geolocation is available */ } else { /* geolocation is not available */ } getting the current position to obtain the user's current location, you can call the getcurrentposition() method. ...
...the object exists, geolocation services are available. you can test for the presence of geolocation thusly: if('geolocation' in navigator) { /* geolocation is available */ } else { /* geolocation is not available */ } getting the current position to obtain the user's current location, you can call the getcurrentposition() method. this initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. when the position is determined, the defined callback function is executed. ...
...it is useful if you need a quick answer regardless of the accuracy. ...
...And 24 more matches

Geometry and reference spaces in WebXR - Web APIs
augmented reality or virtual reality contexts is performed using webgl, so the two apis share much of the same design language. however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment, webxr has additional concepts that must be understood. ...
...epts that must be understood. in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces. the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to c...
...ation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article. you can learn more about the individual operations in matrix math for the web. units ...
...And 24 more matches

Using CSS transitions - CSS: Cascading Style Sheets
plies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
... transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-i...
...yselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } .box1{ transform: ro...
...And 23 more matches

Web audio spatialization basics - Web APIs
computer into. creating an audio listener so let's begin! the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. ...
...g an audio listener so let's begin! ...
...t is extended from) has a listener property that returns an audiolistener object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pannernode can then calculate its sound position relative to the position of the listener. ...
...And 22 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
sert a human into a virtual environment. to accomplish this, software needs the ability to not only track the locations, orientation, and movements of objects in the virtual world, but the user's location, orientation, and movement as well. but webxr goes beyond that by adding the ability to track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment). the location and movement of the user's headset represent their head's position and orientation in the virtual environment. hand controllers represent their hands in the same manner. other hardware elements can be used similarly to represent other parts of the body, providing additional data to use when simulatin...
...head's position and orientation in the virtual environment. hand controllers represent their hands in the same manner. other hardware elements can be used similarly to represent other parts of the body, providing additional data to use when simulating the user's actions in their environment. in this guide, we'll explore how webxr uses spaces and, more specifically, reference spaces, to track the positions, orientations, and movements of objects and of the user's body in the virtual world. note: this article presumes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movab...
...f the user's body in the virtual world. note: this article presumes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movable components within a scene. ...
...And 21 more matches

Border-image generator - CSS: Cascading Style Sheets
****************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-...
...ter; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; t...
...: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /********************************...
...And 20 more matches

Inputs and input sources - Web APIs
. this may involve the user simply tapping on a spot on the screen, tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. input device types webxr supports a variety of different types of devices to handle targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both targeti...
...riate mesh to use to represent the controller in the view and to help present it in the correct hand if drawing hands on the display. it can also be useful if your app uses the notion of "main hand" and "off hand" for determining the functionality of a controller; in a game, for example, the main hand controller may be the player's weapon while the off hand controller might be used to control the positioning of a shield. targeting ray mode the targeting ray mode is a string found in the targetraymode property. it describes the technique used to determine the targeting ray and how it should be shown to the user if presented visually. when the targeting ray mode is gaze, the ray's origin is at the viewer and simply aims in the direction the user is facing. this gaze input method is fairly simple,...
... final target ray mode is most commonly found on mobile devices like smartphones and tablets. the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers. target ray space the xrspace used to describe the position and orientation of the target ray is found in the targetrayspace property. this space's native origin is located at the point from which the target ray is emitted (such as the front tip of the controller, or the end of a gun barrel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray. you can easily obtain...
...And 19 more matches

SVG documentation index - SVG: Scalable Vector Graphics
some time to understand namespaces now and it will save you all sorts of headaches in the future. 7 example svg, xml in this example, we use xhtml, svg, javascript, and the dom to animate a swarm of "motes". these motes are governed by two simple principles. first, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. combined, we get this very natural-looking behavior. 8 other resources reference, svg here is a list of additional resources on svg: 9 project svg no summary! 10 replaced element svg this page was auto-generated because a user created a sub-page to this page. 11 svg 1.1 support in firefox firefox, svg you can fin...
...1 baseprofile deprecated, svg, svg attribute the baseprofile attribute describes the minimum svg language profile that the author believes is necessary to correctly render the content. the attribute does not specify any processing restrictions; it can be considered metadata. 32 baseline-shift needsexample, svg, svg attribute the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. the shifted object might be a sub- or superscript. 33 bbox deprecated, svg, svg attribute the bbox attribute defines the maximal bounding box of a font. 34 begin needscompattable, svg, svg attribute the begin attribute defines when an animation should begin o...
...s the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and end points of a line of text as used by the text-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements. 60 divisor filters, svg, svg attribute the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> e...
...And 19 more matches

menupopup - Archive of obsolete content
yed. it may be attached to any element using the context attribute. when a context menu is opened, the menupopup will be displayed. a context menu may be opened by right-clicking the 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, setconsumerollupevent, 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"...
...bel is right-clicked, the menu will be displayed. <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled. 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 l...
... 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 prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. ...
...And 18 more matches

panel - Archive of obsolete content
supported. some features may work, but only on some platforms. for those versions of firefox, it is best to avoid child frames in a panel, if possible. this limitation was resolved as of firefox 4.0. attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> ...
...er, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or ...
...would have had its width truncated and the panel would not extend to the left of the anchor. ignorekeys type: boolean if false, the default value, the escape key may be used to close the panel. if true, the escape key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. left type: integer overrides the horizontal position of the popup specified by the showpopup method. level type: one of the values below specifies whether the panel appears on top of all windows, or just on top of the window the panel is in. if this attribute is not set, the popup window level depends on the platform. on linux, the default value is top, otherwise, the default value is parent. if a panel has one or more text fields, this at...
...And 17 more matches

tooltip - Archive of obsolete content
ples | attributes | properties | methods | related ] this element is used for the tooltip popups. for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
...t is used for the tooltip popups. for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
... a window when it is opened. page type: boolean setting the page attribute to true will result in the tooltip being filled automatically as appropriate for a browser content area tooltip, i.e. the tooltip text is set according to the dom element in the browser that the user hovered over. ...
...And 17 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
for either of you to see the difference. a third party can tell the difference, but the two of you cannot. if you are a camera, you can achieve the same visual result both by moving the camera or by moving everything around the camera. and that's our solution. since we can't move the camera, we move the world around it. our renderer needs to know where we imagine the camera to be, then alter the position of every visible object to simulate that position and orientation. thus, instead of referring to an actual camera object, the term camera is used in webgl and webxr programming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a virtual object ...
...gaming-related situations are listed separately since they are often a special case specific to gaming, but any of these perspectives might apply to any 3d graphics scene. ...
...will follow those methods. deviating from them can pull the viewer out of the moment. in business applications, the 3d camera is used to simply set the apparent size and perspective when rendering things such as graphs and charts. in mapping applications, the camera may either be placed directly over the scene, or might use various angles to show perspective. for 3d gps solutions, the camera is positioned to show the area around the user, with the majority of the display showing the area ahead of the user's path of motion. when using webgl to accelerate 2d graphics drawing, the camera is typically placed directly above the center of the scene with the distance and field of view set to allow the entire scene to be presented. when accelerating bitmapped graphics, the renderer would draw the 2d i...
...And 17 more matches

Box-shadow generator - CSS: Cascading Style Sheets
<div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> inset </div> <div class="ui-checkbox" data-topic='inset'></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-slider-input"...
...sx" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-slider-input" data-topic="posx" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic="posy" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="add"></div> <div class="ui-slider-input"...
... </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="af...
...And 16 more matches

Index
accelerator for the given action index supported by accessible. 270 getrelation this method returns accessible relation for this accessible object by index. 271 getrelations this method returns multiple accessible relations for this accessible object. 272 getstate this method retrieves states of the accessible. 273 groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. 274 help help text associated with node. 275 indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent. ...
... retrieves the nsiaccessiblehyperlink object at the given link index. 297 getlink no summary! 298 getlinkindex no summary! 299 linkcount no summary! 300 nsiaccessibleimage interfaces, interfaces:scriptable, xpcom, xpcom interface reference returns the coordinates of the image accessible. 301 getimageposition this content is now available at nsiaccessibleimage.getimageposition(). 302 getimagesize this content is now available at nsiaccessibleimage.getimagesize(). 303 nsiaccessibleprovider accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference no summary! 304 nsiaccessiblerelation inter...
...on about the update that is currently being downloaded. this information is most commonly used to update a user interface that informs the user as to the status of an update. 336 nsiarray interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference an indexed collection of elements. provides basic functionality for retrieving elements at a specific position, searching for elements. indexes are zero-based, such that the last element in the array is stored at the index length-1. 337 nsiasyncinputstream interfaces, interfaces:scriptable, needscontent, streams, xpcom api reference, xpcom interface reference if an input stream is non-blocking, it may return ns_base_stream_would_block when read. the caller must then wait for the strea...
...And 15 more matches

nsIDOMWindowUtils
iew void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 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 disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); vo...
...olete since 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! ...
...ng redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only! ...
...And 15 more matches

AudioListener - Web APIs
the audiolistener interface represents the position and orientation of the unique person listening to the audio scene, and is used in audio spatialization. all pannernodes spatialize in relation to the audiolistener stored in the baseaudiocontext.listener attribute. it is important to note that there is only one listener per context and that it isn't an audionode. properties the position, forward, and up value are set and retrieved using different syntaxes. retrieval is done by accessing, for example, audiolistener.positionx, while setting the same property is done with audiolistener.positionx.value. this is why these values are not marked read only, which is how they appear in the specification's idl. ...
...and that it isn't an audionode. properties the position, forward, and up value are set and retrieved using different syntaxes. retrieval is done by accessing, for example, audiolistener.positionx, while setting the same property is done with audiolistener.positionx.value. this is why these values are not marked read only, which is how they appear in the specification's idl. audiolistener.positionx represents the horizontal position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.positiony represents the vertical position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.positionz represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. the def...
...ht-hand cartesian coordinate sytem. the default is 0. audiolistener.positiony represents the vertical position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.positionz represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.forwardx represents the horizontal position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up values are linearly independent of each other. the default is 0. ...
...And 15 more matches

left - CSS: Cascading Style Sheets
the left css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. 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. ...
...ase clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the distance that the element is moved to the right of its normal position. ...
...And 15 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
ing: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } we now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time. ...
..."> <div>one</div> <div>two</div> <div>three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } we now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time. ...
...</div> .wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } we now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time. grid and absolutely positioned elements grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. ...
...And 14 more matches

Using CSS gradients - CSS: Cascading Style Sheets
height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. negative angles run in the counterclockwise direction. declaring colors & creating effects all css gradient types are a range of position-dependent colors. the colors produced by css gradients can vary continuously with position, producing smooth color transitions. it is also possible to create bands of solid colors, and hard transitions between two colors. the following are valid for all gradient functions: using more than two colors you don't have to limit yourself to two colors—you may use as many as you like! by default, c...
... are valid for all gradient functions: using more than two colors you don't have to limit yourself to two colors—you may use as many as you like! by default, colors are evenly spaced along the gradient. <div class="auto-spaced-linear-gradient"></div> div { width: 120px; height: 120px; } .auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } positioning color stops you don't have to leave your color stops at their default positions. to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if nec...
...ositions. to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. if you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacent color stops. <div class="multicolor-linear"></div> div { width: 120px; height: 120px; } .multicolor-linear { background: linear-gradient(to left, lime 28px, red 77%, cyan); ...
...And 14 more matches

Index - Archive of obsolete content
everal seconds around the visual representation of that node in the browser window. 392 finding the file to modify add-ons, extensions now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer 393 making a mozilla installation modifiable add-ons, extensions mozilla's user interface i...
...ertooltiptext xul attributes, xul reference no summary! 1011 pinned xul, xul attribute, xul reference no summary! 1012 placeholder xul attributes, xul reference no summary! 1013 popup xul attributes, xul reference no summary! 1014 popup.left xul attributes, xul reference no summary! 1015 popup.position xul attributes, xul reference no summary! 1016 popup.top xul attributes, xul reference no summary! 1017 popupalign no summary! 1018 popupanchor no summary! 1019 position xul attributes, xul reference no summary! 1020 predicate xul attributes, xul reference no summary! 1021 ...
...nulist.appenditem xul methods, xul reference no summary! 1265 menulist.select xul methods, xul reference no summary! 1266 movebyoffset xul methods, xul reference no summary! 1267 movetabto xul methods, xul reference no summary! 1268 moveto xul methods, xul reference no summary! 1269 movetoalertposition xul methods, xul reference no summary! 1270 onfindagaincommand no summary! 1271 onsearchcomplete needshelp, xul methods, xul reference no summary! 1272 ontextentered needshelp, xul methods, xul reference no summary! 1273 ontextreverted needshelp, xul methods, xul reference no summary! 1274 op...
...And 13 more matches

Adding 2D content to a WebGL context - Web APIs
eed to define the shaders that will create the color for our simple scene as well as draw our object. these will establish how the square plane appears on the screen. the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors. there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader. you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shader program. let's take a quick look at the two types of shader, with the example in mind ...
... each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors. the vertex shader must perform the needed transforms on the vertex's position, make any other adjustments or calculations it needs to make on a per-vertex basis, then return the transformed vertex by saving it in a special variable provided by glsl, called gl_position. the vertex shader can, as needed, also do things like determine the coordinates within the face's texture of the texel to apply to the vertex, apply the normals to determine the lighting factor to apply to ...
...gl_position. the vertex shader can, as needed, also do things like determine the coordinates within the face's texture of the texel to apply to the vertex, apply the normals to determine the lighting factor to apply to the vertex, and so on. this information can then be stored in varyings or attributes as appropriate to be shared with the fragment shader. our vertex shader below receives vertex position values from an attribute we define called avertexposition. that position is then multiplied by two 4x4 matrices we provide called uprojectionmatrix and umodelviewmatrix; gl_position is set to the result. for more info on projection and other matrixes you might find this article useful. ...
...And 13 more matches

right - CSS: Cascading Style Sheets
the right css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. 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. ...
...ne https://github.com/mdn/interactive-examples and send us a pull request. ...
...> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elements, the distance that the element is moved to the left of its normal position. ...
...And 13 more matches

PannerNode - Web APIs
the pannernode interface represents the position and behavior of an audio source signal in space. it is an audionode audio-processing module describing its position with right-hand cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone. a pannernode always has exactly one input and one output: the input can be mono or stereo but the output is always stereo (2 channels); you can't have panning effects without at least two audio channels! number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance. properties inherits properties f...
...ffects without at least two audio channels! number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance. properties inherits properties from its parent, audionode. the orientation and position value are set and retrieved using different syntaxes, since they're stored as audioparam values. retrieval is done by accessing, for example, pannernode.positionx. while setting the same property is done with pannernode.positionx.value. this is why these values are not marked read only, which is how they appear in the webidl. pannernode.coneinnerangle is a double value describing the angle, ...
...ithm to use to reduce the volume of the audio source as it moves away from the listener. possible values are "linear", "inverse" and "exponential". the default value is "inverse". pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further. pannernode.orientationx represents the horizontal position of the audio source's vector in a right-hand cartesian coordinate system. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 1. pannernode.orientationy represents the vertical position of the audio source's vector in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly chang...
...And 12 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
d and the other part to remain normal, we can define it as follows using css. ...
...follows using css. ...
...00 that’s an, an, that’s an l! crédit de transcription 00:04.000 --> 00:05.000 transcrit par célestes™ ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% where did he go? 00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% i think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% what are you waiting for? webvtt cues a cue is a single subtitle block that has a single start time, end time, and textual payload. example 6 consists of the header, a blan...
...And 12 more matches

nsIEditorIMESupport
editor/idl/nsieditorimesupport.idlscriptable please add a summary to this article. ...
... editor/idl/nsieditorimesupport.idlscriptable please add a summary to this article. ...
... editor/idl/nsieditorimesupport.idlscriptable please add a summary to this article. ...
...And 11 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
= null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene. ...
...arious vectors and matrices used while rendering the scene. const viewerstartposition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the center of the space, and the direction in which they'll initially be looking. cubeorientation will store the current orientation of the cube, while cubematrix and mousematrix are storage for matrices used during the rendering of the scene. inverseorientation is a quaternion which will be used to represent the ro...
... part of the program generated the error, since similar errors can have in multiple situations. the vertex and fragment shaders the vertex and fragment shaders are both exactly the same as those used in the example for our article lighting in webgl. refer to that if you're interested in the glsl source code for the basic shaders used here. suffice it to say that the vertex shader computes the position of each vertex given the initial 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. starting up and shutting down webxr upon initially loading the script, ...
...And 11 more matches

Layout and the containing block - CSS: Cascading Style Sheets
most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. in this article, we examine the factors that determine an element's containing block. when a user agent (such as your browser) lays out a document, it generates a box for every element. each box is divided into four areas: content area padding area border area margin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. ...
...a many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. effects of the containing block before learning what determines the containing block of an element, it's useful to know why it matters in the first place. the size and position of an element are often impacted by its containing block. percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. identifying the containing block the process for identifying the containing block depends entirely on...
...acted by its containing block. percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. ...
...And 11 more matches

JavaScript Daemons Management - Archive of obsolete content
*...
...1) { return; } this.rate = nrate; this.synchronize(); }; daemon.prototype.forceposition = function (vto) { if (isfinite(vto)) { this.index = math.round(math.abs(vto)); } }; daemon.prototype.getduration = function () { return this.rate * this.length; }; daemon.prototype.getdirection = function () { return this.isatend() !== this.backw; }; daemon.prototype.getposition = function () { return this.index; }; /* instantaneous movement (synchronous). */ daemon.prototype.makesteps = function (nhowmany, breverse, bforce) { if (nhowmany === 0) { return true; } if (isnan(nhowmany)) { return false; } var nidx = 0, nlen = math.round(math.abs(nhowmany)), bcontinue = true, bbackw = nhowmany > 0 === boolean(breverse); this.backw = bbackw; f...
...ts: 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). note: the stop() method is not part of the base system. daemon instances methods mydaemon.isatend() returns a boolean expressing whether the daemon is at the start/end position or not. mydaemon.synchronize() synchronizes the timer of a started daemon with the time of invocation of mydaemon.synchronize(). if the rate property has been changed, the daemon will be updated with the new rate value. mydaemon.pause() pauses the daemon. mydaemon.start([backwards]) starts the daemon forwards (index of each invocation increasing) or backwards (index decreasing). mydaemon.s...
...And 10 more matches

Backgrounds and borders - Learn web development
used length units to size it inside the box. you can see this has distorted the image. try the following. change the length units used to modify the size of the background. remove the length units and see what happens when you use background-size: cover or background-size: contain. if your image is smaller than the box, you can change the value of background-repeat to repeat the image. positioning the background image the background-position property allows you to choose the position in which the background image appears on the box it is applied to. this uses a coordinate system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes. note: the default background-position value is (0,0). the most common backgro...
...the background image the background-position property allows you to choose the position in which the background image appears on the box it is applied to. this uses a coordinate system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes. note: the default background-position value is (0,0). the most common background-position values take two individual values — a horizontal value followed by a vertical value. ...
... system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes. note: the default background-position value is (0,0). the most common background-position values take two individual values — a horizontal value followed by a vertical value. ...
...And 10 more matches

source-editor.jsm
number alineindex); string getmode(); string gettext([optional] number astart, [optional] number aend); string getselectedtext(); void setmode(string amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] number acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void addbreakpoint(number alineindex, [optional] string acondition); array getbreakpoints(); boolean rem...
...ue an array of all of the breakpoints in the editor instance. each breakpoint is an object with the following properties: property type description line number the 0-based line number on which the breakpoint is set. condition string the condition string that was specified when the breakpoint was set. getcaretoffset() returns the current caret position (insertion point) as an offset into the text. number getcaretoffset(); parameters none. return value the 0-based offset into the text at which newly-typed characters will be inserted. getcaretposition() returns an object describing the position of the caret (insertion point) in terms of its line number and column. object getcaretposition(); parameters none. return value the returned...
... col number the 0-based column number on which the caret is located. ...
...And 10 more matches

WebGLRenderingContext.vertexAttribPointer() - Web APIs
glbuffer is bound to the array_buffer target. when using a webgl 2 context, a gl.invalid_operation error is thrown if this vertex attribute is defined as a integer in the vertex shader (e.g. uvec4 or ivec4, instead of vec4). description let's assume we want to render some 3d geometry, and for that we will need to supply our vertices to the vertex shader. each vertex has a few attributes, like position, normal vector, or texture coordinate, that are defined in an arraybuffer and will be supplied to the vertex buffer object (vbo). first, we need to bind the webglbuffer we want to use to gl.array_buffer, then, with this method, gl.vertexattribpointer(), we specify in what order the attributes are stored, and what data type they are in. in addition, we need to include the stride, which is the tota...
...the graphics card when compiling the vertex shader. depending on the graphics card, the index will vary, so you must call gl.getattriblocation() to find out the index, and then provide this index to gl.vertexattribpointer(). if you are using webgl 2, you can specify the index yourself in the vertex shader code and override the default used by the graphics card, e.g. layout(location = 3) in vec4 position; would set the "position" attribute to index 3. integer attributes while the arraybuffer can be filled with both integers and floats, the attributes will always be converted to a float when they are sent to the vertex shader. if you need to use integers in your vertex shader code, you can either cast the float back to an integer in the vertex shader (e.g. (int) floatnumber), or use gl.vertexat...
...th vec4 but in our gl.vertexattribpointer() call we set the size to 2, then webgl will set the first two components based on the array buffer, while the third and fourth components are taken from the default value. the default value is vec4(0.0, 0.0, 0.0, 1.0) by default but we can specify a different default value with gl.vertexattrib[1234]f[v](). for example, your vertex shader may be using a position and a color attribute. most meshes have the color specified at a per-vertex level, but some meshes are of a uniform shade. for those meshes, it is not necessary to place the same color for each vertex into the array buffer, so you use gl.vertexattrib4fv() to set a constant color. querying current settings you can call gl.getvertexattrib() and gl.getvertexattriboffset() to get the current parame...
...And 10 more matches

A basic 2D WebGL animation example - Web APIs
vertex shader first, let's take a look at the vertex shader. its job, as always, is to convert the coordinates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context). ...
...inates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context). ...
...ne into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context). ...
...And 10 more matches

WebXR Device API - Web APIs
each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to...
...ne to the device at an appropriate frame rate (optionally) mirror the output to a 2d display create vectors representing the movements of input controls at the most basic level, a scene is presented in 3d by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the webxr device to be presented to the user through t...
...bxr device api concepts and usage example webxr hardware setup while the older webvr api was designed solely to support virtual reality (vr), webxr provides support for both vr and augmented reality (ar) on the web. support for ar functionality is added by the webxr augmented reality module. a typical xr device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor. the equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like. accessing the webxr api to gain access to the webxr api within the context of a given window, use the navigator.xr property, which returns an xrsystem object through which the entire webxr device api is then exposed. ...
...And 10 more matches

background - CSS: Cascading Style Sheets
nteractive 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. ...
...ground-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas. the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%". the <box> value may be included zero, one, or two times. if included once, it sets both background-origin and background-clip. if it is included twice, the first occurrence sets background-origin, and the second sets background-cl...
...ound-origin and background-clip. if it is included twice, the first occurrence sets background-origin, and the second sets background-clip. the <background-color> value may only be included in the last layer specified. values <attachment> see background-attachment <box> see background-clip and background-origin <background-color> see background-color <bg-image> see background-image <position> see background-position <repeat-style> see background-repeat <bg-size> see background-size. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. if the image contains information critic...
...And 10 more matches

panel - Archive of obsolete content
ted by the self module, like this: var mypanel = require("sdk/panel").panel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). ...
...k/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active browser window. you can position the panel by passing a position to the panel's constructor or to its show() method. ...
...nel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active browser window. you can position the panel by passing a position to the panel's constructor or to its show() method. ...
...And 9 more matches

Index - Archive of obsolete content
pickertooltiptext xul attributes, xul reference no summary! 280 pinned xul, xul attribute, xul reference no summary! 281 placeholder xul attributes, xul reference no summary! 282 popup xul attributes, xul reference no summary! 283 popup.left xul attributes, xul reference no summary! 284 popup.position xul attributes, xul reference no summary! 285 popup.top xul attributes, xul reference no summary! 286 popupalign no summary! 287 popupanchor no summary! 288 position xul attributes, xul reference no summary! 289 predicate xul attributes, xul reference no summary! 290 pre...
... menulist.appenditem xul methods, xul reference no summary! 534 menulist.select xul methods, xul reference no summary! 535 movebyoffset xul methods, xul reference no summary! 536 movetabto xul methods, xul reference no summary! 537 moveto xul methods, xul reference no summary! 538 movetoalertposition xul methods, xul reference no summary! 539 onfindagaincommand no summary! 540 onsearchcomplete needshelp, xul methods, xul reference no summary! 541 ontextentered needshelp, xul methods, xul reference no summary! 542 ontextreverted needshelp, xul methods, xul reference no summary! 543 open ...
... related to popups and menus. 609 popupkeys xul, xul popup guide when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled. 611 special per-platform menu considerations beginner, guide, xul, xul popup guide for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in ...
...And 9 more matches

Building up a basic demo with A-Frame - Game development
ote: an entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. let's create the scene by adding an <a-scene> element inside the <body> element: <a-scene> </a-scene> adding a cube adding the cube to the scene is done by adding a simple <a-box> element inside the <a-scene> element. ...
...a camera, light or sound source. let's create the scene by adding an <a-scene> element inside the <body> element: <a-scene> </a-scene> adding a cube adding the cube to the scene is done by adding a simple <a-box> element inside the <a-scene> element. add it now: <a-box color="#0095dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube. note: the distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. adding a background: sky box a sky box is a background ...
...se for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready. specifying a camera a camera entity can be created by adding an <a-camera> element to the scene. ...
...And 9 more matches

GLSL Shaders - Game development
fragment shaders compute the renderings of a shape's colors and other attributes. glsl is not as intuitive as javascript. glsl is strongly typed and there is a lot of math involving vectors and matrices. ...
...a gpu (graphics processing unit), which is optimized for such operations. using a gpu to deal with shaders offloads some of the number crunching from the cpu. this allows the cpu to focus its processing power on other tasks, like executing code. vertex shaders vertex shaders manipulate coordinates in a 3d space and are called once per vertex. the purpose of the vertex shader is to set up the gl_position variable — this is a special, global, and built-in glsl variable. gl_position is used to store the position of the current vertex. the void main() function is a standard way of defining the gl_position variable. everything inside void main() will be executed by the vertex shader. a vertex shader yields a variable containing how to project a vertex's position in 3d space onto a 2d screen. fr...
... the calculations result in a variable containing the information about the rgba color. demo let's build a simple demo to explain those shaders in action. be sure to read three.js tutorial first to grasp the concept of the scene, its objects, and materials. ...
...And 9 more matches

Index - Learn web development
ng effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, box shadows, effects, shapes we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers. 106 backgrounds and borders background, beginner, css, image, learn, position, borders, color we have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. do explore the different property pages if you want to find out more about any of the features we have discussed. each page on mdn has more examples of usage for you to play with and enhance your knowledge. 107 css selectors attribute, begin...
...the aim of this task is to help you check your understanding of the css box model. 113 type, class, and id selectors beginner, css, class, learn, selectors, id in this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work. 114 css values and units beginner, css, function, image, learn, number, position, color, length, percentage, units, values this has been a quick run through of the most common types of values and units you might encounter. you can have a look at all of the different types on the css values and units reference page; you will encounter many of these in use as you work through these lessons. 115 cascade and inheritance beginner, css, cascade, inheritance, le...
... to css, learn, modules, specifications, syntax css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood? this article explains what css is, with a simple syntax example, and also covers some key terms about the language. 140 css layout beginner, css, floating, grids, guide, landing, layout, learn, module, multiple column, positioning, alignment, flexbox, float, table at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, looking a...
...And 9 more matches

Drawing graphics - Learn web development
), in which to draw the new example. we'll be using some common methods and properties across all of the below sections: beginpath() — start drawing a path at the point where the pen currently is on the canvas. on a new canvas, the pen starts out at (0, 0). moveto() — move the pen to a different point on the canvas, without recording or tracing the line; the pen simply "jumps" to the new position. fill() — draw a filled shape by filling in the path you've traced so far. stroke() — draw an outline shape by drawing a stroke along the path you've drawn so far. you can also use features like linewidth and fillstyle/strokestyle with paths as well as rectangles. a typical, simple path-drawing operation would look something like so: ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ct...
... to draw a circle in canvas. this is accomplished using the arc() method, which draws all or part of a circle at a specified point. let's add an arc to our canvas — add the following to the bottom of your code: ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(150, 106, 50, degtorad(0), degtorad(360), false); ctx.fill(); arc() takes six parameters. the first two specify the position of the arc's center (x and y, respectively). the third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (false is clockwise). note: 0 degrees is horizontally to the righ...
...oop); } loop(); we run the loop() function once at the bottom of the code to start the cycle, drawing the first animation frame; the loop() function then takes charge of calling requestanimationframe(loop) to run the next frame of the animation, again and again. note that on each frame we are completely clearing the canvas and redrawing everything. for every ball present we draw it, update its position, and check to see if it is colliding with any other balls. once you've drawn a graphic to a canvas, there's no way to manipulate that graphic individually like you can with dom elements. you can't move each ball around on the canvas, because once it's drawn, it's part of the canvas, and is not an individual accessible element or object. instead, you have to erase and redraw, either by erasing the...
...And 9 more matches

TPS Bookmark Lists
this bookmark; used only in verify and modify actions. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action. ...
...required. siteuri: the livemark's uri. optional. feeduri: the livemark's feed uri. required. after: the title of ...
...required. ...
...And 9 more matches

Raining rectangles - Web APIs
game that demonstrates clearing with solid colors, scissoring, animation, and user interaction. animation and user interaction with scissoring this is a simple game. the objective: try to catch as many of the raining rectangles as you can by clicking on them. in this example, we use an object-oriented approach for the displayed rectangles, which helps to keep the state of the rectangle (its position, color, and so on) organized in one place, and the overall code more compact and reusable. this example combines clearing the drawing buffer with solid colors and scissoring operations. it is a preview of a full graphical application that manipulates various phases of the webgl graphics pipeline and state machine. in addition, the example demonstrates how to integrate the webgl function calls w...
...so we reschedule // the timeout to call drawanimation again in ...
...so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we w...
...And 9 more matches

Rendering and the WebXR frame animation callback - Web APIs
ticle setting up and shutting down a webxr session. preparing the renderer once the xr session has been set up, with the webgl framebuffer connected and webgl primed with the data it needs in order to render the scene, you can set up the renderer to start running. this begins with getting the reference space in which you want to draw, with its origin and orientation set at the viewer's starting position and viewing direction. once that's in hand, you request that the browser call your rendering function the next time it needs a framebuffer to render your scene. this is done by calling the xrsession method requestanimationframe(). kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersiv...
...ebuffer to render your scene. this is done by calling the xrsession method requestanimationframe(). ...
...ion.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrigidtransform representing that position and orientation, then calling the xrreferencespace method getoffsetreferencespace(). then the first animation frame is scheduled by calling the xrsession method requestanimationframe(), providing a callback function, mydrawframe(), whose job is to render the frame. note that this code doesn't have a loop! i...
...And 9 more matches

OpenClose - Archive of obsolete content
pup, you may wish to open the popup programatically. to do this, use the popup's openpopup method. this method may be used for any type of popup, either a menupopup, a panel, or a tooltip, including ones that can be opened via other means, for instance, a popup attached via the context attribute. ...
...nupopup, a panel, or a tooltip, including ones that can be opened via other means, for instance, a popup attached via the context attribute. the openpopup method takes six arguments which are used to specify how and where the popup should be positioned. these will be described below. the openpopup method is defined as follows: void openpopup(in domelement anchorelement, in string position, in long x, in long y, in boolean iscontextmenu, in boolean attributesoverride); first an example: somepopup.openpopup(anchor, "after_start", 0, 0, false, false); this example will open a popup located just underneath another element referenced by 'anchor'. this emulates how a menu is opened, where 'anchor' is the menu element. it i...
...irst an example: somepopup.openpopup(anchor, "after_start", 0, 0, false, false); this example will open a popup located just underneath another element referenced by 'anchor'. this emulates how a menu is opened, where 'anchor' is the menu element. it is possible to use the openpopup method with a menu, however, it is easier to just set the menu's open attribute to true, as that will handle the positioning of the menupopup for you. note that while the open attribute applies to the parent menu or button, the openpopup method applies to the menupopup element. the anchor of a popup is the element node that the popup is displayed next to. for instance, to have a popup appear next to a button, pass a reference to this button as the first argument to the openpopup method. in this next example, the po...
...And 8 more matches

Styling web forms - Learn web development
e apparent via the screenshot is that the radio and checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. ...
...ame, but they are centered in the 150px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. by default it is always positioned over the top border of its <fieldset> parent, near the top left corner. ...
...he widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. by default it is always positioned over the top border of its <fieldset> parent, near the top left corner. to position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning. ...
...And 8 more matches

OS.File for the main thread
ot be used with create. create if true, file will be opened for writing. the file must not exist. if the file already exists, throw an error. cannot be used with truncate or existing. existing if true, the file must already exist. if the file does not exist, throw an error. cannot be used with create. append if true, the file will be opened for appending, meaning the equivalent of .setposition(0, pos_end) is executed before each write. the default is true, i.e. opening a file for appending. specify append: false to open the file in regular mode. optionsoptional platform-specific options for opening the file. for advanced users only. most users will never have need of these options. to specify options, pass an object that may contain some of the following flags: unixflags (i...
...he same process). you can build this policy from constants os.constants.win.file_share_*. winsecurity (ignored under non-windows platforms) if specified, a security policy, as per windows function createfile. if unspecified, no security attributes. winaccess (ignored under non-windows platforms) if specified, access mode, as per windows function createfile. this also requires option windisposition and this replaces argument mode. if unspecified, value is built from mode. windisposition (ignored under non-windows platforms) if specified, disposition mode, as per windows function createfile. this also requires option winaccess and this replaces argument mode. if unspecified, value is built from mode. promise resolves to an instance of os.file representing the expected file. note...
...lete is a very bad idea. promise can be rejected with os.file.error in case of any error, in particular if the destination file cannot be overwritten, or if tmppath is not on the same device as path. instances of os.file to obtain an instance of os.file, use function os.file.open. ...
...And 8 more matches

Scroll-linked effects
the definition of a scroll-linked effect is an effect implemented on a webpage where something changes based on the scroll position, for example updating a positioning property with the aim of producing a parallax scrolling effect. this article discusses scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques. scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases. these effects work well in browsers where the scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of asynchrono...
...sform property.) you can find a sampling of such effects at css scroll api: use cases. these effects work well in browsers where the scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of asynchronous scrolling in order to provide a consistent 60 frames per second experience to the user. in the asynchronous scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the dom and fired on the main thread. this means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. this can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid. below are a couple of examples of effects tha...
...the main thread. this means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. this can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid. below are a couple of examples of effects that would not work well with asynchronous scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "toolbar" div will stick to the top of the screen as you scroll down. ...
...And 8 more matches

IAccessibleText
utes match those of offset. (0 based) textattributes a string of attributes describing the text(). the attributes are described in the; text attributes specification on the iaccessible2 web site. return value e_invalidarg if bad [in] passed, [out] values are 0s and null respectively. s_false if there is nothing to return, [out] values are 0s and null respectively. s_ok. caretoffset() returns the position of the caret. returns the 0-based offset of the caret within the text(). if the text() is implemented as a tree of text() objects with embed characters in higher levels representing substrings of child text() objects and the caret is in one of the child text() objects, then the offset in the higher level text() object would be at the embed character representing child text() object that contains ...
...[propget] hresult caretoffset( [out] long offset ); parameters offset the returned offset is relative to the text() represented by this object. return value s_false if the caret is not currently active on this object, that is the caret is located on some other object. the retur...
...t to right language. [propget] hresult caretoffset( [out] long offset ); parameters offset the returned offset is relative to the text() represented by this object. return value s_false if the caret is not currently active on this object, that is the caret is located on some other object. the returned offset value will be -1. s_ok. characterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text(), that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent t...
...And 8 more matches

nsIWindowMediator
nd getting the most recent / any window of a given type. ...
...e. ...
...ator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only! nsisimpleenumerator getenumerator(in wstring awindowtype); nsidomwindow getmostrecentwindow(in wstring awindowtype); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); nsisimpleenumerator getxulwindowenumerator(in wstring awindowtype); pruint32 getzlevel(in nsixulwindow awindow); native...
...And 8 more matches

KeyboardEvent.code - Web APIs
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. 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 keyboardevent.code to determine the character generated by the keystroke, because the keycode's name may not match the actua...
...30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using. shipsize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. moverate and turnrate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). finally, spaceship is set to re...
...and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls. ...
...And 8 more matches

Scissor animation - Web APIs
« previousnext » a simple webgl example in which we have some animation fun using scissoring and clearing operations. animation with scissoring in this example, we are animating squares using scissor() and clear(). we again establish an animation loop using timers. note that this time it is the position of the square (the scissoring area) that is updated every frame (we set frame rate to roughly one every 17ms, or roughly 60fps – frames per second). in contrast, the color of the square (set with clearcolor) is only updated when a new square is created. this is a nice demonstration of webgl as a state machine. for each square, we set its color once, and then update only its position every frame. the clear color state of webgl remains at the set value, until we change it again ...
...in her...
...ght : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares. ...
...And 8 more matches

XRView - Web APIs
the webxr device api's xrview interface provides information describing a single view into the xr scene for a specific frame, providing orientation and position information for the viewpoint. you can think of it as a description of a specific eye or camera and how it views the world. a 3d frame will involve two views, one for each eye, separated by an appropriate distance which approximates the distance between the viewer's eyes. this allows the two views, when projected in isolation into the appropriate eyes, to simulate a 3d world. properties eye read only which of the two eyes (left) or (right) for which this xrview represents the perspective. this value is used to ensure that any content which is pre-rendered for presenting to a specific eye is distributed or positioned correctly. the...
...ew of something that doesn't need to appear in 3d). projectionmatrix read only the projection matrix that will transform the scene to appear correctly given the point-of-view indicated by eye. this matrix should be used directly in order to avoid presentation distortions that may lead to potentially serious user discomfort. ...
...int-of-view indicated by eye. this matrix should be used directly in order to avoid presentation distortions that may lead to potentially serious user discomfort. transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered. usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by calling the xrframe object's getviewerpose() method to get the xrviewerpose representing (in essence) the position of the viewer's head. that object's views property is a list of all of the xrview objects representing the viewpoints ...
...And 8 more matches

bottom - CSS: Cascading Style Sheets
the bottom css property participates in setting the vertical position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of bottom depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. ...
...the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of bottom depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. when position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position. when position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle. ...
... set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. when position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position. when position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle. when position is set to static, the bottom property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. synta...
...And 8 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
ner, similar to repeating-linear-gradient() . the function's result is an object of the <gradient> data type, which is a special kind of <image>. 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. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color. as with any...
...if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keywor...
...if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing ho...
...And 8 more matches

WebVR — Virtual Reality for the Web - Game development
es to chose from: desktop ones like oculus rift or htc vive, through consoles with playstation vr (which admittedly doesn't support webvr at this time), to mobile experiences like gear vr or google cardboard. note: for more information, read our webvr concepts article. the webvr api the webvr api is the central api for capturing information on vr devices connected to a computer and headset position/orientation/velocity/acceleration information, and converting that into useful data you can use in your games and other applications. note: there are of course other apis useful for creating games, for example the gamepad api for control inputs, and the device orientation api for handling display orientation on mobile. browser support and spec status currently browser support for the webvr a...
...regular builds. the webvr spec is in editor's draft status which means it is still subject to change. the development is led by vladimir vukicevic from mozilla and brandon jones from google. for more info be sure to visit the mozvr.com and webvr.info websites. using the webvr api the webvr api is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by hmdvrdevice (head-mounted display virtual reality device) and positionsensorvrdevice. get the devices to get information about devices connected to your computer, you can use the navigator.getvrdevices method: navigator.getvrdevices().then(function(devices) { for (var i = 0; i < devices.length; ++i) { if (devices[i] insta...
... devices to get information about devices connected to your computer, you can use the navigator.getvrdevices method: navigator.getvrdevices().then(function(devices) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof hmdvrdevice) { ghmd = devices[i]; break; } } if (ghmd) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof positionsensorvrdevice && devices[i].hardwareunitid === ghmd.hardwareunitid) { gpositionsensor = devices[i]; break; } } } }); this code will loop through the available devices and assign proper sensors to the headsets — the first devices array contains the connected devices, and a check is done to find the hmdvrdevice, and assign it to the ghmd variable — using thi...
...And 7 more matches

2D maze game with device orientation - Game development
we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets. the create function holds some basic configuration: we're setting up the scaling and alignment of the canvas, and moving on to the preload state when everything's ready. preloader.js the preloader state takes care of loading all the assets...
... name of the image asset the button is using. function that will be executed when someone clicks the button. the execution context. frame from the image asset used as the button's "hover" state. frame from the image asset used as the button's "normal" or "out" state. frame from the image asset used as the button's "click" or "...
...th*0.5, 200, 'button-start', this.startgame, this, 2, 0, 1); this.startbutton.anchor.set(0.5,0); this.startbutton.input.usehandcursor = true; }, startgame: function() { this.game.state.start('howto'); } }; to create a new button there's add.button method with the following list of optional arguments: top absolute position on canvas in pixels. left absolute position on canvas in pixels. name of the image asset the button is using. function that will be executed when someone clicks the button. the execution context. frame from the image asset used as the button's "hover" state. frame from the image asset used as the button's "normal" or "out" state. frame from the image asset used as the button's "click" or "down" state. the anchor.set is setting up t...
...And 7 more matches

CustomizableUI.jsm
e this facility, you should create a plain js object which defines some of the event handlers defined below. not all event handler methods need to be defined. customizableui will catch exceptions. events are dispatched synchronously on the ui thread, so if you can delay any/some of your processing, that is advisable. ...
...r methods need to be defined. customizableui will catch exceptions. events are dispatched synchronously on the ui thread, so if you can delay any/some of your processing, that is advisable. the following event handlers are supported: onwidgetadded(awidgetid, aarea, aposition) fired when a widget is added to an area. awidgetid is the widget that was added, aarea the area it was added to, and aposition the position in which it was added. onwidgetmoved(awidgetid, aarea, aoldposition, anewposition) fired when a widget is moved within its area. awidgetid is the widget that was moved, aarea the area it was moved in, aoldposition its old position, and anewposition its new position. onwidgetremoved(awidgetid, aarea) fired when a widget is removed from its area. awidgetid is the widget that was re...
...change(anode, anextnode, acontainer, awasremoval) like onwidgetbeforedomchange, but fired after the change to the dom node of the widget. onwidgetreset(anode, acontainer) fired after a reset to default placements moves a widget's node to a different location. anode is the widget's node, acontainer is the area it was moved into (nb: it might already have been there and been moved to a different position!) onwidgetundomove(anode, acontainer) fired after undoing a reset to default placements moves a widget's node to a different location. anode is the widget's node, acontainer is the area it was moved into (nb: it might already have been there and been moved to a different position!) onareareset(aarea, acontainer) fired after a reset to default placements is complete on an area's dom node. note...
...And 7 more matches

Geolocation API - Web APIs
ation api is accessed via a call to navigator.geolocation; this will cause the user's browser to ask them for permission to access their location data. if they accept, then the browser will use the best available functionality on the device to access this information (for example, gps). ...
...use the user's browser to ask them for permission to access their location data. if they accept, then the browser will use the best available functionality on the device to access this information (for example, gps). the developer can now access this location information in a couple of different ways: geolocation.getcurrentposition(): retrieves the device's current location. geolocation.watchposition(): registers a handler function that will be called automatically each time the position of the device changes, returning the updated location. in both cases, the method call takes up to three arguments: a mandatory success callback: if the location retrieval is successful, the callback executes with a geolocationposition object as its only parameter, providing access to the location data. ...
..., returning the updated location. in both cases, the method call takes up to three arguments: a mandatory success callback: if the location retrieval is successful, the callback executes with a geolocationposition object as its only parameter, providing access to the location data. an optional error callback: if the location retrieval is unsuccessful, the callback executes with a geolocationpositionerror object as its only parameter, providing access information on what went wrong. an optional positionoptions object, which provides options for retrieval of the position data. ...
...And 7 more matches

Screen.lockOrientation() - Web APIs
r a string or an array of strings. passing several strings lets the screen rotate only in the selected orientations. the following strings represent the possible orientation requirements you may specify: portrait-primary it represents the orientation of the screen when it is in its primary portrait mode. ...
...rray of strings. passing several strings lets the screen rotate only in the selected orientations. the following strings represent the possible orientation requirements you may specify: portrait-primary it represents the orientation of the screen when it is in its primary portrait mode. ...
...ets the screen rotate only in the selected orientations. the following strings represent the possible orientation requirements you may specify: portrait-primary it represents the orientation of the screen when it is in its primary portrait mode. ...
...And 7 more matches

In Flow and Out of Flow - CSS: Cascading Style Sheets
inline. the list is displayed using flexbox to arrange the items into a row, however it too is participating in block and inline layout - the container has an outside display type of block. all of the elements can be said to be in flow. appearing on the page in the order that they are in the source. taking an item out of flow all elements are in-flow apart from: floated items items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow items create a new block formatting context (bfc) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. the root element therefore is out of flow, as the container for everything in our document, and establishes the block formatting context for t...
... that paragraph that have been shortened to cause the effect of wrapping content around the float. the box of our paragraph is still displaying according to the rules of normal flow. this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it. you cannot apply anything to the following in-flow content to achieve that. ...
...en shortened to cause the effect of wrapping content around the float. the box of our paragraph is still displaying according to the rules of normal flow. this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it. you cannot apply anything to the following in-flow content to achieve that. ...
...And 7 more matches

jspage - Archive of obsolete content
ldnodes).each(function(l){element.destroy(l); });return this;},dispose:function(){return(this.parentnode)?this.parentnode.removechild(this):this;},haschild:function(l){l=document.id(l,true);if(!l){return false; }if(browser.engine.webkit&&browser.engine.version<420){return $a(this.getelementsbytagname(l.tagname)).contains(l);}return(this.contains)?(this!=l&&this.contains(l)):!!(this.comparedocumentposition(l)&16); },match:function(l){return(!l||(l==this)||(element.get(this,"tag")==l));}});native.implement([element,window,document],{addlistener:function(o,n){if(o=="unload"){var l=n,m=this; n=function(){m.removelistener("unload",n);l();};}else{h[this.uid]=this;}if(this.addeventlistener){this.addeventlistener(o,n,false);}else{this.attachevent("on"+o,n); }return this;},removelistener:function(m,l){if(t...
...eturn a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",...
...height};},getscroll:function(){if(b(this)){return this.getwindow().getscroll(); }return{x:this.scrollleft,y:this.scrolltop};},getscrolls:function(){var i=this,h={x:0,y:0};while(i&&!b(i)){h.x+=i.scrollleft;h.y+=i.scrolltop;i=i.parentnode; }return h;},getoffsetparent:function(){var h=this;if(b(h)){return null;}if(!browser.engine.trident){return h.offsetparent;}while((h=h.parentnode)&&!b(h)){if(d(h,"position")!="static"){return h; }}return null;},getoffsets:function(){if(this.getboundingclientrect){var j=this.getboundingclientrect(),m=document.id(this.getdocument().documentelement),p=m.getscroll(),k=this.getscrolls(),i=this.getscroll(),h=(d(this,"position")=="fixed"); return{x:j.left.toint()+k.x-i.x+((h)?0:p.x)-m.clientleft,y:j.top.toint()+k.y-i.y+((h)?0:p.y)-m.clienttop};}var l=this,n={x:0,y:0};if(b...
...And 6 more matches

Box Objects - Archive of obsolete content
are generally used. the others have functions which are more easily accessible by methods mapped directly onto the element, since those types are generally only used with one particular element. the base box object, or the interface nsiboxobject, however, has a number of properties which are quite useful for xul development. the base box object has two useful features. first, you can retrieve the position and size of the xul element as displayed, and second, you can determine the order of the elements in the box as displayed, instead of their order as they are stored in the dom. retrieving position and size the box object provides six read only properties, x, y, screenx, screeny, width and height, for determining the currently displayed position and size of an element. all values returned are in ...
...the element, including css padding and borders. css margins are excluded. width, height the width and height properties are also measured in pixels and return the width and height of the element, including css padding and borders. css margins are excluded. *note that x, y refers to the portion of the element that is just inside any borders, which is inconsistent with the other four boxobject position and size references, which include borders as part of the element. the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. for example, a flexible element will change in size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" ...
...e the box object properties. this may be a bit confusing, but, the key is to remember that the width and height properties on an element return the size that was set in the xul while the width and height properties of the box object return the current size. hidden or collapsed element the hidden attribute will hide an element such that it will not be displayed. since it is not displayed, all four position and size properties of the box object will have the value 0. when an element is hidden, it is removed from the display and the layout objects are removed for it. thus, since it isn't displayed anywhere, it will have no position or size. the collapsed attribute will have the same effect to the user element visually, except that it leaves the element on screen and keeps the layout objects intact, b...
...And 6 more matches

Building up a basic demo with Babylon.js - Game development
ne to your code below the scene creation and the line where we defined the clearcolor. var camera = new babylon.freecamera("camera", new babylon.vector3(0, 0, -10), scene); there are many cameras available in babylon.js; freecamera is the most basic and universal one. to initialize it you need to pass it three parameters: any name you want to use for it, the coordinates where you want it to be positioned in the 3d space, and the scene you want to add it to. note: you probably noticed the babylon.vector3() method in use here — this defines a 3d position on the scene. babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc. let there be light there are various light sources available in babylon.js. the most basic one is the pointlight, which works like...
...re are various light sources available in babylon.js. the most basic one is the pointlight, which works like a flashlight — shining a spotlight in a given direction. add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added. geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development babylon.js provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. let's start by defining the geometry f...
...shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. in this case we're creating a box using the mesh.createbox method with it's own name, a size of 2, and a declaration of which scene we want it added to. note: the size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. if you save and refresh now, your object will look like a square, because it's facing the camera. the good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. let's apply a ...
...And 6 more matches

UI pseudo-classes - Learn web development
contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. ...
...margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. ...
...h: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. ...
...And 6 more matches

Applying styles and colors - Web APIs
on either side of the path. because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines. in the example below, 10 straight lines are drawn with increasing line widths. the line on the far left is 1.0 units wide. however, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 10; i++) { ctx.linewidth = 1 + i; ctx.beginpath(); ctx.moveto(5 + i * 14, 5); ctx.lineto(5 + i * 14, 140); ctx.stroke(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample obtaining crisp lines requires understanding how pa...
...us example code. to fix this, you have to be very precise in your path creation. knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line. ...
...very precise in your path creation. knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line. ...
...And 6 more matches

Pointer Lock API - Web APIs
it gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. it is ideal for first person 3d games, for example. ...
...ddeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) { alert("pointer lock failed"); } note: until firefox 50 the above events were prefixed with moz in firefox. extensions to mouse events the pointer lock api extends the normal mouseevent interface with movement attributes. two new attributes to mouse events—movementx and movementy—provide the change in mouse positions. the values of the parameters are the same as the difference between the values of mouseevent properties, screenx and screeny, which are stored in two subsequent mousemove events, enow and eprevious. in other words, the pointer lock parameter movementx = enow.screenx - eprevious.screenx. locked state when pointer lock is enabled, the standard mouseevent properties clientx, clienty, screenx, an...
...ored in two subsequent mousemove events, enow and eprevious. in other words, the pointer lock parameter movementx = enow.screenx - eprevious.screenx. locked state when pointer lock is enabled, the standard mouseevent properties clientx, clienty, screenx, and screeny are held constant, as if the mouse is not moving. the movementx and movementy properties continue to provide the mouse's change in position. there is no limit to movementx and movementy values if the mouse is continuously moving in a single direction. the concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge. unlocked state the parameters movementx and movementy are valid regardless of the mouse lock state, and are available even when unlocked for convenience. when the ...
...And 6 more matches

Using z-index - CSS: Cascading Style Sheets
if you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. layers are rendered in numerical order, with larger numbers above smaller numbers. ...
...if you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. layers are rendered in numerical order, with larger numbers above smaller numbers. ...
...y is specified, elements are rendered on the default rendering layer 0 (zero). if several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section stacking without the z-index property apply. in the following example, the layers' stacking order is rearranged using z-index. ...
...And 6 more matches

Stacking context example 1 - CSS: Cascading Style Sheets
the only stacking context is the root context. without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. ...
... the only stacking context is the root context. without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. ...
... the only stacking context is the root context. without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. ...
...And 6 more matches

align-items - CSS: Cascading Style Sheets
he interactive example below demonstrates some of the values for align-items using grid layout. 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. ...
...ms: center; /* pack items around the center */ align-items: start; /* pack items from the start */ align-items: end; /* pack items from the end */ align-items: flex-start; /* pack flex items from the start */ align-items: flex-end; /* pack flex items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-...
...al alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. the property doesn't apply to block-level boxes, and to table cells. flex-s...
...And 6 more matches

align-self - CSS: Cascading Style Sheets
is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...eline; align-self: stretch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe center; align-self: unsafe center; /* global values */ align-self: inherit; align-self: initial; align-self: unset; values auto computes to the parent's align-items value. normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or...
...tems exactly fills the alignment container along the cross axis. safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the relative sizes of the item and alignment container, the given alignment value is honored. formal definition initial valueautoapplies toflex items, grid items, and absolutely-positioned boxesinheritednocomputed valueauto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. its behavior depends on the layout model, as described for justify-self. otherwise the specified value.animation typediscrete formal syntax auto | normal | stretch | <b...
...And 6 more matches

background-size - CSS: Cascading Style Sheets
y or horizontally so that no empty space remains. auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> stretches the image in the corresponding dimension to the specified length. negative values are not allowed. <percentage> stretches the image in the corresponding dimension to the specified percentage of the background positioning area. the background positioning area is determined by the value of background-origin (by default, the padding box). however, if the background's background-attachment value is fixed, the positioning area is instead the entire viewport. negative values are not allowed. intrinsic dimensions and proportions the computation of values depends on the image's intrinsic dimensions (width and heigh...
...s or intrinsic proportions. background images created with the element() function use the intrinsic dimensions and proportions of the generating element. note: the behavior of <gradient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5). before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area. note: in gecko, background images created using the element() function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is svg, with the corresponding intrinsic proportion. this is non-standard behavior. based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as f...
...mensions and proportions, the rendered size of the background image is computed as follows: if both components of background-size are specified and are not auto: the background image is rendered at the specified size. ...
...And 6 more matches

justify-self - CSS: Cascading Style Sheets
ource for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. ...
...erty is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...note that justify-self is ignored in flexbox layouts. ...
...And 6 more matches

top - CSS: Cascading Style Sheets
the top css property participates in specifying the vertical position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of top depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. ...
...ntribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of top depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. when position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position. when position is set to sticky, the top property is used to compute the sticky-constraint rectangle. ...
... when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. when position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position. when position is set to sticky, the top property is used to compute the sticky-constraint rectangle. when position is set to static, the top property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. syntax ...
...And 6 more matches

Event reference
sition has begun running (fired before any delay starts). ...
... view events event name fired when ...
... view events event name fired when fullscreench...
...And 6 more matches

CSS3 - Archive of obsolete content
lyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are found via the css font-synthesis property. css basic user interface module level 3 recommendation since june 21st, 2018 adds: the abili...
...-index may be postponed to the next iteration of this module . support for icons, defined by the css icon property simultaneously with the new icon value of the css content property. at risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to css4. support for the css outline-offset property giving more control on the position of the outline. support for the css resize property allowing web authors to control if and how elements should be resized. support for the css text-overflow property defining how text overflows, if needed. at risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this modul...
...r new font-relative length units: rem and ch . definition for viewport-relative length units: vw, vh, vmax, and vmin . precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel . definition for <angle>, <time>, <frequency>, <resolution>. normative value to the definition of <color>, <image>, and <position>. definition for the calc(), attr(), and toggle() functional notations. at risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module. several types definition, like <ident> and <custom-ident>, have been deferred to css values and units module level 4. ...
...And 5 more matches

Building up a basic demo with Three.js - Game development
add() method, to add objects to this scene. camera we have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added. there are other types of camera available (cube, orthographic), but the simplest is perspective. to initialize it, we have to set its field of view and aspect ratio: the former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when re...
...ter the amount of scene the camera will show. imagine a normal camera view, versus a fish eye effect, which allows a lot more to be seen. the default value is 50. the aspect ratio is set to the current width and height of the window so it will be dynamically adjusted. we could set a fixed ratio — for example 16 ⁄ 9, which is the aspect ratio of a widescreen tv. the default value is 1. the z position, with the value of 50 units, is the distance between the camera and the center of the scene on the z axis. here we're moving the camera back, so the objects in the scene can be viewed. 50 feels about right. it's not too near, or too far, and the sizes of the objects allow them to stay on the scene, within the given field of view. the x and y values, if not specified, will default to 0. you shou...
...ra back, so the objects in the scene can be viewed. 50 feels about right. it's not too near, or too far, and the sizes of the objects allow them to stay on the scene, within the given field of view. the x and y values, if not specified, will default to 0. you should experiment with these values and see how they change what you see in the scene. note: the distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: milimeters, meters, feet, or miles. it's up to you. rendering the scene everything is ready, but we still can't see anything. although we've set-up the renderer, we still need to render everything. our render() function will do this job, with a little help from requestanimationframe(), which causes the scene to be re-rendered...
...And 5 more matches

create fancy boxes - Learn web development
e many examples, but we will always work on the most simple piece of html possible, a simple element: <div class="fancy">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having nega...
...turned into a blank canvas you'll fill. before we jump to some practical examples, let's step back a bit as there are two things you should know about backgrounds. it's possible to set several backgrounds on a single box. they are stacked on top of each other like layers. backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. <div class="fancy">hi! i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect. as ...
... css pseudo-elements. a cloud <div class="fancy">hi! i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. feel free to tweak this example to make a cloud that isn't flat at the bottom ;) */ border-radius: 100% 100% 0 0; } /* those are common style that apply to both our ::before and ::after pseudo elements. */ .fancy::before, .fancy::after {...
...And 5 more matches

Styling lists - Learn web development
e looked at general spacing techniques for lists, let's explore some list-specific properties. there are three properties you should know about to start with, which can be set on <ul> or <ol> elements: list-style-type: sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list. list-style-position: sets whether the bullets appear inside the list items, or outside them before the start of each item. list-style-image: allows you to use a custom image for the bullet, rather than a simple square or circle. bullet styles as mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. in our example, we've set the ordered list to use upper...
...re or circle. bullet styles as mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: upper-roman; } this gives us the following look: you can find a lot more options by checking out the list-style-type reference page. ...
...yles as mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: upper-roman; } this gives us the following look: you can find a lot more options by checking out the list-style-type reference page. ...
...And 5 more matches

Advanced form styling - Learn web development
i like strawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design. ...
...h a custom checkbox design. ...
...change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article...
...And 5 more matches

Video and Audio APIs - Learn web development
to get an idea of what the finished product will look like, check out our finished version. exploring the css now open the css file and have a look inside. the css for the example is not too complicated, but we'll highlight the most interesting bits here. first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden. in our javascript later on, we will set the controls to visible, and remove the controls attr...
...this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use the ::before sele...
...utting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow. ...
...And 5 more matches

Performance best practices for Firefox front-end engineers
te steps of the pipeline, this hacks blog post does a great job of explaining it. to achieve a 60 fps frame rate, all of the above has to happen in 16 milliseconds or less, every frame. note that requestanimationframe() lets you queue up javascript to run right before the style flush occurs. this allows you to put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames. see detecting and avoiding synchronous reflow below for more information. this also means that requestanimationframe() is not a good place to put queries for layout or s...
...appens, some of them will be postponed until the next frame (or possibly multiple frames, if necessary), this skipping of frames is called jank. generally speaking, you force a synchronous style flush any time you query for style information after the dom has changed within the same frame tick. depending on whether or not the style information you’re asking for has something to do with size or position, you may also cause a layout recalculation (also referred to as layout flush or reflow), which is also an expensive step (see detecting and avoiding synchronous reflow below). to avoid this: avoid reading style information if you can. if you must read style information, do so at the very beginning of the frame, before any changes have been made to the dom since the last time a style flush occurr...
...striving for interruptible layout is always good practice because uninterruptible layout has the potential to be much worse (see next section). to repeat, only interruptible reflows in web content can be interrupted. uninterruptible reflow uninterruptible reflow is what we want to avoid at all costs. uninterruptible reflow occurs when some dom node’s styles have changed such that the size or position of one or more nodes in the document will need to be updated, and then javascript asks for the size or position of anything. since everything is pending a reflow, the answer isn't available, so everything stalls until the reflow is complete and the script can be given an answer. flushing layout also means that styles must be flushed to calculate the most up-to-date state of things, so it's a doub...
...And 5 more matches

nsIDOMGeoGeolocation
dom/interfaces/geolocation/nsidomgeogeolocation.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports implemented by: @mozilla.org/geolocation;1. ...
... .getservice(components.interfaces.nsidomgeogeolocation); note: if nsidgeogeolocation throws an exception when importing, try using this: var geolocation = components.classes["@mozilla.org/geolocation;1"] .getservice(components.interfaces.nsisupports); method overview void clearwatch(in unsigned short watchid); void getcurrentposition(in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options); unsigned short watchposition(in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopositionerrorcallback errorcallback, ...
...ck, [optional] in nsidomgeopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options); unsigned short watchposition(in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options); attributes attribute type description lastposition nsidomgeoposition the most recently retrieved location as seen by the provider. may be null. read only. methods clearwatch() when the clearwatch() method is called, the watch() process stops calling for new position identifiers and cease invoking callbacks. void clearwatch( in unsigned ...
...And 5 more matches

Drawing shapes with canvas - Web APIs
as and we will see how that can be done. the grid before we can start drawing, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. d...
...first let's look at the rectangle. there are three functions that draw rectangles on the canvas: fillrect(x, y, width, height) draws a filled rectangle. strokerect(x, y, width, height) draws a rectangular outline. clearrect(x, y, width, height) clears the specified rectangular area, making it fully transparent. each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size. below is the draw() function from the previous page, but now it is making use of these three functions. rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canv...
...rm a shape. every time this method is called, the list is reset and we can start drawing new shapes. note: when the current path is empty, such as immediately after calling beginpath(), or on a newly created canvas, the first path construction command is always treated as a moveto(), regardless of what it actually is. for that reason, you will almost always want to specifically set your starting position after resetting a path. the second step is calling the methods that actually specify the paths to be drawn. we'll see these shortly. the third, and an optional step, is to call closepath(). this method tries to close the shape by drawing a straight line from the current point to the start. if the shape has already been closed or there's only one point in the list, this function does nothing. n...
...And 5 more matches

DOMPoint - Web APIs
a dompoint object represents a 2d or 3d point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. dompoint is based on dompointreadonly but allows its properties' values to be changed. in general, a positive x component represents a position to the right of the origin, a positive y component is downward from the origin, and a positive z component extends outward from the screen (in other words, toward the user). constructor dompoint() creates and returns a new dompoint object given the values of zero or more of its coordinate components and optionally the w perspective value. you can also use an existing dompoint or dompointreadonly or a dompointinit dictionary to create a new point by calling the dompoint.fromp...
...ich provides the values for its properties. properties dompoint inherits properties from its parent, dompointreadonly. dompoint.x the x coordinate of the dompoint. dompoint.y the y coordinate of the dompoint. dompoint.z the z coordinate of the dompoint. dompoint.w the perspective value of the dompoint. examples in the webxr device api, dompointreadonly values are used to represent positions and orientations. in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. function onxrframe(...
...h ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. ...
...And 5 more matches

PannerNode.panningModel - Web APIs
the possible values are: equalpower: represents the equal-power panning algorithm, generally regarded as simple and efficient. equalpower is the default value. hrtf: renders a stereo output of higher quality than equalpower — it uses a convolution with measured impulse responses from human subjects. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; value a enum — see panningmodeltype. ...
...sured impulse responses from human subjects. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; value a enum — see panningmodeltype. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...And 5 more matches

UIEvent.layerX - Web APIs
syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
...ction showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-p...
...And 5 more matches

UIEvent.layerY - Web APIs
syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
...ction showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-p...
...And 5 more matches

Creating 3D objects using WebGL - Web APIs
« previousnext » let's take our square plane into three dimensions by adding five more faces to create a cube. to do this efficiently, we're going to switch from drawing using the vertices directly by calling the gl.drawarrays() method to using the vertex array as a table, and referencing individual vertices in that table to define the positions of each face's vertices, by calling gl.drawelements(). consider: each face requires four vertices to define it, but each vertex is shared by three faces. we can pass a lot fewer data around by building an array of all 24 vertices, then referring to each vertex by its index into that array instead of moving entire sets of coordinates around. if you wonder why we need 24 vertices, and not just 8, it is because each corner belongs to three faces o...
...ferent colors, and a single vertex needs to have a single specific color; therefore we will create three copies of each vertex in three different colors, one for each face. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. ...
...r; therefore we will create three copies of each vertex in three different colors, one for each face. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. define the positions of the cube's vertices first, let's build the cube's vertex position buffer by updating the code in initbuffers(). ...
...And 5 more matches

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's getoffsetreferencespace() method returns a new reference space object which describes the relative difference in position between the object on which the method is called and a given point in 3d space. the object returned by getoffsetreferencespace() is an xrreferencespace if called on an xrreferencespace, or an xrboundedreferencespace if called on an object of that type. in other words, when you have an object in 3d space and need to position another object relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have relative to the position and orientation of the object on which you call getoffsetreferencespace(). then, when drawing the scene, you can use the offset reference sp...
...this is demonstrated in the example implementing rotation based on non-xr inputs, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle. ...
...this is demonstrated in the example implementing rotation based on non-xr inputs, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle. ...
...And 5 more matches

XRReferenceSpace: reset event - Web APIs
this is common when the user calibrates or recalibrates an xr device, or if the device automatically changes its origin after losing tracking of the user, then re-gaining it. in the case of xrboundedreferencespace objects, the reset event can also be fired when the boundsgeometry changes. in either case, the event is sent before any webxr animation frames which make use of the new origin are executed. ...
... pending frame, to ensure that those callbacks have the updated coordinate system available. there are a number of reasons why a reset might occur. most common among them are the following: the user has manually reset the coordinate system, such as by requesting that the headset recalibrate itself to ensure that the facing direction and hand controllers are synchronized with the user's actual position and facing. this is primarily an issue for local or local-floor reference spaces. for a bounded-floor reference space, the coordinate system can be reset if the user exits the boundaries of the reference space and enters a new one (such as by crossing from one level to another in a game, where each level is its own map with its own coordinate system). the tracking system has temporarily lost th...
... the coordinate system can be reset if the user exits the boundaries of the reference space and enters a new one (such as by crossing from one level to another in a game, where each level is its own map with its own coordinate system). the tracking system has temporarily lost the user, then regained them, but not until after they had moved enough to leave the immediate vicinity of the last-known position. primarily an issue for unbounded reference spaces. the user is in an unbounded reference space and has moved far enough from the starting position (the reference space's origin) that floating-point or other forms of error or drift are problematic. the coordinate system is thus reset with its new origin at or near the user's current position. the webxr infrastructure or hardware drivers detecte...
...And 5 more matches

Coordinate systems - CSS: Cascading Style Sheets
when specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in algebra), its position is defined relative to a fixed point in the context. this fixed point is called the origin. the position is specified as the number of pixels offset from the origin along each dimension of the context. this guide describes the standard coordinate systems used by the css object model. these are generally only different in terms of where their origin is located. dimensions in the coordinate systems used by web technologies, convention dictates that the horizontal offset is called the x-coordinate, where a negative value indicates a position to the left of the origin and a positive value is to the right of the origin. the y-coordinate specifies the vertical offset,...
...nsform. however, we'll only talk about the standard coordinate system for now. standard cssom coordinate systems there are four standard coordinate systems used by the css object model, as described below. offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred. for example, when a mouse event occurs, the position of the mouse as specified in the event's offsetx and offsety properties are given relative to the top-left corner of the node to which the event has been delivered. the origin is inset by the distances specified by padding-left and padding-top. client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. this is th...
... distances specified by padding-left and padding-top. client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. this is the entire viewing area in which the document is presented. scrolling is not a factor. on a desktop computer, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the browser window. the top-left corner of the window is always (0, 0), regardless of the content of the document or any scrolling that may have been done. in other words, scrolling the document will change the client coordinates of a given position within the document. page the "page" coordinate system giv...
...And 5 more matches

Border-radius generator - CSS: Cascading Style Sheets
e-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + la...
...: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position: relative; } #preview .content { width: 100%; height: 100%; display: block; } #preview input { color: #333; border: 1px solid #ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #fff; position: relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: ...
...#ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #fff; position: relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .handle { width: 16px; height: 16px; position: absolute; z-index: 2; } .handle-top-left { top: -12px; left: -12px; cursor: se-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; } .handle-top-right { top: -12px; right: -12px; cursor: sw-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; } .handle-bottom-right { bottom: -12...
...And 5 more matches

align-content - CSS: Cascading Style Sheets
layout to demonstrate some of the values of this property. 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. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...flush to each other against the edge of the alignment container depending on the flex container's cross-end side. this only applies to flex layout items. for items that are not children of a flex container, this value is treated like end. center the items are packed flush to each other in the center of the alignment container along the cross axis. normal the items are packed in their default position as if no align-content value was set. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one f...
... mode were start. unsafe used alongside an alignment keyword. regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. ...
...And 5 more matches

linear-gradient() - CSS: Cascading Style Sheets
if specified, it consists of the word to and up to two keywords: one indicates the horizontal side (l...
...if specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side keywords does not matter. ...
...e values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). <color-hint> the color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint betwee...
...And 5 more matches

mask - CSS: Cascading Style Sheets
mmended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. ...
...k: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as luminance mask */ mask: url(masks.svg#star) 40px 20px; /* element within svg graphic used as mask positioned 40px from the top and 20px from the left */ mask: url(masks.svg#star) 0 0/50px 50px; /* element within svg graphic used as mask with a width and height of 50px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by th...
...peat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source. see mask-image. <masking-mode> sets the masking mode of the mask image. see mask-mode. <position> sets the position of the mask image. see mask-position. <bg-size> sets the size of the mask image. see mask-size. <repeat-style> sets the repetition of the mask image. see mask-repeat. <geometry-box> if only one <geometry-box> value is given, it sets both mask-origin and mask-clip. if two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip. <g...
...And 5 more matches

radial-gradient() - CSS: Cascading Style Sheets
ce 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 /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keywor...
...f the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. ...
... <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. ...
...And 5 more matches

transition-delay - CSS: Cascading Style Sheets
all elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .bo...
...ebkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } ...
...cument.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } .box1{...
...And 5 more matches

transition-duration - CSS: Cascading Style Sheets
elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-ou...
... transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-o...
...ent.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotat...
...And 5 more matches

<input type="time"> - HTML: Hypertext Markup Language
ere's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
... or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid. depending on what browser you're using, you might find that times outside the specified range might not even be selec...
...display an error message (and highlight the input as invalid) if your entry doesn't match the pattern nn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern. then there's the problem of the user having no idea exactly what format the time is expected to be in. ...
...And 5 more matches

Audio for Web games - Game development
cross all modern desktop and mobile browsers, with the exception of opera mini. with that in mind, it's an acceptable approach for many situations to use the web audio api (see the can i use web audio api page for more on browser compatibility). the web audio api is an advanced audio javascript api that is ideal for game audio. developers can generate audio and manipulate audio samples as well as positioning sound in 3d game space. a feasible cross-browser strategy would be to provide basic audio using the standard <audio> element and, where supported, enhance the experience using the web audio api. element and, where supported, enhance the experience using the web audio api. note: significantly, ios safari now supports the web audio api, which means it's now possible to write web-based game...
...ar beats = relativetime / tempo; var remainder = beats - math.floor(beats); var delay = tempo - (remainder*tempo); source.start(context.currenttime+delay, relativetime+delay); } note: you can try our wait calculator code here, on jsfiddle (i've synched to the bar in this case). note: if the first parameter is 0 or less than the context currenttime, playback will commence immediately. ...
...etime / tempo; var remainder = beats - math.floor(beats); var delay = tempo - (remainder*tempo); source.start(context.currenttime+delay, relativetime+delay); } note: you can try our wait calculator code here, on jsfiddle (i've synched to the bar in this case). note: if the first parameter is 0 or less than the context currenttime, playback will commence immediately. ...
...And 4 more matches

Player paddle and controls - Game development
his point you should grab the paddle graphic from github, and save it in your /img folder. rendering the paddle, with physics next up, we will init our paddle by adding the following add.sprite() call inside the create() function — add it right at the bottom: paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the screen. in our case the world is the same as the canvas, but for other types of games, like side-scrollers for example, the world will be bigger, and you can tinker with it to create interesting effects. as you'll notice if you reload your index.html at this point, the paddle is currently not exactly in ...
...dth*0.5 will be right in the middle of the screen. in our case the world is the same as the canvas, but for other types of games, like side-scrollers for example, the world will be bigger, and you can tinker with it to create interesting effects. as you'll notice if you reload your index.html at this point, the paddle is currently not exactly in the middle. why? because the anchor from which the position is calculated always starts from the top left edge of the object. we can change that to have the anchor in the middle of the paddle's width and at the bottom of it's height, so it's easier to position it against the bottom edge. add the following line below the previous new one: paddle.anchor.set(0.5,1); the paddle is now positioned right where we want it to be. now, to make it collide with th...
...n set the body of the paddle to be immovable, so it won't move when the ball hits it. to do this, add the below line at the bottom of the create() function: paddle.body.immovable = true; now it works as expected. controlling the paddle the next problem is that we can't move the paddle. to do that we can use the system's default input (mouse or touch, depending on platform) and set the paddle position to where the input position is. add the following new line to the update() function, as shown: function update() { game.physics.arcade.collide(ball, paddle); paddle.x = game.input.x; } now on every new frame the paddle's x position will adjust accordingly to the input's x position, however when we start the game, the position of the paddle is not in the middle. it's because the input p...
...And 4 more matches

Example 1 - Learn web development
om form widget. ...
... <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10e...
...*/ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; paddi...
...And 4 more matches

Useful string methods - Learn web development
count from 0, not 1! you could use this to, for example, find the first letter of a series of strings and order them alphabetically. to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character. finding a substring inside a string and extracting it sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). this can be done using the indexof() method, which takes a single parameter — the substring you want to search for. if the substring is found insid...
...substring inside a string and extracting it sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). this can be done using the indexof() method, which takes a single parameter — the substring you want to search for. if the substring is found inside the main string, it returns a number representing the index position of the substring — which character number of the main string the substring starts at. if the substring is not found inside the main string, it returns a value of -1. try this: browsertype.indexof('zilla'); this gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla". such code could be used to filter strings. for examp...
...egation operator, as shown below. you could do something like this: if(browsertype.indexof('mozilla') !== -1) { // do stuff with the string } when you know where a substring starts inside a string, and you know at which character you want it to end, slice() can be used to extract it. try the following: browsertype.slice(0,3); this returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. so the slice happens from the first position, up to, but not including, the last position. in this example, since the starting index is 0, the second parameter is equal to the length of the string being returned. also, if you know that you want to extract all of the remaining charac...
...And 4 more matches

Standard OS Libraries
also known as winapi32 or just winapi. a list of all the functions available through this api can be found at the msdn winapi index. for finding out the values and types of arguments and returns of the functions you want to use from this api, you must visit the functions page on this linked msdn site; it will give you all that information. example: getcursorpos i wanted to get the mouse cursor position without using a mousemove listener, as this is a high overhead event listener. so i went to the msdn winapi index page and then went to the "cursors" category and came across getcursorpos. i then searched it on msdn and saw that it needed the user32.dll. (msdn - getcursorpos) this example was created on windows xp sp2. it is a full working example; just copy & paste it to try it out. components...
...re: gnome developer :: gdk 2 reference manual. for gdk3 documentation is found here: gnome developer :: gdk 3 reference manual. because gnome is in the name of the websites don't get confused and think this only works on gnome. it is true though that gdk was developed by the gnome team. example: gdk_window_get_pointer this example is fot the gdk 2.0 library. in gdk 3.0 the gdk_window_get_device_position function was deprecated, see below for gdk 3.0 example. components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); var void = ctypes.void_t; // https://developer.gnome.org/gdk3/stable/...
... gdkwindow.ptr, // window gint.ptr, ...
...And 4 more matches

AbstractRange - Web APIs
the start and end points of a section of content within the document. as an abstract interface, you will not directly instantiate an object of type abstractrange. instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...e abstractrange. instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...ke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed. a collapsed range is one whose start position and end position are the same, resulting in a zero-character-long range. endcontainer read only the dom node in which the end of the range, as specified by the endoffset property, is located. endoffset read only an integer value indicating the offset, in characters, from the beginning of the node's contents to the beginning of the range represented by the range object. this value must be le...
...And 4 more matches

AudioListener.dopplerFactor - Web APIs
x var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.dopplerfactor = 1; value a double indicating the doppler effect's pitch shift value. the value is 1 by default. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.forwardX - Web APIs
ioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardx.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.forwardY - Web APIs
ioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardy.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.forwardZ - Web APIs
octx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardz.value = 0; value an audioparam. its default value is -1, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.setOrientation() - Web APIs
ear analysis terms, they must be perpendicular to each other. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setorientation(0,0,-1,0,1,0); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.speedOfSound - Web APIs
n delay is automatically applied to a sound far from the listener. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.speedofsound = 343.3; value a double. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.upX - Web APIs
r audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upx.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.upY - Web APIs
r audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upy.value = 0; value an audioparam. its default value is 1, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

AudioListener.upZ - Web APIs
r audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upz.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

BaseAudioContext.createPanner() - Web APIs
the createpanner() method of the baseaudiocontext interface is used to create a new pannernode, which is used to spatialize an incoming audio stream in 3d space. the panner node is spatialized in relation to the audiocontext's audiolistener (defined by the audiocontext.listener attribute), which represents the position and orientation of the person listening to the audio. syntax baseaudioctx.createpanner(); returns a pannernode. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. yo...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

Element - Web APIs
element. for example, the htmlelement interface is the base interface for html elements, while the svgelement interface is the basis for all svg elements. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...
...ments. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...
... value of the named attribute from the current node and returns it as an object. element.getattributenames() returns an array of attribute names from the current element. element.getattributens() retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an object. element.getboundingclientrect() returns the size of an element and its position relative to the viewport. element.getclientrects() returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client. element.getelementsbyclassname() returns a live htmlcollection that contains all descendants of the current element that possess the list of classes given in the parameter. element.getelementsbytagname() returns a live htmlcollection ...
...And 4 more matches

PannerNode.distanceModel - Web APIs
e is the default value of distancemodel. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.distancemodel = 'inverse'; value a enum — see distancemodeltype. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

PannerNode.maxDistance - Web APIs
xdistance = 10000; value a double. the default is 10000, and non-positive values are not allowed. exceptions rangeerror the property has been given a value that is outside the accepted range. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

PannerNode.setOrientation() - Web APIs
dinate system. the default value of the direction vector is (1, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

PannerNode.setVelocity() - Web APIs
meters per second. the default value of the velocity vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see th...
... of one or both of these as the application is used. you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. in the example you can see this being controlled by the functions moveright(), moveleft(), etc., which set new values for the panner position via the positionpanner() function. to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audi...
...on. ...
...And 4 more matches

TextEncoder.prototype.encodeInto() - Web APIs
encodeintoresult dictionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8. this may be less than string.length if uint8array did not have enough space. written the number of bytes modified in the destination uint8array. the bytes written are guaranteed to form complete utf-8 byte sequences. ...
...d in the destination uint8array. the bytes written are guaranteed to form complete utf-8 byte sequences. encode into a specific position encoder.encodeinto always puts its output at the start of the array. however, it is sometimes useful to make the output start at a particular index. the solution is typedarray.prototype.subarray(). observe. ...
...array. the bytes written are guaranteed to form complete utf-8 byte sequences. encode into a specific position encoder.encodeinto always puts its output at the start of the array. however, it is sometimes useful to make the output start at a particular index. the solution is typedarray.prototype.subarray(). observe. ...
...And 4 more matches

Lighting in WebGL - Web APIs
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // right 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // left -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0 ]; gl.bufferdata(gl.array_buffer, new float32array(vertexnormals), gl.static_draw); ... return { position: positionbuffer, normal: normalbuffer, texturecoord: texturecoordbuffer, indices: indexbuffer, }; this should look pretty familiar by now; we create a new buffer, bind it to be the buffer we're working with, then send along our array of vertex normals into the buffer by calling bufferdata(). then we add the code to drawscene() to bind the normals array to a shader attribute so t...
... update the shaders now that all the data the shaders need is available to them, we need to update the code in the shaders themselves. the vertex shader the first thing to do is update the vertex shader so it generates a shading value for each vertex based on the ambient lighting as well as the directional lighting. ...
...well as the directional lighting. ...
...And 4 more matches

XRRigidTransform() - Web APIs
w must always be 1. ...
...w must always be 1. ...
...w must always be 1. ...
...And 4 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
to the specified pixel which fits to the layout you desire. you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose. item placement you can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. grid also contains an algorithm to control the placement of items not given an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a container” are included. alignment control grid contains alignment features so we can control how the items align once plac...
... padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two <p>i have some more content in.</p> <p>this makes me taller than 100 pixels.</p> </div> <div>three</div> <div>four</div> <div>five</div> </div> grid lines it should be noted that when we define a grid we define the grid tracks, not the lines. ...
...the following example demonstrates doing this in a simple way. when placing an item, we target the line – rather than the track. ...
...And 4 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in these guides, i have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. ...
... of grid layout: the support for different writing modes that is built into the specification. for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. ...
... different writing modes that is built into the specification. for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. ...
...And 4 more matches

Stacking with floated blocks - CSS: Cascading Style Sheets
for floated blocks, the stacking order is a bit different. floating blocks are placed between non-positioned blocks and positioned blocks: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected. this happens according to standard float behaviour. ...
...rder of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected. this happens according to standard float behaviour. this behavior can be shown with an added rule to the above list: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (div #4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks. this is due t...
...ied to the non-positioned block (div #4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks. this is due to a peculiar part of the specification: applying a opacity value creates a new stacking context (see what no one told you about z-index). ...
...And 4 more matches

Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. ...
...in order to put it above all first-level menus, a z-index is used. the problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent. ...
...ing on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order to put it above all first-level menus, a z-index is used. the problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent. so a third-level menu will be stacked under the following second-level menus, because all second-level menus share the same z-index value and the default stacki...
...And 4 more matches

justify-items - CSS: Cascading Style Sheets
e for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. ...
...dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. for absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...note that justify-items is ignored in flexbox layouts. ...
...And 4 more matches

offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or svg coordinate system. syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment start...
... url() references the id of an svg shape -- circle, ellipse, line, path, polyg...
...a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defined with svg coordinate syntax. none specifies no motion path at all. description this property defines a path an animated element can follow. an offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. ...
...And 4 more matches

perspective-origin - CSS: Cascading Style Sheets
the perspective-origin css property determines the position at which the viewer is looking. it is used as the vanishing point by the perspective property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. ...
...bute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. it can ...
...when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the width of the element. the value may be negative. left, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. right, a keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the followi...
...And 4 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
hts the input as invalid) if your entry doesn't match the pattern nnnn-nn-nntnn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...n-nntnn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...oesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...And 4 more matches

<input type="image"> - HTML: Hypertext Markup Language
ta points are submitted to the server automatically by the browser — x and y. you can see this in action in our x y coordinates example. when you click on the image to submit the form, you'll see the data appended to the url as parameters, for example ?x=52&y=55. ...
...nd y. you can see this in action in our x y coordinates example. when you click on the image to submit the form, you'll see the data appended to the url as parameters, for example ?x=52&y=55. if the image input has a name attribute, then keep in mind that the specified name is prefixed on every attribute, so if the name is position, then the returned coordinates would be formatted in the url as ?position.x=52&position.y=55. this, of course, applies to all other attributes as well. these are the x and y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image. these can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. t...
... a map that when clicked, sends the coordinates that were clicked to the server. the server-side code then works out what location was clicked on, and returns information about places nearby. in our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for. adjusting the image's position and scaling algorithm you can use the object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's size is adjusted to fit within the frame. this allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the im...
...And 4 more matches

<input type="month"> - HTML: Hypertext Markup Language
ere's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
... or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it...
...t as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates (such as 0000-42), or incorrectly formatted dates that follow the pattern. there's also the problem that the user won't necessarily know which of the many date formats is expected. we have work left to do. ...
...And 4 more matches

<input type="search"> - HTML: Hypertext Markup Language
tered into your database. a note on styling there are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values. input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. making input required you can use the required ...
...the following example is from firefox: different messages will be shown when you try to submit the form with different types of invalid data conta...
...the following example is from firefox: different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples. input value length you can specify a minimum le...
...And 4 more matches

MIME types (IANA media types) - HTTP
ed with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header). important mime types for web developers application/octet-stream this is the default for binary files. as it means unknown binary file, browsers usually don't execute it, or even ask if it should be executed. they treat it as if the content-disposition header was set to attachment, and propose a "save as" dialog. text/plain this is the default for textual files. even if it really means "unknown textual file," browsers assume they can display it. note that text/plain does not mean "any kind of textual data." if they expect a specific kind of textual data, they will likely not consider it a match. specifically if they download a text/plain fi...
...ideo codec used within it; vorbis is the usual audio codec. multipart/form-data the multipart/form-data type can be used when sending the values of a completed html form from browser to server. as a multipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash --). ...
...tipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash --). each part is its own entity with its own http headers, content-disposition, and content-type for file uploading fields. ...
...And 4 more matches

Object.prototype.constructor - JavaScript
otype.constructor = createdconstructor // sets the correct constructor for future use createdconstructor.prototype.create = function create() { return new this.constructor() } new createdconstructor().create().create() // it's pretty fine ok, now it's pretty clear why changing the constructor can be useful. let's consider one more case. ...
...uture use createdconstructor.prototype.create = function create() { return new this.constructor() } new createdconstructor().create().create() // it's pretty fine ok, now it's pretty clear why changing the constructor can be useful. let's consider one more case. ...
...r.prototype.create = function create() { return new this.constructor() } new createdconstructor().create().create() // it's pretty fine ok, now it's pretty clear why changing the constructor can be useful. let's consider one more case. ...
...And 4 more matches

text-anchor - SVG: Scalable Vector Graphics
here the wrapping area is determined from the inline-size property relative to a given point. it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the x and y attributes on the <text> element, any x or y attribute values on a <tspan>, <tref> or <altglyph> element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element. note: as a presentati...
.../> <circle cx="60" cy="110" r="3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position. for an element with a direction property value of ltr (typical for most european languages), the left side of the text is rendered at the initial text position. for an element with a direction property value of rtl (typical for arabic and hebrew), the right side of the text is rendered at the initial text position. for an element with a vertical primary text direction (often typical for asian te...
...(for text on a path, conceptually the text string is first laid out in a straight line. the midpoint between the start of the text string and the end of the text string is determined. ...
...And 4 more matches

x - SVG: Scalable Vector Graphics
g>, x defines the x coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last...
...if there are more values than glyphes, extra values are ignored. ...
... list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with a single value --> <text y="40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50%, 75%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; st...
...And 4 more matches

y - SVG: Scalable Vector Graphics
vg>, y defines the y coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last...
...if there are more values than glyphes, extra values are ignored. ...
...fault value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="55%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of sv...
...And 4 more matches

Example - SVG: Scalable Vector Graphics
combined, we get this very natural-looking behavior. this is done completely in w3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. ...
...{ clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles. first, each mote tries to move towards the cursor, and second each mote tries to move away from the average mote position. combined, we get this very natural looking behavior. </p> <p> this is done completely in w3c standards–xhtml, svg and javascript–no flash or any vendor specific extensions. currently, this will work in mozilla firefox version 1.5 and above. </p> <div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots ...
... { mouse_x = evt.clientx; mouse_y = evt.clienty; var widget = document.getelementbyid('cursor'); widget.setattributens(null,'cx',mouse_x); widget.setattributens(null,'cy',mouse_y); } document.onmousemove = onmousemove; // determine (x,y) of the cursor function cursor() { return [mouse_x, mouse_y]; } // determine average (x,y) of the swarm function averagemoteposition() { if( !motes ) return [0,0]; if( motes.length == 0 ) return [0,0]; var i; var sum_x=0, sum_y=0; for(i=0; i<motes.length; i++) { sum_x += motes[i].x; sum_y += motes[i].y; } return [sum_x/motes.length, sum_y/motes.length]; } // a nicer, integer random function rand(modulo) { return math.round( math.random() * (modulo-1)); } // class mo...
...And 4 more matches

StringView - Archive of obsolete content
nce to stringview.bufferview or a new arraybufferview of stringview.buffer will be created (depending on startoffset and length arguments passed). a new arraybufferview of stringview.buffer will be created. arraybufferview object reference to input.buffer. object reference to input or a new arraybufferview of the buffer input.buffer (depending on many factors regarding the position of the focused parts). object reference to input or a new arraybufferview of the buffer input.buffer (depending on many factors regarding the position of the focused parts). other ordered object (like array, collections, etc.) a new arraybuffer will be created. object reference to stringview.bufferview or a new arraybufferview of stringview.buffer will be created (dependin...
...presentation of the whole buffer as an array of 8-bit, 16-bit, or 32-bit integers (depending on the chosen encoding). stringview instances' methods makeindex() syntax stringview.makeindex([characterslength[, startfrom]]) description if the characterslength argument is a number it will be taken as codepoints length and makeindex() will return the index in elements of that position starting from 0. if the startfrom argument is passed the analysis will be done starting from it. if the characterslength argument is omitted, makeindex() will return the length in codepoints (ascii or utf-encoded) of the stringview object. arguments characterslength optional a number expressing the distance in codepoints from startfrom of the index of stringview.rawdata to be return...
... the analysis will be done starting from it. if the characterslength argument is omitted, makeindex() will return the length in codepoints (ascii or utf-encoded) of the stringview object. arguments characterslength optional a number expressing the distance in codepoints from startfrom of the index of stringview.rawdata to be returned. startfrom optional a number expressing the position in raw elements of the characters parts to skip. if omitted it will be considered as 0. examples var mystringview = new stringview("\u6432\u6432\u6432\u6432"); alert(mystringview.makeindex()) // 4 alert(mystringview.makeindex(2)) // 6 …using the startfrom argument… var mystringview = stringview.makefrombase64("5lit5pahigvzcghdsw9sievuz2xpc2gg4ks54ks/4kso4kwn4ksm4kwainin2yty...
...And 3 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
o an interview and in the process shed a lot of light on what goes into a standards-based redesign. wired news redesign in a nutshell driven by xhtml 1.0 transitional and css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple css positioning; vastly increased accessibility without special coding or user agent detection. why did you pursue a standards-based redesign of wired news? as network design manager at lycos for the last two years, i've been creating and documenting design standards for our network of sites. this includes rules and guidelines applying to everything from headers, footers, page hierarchy, titles, typograph...
...ntent is not locked into a specific table structure, we have much more flexibility in how we present that content. a few changes to the css can completely alter the presentation of thousands of pages. as a very welcome side benefit, we also believe the accessibility of wired news will dramatically improve without the clutter of nested layout tables. are you setting up your columns with floats or positioning? in trying to eliminate that last table i was using to set the column structure of our pages, i took a close look at both floated divs and positioned divs. i went back and forth between each one for two weeks, and finally narrowed in on positioned divs as the choice for wired news. why did you choose positioning over floats? floats had a few disadvantages from my perspective. one was the re...
... center column content to appear first in browsers that got the un-styled version. with floats, either the left column or the right column always had to be drawn first. for sites that rely on a left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior. ...
...And 3 more matches

Creating a Web based tone generator - Archive of obsolete content
nd plays the resulting tone. the function requestsounddata() produces the samples to be played. this function is called at a certain interval through the setinterval() function. the function mozwriteaudio() is called to write those samples produced in the audio stream. in order to always have samples to play, a buffer of 500 ms is created. the function mozcurrentsampleoffset() is used to know the position of the samples being played so that we can fill a 500 ms buffer of audio samples. <!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <input type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> fun...
... <input type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output. var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffersize = samplerate / 2; // buffer 500ms var tail = null; // the function called with regular interval to populate // the audio output buffer. setinterval(function() { var written; // check if some data was not written in previous attempts. if(tail) { written = audio.mozwriteaudio(tail); ...
... var prebuffersize = samplerate / 2; // buffer 500ms var tail = null; // the function called with regular interval to populate // the audio output buffer. setinterval(function() { var written; // check if some data was not written in previous attempts. ...
...And 3 more matches

openPopup - Archive of obsolete content
« xul reference home openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. ...
...de or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. ...
... iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. ...
...And 3 more matches

Panels - Archive of obsolete content
cript if desired. when you want to associate a panel with a button, place the <panel> element directly inside the button element. you also need to set the type attribute on the button to the value panel, or the button will look and behave like a regular button. the popup panel will, by default, appear with its topleft corner just underneath the bottom edge of the button, much as a menu does. the position can, however, be changed. for more information about positioning the popup, see positioning popups. only buttons (and toolbarbuttons) have this automatic behaviour which opens the popup when pressed. for other types of elements, you need to use a different technique as in the following example. <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" val...
... is pressed on the element with the popup attribute, the corresponding panel will be displayed. for instance, to attach the popup defined above to a label, use the following code: <label value="search" popup="search-panel"/> the result is a search button which opens a panel for entering the search term. when using the popup attribute, the panel will appear with the top left corner at the mouse position. ...
...yed. for instance, to attach the popup defined above to a label, use the following code: <label value="search" popup="search-panel"/> the result is a search button which opens a panel for entering the search term. when using the popup attribute, the panel will appear with the top left corner at the mouse position. in this case, you may wish to have the popup appear below the label instead. the position attribute may be used to control the placement of the popup. here is a complete example: <panel id="search-panel" position="after_start"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> <label value="search" popup="search-panel"/> the position attribute has been added to the panel element with the value 'after_start'. this causes the panel to be displayed not wher...
...And 3 more matches

XUL element attributes - Archive of obsolete content
bute to create elements that stretch in the opposite direction. left the elements are aligned on 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. allowevents 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...
...efore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before. this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. left type: string (representing an integer) for elements placed directly within a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack. maxheight type: string (representing an integer) the maximum height of the element. this corresponds to the max-height css property. maxwidth type: string (representing an integer) the maximum width of the element. this corresponds to the max-width css property. menu type: id alternate name for the ...
...lements may override this if they specify mousethrough="never". never mouse events are passed to the element as normal. observes type: id set to an id of a broadcaster element that is being observed by the element. if an attribute changes in the broadcaster it is also changed in the observer. ordinal type: string (representing an integer) an integer which specifies the position of the element within its parent. by default, elements appear in the order they appear in the xul code. the ordinal attribute can be used to change the order. note the default ordinal for elements is 1. you can retrieve the displayed order by using the properties of the boxobject of the container. orient type: one of the values below used to specify whether the children of the element ar...
...And 3 more matches

Browser Feature Detection - Archive of obsolete content
ize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyleposition true true true liststyletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true padding true true true paddingtop true true true paddingright ...
...e true true verticalalign true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false backgroundposition true true true bordercollapse true true true borderspacing true false true bordertopcolor true true true borderrightcolor true true true borderbottomcolor true true true borderleftcolor true true true bordertopstyle true true true borderrightstyle true...
...ter true true true pagebreakbefore true true true pagebreakinside true false true pause true false true pauseafter true false true pausebefore true false true pitch true false false pitchrange true false true playduring false false false position true true true quotes true false true richness true false false right true true true size true false true speak true false true speakheader true false false speaknumeral true false false speakpunctuation true false false speechrate tr...
...And 3 more matches

Bounding volume collision detection with THREE.js - Game development
eometry.computeboundingbox beforehand. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh. so any transformations such as scale, position, etc. applied to the mesh will be ignored while computing the calculating box. a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalma...
...new three.vector3(), new three.vector3()); knotbbox.setfromobject(knot); instantiating spheres instantiating sphere objects is similar. we need to provide the sphere's center and radius, which can be added to the boundingsphere property available in geometry. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances. so if we apply transformations or change the position of the mesh, we need to manually update the bounding sphere. for instance: knot.scale.set(2, 2, 2); knotbsphere.radius = knot.geometry.radius * 2; intersection tests point vs. box3 / sphere both box3 and sphere have...
...ct method in order to have a bounding box matching the mesh. boxhelper is the recommended way to handle 3d collisions with bounding volumes in three.js. you will miss sphere tests, but the tradeoffs are well worth it. the advantages of using this helper are: it has an update() method that will resize its bounding box mesh if the linked mesh rotates or changes its dimensions, and update its position. it takes into account the child meshes when computing the size of the bounding box, so the original mesh and all its children are wrapped. we can easily debug collisions by rendering the meshes that boxhelper creates. by default they are created with a linebasicmaterial material (a three.js material for drawing wireframe-style geometries). the main disadvantage is that it only creates box bo...
...And 3 more matches

Parser API
epresenting the ast variant type. each subtype of node is documented below with the specific string of its type field. you can use this field to determine which interface a node implements. the loc field represents the source location information of the node. ...
...e ast variant type. each subtype of node is documented below with the specific string of its type field. you can use this field to determine which interface a node implements. the loc field represents the source location information of the node. ...
...ecific string of its type field. you can use this field to determine which interface a node implements. the loc field represents the source location information of the node. ...
...And 3 more matches

Places Developer Guide
ookmarkuri = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice) .newuri("http://www.mozilla.com", null, null); var bookmarkid = bookmarks.insertbookmark( bookmarks.toolbarfolder, // the id of the folder the bookmark will be placed in. bookmarkuri, // the uri of the bookmark - an nsiuri object. bookmarks.default_index, // the position of the bookmark in its parent folder. "my bookmark title"); // the title of the bookmark. creating a folder var folderid = bookmarks.createfolder( bookmarks.toolbarfolder, // the id of the folder the new folder will be placed in. "my folder title", // the title of the new folder. bookmarks.default_index); // the position of the new folder in its parent folder. creating a sep...
...older, // the id of the folder the new folder will be placed in. "my folder title", // the title of the new folder. bookmarks.default_index); // the position of the new folder in its parent folder. creating a separator var separatorid = bookmarks.insertseparator( bookmarks.toolbarfolder, // the id of the folder the separator will be placed in. bookmarks.default_index); // the position of the separator in its parent folder. creating a livemark var ioservice = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); var siteuri = ioservice.newuri("http://www.mozilla.com", null, null); var feeduri = ioservice.newuri("http://www.mozilla.org/news.rdf", null, null); var livemarks = cc["@mozilla.org/browser/livemark-service;2"] .getserv...
... .getservice(ci.nsilivemarkservice); livemarks.createlivemark(bookmarks.toolbarfolder, // the id of the folder the livemark will be placed in "my livemark title", // the title of the livemark siteuri, // the uri of the site. a nsiuri object. feeduri, // the uri of the actual feed. a nsiuri object. ...
...And 3 more matches

XPCOM Interface Reference by grouping
tions defined in other groups. user this section contains elements specific to a given user's data storage. ...
... groups. user this section contains elements specific to a given user's data storage. ...
...ion contains elements specific to a given user's data storage. ...
...And 3 more matches

GeolocationCoordinates.longitude - Web APIs
the geolocationcoordinates interface's read-only longitude property is a double-precision floating point value which represents the longitude of a geographical position, specified in decimal degrees. together with a domtimestamp indicating a time of measurement, the geolocationcoordinates object is part of the geolocationposition interface, which is the object type returned by geolocation api functions that obtain and return a geographical position. syntax let longitude = geolocationcoordinatesinstance.longitude value the value in longitude is the geographical longitude of the location on earth described by the coordinates object, in decimal degrees. the value is defined by the world geodetic system 1984 specification (wgs 84). note: the zero meridian (also known as the prime mer...
...the world geodetic system 1984 specification (wgs 84). note: the zero meridian (also known as the prime meridian or the reference meridian) is not precisely the same as the greenwhich meridian that most 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. 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. let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("la...
... 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. ...
...And 3 more matches

HTMLTableRowElement - Web APIs
the htmltablerowelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table. ...
...lement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table. ...
...ported. htmltablerowelement.choff is a domstring containing a integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by htmltablerowelement.ch. this property was optional and was not very well supported. htmltablerowelement.rowindex read only returns a long value which gives the logical position of the row within the entire table. if the row is not part of a table, returns -1. htmltablerowelement.sectionrowindex read only returns a long value which gives the logical position of the row within the table section it belongs to. if the row is not part of a section, returns -1. htmltablerowelement.valign is a domstring representing an enumerated value indicating how the content of the ...
...And 3 more matches

Key Values - Web APIs
elow 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. learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui 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. keyboardevent.key value description virtua...
...ards). appcommand_cut gdk_key_cut (0x1008ff58) qt::key_cut (0x010000d0) "delete" [2] the delete key, del. vk_delete (0x2e) kvk_forwarddelete (0x75) [1] gdk_key_delete (0xffff) gdk_key_kp_delete (0xff9f) qt::key_delete (0x01000007) keycode_forward_del (112) "eraseeof" erase to end of field. deletes all characters from the current cursor position to the end of the current field. vk_ereof (0xf9) gdk_key_3270_exselect (0xfd1b) "exsel" [4] the exsel (extend selection) key. vk_exsel (0xf8) gdk_key_3270_exselect (0xfd1b) "insert" the insert key, ins. toggles between inserting and overwriting text. vk_insert (0x2d) gdk_key_insert (0xff63) gdk_key_kp_insert (0xff9e) qt::key_in...
...ed to wake the computer from the hibernation or standby modes. gdk_key_wakeup (0x1008ff2b) qt::key_wakeup (0x010000b8) keycode_wakeup (224) [1] the standby key is not supported by internet explorer (tested on release 9 and 11) and firefox 36 and earlier, so it is reported as "unidentified". [2] prior to firefox 37, this key generated the value "unidentified". ime and composition keys keys used when using an input method editor (ime) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard. common examples include chinese, japanese, korean, and hindi. some keys are common across multiple languages, while others exist only on keyboards targeting...
...And 3 more matches

UIEvent.pageY - Web APIs
tion showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-p...
...op: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...k anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more! ...
...And 3 more matches

Starting up and shutting down a WebXR session - Web APIs
r api emulator extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, which emulates the webxr api, simulating a variety of compatible devices such as the htc vive, the oculus go and oculus quest, samsung gear, and google cardboard. with the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers. emulator usage while somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer webxr code on a desktop computer, where webxr isn't normally available. it also lets you perform some basic testing before taking your code to a real device. be aw...
... for the canvas into which you intend to render your frames by calling the htmlcanvaselement method getcontext() on the target context. set up your webgl data and models and prepare to render the scene. set the webgl context as the source for the xr system by creating an xrwebgllayer and passing set the value of the session's renderstate property baselayer. perform calculations for the initial position and scale of your objects as needed. begin the frame rendering cycle. in basic form, code to do this final setup might look something like this: async function runsession(session) { let worlddata; session.addeventlistener("end", onsessionend); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); // set up webgl data and such w...
...this includes the xrsession itself, all of the data used to render the scene in webgl, the world reference sp...
...And 3 more matches

Window.open() - Web APIs
e used as the target for the target attribute of <a> or <form> elements. the name should not contain whitespace. keep in mind that this will not be used as the window's title. windowfeatures optional a domstring containing a comma-separated list of window features given with their corresponding values in the form "name=value". these features include options such as the window's default size and position, whether or not to include toolbar, and so forth. there must be no whitespace in the string. see window features below for documentation of each of the features that can be specified. return value a windowproxy object, which is basically a thin wrapper for the window object representing the newly created window, and has all its features available. if the window couldn't be opened, the returned...
...ed 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 prevent 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 of the work area for applications of th...
...sion 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 of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. the new window cannot be initially positioned offscreen. top or screeny specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. the new window cannot be initially positioned offscreen. ...
...And 3 more matches

Web APIs
bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode chann...
...alue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator ...
... filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument...
...And 3 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in this article we will fully explore how this fundamental feature of the specification works. starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines. the lines are numbered for columns and rows, and are indexed from 1. note that grid is indexed according to the writing mode of the document. in a left to right language such as english line 1 is on the left-hand side of the grid. if you are working in a right-to-left language then line 1 will be the far right of the grid. ...
...i would like the first item to start on the far left of the grid and span a single column track. it should also start on the first row line, at the top of the grid and span to the fourth row line. .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4;...
... line number we can use line-based placement to control where these items sit on the grid. i would like the first item to start on the far left of the grid and span a single column track. it should also start on the first row line, at the top of the grid and span to the fourth row line. .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as you position some items, other items on the grid will continue to be laid out using the auto-placement rules. we will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid. addressing each item individually we can place all four items spanning row and column tracks. note that we can leave cells empty if we wish. ...
...And 3 more matches

Stacking without the z-index property - CSS: Cascading Style Sheets
when the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html descendant positioned elements, in order of appearance in the html keep in mind, when the order property alters rendering from the "order of appearance in the html" within flex containers, it similarly affects the order for stacking context. in the example below, elements #1 through #4 are positioned elements. ...
... from the "order of appearance in the html" within flex containers, it similarly affects the order for stacking context. in the example below, elements #1 through #4 are positioned elements. element #5 is static, and so is drawn below the other four elements, even though it comes later in the html markup. ...
... affects the order for stacking context. in the example below, elements #1 through #4 are positioned elements. element #5 is static, and so is drawn below the other four elements, even though it comes later in the html markup. ...
...And 3 more matches

Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow. this guide provides an introduction to using transforms. css transforms are implemented using a set of css properties that let you apply affine linear transformations to html elements. these transformations include rotation, skewing, scaling, and translation both in the plane and in the 3d space. only elements positioned by the box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. css transforms properties two major properties are used to define css transforms: transform and transform-origin transform-origin specifies the position of the origin. by default, it is at the center...
...composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. ...
...art by configuring the 3d space by giving it a perspective, then you have to configure how your 2d elements will behave in that space. perspective the first element to set is the perspective. the perspective is what gives us the 3d impression. the farther from the viewer the elements are, the smaller they are. setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. <table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> ...
...And 3 more matches

CSS reference - CSS: Cascading Style Sheets
an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-r...
...nt-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctu...
...inateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask...
...And 3 more matches

Visual formatting model - CSS: Cascading Style Sheets
is includes continuous media such as a computer screen and paged media such as a book or document printed by browser print functions. most of the information applies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find refe...
...is called a "block box" or just a "block". note however that block boxes, block-level boxes and box containers are all subtly different; see the block boxes section below for more details. the principal box when an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme. some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g. a principal block box and a child marker box). and some values (such as none or contents) cause the element and/or its descendants to not generate any boxes at all. anonymous boxes an anonymous box is created when there is not an html element...
...e boxes that wrap each line of text. you can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color. in the following example, the line boxes following the floated <div> are shortened to wrap around the float. the background of the box runs behind the float, as the floated item has been taken out of flow. positioning schemes and in-flow and out-of-flow elements in css, a box may be laid out according to three positioning schemes — normal flow, floats, or absolute positioning. normal flow in css, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes. read more abou...
...And 3 more matches

clip-path - CSS: Cascading Style Sheets
1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below. values <clip-source> a <url> referencing an svg <clippath> element. <basic-shape> a shape whose size and position is defined by the <geometry-box> value. if no geometry box is specified, the border-box will be used as the reference box. <geometry-box> if specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. the ...
... uses the padding box as the reference box. content-box uses the content box as the reference box. fill-box uses the object bounding box as the reference box. stroke-box uses the stroke bounding box as the reference box. view-box uses the nearest svg viewport as the reference box. if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the size of the reference box is set to the width and height values of the viewbox attribute. none no clipping path is created. note: a computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1. formal defin...
... for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? ...
...And 3 more matches

conic-gradient() - CSS: Cascading Style Sheets
wheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). <color-hint> th color-hint is...
...onic-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, conic-gradient() won't work on background-color and other properties that use the <color> data type. why is it called a "conic" gradient? if the color stops are much lighter on one side than the other, it can look like a cone from above. composition of a conic gradient the conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. in a radial gradient...
...dient are specified with an angle. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. the values for the position are similar to the syntax for 2-value background-position. the gradient arc is the circumference of the gradient. the starting point of the gradient or arc is north, or 12:00pm. the gradient is then rotated by the from angle. the colors of the gradient are determined by the angled color stops, ...
...And 3 more matches

justify-content - CSS: Cascading Style Sheets
u'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...the left edge of the alignment container. if the property’s axis is not parallel with the inline axis, this value behaves like start. right the items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. if the property’s axis is not parallel with the inline axis, this value behaves like start. normal the items are packed in their default position as if no justify-content value was set. this value behaves as stretch in grid and flex containers. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. th...
...ed alongside an alignment keyword. regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored. ...
...And 3 more matches

scroll-snap-destination - CSS: Cascading Style Sheets
the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
...the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
...the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
...And 3 more matches

z-index - CSS: Cascading Style Sheets
whether the box establishes a local stacking context. ...
... whether the box establishes a local stacking context. ...
...ositioned element and its descendants or flex items. overlapping elements with a larger z-index cover those with a smaller one. 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. for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context. whether the box establishes a local stacking context. syntax /* keyword value */ z-index: auto; /* <integer> values */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* negative values to lower the priority */ /* global values */ z-index: inherit; z-index: initial; z-index:...
...And 3 more matches

Cross-browser audio basics - Developer guides
uration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event. myaudio.addeventlistener("loadedmetadata", function() { //you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives. the playhead is in position but not quite ready to play. myaudio.addeventlistener("loadeddata", function() { //you could display the playhead now }); progress the progress event indicates that the download of media is still in progress. it is good practice to display some kind of 'loader' at this point. myaudio.addeventlistener("progress", function() { // you could let the user know the media is downloading }); can...
...but it would be nice to be able to navigate the audio using the progress bar. fortunately this isn't too difficult to implement. ...
... there are a ...
...And 3 more matches

<input type="text"> - HTML: Hypertext Markup Language
base. a note on styling there are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. these are :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) mark next to inputs containing valid values, and a cross (x) next to inputs containing invalid values. div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on...
...well. making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: if you try to submit the form with no search term entered into it, the browser will show an error message. input value length you can specify a minimum l...
...elow requires that the entered value be 4–8 characters in length. <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="10" placeholder="username" minlength="4" maxlength="8"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). if you try to ent...
...And 3 more matches

Using Promises - JavaScript
console.log(`got the final result: ${finalresult}`); } 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 functi...
...est possible level, and then never call them directly again: const wait = ms => new promise(resolve => settimeout(resolve, ms)); wait(10*1000).then(() => saysomething("10 seconds")).catch(failurecallback); basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. since settimeout() doesn't really fail, we left out reject in this case. composition promise.resolve() and promise.reject() are shortcuts to manually create an already resolved or rejected promise respectively. this can be useful at times. promise.all() and promise.race() are two composition tools for running asynchronous operations in parallel. we can start operations in parallel and wait for them all to finish like this: promise.all([func1(), func2(), func3()]) .then(([resu...
...olved or rejected promise respectively. this can be useful at times. promise.all() and promise.race() are two composition tools for running asynchronous operations in parallel. ...
...And 3 more matches

String.prototype.indexOf() - JavaScript
d us a pull request. note: for the array method, see array.prototype.indexof(). syntax str.indexof(searchvalue [, fromindex]) parameters searchvalue the string value to search for. if no string is explicitly provided, searchvalue will be coerced to "undefined", and this value will be searched for in str. so, for example: 'undefined'.indexof() will return 0, as undefined is found at position 0 in the string undefined. 'undefine'.indexof() however will return -1, as undefined is not found in the string undefine. fromindex optional an integer representing the index at which to start the search. defaults to 0. for fromindex values lower than 0, or greater than str.length, the search starts at index 0 and str.length, respectively. for example, 'hello world'.indexof('o', -5) wil...
...'undefine'.indexof() however will return -1, as undefined is not found in the string undefine. fromindex optional an integer representing the index at which to start the search. defaults to 0. for fromindex values lower than 0, or greater than str.length, the search starts at index 0 and str.length, respectively. for example, 'hello world'.indexof('o', -5) will return 4, as it starts at position 0, and o is found at position 4. on the other hand, 'hello world'.indexof('o', 11) (and with any fromindex value greater than 11) will return -1, as the search is started at position 11, a position after the end of the string. return value the index of the first occurrence of searchvalue, or -1 if not found. an empty string searchvalue produces strange results. with no fromindex value, or a...
... ...
...And 3 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
--> <path d="m3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported. ...
...roke at the join point with arcs that have the same curvature as the outer edges at the join point. ...
...ink" /> </g> </svg> bevel the bevel value indicates that a bevelled corner is to be used to join path segments. example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> miter the miter value indicates that a sharp corner is to be used to join path segments. the c...
...And 3 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
ozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> </hbox> </toolbar> <!-- address book --> <toolbar id="abtoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- message compose --> <toolbar id="composetoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button...
.../> </hbox> </toolbar> <!-- message compose --> <toolbar id="composetoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="ca...
...inmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="calendar-bar"> <toolbarbutton id="custom-button-1" position="10"/> </toolbar> <!-- button details --> <toolbarbutton id="custom-button-1" label="custom" tooltiptext="my custom toolbar button" oncommand="custombutton[1]()" class="toolbarbutton-1 custombutton" /> </overlay> optionally customize the file by changing the label, accesskey and tooltiptext attributes. change the text between double-quote characters on those lines. optionall...
...And 2 more matches

scrollbox - Archive of obsolete content
if you just want scrollbars to appear, add style='overflow: auto;'. this may also be used with any other container element. ...
...at happens depends on the enclosing elements; often the content is just clipped off on the bottom or right (depending on what's too big to fit). <vbox> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, scroll bars will sprout out of nowhere and allow the user to scroll around the big content in the small view space. for the most part, the horizontal and vertical scrollbars will independently handle too-tall and too-wide cases, but each sc...
... the other one if it's close to the edge anyway. use overflow:scroll if you want the scroll bars on all the time. <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desired. in our case an enclosing element also was overflow:auto. if the user made the window smaller, the outer box would get smaller in response and sprout its scroll bars. we wanted our vbox to get smaller and sprout its scroll bars instead. note that this example doesn't u...
...And 2 more matches

XForms Input Element - Archive of obsolete content
c). attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported. the default value is 'false'. mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these. representations the xforms input element can be represented by the following widgets for the spcified data types (or types derived from ...
...s the focus. checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul). ...
...eckbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition attribute. specific handling of attributes incremental - if "true" or this attribute is omitted from this element, then the instance node will be updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the focus. labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions. this attribute is optional, possible values are before and after. the default value if omitted is after. it controls the display of the label relative to the checkbox. ...
...And 2 more matches

How to build custom form controls - Learn web development
want. to that end, we will split our css work into two parts: the first part will be the css rules absolutely necessary to make our control behave like a <select> element, and the second part will consist of the fancy styles used to make it look the way we want. required styles the required styles are those necessary to handle the three states of our control. .select { /* this will create a positioning context for the list of options; adding this to .select:focus-within will be a better option when fully supported */ position: relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state. because our control is...
... active state is visible, especially to keyboard users, that we use it as a default value. */ box-shadow: 0 0 3px 1px #227755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control. */ .select .optlist { /* this will make sure our list of options will be displayed below the value and out of the html flow */ position : absolute; top : 100%; left : 0; } we need an extra class to handle when the list of options is hidden. this is necessary in order to manage the differences between the active state and the open state that do not exactly match. .select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-h...
...overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element. it could also be implemented using a simple background image on the select class. ...
...And 2 more matches

HTML text fundamentals - Learn web development
n'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
... textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...n<li>turn right</li>\n<li>go straight across the first two roundabouts</li>\n<li>turn left at the third roundabout</li>\n<li>the school is on your right, 300 meters up the road</li>\n</ol>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...And 2 more matches

Object building practice - Learn web development
(otherwise known as collision detection). getting started to begin with, make local copies of our index.html, style.css, and main.js files. these contain the following, respectively: a very simple html document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our css and javascript to our html. some very simple styles, which mainly serve to style and position the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat). some javascript that serves to set up the <canvas> element and provide a general function that we're going to use. the first part of the script looks like so: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width = window.
...er (ctx). the context is like the paper, and now we want to command our pen to draw something on it: first, we use beginpath() to state that we want to draw a shape on the paper. next, we use fillstyle to define what color we want the shape to be — we set it to our ball's color property. next, we use the arc() method to trace an arc shape on the paper. its parameters are: the x and y position of the arc's center — we are specifying the ball's x and y properties. the radius of the arc — in this case, the ball's size property. the last two parameters specify the start and end number of degrees around the circle that the arc is drawn between. here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in radians (annoyingly, you have to specify this in radians...
...aller visible viewport that remains when the console opens. type in the following to create a new ball instance: let testball = new ball(50, 100, 4, 4, 'blue', 10); try calling its members: testball.x testball.size testball.color testball.draw() when you enter the last line, you should see the ball draw itself somewhere on the canvas. updating the ball's data we can draw the ball in position, but to actually move the ball, we need an update function of some kind. add the following code at the bottom of your javascript file, to add an update() method to the ball()'s prototype: ball.prototype.update = function() { if ((this.x + this.size) >= width) { this.velx = -(this.velx); } if ((this.x - this.size) <= 0) { this.velx = -(this.velx); } if ((this.y + this.size) >=...
...And 2 more matches

Implementing feature detection - Learn web development
blems — the geolocation api (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a geolocation property available on the global navigator object. therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time. modernizr is the industry standard for feature detection tests, and we'll look at that later on. before we mo...
...w) with a valid google maps api key. to get a key, sign in to a google account, go to the get a key/authentication page, then click the blue get a key button and follow the instructions. ...
...ogle maps api key. to get a key, sign in to a google account, go to the get a key/authentication page, then click the blue get a key button and follow the instructions. ...
...And 2 more matches

Gecko info for Windows accessibility vendors
uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko. in addition, role_list with state_readonly and role_listitem are used to expose the list structure. this makes it important to check the state_readonly flag when encountering a role_list, because the html list form element also uses role_list, but without state_readonly set. ...
...for example, "3 of 5" indicates the 3rd object out of 5. ...
...st form element also uses role_list, but without state_readonly set. positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group. for example, "3 of 5" indicates the 3rd object out of 5. ...
...And 2 more matches

nsIMutableArray
parameters element the element to append. weak whether or not to store the element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. clear() clear the entire array, releasing all stored objects. void clear(); parameters none. ...
...weak whether or not to store the element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. clear() clear the entire array, releasing all stored objects. void clear(); parameters none. insertelementat() insert an element at the given position, moving the element currently located in that position, and all elements in higher position, up by one. ...
...ire array, releasing all stored objects. void clear(); parameters none. insertelementat() insert an element at the given position, moving the element currently located in that position, and all elements in higher position, up by one. void insertelementat( in nsisupports element, in unsigned long index, in boolean weak ); parameters element the element to insert. index the position in the array: if the position is lower than the current length of the array, the elements at that position and onwards are bumped one position up. if the position is equal to the current length of the array, the new element is appended. an index lower than 0 or higher than the current length of the array is invalid and will be ignored. weak whether or not to store the element using a weak...
...And 2 more matches

nsISHEntry
in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only! ...
...crollposition(out long x, out long y); void getviewerbounds(in nsintrect bounds); native code only! boolean hasdetachededitor(); violates the xpcom interface guidelines boolean hasdynamicallyaddedchild(); boolean isdynamicallyadded(); void seteditordata(in nsdocshelleditordataptr adata); violates the xpcom interface guidelines void setissubframe(in boolean aflag); void setscrollposition(in long x, in long y); void settitle(in astring atitle); void setuniquedocidentifier(); void seturi(in nsiuri auri); void setviewerbounds(in nsintrect bounds); native code only! void syncpresentationstate(); attributes attribute type description cachekey nsisupports set and get the cache key for the entry. contenttype acstring indicates the content-type of the document that...
...istory.pushstate(). docshellid unsigned long long the history id of the docshell. document nsidomdocument dom document. obsolete since gecko 1.8 expirationstatus boolean indicates whether the page is already expired in cache. id unsigned long an id to help identify this entry from others during subframe navigation. layouthistorystate nsilayouthistorystate layouthistorystate for scroll position and form values. loadtype unsigned long the loadtype for this entry. this is typically loadhistory except when reload is pressed, it has the appropriate reload flag. owner nsisupports get the owner, if any, that was associated with the channel that the document that was loaded to create this history entry came from. pageidentifier unsigned long an integer that should be the same for two en...
...And 2 more matches

nsIScrollable
boolean specifying the visibility of the horizontal scrollbar. getscrollrange() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) void getscrollrange( in long scrollorientation, out long minpos, out long maxpos ); parameters scrollorientation an integer representing the orientation of the scrollbar. minpos minimal position of the scroll range. maxpos maximal position of the scroll range. setcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) void setcurscrollpos( in long scrollorientation, in long curpos ); parameters scrollorientation an integer representing the orientation of the scrollbar. curpos an integer represent...
...scroll range. maxpos maximal position of the scroll range. setcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) void setcurscrollpos( in long scrollorientation, in long curpos ); parameters scrollorientation an integer representing the orientation of the scrollbar. curpos an integer representing the position of the cursor. setcurscrollposex() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) void setcurscrollposex( in long curhorizontalpos, in long curverticalpos ); parameters curhorizontalpos an integer representing the horizontal position of the cursor. ...
... setdefaultscrollbarpreferences() void setdefaultscrollbarpreferences( in long scrollorientation, in long scrollbarpref ); parameters scrollorientation an integer representing the orientation of the scrollbar. scrollbarpref an integer representing the state of the scrollbar. ...
...And 2 more matches

nsITextInputProcessorCallback
tions to ime from gecko. this interface has a "function" attribute. therefore, js-ime can implement this as a function. ...
...an implement this as a function. ...
... createinstance(components.interfaces.nsitextinputprocessor); } if (!this._tip.begininputtransaction(window, this._callback)) { return false; } ... ...
...And 2 more matches

Waterfall - Firefox Developer Tools
mputed styles that apply to page elements. restyle hint a string indicating what kind of restyling is needed. the hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements. this operation is sometimes called "reflow". paint drawing pixels to the screen. garbage collection garbage collection event. non-incremental gc events are labeled "(non-incremental)". reason a string indicating the reason gc was performed. non-incremental reason if the gc...
... the page in response to some event: javascript function call: some event - for example, a dom event - causes some javascript in the page to run. the javascript changes some of the page's dom or cssom. recalculate style: if the browser thinks the computed styles for page elements have changed, it must then recalculate them. layout: next, the browser uses the computed styles to figure out the position and geometry for the elements. this operation is labeled "layout" but is also sometimes called "reflow". paint: finally, the browser needs to repaint the elements to the screen. one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition". this sequence needs to fit into a single frame, since...
...ons will appear smooth. for a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow. importantly for responsiveness, the browser doesn't always have to go through every step: css animations update the page without having to run any javascript. not all css property changes cause a reflow. changing properties that can alter an object's geometry and position, such as width, display, font-size, or top, will cause a reflow. however, changing properties that don't alter geometry or position, such as color or opacity, will not. not all css property changes cause a repaint. in particular, if you animate an element using the transform property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the ele...
...And 2 more matches

IDBCursor - Web APIs
note: not to be confused with idbcursorwithvalue which is just an idbcursor interface with an additional value property. the idbcursor interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursor object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web wo...
...or idbindex that the cursor is iterating. this function never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not active. idbcursor.direction read only returns the direction of traversal of the cursor. see constants for possible values. idbcursor.key read only returns the key for the record at the cursor's position. if the cursor is outside its range, this is set to undefined. the cursor's key can be any data type. idbcursor.primarykey read only returns the cursor's current effective primary key. if the cursor is currently being iterated or has iterated outside its range, this is set to undefined. the cursor's primary key can be any data type. idbcursor.request read only returns the idbrequest that wa...
....primarykey read only returns the cursor's current effective primary key. if the cursor is currently being iterated or has iterated outside its range, this is set to undefined. the cursor's primary key can be any data type. idbcursor.request read only returns the idbrequest that was used to obtain the cursor. ...
...And 2 more matches

KeyboardEvent - Web APIs
interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. ...
...t input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. ...
... space bar. dom_key_location_left 0x01 the key is one which may exist in multiple locations on the keyboard and, in this instance, is on the left side of the keyboard. examples include the left control key, the left command key on a macintosh keyboard, or the left shift key. dom_key_location_right 0x02 the key is one which may exist in multiple positions on the keyboard and, in this case, is located on the right side of the keyboard. examples include the right shift key and the right alt key (option on a mac keyboard). dom_key_location_numpad 0x03 the key is located on the numeric keypad, or is a virtual key associated with the numeric keypad if there's more than one place the key could originate from. the numlock ke...
...And 2 more matches

SVGSVGElement - Web APIs
the svgsvgelement interface provides access to the properties of <svg> elements, as well as methods to manipulate them. this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices. ...
... them. this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices. ...
...an svganimatedlength corresponding to the height attribute of the given <svg> element. svgsvgelement.contentscripttype an svganimatedlength corresponding to the contentscripttype attribute of the given <svg> element. svgsvgelement.contentstyletype an svganimatedlength corresponding to the contentstyletype attribute of the given <svg> element. svgsvgelement.viewport an svgrect containing the position and size of the viewport (implicit or explicit) that corresponds to the given <svg> element. when the browser is actually rendering the content, then the position and size values represent the actual values when rendering. the position and size values are unitless values in the coordinate system of the parent element. if no parent element exists (i.e., <svg> element represents the root of the doc...
...And 2 more matches

SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...y elements that support rendering child text content. it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...returns a float representing the computed length of the formatted text advance distance for a substring of text within the element. note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the css 'letter-spacing' and 'word-spacing' properties. visual spacing adjustments made by the 'x' attribute is ignored. svgtextcontentelement.getstartpositionofchar() returns a dompoint representing the position of a typographic character after text layout has been performed. note: in svg 1.1 this method returned an svgpoint. svgtextcontentelement.getendpositionofchar() returns a dompoint representing the trailing position of a typographic character after text layout has been performed. note: in svg 1.1 this method returned an svgpoint. svgte...
...And 2 more matches

SVGTextElement - Web APIs
the svgtextelement interface corresponds to the <text> elements. ...
... the svgtextelement interface corresponds to the <text> elements. ...
..."#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpositioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><l...
...And 2 more matches

WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
ngcontext.vertexattribpointer(). the main difference is that while values specified by vertexattribpointer are always interpreted as floating-point values in the shader (even if they were originally specified as integers in the buffer), this method allows specifying values which are interpreted as integers in the shader. examples linear blend skinning //describe the layout of the buffer: //1. position gl.vertexattribpointer(0, 3, gl.float, false, 20, 0); gl.enablevertexattribarray(0); //2. bone weights, normalized to [0, 1] gl.vertexattribpointer(1, 4, gl.unsigned_byte, true, 20, 12); gl.enablevertexattribarray(1); //3. bone indices, interpreted as integer gl.vertexattribipointer(2, 4, gl.unsigned_byte, 20, 16); gl.enablevertexattribarray(2); //connect to attributes from the vertex shader gl.
..., false, 20, 0); gl.enablevertexattribarray(0); //2. bone weights, normalized to [0, 1] gl.vertexattribpointer(1, 4, gl.unsigned_byte, true, 20, 12); gl.enablevertexattribarray(1); //3. ...
..., 4, gl.unsigned_byte, 20, 16); gl.enablevertexattribarray(2); //connect to attributes from the vertex shader gl.bindattriblocation(shaderprogram, 0, "position"); gl.bindattriblocation(shaderprogram, 1, "boneweights"); gl.bindattriblocation(shaderprogram, 2, "boneindices"); <script id="shader-vs" type="x-shader/x-vertex">#version 300 es uniform mat4 mvmatrix; uniform mat4 bones[120]; in vec3 position; in vec4 boneweights; in uvec4 boneindices;//read as 4-component unsigned integer void main() { vec4 skinnedposition = bones[boneindices.s] * vec4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec4(position, 1.0) * boneweights.p + bones[boneindices.q] * vec4(position, 1.0) * boneweights.q; ...
...And 2 more matches

WebGLRenderingContext.enableVertexAttribArray() - Web APIs
by the value of webglrenderingcontext.max_vertex_attribs. example this code — a snippet taken from the full example a basic 2d webgl animation example — shows the use of enablevertexarray() to activate the attribute that will be used by the webgl layer to pass individual vertexes from the vertex buffer into the vertex shader function. ...
... example this code — a snippet taken from the full example a basic 2d webgl animation example — shows the use of enablevertexarray() to activate the attribute that will be used by the webgl layer to pass individual vertexes from the vertex buffer into the vertex shader function. gl.bindbuffer(gl.array_buffer, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action. this code sets the buffer o...
...ents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action. this code sets the buffer of vertexes that will be used to draw the triangles of the shape by calling bindbuffer(). ...
...And 2 more matches

Matrix math for the web - Web APIs
]; what does multiplying by the identity matrix look like? the easiest example is to multiply a single point by the identity matrix. since a 3d point only needs three values (x, y, and z), and the transformation matrix is a 4x4 value matrix, we need to add a fourth dimension to the point. by convention, this dimension is called the perspective, and is represented by the letter w. for a typical position, setting w to 1 will make the math work out. after adding the w component to the point, notice how neatly the matrix and the point line up: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] [4, 3, 2, 1] // point at [x, y, z, w] the w component has some additional uses that are out of scope for this article. check out the webgl model view projection article for a look into how it comes in ...
... have to be able to tilt or rotate the cup to pour the coffee into your mouth. we'll look at the type of matrix (cleverly called a rotation matrix) you use to do this later. let x = 50; let y = 100; let z = 0; let translationmatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ]; place the distances along the three axes in the corresponding positions in the translation matrix, then multiply it by the point or matrix you need to move through 3d space. manipulating the dom with a matrix a really easy way to start using a matrix is to use the css matrix3d() transform. first we'll set up a simple <div> with some content. the style is not shown, but it's set to a fixed width and height and is centered on the page. the <div> has a transition set...
...when matrices of a certain class are multiplied together they preserve the history of the transformations and are reversible. this means that if a translation, rotation, and scale matrix are all combined together, when the order of the matrices is reversed and re-applied then the original points are returned. the order that matrices are ...
...And 2 more matches

Using textures in WebGL - Web APIs
0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // bottom 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // right 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // left 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new float32array(texturecoordinates), gl.static_draw); ... return { position: positionbuffer, texturecoord: texturecoordbuffer, indices: indexbuffer, }; first, this code creates a webgl buffer into which we'll store the texture coordinates for each face, then we bind that buffer as the array we'll be writing into. the texturecoordinates array defines the texture coordinates corresponding to each vertex of each face. note that the texture coordinates range fro...
...pping array, we pass the array into the buffer, so that webgl has that data ready for its use. updating the shaders the shader program also needs to be updated to use the textures instead of solid colors. the vertex shader we need to replace the vertex shader so that instead of fetching color data, it instead fetches the texture coordinate data. ...
...ad of solid colors. the vertex shader we need to replace the vertex shader so that instead of fetching color data, it instead fetches the texture coordinate data. const vssource = ` attribute vec4 avertexposition; attribute vec2 atexturecoord; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; } `; the key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. the fragment shader the fragment shader likewise needs to be upda...
...And 2 more matches

Lighting a WebXR setting - Web APIs
me in which the player has a special pair of yellow-tinted glasses, you can add a yellow ambient light. saturn's fifth-largest moon, tethys, bathed in sunlight, coming from the lower left. diffuse light diffuse light is light which is evenly and directionally emitted from or reflected off a surface. this is the majority of the light we usually see. diffuse light comes from a particular position or direction and casts shadows. due to its directionality, the faces of an object facing a diffuse light source will be brighter than the other faces. because the intensity of diffuse light depends on the angle of incidence (the angle between the vector representing the direction from which the light reaches the surface and the surface's normal vector or the vector perpendicular to the surface),...
...sest point to the light source and dimmer the farther away it is. even if the surface is flat, the closest point to the light source is the center, with rays becoming increasingly long as the angle away from the normal changes. photo of a spotlight shining upon a stucco wall at night. spot light sources a spot light source (or spotlight) is a light source which is located at a specific position, emitting a cone of light in the direction of its orientation vector. a tapering rate parameter defines how quickly the brightness of the light falls off at the edges of the cone of light, and, as with point lights, an attenuation parameter controls how the light fades over distance. at the edge of the light cone, the light ceases to affect the surface at all. computational costs of lighting t...
... and applied as appropriate to the pixel before the pixel is stored into the framebuffer. the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation relative to each polygon, and so forth. the viewer position and distance. the surface material and reflectivity. the concavity or convexity of the surface at the target location. the position, color, directionality, and brightness of each light source in the scene. the color and brightness of any ambient light in the scene; this is light which is applied equally throughout th...
...And 2 more matches

Window.screenLeft - Web APIs
dowpos = window.screenleft returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
...ber equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...t-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...And 2 more matches

Window.screenTop - Web APIs
windowpos = window.screentop returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
...umber equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...t-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...And 2 more matches

Window.screenX - Web APIs
returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. ...
...ss pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. in this example we are using window.screenleft/window.screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...ample, you'll see a canvas onto which has been drawn a circle. in this example we are using window.screenleft/window.screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...And 2 more matches

Window.screenY - Web APIs
window.screeny returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
... the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using window.screenleft/window.screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...ample, you'll see a canvas onto which has been drawn a circle. in this example we are using window.screenleft/window.screentop plus window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the window position is moved. ...
...And 2 more matches

XRReferenceSpace - Web APIs
following methods. getoffsetreferencespace() creates and returns a new reference space object as the same type as the one on which you call 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 wh...
...ich interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrrefere...
...if that floor level isn't known, the user agent will estimate the floor level. ...
...And 2 more matches

XRViewerPose - Web APIs
each xrviewerpose can have multiple views to represent, for example, the slight separation between the left and right eye. this view can represent anything from the point-of-view of a user's xr headset to the viewpoint represented by a player's movement of an avatar using mouse and keyboard, presented on the screen, to a virtual camera capturing the scene for a spectator. ...
...ch eye that view represents. taken together, these views can reproduce the 3d effect when displayed on the xr device. usage notes the xrviewerpose object is used to describe the state of a viewer of a webxr scene as it's tracked by the user's xr hardware. the viewer may be the virtual representation of the user, or it may represent another device or interface which may serve as the source of a position and orientation that make up a view upon the scene. for example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial. an xrviewerpose is always obtained and referenced relative to an exis...
... the scene. for example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial. an xrviewerpose is always obtained and referenced relative to an existing xrreferencespace. this ensures that positions and orientations are reported using the expected relative coordinate system. to render a scene using the xrviewerpose representing the user's head, one would iterate over the views in the views array, rendering them one after another. by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye...
...And 2 more matches

ARIA Test Cases - Accessibility
of how a mashup widget can be built (the widget source simply comes from another url, and is tied in using an iframe) yui "carousel" listbox -- a more advanced test case expected at behavior: (mz) screen reader should announce the label and role of the listbox when it gains focus. if an item is focused within the list, this should be announced next, followed by an indication of this item's position within the list if the screen reader supports this in other lists as well. as focus moves within the list, the screen reader should announce the relevant list items. (al) what about multiple selection? what should happen as the user selects or unselects the current item, does a select all, uses shift+arrow to select, etc.? markup used: role="listbox", "option" (listitem should only be used ...
... - orca - - - - radiogroup and radiobutton radio example using css background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position. as focus moves among the radio buttons, the newly focused radio button's label, state and position should be indicated. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - ...
... - - - - orca - - - - slider single slider slider using in-line images for thumb dojo nightly build simple slider pretty slider mindtrove rating widget paciello group slider expected at behavior: the user can navigate to the slider control in all modes. when the user navigates to the slider, the screen reader should announce the label, role and position of the slider. when not in a virtual buffer mode, the user can control the slider using keys such as the arrow keys, home and end. in virtual buffer mode, the slider exists in the virtual buffer as a single entity, and any images or text that create the sliders appearance are not presented to the user separately. note: if this does not work, it means the browser is exposing the children instead...
...And 2 more matches

ARIA: gridcell role - Accessibility
in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows. this sample code demonstrates a table-style grouping of information where the third and fourth columns have been removed. ...
...the ids provided for aria-describedby should correspond to parent elements intended to be the rows and columns. by referencing the parent elemen...
...l" aria-colindex="2">burks</div> <div role="gridcell" aria-colindex="5">new york</div> <div role="gridcell" aria-colindex="6">14127</div> </div> </div> … </div> describing the position of gridcells when the overall structure is unknown in situations where the table-style grouping of content does not provide information about the columns and rows, gridcells must have their positions programatically described by using aria-describedby. the ids provided for aria-describedby should correspond to parent elements intended to be the rows and columns. ...
...And 2 more matches

Architecture - Accessibility
resentation together. everything else uses whatever nsaccessible-derived implementation that's appropriate. if it has text siblings, then it gets exposed as the unicode char for an embedded object, which is '\xfffc' within the parent nshypertextaccessible. in addition, nsiaccessiblehyperlink is implemented on any non-text child inside a container that also has text. this allows at's to find its position within that text, because the hyperlink interface exposes a start and end index. in fact, the end index will always be 1 larger than the start index, because the object is always represented by a single '\xfffc' character. if you want to know that something is really a link, check to see if it is role_link. html containers are implemented by nshypertextaccessible. they support the nsiaccessible...
...this. iaccessible2: same as nsiaccessible. text and whitespace leaf nodes are exposed, but are redundant with the information in the parent object's nsiaccessibletext. this is done for backward compatibility with older msaa clients which didn't have access to a text interface. the children of a hypertext object are a superset of the links it exposes. the new system makes it easier to show caret positions etc., which will be an improvement in ia2 over msaa. example take the following html code: <div>hello<a href="http://www.mozilla.org/access">my link<img src="image.gif">is cool</a>bye</div> both the <a> and <img> are hyperlinks also, both the <div> and <a> are hypertexts so the <a> is both a hypertext and a hyperlink, because it contains text and is contained within text. this means that we h...
...ts together in the container. nsiaccessibleeditabletext is supported if the area is potentially editable. if it's actually editable it will also provide state_editable. nsaccessible still represents any node in the tree. if the node is embedded in a parent that is an nsiaccessiblehypertext, the node will be exposed as an nsiaccessiblehyperlink. consumers can use this interface to determine the position of the object in the parent's text. nstextaccessible serves 2 purposes it is used by nshypertextaccessible to collect information about itself it is still exposed in msaa for backward compatibility by old windows assistive technologies. those at's don't yet know about any iaccessibletext yet, and want to see the hierarchy how they always did -- with text in leaf nodes. how does an at deal w...
...And 2 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in addition to the ability to place items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } ...
... solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> </div> the order of auto placed items a grid can contain a mixture of items. some of the items may have a position on the grid, but others may be auto-placed. this can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write css rules to place absolutely everything. the specification contains a long section detailing the grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items. order modifi...
...you have a document order that reflects the order in which items sit on the grid you may not need to write css rules to place absolutely everything. the specification contains a long section detailing the grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items. order modified document order grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. this means that if you have used the order property at all, the items will be placed by that order, not their dom order. otherwise they will stay by default in the order that they are entered in the document source. items with placement properties the first thing grid will do is place any items that have a positio...
...And 2 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing web development for more years than we care to remember might consider that css grid is a little bit like using “tables for layout”. back in the early days of web design, the way we constructed page layout was to use html tables, then fragment our design into the cells of those tables in order to create a layout. this had some advantages over the “css positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. the biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. in order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for exam...
...possible that we could create an accessibility issue through our use of grids? re-ordering content in css grid layout we’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. we can use the order property, which will change how items auto-place. we can use grid-auto-flow: dense which will take items visually out of dom order. we can also position items using line-based placement of grid template areas, without considering their location in the source. the specification includes a section that covers reordering and accessibility. in the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using grid layout. grid layout gives authors great powers of rearrangement...
...ering any time you reorder things with grid layout – or with flexbox – you only perform visual reordering. the underlying source is what controls things like text to speech, and the tab order of the document. you can see how this works with a very simple example. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:...
...And 2 more matches

The stacking context - CSS: Cascading Style Sheets
ntext in the previous part of this article, using z-index, the rendering order of certain elements is influenced by their z-index value. this occurs because these elements have special properties which cause them to form a stacking context. a stacking context is formed, anywhere in the document, by any element in the following scenarios: root element of the document (<html>). element with a position value absolute or relative and z-index value other than auto. element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop). element that is a child of a flex (flexbox) container, with z-index value other than auto. element that is a child of a grid (grid) container, with z-index value other than auto. element with a opacity value less than 1 (see the s...
... stacked, the whole element is considered in the stacking order of the parent stacking context. note: the hierarchy of stacking contexts is a subset of the hierarchy of html elements because only certain elements create stacking contexts. we can say that elements that do not create their own stacking contexts are assimilated by the parent stacking context. the example in this example, every positioned element creates its own stacking context, because of their positioning and z-index values. the hierarchy of stacking contexts is organized as follows: root div #1 div #2 div #3 div #4 div #5 div #6 it is important to note that div #4, div #5 and div #6 are children of div #3, so stacking of those elements is completely resolved within div#3. on...
... results in a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 div #1 - z-index is 5 example html <div id="div1"> <h1>division element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>division element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>division element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h...
...And 2 more matches

Shorthand properties - CSS: Cascading Style Sheets
and property, you can write more concise (and often more readable) style sheets, saving time and energy. the css specification defines shorthand properties to group the definition of common properties acting on the same theme. for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand. tricky edge cases even if they are very convenient to use, there are a few edge cases to keep in mind when using them: a value which is not specified is set to its initial value. that sounds anecdotal, but it really mea...
... similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corner...
... similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corners the 2-value s...
...And 2 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
m-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized. property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-a...
...d-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-template-columns -webkit-grid-template-rows h-l -webkit-hyphens -webkit-justify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphas...
...ebkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-sele...
...And 2 more matches

<basic-shape> - CSS: Cascading Style Sheets
functions the following shapes are supported. all <basic-shape> values use functional notation and are defined here using the value definition syntax. inset() inset( <shape-arg>{1,4} [round <border-radius>]? ) defines an inset rectangle. when all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. these arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values. the optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax. a pair of insets in either dimension that add up to more than the used dimension (such as left and right ...
...the optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax. a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. ...
... of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. circle() circle( [<shape-radius>]? [at <position>]? ) the <shape-radius> argument represents r, the radius of the circle. negative values are invalid. a percentage value here is resolved from the used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2). the <position> argument defines the center of the circle. this defaults to center if omitted. ellipse() ellipse( [<shape-radius>{2}]? [at <position>]? ) the <shape-radius> arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. negative values for either radius are invalid. percentage values here are resolved against the used width (for the rx value) and the used heigh...
...And 2 more matches

filter - CSS: Cascading Style Sheets
a value of 0% will create an image that is completely black. a v...
... function applies a linear multiplier to the input image, making it appear more or less bright. a value of 0% will create an image that is completely black. a value of 100% leaves the input unchanged. other values are linear multipliers on the effect. values of an amount over 100% are allowed, providing brighter results. the lacuna value for interpolation is 1. ...
... width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image. a value of 0% will create an image that is completely gray. a value of 100% leaves the input unchanged. values of an amount over 100% are allowed, providing results with more contrast. the lacuna value for interpolation is 1. ...
...And 2 more matches

list-style - CSS: Cascading Style Sheets
: this property is applied to list items, i.e., elements with display: list-item; . by default this includes <li> elements. because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. ...
...s. because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any order. if list-style-type and list-sty...
...none; /* global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any order. if list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable. values list-style-type see list-style-type. list-style-image see list-style-image. list-style-position see list-style-position. none no list style is used. accessibility concerns safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. to address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. this ensures the design is unaffected by t...
...And 2 more matches

mask-origin - CSS: Cascading Style Sheets
syntax one or more of the keyword values listed below, separated by ...
...x; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area. in other words, this property specifies the origin position of an image specified by the mask-image css property. ...
...nset; for elements rendered as a single box, this property specifies the mask positioning area. in other words, this property specifies the origin position of an image specified by the mask-image css property. for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the keyword values listed below, separated by commas. values content-box the position is relative to the content box. padding-box the position is relative to the padding box. for single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner. border-box the position is relative to the border box. margin-box the positi...
...And 2 more matches

mask-size - CSS: Cascading Style Sheets
ues are given, the first sets width and the second sets height. each value can be a <length>, a <percentage>, or auto. values <length> a <length> value scales the mask image to the specified length in the corresponding dimension. negative lengths are not allowed. <percentage> a <percentage> value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin. the mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. negative percentages are not allowed. auto a keyword that scales the mask image in the corresponding directions in order to maintain...
...re not allowed. auto a keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion. contain a keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). the image is letterboxed within the container. the image is automatically centered unless over-ridden by another property such as mask-position. cover a keyword that is the inverse of contain. scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). the image "covers" the entire width or height of the container. when the image and container have different dimensions, the image is clipped either on left/right or at top/bottom. the interpretation of possible values depends on the image's intr...
...images with no intrinsic dimensions or intrinsic proportion. the rendered size of the mask image is then computed as follows: if both components of mask-size are specified and are not auto: the mask image renders at the specified size. if the mask-size is contain or cover: the image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. if the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area. if the mask-size is auto or auto auto: if the image has both intrinsic dimensions, it is rendered at that size. if it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. if it has no dimensions but has a proportion, it's r...
...And 2 more matches

shape-outside - CSS: Cascading Style Sheets
ffect is as if the value none had been specified. interpolation when animating between one <basic-shape> and a second, the rules below are applied. the values in the shape functions interpolate as a simple list. the list values interpolate as <length>, <percentage>, or calc() where possible. if list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate. both shapes must use the same reference box. if both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions. if both shapes are of type inset(), interpolate between each value in the shape functions. if both shapes ar...
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )...
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>?
...And 2 more matches

Video player styling basics - Developer guides
as mentioned earlier, a data-state attribute is now used to indicate whether the ...
...ls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation based on the required button height). its position is also specifically set to relative, which is required for its responsiveness (more on that later). as mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also ...
...volume() but it also sets the state of the mute button depending on the video's current volume setting. checkvolume() is also called when the volumechange event is raised: video.addeventlistener('volumechange', function() { checkvolume(); }, false); progress bar a small change also needs to be made to the click handler for the <progress> element. ...
...And 2 more matches

Array.prototype.reduceRight() - JavaScript
, then accumulator will be equal to initialvalue and currentvalue will be equal to the last value in the array. if no initialvalue was provided, then accumulator will be equal to the last value in the array and currentvalue will be equal to the second-to-last value. if the array is empty and no initialvalue was provided, typeerror would be thrown. if the array has only one element (regardless of position) and no initialvalue was provided, or if initialvalue is provided but the array is empty, the solo value would be returned without calling callback. some example run-throughs of the function would look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }); the callback would be invoked four times, with the arguments ...
...) { return a + b; }); // sum is 6 flatten an array of arrays var flattened = [[0, 1], [2, 3], [4, 5]].reduceright(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); const randint = max => math.floor(math.random() * max) const add5 = (callback, x) => { settimeout(callback, randint(1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(1000), x - 2); }; const split = (cal...
...= a.reduce(function(prev, cur) { return prev + cur; }); var right = a.reduceright(function(prev, cur) { return prev + cur; }); console.log(left); // "12345" console.log(right); // "54321" defining composible function the concept of compose function is simple it combines n functions. it’s a flowing right-to-left, calling each function with the output of the last one. ...
...And 2 more matches

Performance fundamentals - Web Performance
avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. complex scenes are rendered using the device's gpu for maximum performance. to improve power usage, simple scenes are rendered using special dedicated composition hardware, while the gpu idles or turns off. fully static content is the exception rather than the rule for rich applications. rich applications use dynamic content with animation and transition effects. transitions and animations are particularly important to applications: developers can use css to declare complicated behaviour with a simple, high-level syntax. in turn, gecko's graphics pipeline...
...ey are already running) and have better upp. specific coding tips for application performance the following practical tips will help improve one or more of the application performance factors discussed above. use css animations and transitions instead of using some library’s animate() function, which probably currently uses many badly performing technologies (window.settimeout() or top/left positioning, for example) use css animations. in many cases, you can actually use css transitions to get the job done. this works well because the browser is designed to optimize these effects and use the gpu to handle them smoothly with minimal impact on processor performance. another benefit is that you can define these effects in css along with the rest of your app's look-and-feel, using a standardized...
... to be performed at set points in the animation process. you can easily trigger these animations with the :hover, :focus, or :target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content. the reason is, once again, hardware acceleration. the browser can do these tasks on your gpu, letting the cpu handle other things. in addition, transforms give you capabilities you might not otherwise have. not only can you translate elements in 2d space, but y...
...And 2 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
:nth-child(2) img { border-radius: 0px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app. ...
... won't be lost under the navigation buttons (see below). this was necessary because mozilla brick (also see below) forces its components to be 100% of the screen width and height. we have used vw (viewport width) units for these — 1vw is equivalent to 1% of the viewport width. this makes the dimensions scale up and down nicely along with the viewport width. last for this section, we absolutely positioned all buttons at the bottom of the cards they are in, so the layout looks ok at different viewport size variations. we then add a rule that positions the second button in any card a button's width higher up the card. when you click on an image in the gallery it brings up options to delete or cancel deletion of the card, and you don't want two buttons on top of one another. x-card:nth-child(3) im...
...itions the second button in any card a button's width higher up the card. when you click on an image in the gallery it brings up options to delete or cancel deletion of the card, and you don't want two buttons on top of one another. x-card:nth-child(3) img { width: 50%; } this rule simply changes the width of the gallery images so now there are two per line. ...
...And 2 more matches

Paths - SVG: Scalable Vector Graphics
nd hence in the user coordinate system. later, we will learn how paths can be transformed to suit other needs. line commands there are five line commands for <path> nodes. the first command is the "move to" or m, which was described above. it takes two parameters, a coordinate (x) and coordinate (y) to move to. if the cursor was already somewhere on the page, no line is drawn to connect the two positions. the "move to" command appears at the beginning of paths to specify where the drawing should start. for example: m x y (or) m dx dy in the following example there's only a point at (10,10). note, though, that it wouldn't show up if a path was just drawn normally. for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circl...
...how up if a path was just drawn normally. for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines. the most generic is the "line to" command, called with l. l takes two parameters—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be mor...
..."m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a little bit by using the "close path" command, called with z. this command draws a straight line from the current position back to the first point of the path. it is often placed at the end of a path node, although not always. there is no difference between the uppercase and lowercase command. z (or) z so our path above could be shortened to: <path d="m 10 10 h 90 v 90 h 10 z" fill="transparent" stroke="black"/> the relative forms of these commands can also be used to draw the same picture. relative command...
...And 2 more matches

Popup Menus - Archive of obsolete content
re the mouse pointer is. tooltips will be placed slightly below the element so that the mouse pointer does not obscure it. there are cases however, where you will want to indicate in more detail where the popup appears. for example, the popup menu that appears when you click the back button in a browser should appear underneath the back button, not where the mouse pointer is. to change the popup position, you can use an additional attribute, position, on the menupopup. you can also add it to the menupopup element. this attribute is used to indicate the placement of the popup relative to the element invoking the popup. it can be set to a number of values, which are described briefly below: after_start the popup appears below the element with the left edges of the element and the popup window a...
...s of the element and the popup window aligned. start_after the popup appears to the left of the element with the bottom edges of the element and the popup window aligned. start_before the popup appears to the left of the element with the top edges of the element and the popup window aligned. overlap the popup appears on top of the element. at_pointer the popup appears at the mouse pointer position (at_pointer is not currently implemented with respect to the mouse pointer. it currently appears at the top of the anchor). after_pointer the popup appears at the same horizontal position as the mouse pointer but appears below the element. this is how tooltips appear (after_pointer is not currently implemented with respect to the mouse pointer. it currently offsets 21 pixels vertically from the...
...with respect to the mouse pointer. it currently appears at the top of the anchor). after_pointer the popup appears at the same horizontal position as the mouse pointer but appears below the element. this is how tooltips appear (after_pointer is not currently implemented with respect to the mouse pointer. it currently offsets 21 pixels vertically from the anchor, see bug 619887). by adding the position attribute to a popup element, you can specify precisely where the popup appears. you cannot specify an exact pixel position. the position attribute can be used with all three popup types, although you probably would not change the value for tooltips. ...
...for simplicity, we'll just replicate the contents of the edit menu. ...

richlistbox - Archive of obsolete content
the value of the disabled attribute. disablekeynavigation type: boolean gets or sets the value of the disablekeynavigation attribute. itemcount type: integer read only property holding the number of child items. scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box. selectedcount type: integer returns the number of items that are currently selected. selectedindex type: integer returns 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 selecteditem ...
... 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. ...
... the item is already visible, no scrolling occurs. getindexoffirstvisiblerow() return type: integer returns the index of the first displayed row. note that this is not the same as the first row -- if the displayed items have been scrolled down, this function will retrieve the index of the first row that the user can see. getindexofitem( item ) return type: integer returns the zero-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. getnumberofvisiblerows() return type: integer returns the number of rows that are currently visible to the user. getrowcount() return type: integer returns the total number of r...
...etrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected item: getselecteditem(0). insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. invertselection() return type: no return value reverses the selected state of all items. selected items become deselected, and deselected items become selected. movebyoffset( offset , isselecting, isselectingrange) return type: no return value if offset is positive, adjusts the focused item forward by that many items. if...

scrollbar - Archive of obsolete content
e home [ examples | attributes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. ...
...rcentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute. the default value is 0. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. ...
...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. ...
..., 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 addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefault...

splitter - Archive of obsolete content
parent is collapsed so that its width or height is 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. g...
... grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. resizebefore type: one of the values below this attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned. closest the element immediately to the left or above the splitter resizes. farthest the element that is the farthest away from the splitter to the left or above the splitter resizes. flex the closest flexible element resizes. state type: one of the values below indicates whether the splitter has collapsed content or not. this attribute will be updated automatically...
...atically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state. open the content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed. collapsed the content either before or after the splitter is collapsed and is not visible. dragging the user is current adjusting the position of the splitter, typically by dragging it with the mouse. substate type: one of the values below on splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions. before the element immediately before the splitter is coll...
..., 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 addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefault...

Building up a basic demo with the PlayCanvas engine - Game development
n(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects. let's start with the camera — add these lines to your code, below the previous ones. var camera = new pc.entity(); camera.addcomponent("camera", { clearcolor: new pc.color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0, 7); the code above will create a new entity. note: an entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. then it adds a camera component to it with the light gray clearcolor — the color will be visible as the background. next, the camera object is added to the root of our application and po...
... try saving the file and loading it in your browser. ...
...rlapping the cylinder. then the material is created, given a gray color, and assigned to the cone entity. here's how it should look right now: this works, but it is a bit boring. in a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. animation we already used translate or rotate to adjust the position of the shapes; we could also change their positions directly with setposition, or scale them. to show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame. there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("update", function (deltatime) { ...
... we're wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part. moving beside rotation and scaling we can also move objects around the scene. add the following code to achieve that. cone.setposition(2, math.sin(timer*2), 0); this will move the cone up and down by applying the sin value to the y axis on each frame, with a little bit of adjustment to make it look cooler. try changing the value to see how it affects the animation. conclusion here's the final code listing, along with a viewable live example: you can also see it on github and fork the repository if you want to play with it...

Build the brick field - Game development
of bricks , their width and height, the padding between the bricks so they won't touch each other and a top and left offset so they won't start being drawn right from the edge of the canvas. we will hold all our bricks in a two-dimensional array. it will contain the brick columns (c), which in turn will contain the brick rows (r), which in turn will each contain an object containing the x and y position to paint each brick on the screen. add the following just below your variables: var bricks = []; for(var c=0; c<brickcolumncount; c++) { bricks[c] = []; for(var r=0; r<brickrowcount; r++) { bricks[c][r] = { x: 0, y: 0 }; } } the code above will loop through the rows and columns and create the new bricks. note that the brick objects will also be used for collision detection p...
...; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { bricks[c][r].x = 0; bricks[c][r].y = 0; ctx.beginpath(); ctx.rect(0, 0, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } again, we're looping through the rows and columns to set the x and y position of each brick, and we're also painting a brick on the canvas — size brickwidth x brickheight — with each loop iteration. the problem is that we're painting them all in one place, at coordinates (0,0). what we need to do is include some calculations that will work out the x and y position of each brick for each loop iteration: var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var br...
...ize brickwidth x brickheight — with each loop iteration. the problem is that we're painting them all in one place, at coordinates (0,0). what we need to do is include some calculations that will work out the x and y position of each brick for each loop iteration: var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; each brickx position is worked out as brickwidth + brickpadding, multiplied by the column number, c, plus the brickoffsetleft; the logic for the bricky is identical except that it uses the values for row number, r, brickheight, and brickoffsettop. now every single brick can be placed in its correct place row and column, with padding between each brick, drawn at an offset from the left and top canvas edges. the final...
...in this lesson is to add a call to drawbricks() somewhere in the draw() function, preferably at the beginning, between the clearing of the canvas and drawing the ball. add the following just above the drawball() call: drawbricks(); compare your code at this point, the game has got a little more interesting again : exercise: try changing the number of bricks in a row or a column, or their positions. next steps so now we have bricks! but the ball isn't interacting with them at all — we'll change that as we continue to the seventh chapter: collision detection. « previousnext » ...

Mouse controls - Game development
tening for mouse movement listening for mouse movement is even easier than listening for key presses: all we need is the listener for the mousemove event. add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that. add the following function to your code, below the previous line you added: function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { paddlex = relativex - paddlewidth/2; } } in this function we first work out a relativ...
...ng handler function will do exactly that. ...
...ex = relativex - paddlewidth/2; } } in this function we first work out a relativex value, which is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively this is equal to the distance between the canvas left edge and the mouse pointer. ...
...tal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively this is equal to the distance between the canvas left edge and the mouse pointer. if the relative x pointer position is greater than zero and lower than the canvas width, the pointer is within the canvas boundaries, and the paddlex position (anchored on the left edge of the paddle) is set to the relativex value minus half the width of the paddle, so that the movement will actually be relative to the middle of the paddle. the paddle will now follow the position of the mouse cursor, but since we're restricting the movement to the size of the canvas, it won't disappear completely off either side. compare your code this is the latest...

Move the ball - Game development
the 2nd step out of 10 of the gamedev canvas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson2.html. you already know how to draw a ball from working through the previous article, so now let's make it move. technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement — just like how movement works with the movies. defining a drawing loop to keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. you can run a function over and over again using a javascri...
...the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame. making it move you won't notice the ball being repainted constantly at the moment, as it's not moving. let's change that. first, instead of a hardcoded position at (50,50) we will define a starting point at the bottom center part of the canvas in variables called x and y, then use those to define the position the circle is drawn at. first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as show...
...ll value to x and y after every frame has been drawn to make it appear that the ball is moving. let's define these small values as dx and dy and set their values to 2 and -2 respectively. add the following below your x and y variable definitions: var dx = 2; var dy = -2; the last thing to do is to update x and y with our dx and dy variable on every frame, so the ball will be painted in the new position on every update. add the following two new lines indicated below to your draw() function: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code again and try it in your browser. this works ok, although it appears that the ball is leaving a trail behind it: clea...
...aw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code and try again, and this time you'll see the ball move without a trail. every 10 milliseconds the canvas is cleared, the blue circle (our ball) will be drawn on a given position and the x and y values will be updated for the next frame. cleaning up our code we will be adding more and more commands to the draw() function in the next few articles, so it's good to keep it as simple and clean as possible. let's start by moving the ball drawing code to a separate function. replace the existing draw() function with the following two functions: function drawball() { ctx...

CSS and JavaScript accessibility best practices - Learn web development
ts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding things there are many instances where a visual design will require that not all content is shown at once. ...
... on the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screen readers. ...
... real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. nonnegative and less than 4 digits). here we've just imp...
...ctually focus it. firefox doesn't focus the inputs properly at all in this context, so firefox users can't take advantage of this at present (although everything else works fine). the firefox issue should be fixed soon — work is being done to give firefox behaviour parity with other browsers (see bug 277178). in addition, the errorfield is placed at the top of the source order (although it is positioned differently in the ui using css), meaning that users can find out exactly what's wrong with their form submissions and get to the input elements in question by going back up to the start of the page. as a final note, we have used some wai-aria attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't p...

WAI-ARIA basics - Learn web development
likely to change, then it is also a good idea to indicate when it happens, and what the result is. for example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. we've set up a hidden live region: <p class="hidden-alert" aria-live="assertive"></p> which is hidden from view using absolute positioning. when this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too: function togglemusician(bool) { let instruitem = formitems[formitems.length-1]; if(bool) { instruitem.input.disabled = false; instruitem.label.style.co...
...her roles that can identify non-semantic element structures as common ui features that go beyond what's available in standard html, for example combobox, slider, tabpanel, tree. you can see a number of useful examples in the deque university code library, to give you an idea of how such controls can be made accessible. let's go through an example of our own. we'll return to our simple absolutely-positioned tabbed interface (see hiding things in our css and javascript accessibility article), which you can find at tabbed info box example (see source code). this example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. it is also fairly accessible too — you can scroll through the content and use the hea...
...le role="tabpanel" aria-hidden="true"> ... </article> </div> note: the most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. the new features are as follows: new roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels. aria-selected — defines ...
...ue of this attribute on the different tabs is updated via javascript. tabindex="0" — as we've removed the links, we need to give the list items this attribute to provide it with keyboard focus. aria-setsize — this property allows you to specify to screenreaders that an element is part of a series, and how many items the series has. aria-posinset — this property allows you to specify what position in a series an element is in. along with aria-setsize, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. in many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues. in our tests, this new structure did serve to improve things overall. the tabs are now recogni...

CSS values and units - Learn web development
tual image file pointed to via a url() function, or a gradient. in the example below we have demonstrated an image and a gradient in use as a value for the css background-image property. note: there are some other possible values for <image>, however these are newer and currently have poor browser support. check out the page on mdn for the <image> data type if you want to read about them. ...
... pointed to via a url() function, or a gradient. in the example below we have demonstrated an image and a gradient in use as a value for the css background-image property. note: there are some other possible values for <image>, however these are newer and currently have poor browser support. check out the page on mdn for the <image> data type if you want to read about them. ...
... below we have demonstrated an image and a gradient in use as a value for the css background-image property. note: there are some other possible values for <image>, however these are newer and currently have poor browser support. check out the page on mdn for the <image> data type if you want to read about them. position the <position> data type represents a set of 2d coordinates, used to position an item such as a background image (via background-position). it can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2d box, along with lengths, which represent offsets from the top and left-hand edges of the box. a typical position value consists of two values — the first sets the position horizontally, the second vertically. if you only spe...
... play around with these values to see how you can push the image around. ...

Looping code - Learn web development
to run the example again and again to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clienth...
...gba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the code, returns a whole number between 0 and x-1. width and height are the width and height of the inner browser window. you should get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page. the amount of code needed would be the same whether we were drawing 100 circles, 1000, or 10,000. only one number has to change. if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); this would g...
...= 10) {\n para.textcontent = \'countdown \' + i;\n } else if(i === 0) {\n para.textcontent = \'blast off!\';\n } else {\n para.textcontent = i;\n }\n\n output.appendchild(para);\n\n i--;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea...
...gth);\n\nrefused.textcontent = refused.textcontent.slice(0,refused.textcontent.length-2) + \'.\';\nadmitted.textcontent = admitted.textcontent.slice(0,admitted.textcontent.length-2) + \'.\';'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea...

Beginning our React todo list - Learn web development
background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1...
...in-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1re...
...odo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: in...
...b > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px...

Starting our Svelte Todo list app - Learn web development
order-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1...
...n-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1re...
...odo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: in...
...b > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px...

Styling Vue components with CSS - Learn web development
group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small...
...> * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; ...
... solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 40px; margin-bottom: 10px; padding-left: 40px; clear: left; } .custom-checkbox > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-checkbox > .checkbox-label { font-size: inherit; font-family: inherit...
...ex: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-checkbox > .checkbox-label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .custom-checkbox > label::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px;...

SourceMap.jsm
new sourcemapconsumer(rawsourcemap) the only parameter is the raw source map (either as a string which can be json.parse'd, or an object). ...
... new sourcemapconsumer(rawsourcemap) the only parameter is the raw source map (either as a string which can be json.parse'd, or an object). ...
...ces: an array of urls to the original source files. names: an array of identifiers that can be referenced by individual mappings. sourceroot: optional. the url root from which all sources are relative. mappings: a string of base64 vlqs which contain the actual mappings. file: the generated filename this source map is associated with. sourcemapconsumer.prototype.originalpositionfor(generatedposition) returns the original source, line, and column information for the generated source's line and column positions provided. the only argument is an object with the following properties: line: the line number in the generated source. column: the column number in the generated source. and an object is returned with the following properties: source: the orig...
...sociated with. sourceroot: an optional root for all relative urls in this source map. sourcemapgenerator.prototype.addmapping(mapping) add a single mapping from original source line and column to the generated source's line and column for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line and column positions. source: the original source file (relative to the sourceroot). name: an optional original token name for this mapping. sourcemapgenerator.prototype.tostring() renders the source map being generated to a string. sourcenode sourcenodes provide a way to abstract over interpolating and/or concatenating snippet...

nsIAccessibleEditableText
accessible/public/nsiaccessibleeditabletext.idlscriptable an interface for editing text of an accessible object. the operations it supports includes setting text attributes and text contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
..., copying text, cutting text, pasting text and deleting text at the specified position. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void copytext(in long startpos, in long endpos); void cuttext(in long startpos, in long endpos); void deletetext(in long startpos, in long endpos); void inserttext(in astring text, in long position); void pastetext(in long position); void setattributes(in long startpos, in long endpos, in nsisupports attributes); unimplemented void settextcontents(in astring text); attributes attribute type description associatededitor nsieditor returns an editor associated with the accessible. read only. native code only! methods cop...
...cates the text cannot be deleted or copied into the clipboard. deletetext() deletes a range of text. void deletetext( in long startpos, in long endpos ); parameters startpos start offset of the text to be deleted. endpos end offset of the text to be deleted. exceptions thrown ns_error_failure indicates the text cannot be deleted. inserttext() inserts text at the specified position. ...
...oard. deletetext() deletes a range of text. void deletetext( in long startpos, in long endpos ); parameters startpos start offset of the text to be deleted. endpos end offset of the text to be deleted. exceptions thrown ns_error_failure indicates the text cannot be deleted. inserttext() inserts text at the specified position. void inserttext( in astring text, in long position ); parameters text text to be inserted. position the offset at which to insert the text. exceptions thrown ns_error_failure indicates the text cannot be inserted. pastetext() pastes text from the clipboard. void pastetext( in long position ); parameters position the offset at which to insert the text from the system clipboard into the text represented by this object. e...

nsIAccessibleText
the text. charactercount long read only. defaulttextattributes nsipersistentproperties return the text attributes that apply to the entire accessible. read only. selectioncount long read only. constants text offset constants constant value description text_offset_end_of_text -1 will be treated as the equal to the end of the text. text_offset_caret -2 will be treated as the caret position. text boundary constants constant value description boundary_char 0 boundary_word_start 1 boundary_word_end 2 boundary_sentence_start 3 do not use in new code. boundary_sentence_end 4 do not use in new code. boundary_line_start 5 boundary_line_end 6 boundary_attribute_range 7 coordinate type constants obsolete since gecko 1.9 (firefox 3)this feature is o...
...n long offset, out long rangestartoffset, out long rangeendoffset ); parameters offset rangestartoffset rangeendoffset return value getcharacteratoffset() it would be better to return an unsigned long here, to allow unicode chars > 16 bits. wchar getcharacteratoffset( in long offset ); parameters offset return value getcharacterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text, that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to ...
...ox of the referenced character. coordtype specifies if the coordinates are relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants). getoffsetatpoint() get the text offset at the given point, or return -1 if no character exists at that point. long getoffsetatpoint( in long x, in long y, in unsigned long coordtype ); parameters x the position's x value for which to look up the index of the character that is rendered on to the display at that point. y the position's y value for which to look up the index of the character that is rendered on to the display at that point. coordtype screen coordinates or window coordinates (see constants declared in nsiaccessiblecoordinatetype). return value offset - index of the character under the give...
... rendered on to the display at that point. coordtype screen coordinates or window coordinates (see constants declared in nsiaccessiblecoordinatetype). return value offset - index of the character under the given point or -1 if the point is invalid or there is no character under the point. getrangeextents() the virtual character after the last character of the represented text, that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being t...

nsIArray
indexes are zero-based, such that the last element in the array is stored at the index length-1. for an array which can be modified, see nsimutablearray. neither interface makes any attempt to protect the individual elements from modification. ...
...signed long startindex, in nsisupports element); void queryelementat(in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result); attributes attribute type description length unsigned long the number of elements in the array. read only. methods enumerate() enumerate the array. nsisimpleenumerator enumerate(); parameters none. return value a new enumerator positioned at the start of the array. exceptions thrown ns_error_failure if the array is empty (to make it easy to detect errors). ns_error_out_of_memory if there is not enough memory to complete the operation. indexof() get the position of a specific element. note that since null is a valid input, exceptions are used to indicate that an element is not found. unsigned long indexof( in unsigned long st...
...ment. note that since null is a valid input, exceptions are used to indicate that an element is not found. unsigned long indexof( in unsigned long startindex, in nsisupports element ); parameters startindex the initial element to search in the array. to start at the beginning, use 0 as the startindex. element the element you are looking for. return value a number >= startindex which is the position of the element in the array. exceptions thrown ns_error_failure if the element was not in the array. queryelementat() retrieve a specific element of the array, and queryinterface it to the specified interface. null is a valid result for this method, but exceptions are thrown in other circumstances. void queryelementat( in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out n...
...s thrown ns_error_failure if the element was not in the array. queryelementat() retrieve a specific element of the array, and queryinterface it to the specified interface. null is a valid result for this method, but exceptions are thrown in other circumstances. void queryelementat( in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result ); parameters index position of element. uuid the iid of the requested interface. result the object, queryinterface'd to the requested interface. exceptions thrown ns_error_illegal_value when index > length-1. see also nsimutablearray ...

nsIProtocolProxyService
proxy auto config (pac) may perform a synchronous dns query, which may not return immediately. so, calling resolve wi...
.... this value may be used to tune the delay before this proxy is used again. the proxy that was unavailable. return value an nsiproxyinfo object or null for a direct connection. exceptions thrown ns_error_not_available if there is no alternate proxy available. registerfilter() this method may be used to register a proxy filter instance. ...
...xy that was unavailable. return value an nsiproxyinfo object or null for a direct connection. exceptions thrown ns_error_not_available if there is no alternate proxy available. registerfilter() this method may be used to register a proxy filter instance. each proxy filter is registered with an associated position that determines the order in which the filters are applied (starting from position 0). when resolve/asyncresolve is called, it generates a list of proxies for the given uri, and then it applies the proxy filters. the filters have the opportunity to modify the list of proxies. if two filters register for the same position, then the filters will be visited in the order in which they were registered. if the filter is already registered, then its position will be updated. after f...
...does not permit proxying via http. if a nsiprotocolhandler disallows all proxying, then filters will never have a chance to intercept proxy requests for such urls. note: it is possible to construct filters that compete with one another in undesirable ways. this api does not attempt to protect against such problems. it is recommended that any extensions that choose to call this method make their position value configurable at runtime (perhaps via the preferences service). void registerfilter( in nsiprotocolproxyfilter afilter, in unsigned long aposition ); parameters afilter the nsiprotocolproxyfilter instance to be registered. aposition the position of the filter. unregisterfilter() this method may be used to unregister a proxy filter instance. all filters will be automatically u...

nsITextInputProcessorNotification
rface may have some new attributes. so, nsitextinputprocessorcallback won't be changed for keeping backward compatibility. attributes attribute type description type acstring the type of request or notification to ime. see type values below. types "request-to-commit" this is required to be handled. when this is requested, the callback should commit composition synchronously, i.e., nsitextinputprocessor.commitcomposition() should be called. if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. this is typically notified when user clicks somewhere, focus is moved, or web contents modify the value of ...
... nsitextinputprocessor.commitcomposition() should be called. if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. this is typically notified when user clicks somewhere, focus is moved, or web contents modify the value of the editor during composition. "request-to-cancel" this is required to be handled. when this is requested, the callback should cancel composition synchronously, i.e., nsitextinputprocessor.cancelcomposition() should be called. if the callback doesn't want to cancel the composition synchronously, it's okay to cancel it later (i.e., asynchronously). however, gecko will cancel the composition with empty string internally. t...
... "notify-focus" when an editable editor gets focus, this is notified. "notify-blur" when an editable editor loses focus, this is notified. ...
... "notify-focus" when an editable editor gets focus, this is notified. ...

nsITreeBoxObject
void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrolltocell(in long row, in nsitreecolumn col); void scrolltocolumn(in nsitreecolumn col); void scrolltohorizontalposition(in long horizontalposition); void invalidate(); void invalidatecolumn(in nsitreecolumn col); void invalidaterow(in long index); void invalidatecell(in long row, in nsitreecolumn col); void invalidaterange(in long startindex, in long endindex); void invalidatecolumnrange(in long startindex, in long endindex, in nsitreecolumn col); long...
...ing this attribute to a new value. focused boolean whether or not we are currently focused. treebody nsidomelement readonly: obtain the treebody content node. this is a node that corresponds to the treechildren tag. rowheight long readonly: obtain the height of a row. rowwidth long readonly: obtain the width of a row. horizontalposition long readonly: get the pixel position of the horizontal scrollbar. selectionregion nsiscriptableregion readonly: return the region for the visible parts of the selection, in device pixels. methods getfirstvisiblerow() get the index of the first visible row. long getfirstvisiblerow(); getlastvisiblerow() get the index of the last visible row. long getlastvisiblerow();...
...corner of the visible view. void scrolltocell(in long row, in nsitreecolumn col); parameters row the cell's row index col the nsitreecolumn of the cell scrolltocolumn() scrolls horizontally so that the specified column is at the left of the view (if possible). void scrolltocolumn(in nsitreecolumn col); parameters col the nsitreecolumn to scroll to scrolltohorizontalposition() scroll to a specific horizontal pixel position. void scrolltohorizontalposition(in long horizontalposition); parameters horizontalposition the number of pixels to scroll invalidate() invalidatecolumn() invalidaterow() invalidatecell() invalidaterange() invalidatecolumnrange() invalidation methods for fine-grained painting control. void invalidate(); void invalidatecolumn(in nsit...
...meters row the index of the row col the nsitreecolumn rowcountchanged() notify the tree that the number of rows changed. the view is responsible for calling this notification method when rows are added or removed. for non-contiguous additions/removals, this method should be called multiple times. void rowcountchanged(in long index, in long count); parameters index the position at which the new rows were added or at which rows were removed. count the number of rows added or removed. use negative values for removed rows. example you deleted the row with index rowindex. inform the tree about this change by calling rowcountchanged(rowindex+1, -1); beginupdatebatch() notify the tree that the view is about to perform a batch update, that is, add, remove or invalida...

Using the CSS Painting API - Web APIs
nterface, canvastext, and canvastextdrawingstyles apis. we define the fillstyle as being hsla(55, 90%, 60%, 1.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that color. the fillrect() parameters are, in order, x-axis origin, y-axis origin, width, and height. fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. we can use the css background-size and background-position properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet. we tried to keep the example simple. for more options, look at the canvas documentation. we also add a little bit of ...
...ackground-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api. while you can't play with the worklet's script, you can alter the background-size and background-position to change the size and location of the background image. paintsize in the example above, we created a 20x200 unit box, painted 15 units from the top of the element it is the same regardless of the size of the element. if the text is small, the yellow box looks like a huge underline. if the text is huge, the box might look like an bar above the first three letters. it would be better if the bac...
...e paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size. we've changed the dimensions and positioning of our rectangle to be relative to the size of the element box rather than absolute values. we can pass the second parameter into the paint() function to give us access to the width and the height of the element, via .width and .height properties. our header now has a highlight that changes according to it's size. css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint...
...worklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklet/boxbg.js'); while you can't play with the worklet's script, you can alter the custom property values to change the colors and width of the background image. adding complexity the above examples might not seem very exciting, as you could recreate them in a few different ways with existing css properties, e.g. by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize. let's take a look at a more complex paint example. registerpaint('headerhighlight', class { static get inputpr...

Detecting device orientation - Web APIs
motion of the device. orientation example this example will work on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
...event and running on a device able to detect its orientation. ...
... warning: chrome and firefox do not handle the angles the same wa...
...cemotionevent object passed as a parameter of the handlemotion function. the motion event contains four properties: devicemotionevent.acceleration devicemotionevent.accelerationincludinggravity devicemotionevent.rotationrate devicemotionevent.interval motion values explained the devicemotionevent objects provide web developers with information about the speed of changes for the device's position and orientation. the changes are provided along three axis (see orientation and motion data explained for details). for acceleration and accelerationincludinggravity, those axes correspond to the following: x: represents the axis from west to east y: represents the axis from south to north z: represents the axis perpendicular to the ground for rotationrate, the situation is a bit differen...

HTMLMediaElement - Web APIs
the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...spitch). htmlmediaelement.readystate read only returns a unsigned short (enumeration) indicating the readiness state of the media. htmlmediaelement.seekable read only returns a timeranges object that contains the time ranges that the user is able to seek to, if any. htmlmediaelement.seeking read only returns a boolean that indicates whether the media is in the process of seeking to a new position. htmlmediaelement.sinkid read only returns a domstring that is the unique id of the audio device delivering output, or an empty string if it is using the user agent default. this id should be one of the mediadeviceinfo.deviceid values returned from mediadevices.enumeratedevices(), id-multimedia, or id-communications. htmlmediaelement.src is a domstring that reflects the src html attribute,...
...ets the eventhandler called when the media is encrypted. htmlmediaelement.onwaitingforkey sets the eventhandler called when playback is blocked while waiting for an encryption key. obsolete attributes these attributes are obsolete and should not be used, even if a browser still supports them. htmlmediaelement.initialtime read only returns a double that indicates the initial playback position in seconds. htmlmediaelement.mozchannels read only returns a double representing the number of channels in the audio resource (e.g., 2 for stereo). obsolete event handlers htmlmediaelement.onmozinterruptbegin sets the eventhandler called when the media element is interrupted because of the audio channel manager. this was firefox-specific, having been implemented for firefox os, a...

HTMLTableSectionElement - Web APIs
the htmltablesectionelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table. ...
...es and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table. ...
...ted. htmltablesectionelement.valign is a domstring representing an enumerated value indicating how the content of the cell must be vertically aligned. it reflects the valign attribute and can have one of the following values: "top", "middle", "bottom", or "baseline". methods inherits methods from its parent, htmlelement. htmltablesectionelement.deleterow() removes the cell at the given position in the section. if the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than 0, it raises a domexception with the indexsizeerror value. htmltablesectionelement.insertrow() inserts a new row just before the given position in the section. if the given position is not given or is -1, it appends the row to the end of section. if the giv...
... specifications specification status comment html living standardthe definition of 'htmltablesectionelement' in that specification. ...

IDBCursorSync - Web APIs
) raises (idbdatabaseexception); attributes attribute type description count readonly unsigned long long the total number of objects that share the current key. direction readonly unsigned short the direction of traversal of the cursor. see constants for possible values. key readonly any the key for the record at the cursor's position. value any the value for the record at the cursor's position. setting this attribute can raise an idbdatabaseexception with the following codes: data_err if the underlying object store uses in-line keys and the property at the key path does not match the key in this cursor's position. not_allowed_err if the underlying index or object store does not su...
...tes, and its direction is monotonically increasing in the order of keys. prev 2 this cursor includes duplicates, and its direction is monotonically decreasing in the order of keys. prev_no_duplicate 3 this cursor does not include duplicates, and its direction is monotonically decreasing in the order of keys. ...
...ion is monotonically decreasing in the order of keys. prev_no_duplicate 3 this cursor does not include duplicates, and its direction is monotonically decreasing in the order of keys. methods continue() advances the cursor to the next position along its direction, to the item whose key matches the optional key parameter. if no key is specified, advance to the immediate next position. returns false if the cursor has reached the end of its range; otherwise returns true. ...
... methods continue() advances the cursor to the next position along its direction, to the item whose key matches the optional key parameter. if no key is specified, advance to the immediate next position. returns false if the cursor has reached the end of its range; otherwise returns true. bool continue ( in optional any key ); parameters key the key to which to move the cursor's position. remove() deletes the record at the cursor's position, without changing the cursor's position void delete ( ) raises (databaseexception); exceptions this method can raise an idbdatabaseexception with the following code: not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read mode. ...

MSCandidateWindowShow - Web APIs
indows ui, this event is supported in windows 8.1 imes of all languages. syntax event property object.oncandidatewindowshow = handler; addeventlistener method object.addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. this event fires after the positioning information of the ime candidate window has been determined. you can obtain the positioning information using the getcandidatewindowclientrect method, and adjust your layout as needed to avoid any occlusions with the ime candidate window. web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). example in ie11, deve...
...y occlusions with the ime candidate window. web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). ...
...developers could listen to them and shift the suggestion ui accordingly. see also microsoft api extensions ime handling guide for gecko ...
...developers could listen to them and shift the suggestion ui accordingly. see also microsoft api extensions ime handling guide for gecko ...

Capabilities, constraints, and settings - Web APIs
stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused. ...
...ect to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused. ...
...r this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused. ...
...ert two space characters when either constraint edit box is focused. function keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.preventdefault(); } } videoconstrainteditor.addeventlistener("keydown", keydownhandler, false); audioconstrainteditor.addeventlistener("keydown", keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports. ...

MouseEvent - Web APIs
p, mousedown. mouseevent derives from uievent, which in turn derives from event. though the mouseevent.initmouseevent() method is kept for backward compatibility, creating of a mouseevent object should be done using the mouseevent() constructor. several more specific events are based on mouseevent, including wheelevent and dragevent. ...
... compatibility, creating of a mouseevent object should be done using the mouseevent() constructor. several more specific events are based on mouseevent, including wheelevent and dragevent. ...
...mouseevent.clienty read only the y coordinate of the mouse pointer in local (dom content) coordinates. mouseevent.ctrlkey read only returns true if the control key was down when the mouse event was fired. mouseevent.metakey read only returns true if the meta key was down when the mouse event was fired. ...
...ead only returns true if the control key was down when the mouse event was fired. mouseevent.metakey read only returns true if the meta key was down when the mouse event was fired. mouseevent.movementx read only the x coordinate of the mouse pointer relative to the position of the last mousemove event. mouseevent.movementy read only the y coordinate of the mouse pointer relative to the position of the last mousemove event. mouseevent.offsetx read only the x coordinate of the mouse pointer relative to the position of the padding edge of the target node. mouseevent.offsety read only the y coordinate of the mouse pointer relative to the position of the padding edge of the target node. mouseevent.pagex read only the x coordinate of the mouse pointer relative to the whole documen...

Node - Web APIs
and entityreference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node type that cannot have children will throw an exception. ...
... inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node type that cannot have children will throw an exception. ...
...e if it's the topmost node in the tree. this has been replaced by node.getrootnode(). methods in addition to the properties below, node inherits methods from its parent, eventtarget. node.appendchild(childnode) adds the specified childnode argument as the last child to the current node. if the argument referenced an existing node on the dom tree, the node will be detached from its current position and attached at the new position. node.clonenode() clone a node, and optionally, all of its contents. by default, it clones the content of the node. node.comparedocumentposition() compares the position of the current node against another node in any other document. node.contains() returns a boolean value indicating whether or not a node is a descendant of the calling node. node.getboxquads...
...cationthe definition of 'node' in that specification. obsolete the methods insertbefore(), replacechild(), removechild(), and appendchild() returns one more kind of error (not_supported_err) if called on a document. the normalize() method has been modified so that text node can also be normalized if the proper domconfiguration flag is set. added the following methods: comparedocumentposition(), issamenode(), lookupprefix(), isdefaultnamespace(), lookupnamespaceuri(), isequalnode(), getfeature(), setuserdata(), and getuserdata(). added the following properties: baseuri and textcontent. document object model (dom) level 2 core specificationthe definition of 'node' in that specification. obsolete the ownerdocument property was slightly modified so that documentfragmen...

Using the Permissions API - Web APIs
n the value of the state property of the permissionstatus object returned when the promise resolves, it reacts differently: "granted" the "enable geolocation" button is hidden, as it isn't needed if geolocation is already active. "prompt" the "enable geolocation" button is hidden, as it isn't needed if the user will be prompted to grant permission for geolocation. the geolocation.getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "enable geolocation" button appear). "denied" the "enable geolocation" button is revealed (this code needs to be here too, in case the permission state is already set to deni...
...this origin when the page is first loaded). ...
...n the page is first loaded). ...
...e is first loaded). ...

SVGTRefElement - Web APIs
the svgtrefelement interface corresponds to the <tref> elements. object-oriented access to the attributes of the <tref> element via the svg dom is not possible. ...
... the svgtrefelement interface corresponds to the <tref> elements. object-oriented access to the attributes of the <tref> element via the svg dom is not possible. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtrefelement' in that specification. recomme...
...4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextpositioningelement and implements properties from svgurireference. methods this interface has no methods but inherits methods from its parent, svgtextpositioningelement and implements properties from svgurireference. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtrefelement' in that specification. recommendation initial definition ...

SVGTSpanElement - Web APIs
the svgtspanelement interface represents a <tspan> element. ...
... the svgtspanelement interface represents a <tspan> element. ...
..."#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpositioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><l...
... methods this interface doesn't provide any specific methods. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtspanelement' in that specification. candidate recommendation no changes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtspanelement' in that specification. ...

TreeWalker - Web APIs
a treewalker can be created using the document.createtreewalker() method. properties this interface doesn't inherit any property. treewalker.root read only returns a node representing the root node as specified when the treewalker was created. treewalker.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must be presented. non-matching nodes are skipped, but their children may be included, if relevant. ...
...e: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root. in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_...
... shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means tha...
...t of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. treewalker.filter read only returns a nodefilter used to select the relevant nodes. treewalker.expa...

Visual Viewport API - Web APIs
he visual viewport without affecting the layout viewport. what happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? current browsers vary in how they handle this. ...
... accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given window. ...
...al viewport that would normally be anchored to the layout viewport. accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given window. a window's visualviewport object provides information about the viewport's position and size, and receives the resize and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport. example the code below is based on the sample the specification, though it adds a few things that make it function better. it shows a function called viewporthandler(). when called it queries the offsetleft and height properties for values it uses in a cs...
...resize and onscroll fire at the same time. using requestanimationframe() ensures that the transform ocurrs before the next render. let pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewport origin. var viewport = event.target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use w...

Using shaders to apply color in WebGL - Web APIs
step is to add a splash of color to it. we can do this by revising the shaders. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. applying color to the vertices in webgl objects are built using sets of vertices, each of which has a position and a color. by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients. previously, our vertex shader didn't apply any specific colors to the vertices. between this and the fragment shader assigning the fixed color of white to each pixel, the entire square was rendered as solid white. let's sa...
... function: function initbuffers(){ ... const colors = [ 1.0, 1.0, 1.0, 1.0, // white 1.0, 0.0, 0.0, 1.0, // red 0.0, 1.0, 0.0, 1.0, // green 0.0, 0.0, 1.0, 1.0, // blue ]; const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw); return { position: positionbuffer, color: colorbuffer, }; } this code starts by creating a javascript array containing four 4-value vectors, one for each vertex color. then a new webgl buffer is allocated to store these colors, and the array is converted into floats and stored into the buffer. to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: ...
...} this code starts by creating a javascript array containing four 4-value vectors, one for each vertex color. then a new webgl buffer is allocated to store these colors, and the array is converted into floats and stored into the buffer. to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: const vssource = ` attribute vec4 avertexposition; attribute vec4 avertexcolor; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying lowp vec4 vcolor; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying to the fragment shader. coloring the ...
... const fssource = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; in order to pick up the interpolated color for each pixel, we need to change this to fetch the value from the vcolor varying: const fssource = ` varying lowp vec4 vcolor; void main(void) { gl_fragcolor = vcolor; } `; each fragment receives the interpolated color based on its position relative to the vertex positions instead of a fixed value. drawing using the colors next, it's necessary to add code to look up the attribute location for the colors and setup that attribute for the shader program: const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexcolor: gl.getatt...

Using bounded reference spaces - Web APIs
ed behavior for users of these platforms. the space inside the boundary is then the user's safe movement area, within which they are tracked and their movements replicated into the virtual world. although the user's xr system may provide automated detection and protection against exiting the safe area, it is always good practice to handle this yourself, watching for collisions between the user's position and the boundary of the world, and providing guidance to move back toward the origin point, or at least to stay inside the safe zone. xr hardware that does not have an inherent boundary defined may or may not support the bounded reference space. if it does, it likely has a system in place to allow the user to specify or select the boundaries to apply if a bounded space is to be used. however, it...
...reference space, the user's xr device doesn't have built-in support for determining floor level, the webxr layer will still create a local-floor space. however, the floor level will be simulated by choosing and emulating the floor level and shifting the view upward by a fixed amount in order to ensure that the scene's contents render in the right place. keep in mind that by default, the viewer's position is placed immediately above the floor, like a camera lying on the ground. if you wish to simulate a human's perspective on the scene, you probably want to move the viewpoint upward by a distance that approximates human eye level by transforming it by providing an appropriate transform matrix to the xrreferencespace method requestoffsetreferencespace(). this would change the onrefspacecreated() m...
...oint upward by a distance that approximates human eye level by transforming it by providing an appropriate transform matrix to the xrreferencespace method requestoffsetreferencespace(). ...
...this approximates human height, though it assumes we've previously transformed the coordinate system so that the value of each coordinate is no longer...

XRInputSource.gripSpace - Web APIs
eturns an xrspace whose native origin tracks the pose used to render virtual objects so they appear to be held in (or part of) the user's hand. for example, if a user were holding a virtual straight rod, the native origin of this xrspace would be located at the approximate center of mass of the user's fist. syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, suitable for rendering an image of the device into the scene. gripspace is null if the input source is inherently untrackable. for example, only inputs whose targetraymode is tracked-pointer provide a gripspace. imagine that the controller is shaped like a straight rod, held in the user's fist. the native origin of the grip space is located a...
...dering an image of the device into the scene. gripspace is null if the input source is inherently untrackable. for example, only inputs whose targetraymode is tracked-pointer provide a gripspace. imagine that the controller is shaped like a straight rod, held in the user's fist. the native origin of the grip space is located at the centroid—the center of mass—of the user's fist, tracking the position of the user's hand. the coordinate system for the left hand's grip space. the coordinate system for the right hand's grip space. as shown in the diagram above, the coordinate system is oriented as follows: the x-axis is perpendicular to the palm of the user's hand, with the direction extending outward from the back of the hand being +x if the controller is in the user's right ...
...grip. +z is in the direction of the user's thumb, and -z is in the opposite direction. the y-axis is implied by the relationship between the other two axes; as is always the case, it's the cross product of the other two axes (lying 90° away from both the x and z axes). examples in tis example, taken from the frame rendering callback, the gripspace is used to render a mesh that represents the position and orieintation of the controller in the virtual environment. for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose repres...
...tation of the controller in the virtual environment. for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace. if a valid pose is returned, a method mydrawmeshusingtransform() is called to draw the controller's mesh transformed using the grip pose's transform matrix. specifications specification status comment webxr device apithe definition of 'xrinputsource.gripspace' in that specification. working draft initial definition.

XRInputSource.targetRaySpace - Web APIs
the read-only xrinputsource property targetrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the target ray in the virtual space. its native origin tracks the position of the origin point of the target ray, and its orientation indicates the orientation of the controller device itself. these values, interpreted in the context of the input source's targetraymode, can be used both to fully interpret the device as an input source. <<<--- needs diagram showing targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an...
...nput source. <<<--- needs diagram showing targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's target ray in virtual space. the native origin of the returned xrspace is located at the point from which the target ray is emitted, and the orientation of the space indicates the direction in which the target ray is pointing. usage notes all input sources—regardless of their targetraymode—have a valid targetrayspace. the exact meaning of this spac...
...et ray space, since the gaze input comes from the viewer's head. this shared space represents the same location as the space returned by the xrsession method requestreferencespace(), but is maintained as a different object to allow for future enhancements to the api. the target ray space reported by tracked pointer inputs (targetraymode of tracked-pointer) is actually based upon the true spatial position and orientation of the input device. to determine the position and orientation of the target ray while rendering a frame, pass it into the xrframe method getpose() method, then use the returned xrpose object's transform to gather the spatial information you need. example this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null tar...
...s that project a target ray outward from the user. for each such input, this example looks for inputs whose targetraymode is tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click. for tracked pointers, a function myrendertargetrayasbeam() is called to render a beam from the input controller's virtual position outward in the direction it's pointing. the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-related tasks. function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.target...

XRPose - Web APIs
xrpose is a webxr api interface representing a position and orientation in the 3d space, relative to the xrspace within which it resides. the xrspace—which is either an xrreferencespace or an xrboundedreferencespace—defines the coordinate system used for the pose and, in the case of an xrviewerpose, its underlying views. to obtain the xrpose for the xrspace used as the local coordinate system of an object, call xrframe.getpose(), specifying that local xrspace and the space to which you wish to convert: thepose = xrframe.getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose. ...
...al coordinate system of an object, call xrframe.getpose(), specifying that local xrspace and the space to which you wish to convert: thepose = xrframe.getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose. ...
...pecifying that local xrspace and the space to which you wish to convert: thepose = xrframe.getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose. this is obtained using xrframe.getviewerpose() instead of getpose(), specifying a reference space which has been adjusted to position and orient the node to provide the desired viewing position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientatio...
... frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). ...

XRRigidTransform - Web APIs
xrrigidtransform is used to specify transforms throughout the webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace(). the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. ...
...e places rather than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like computing the inverse of the transform. even better, once it's been computed, it's cached so that subsequent requests are significantly faster. constructor new xrrigidtransform() creates a new xrrigidtransform object which represents a transform that applies a specified position and/or orientation. attributes xrrigidtransform.position read only a dompointreadonly specifying a 3-dimensional point, expressed in meters, describing the translation component of the transform. the w attribute is always 1.0. xrrigidtransform.orientation read only a dompointreadonly which contains a unit quaternion describing the rotational component of the transform. as a unit qua...
...a matrix. xrrigidtransform.inverse read only returns a xrrigidtransform which is the inverse of this transform. that is, if applied to an object that had been previously transformed by the original transform, it will undo the transform and return the original object. usage notes when an xrrigidtransform is interpreted, the orientation is always applied to the affected object before the position is applied. example this code snippet creates an xrrigidtransform to specify the offset and orientation in relation to the current reference space to use when creating a new reference space. it then requests the first animation frame callback by calling the session's requestanimationframe() method. xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspac...
... in relation to the current reference space to use when creating a new reference space. it then requests the first animation frame callback by calling the session's requestanimationframe() method. xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); specifications specification status comment webxr device apithe definition of 'xrrigidtransform' in that specification. working draft initial definition. ...

XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object. with the transform, you can then position the view as a camera within the 3d scene. if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. ...
...the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. examples for each view making up the presented scene, the view's transform represents the position and orientation of the viewer or camera relative to the reference space's origin. you can then use the inverse of this matrix to transform the objects in your scene to adjust their placement and orientation to simulate the viewer's movement through space. in this example, we see an outline of a code fragment used while rendering an xrframe, which makes use of the view transform to place objects ...
...in the future with some additions to the api. for each view, we obtain its viewport and pass that to webgl using gl.viewport(). for the left eye, this will be the left half of the canvas, while the right eye will use the right half. then we iterate over each object that makes up the scene. each object's model view matrix is computed by multiplying its own matrix which describes the object's own position and orientation by the additional position and orientation adjustments needed to match the camera's movement. to convert the "camera focused" transform matrix into an "object focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix. the resulting model view matrix will apply all the transforms needed to move and rotate the object based o...
...this will simulate the movement of the camera even though we're actually moving the object. we then compute the normals for the model view matrix by inverting it, then transposing it. finally, we call the object's render() routine, passing along the modelviewmatrix and normalmatrix so the renderer can place and light the object properly. ...

-moz-image-rect - CSS: Cascading Style Sheets
irefox logo in four <div> blocks. clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks. css the css defines one container style, then the styles for the four boxes that comprise the complete image. ...
...x; height:272px; top:100px; left:100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined. let's look at them one at a time. #box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image. it defines a rectangle containing the top-left quarter of the image in the file firefox.jpg. #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); width:133px; height:136px; position:absolute; } this defines the top-right corner of the image. the other corners fo...
...z-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); width:133px; height:136px; position:absolute; } this defines the top-right corner of the image. ...
...er of the image. ...

:target - CSS: Cascading Style Sheets
v> <div class="lightbox" id="example2"> <figure> <a href="#" class="close"></a> <figcaption>cras risus odio, pharetra nec ultricies et, mollis ac augue. nunc et diam quis sapien dignissim auctor. ...
...uctor. ...
...box */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; ...
... living standard defines html-specific semantics. ...

CSS Box Alignment - CSS: Cascading Style Sheets
. fallback alignment if you set an alignment that cannot be fulfilled, then the fallback alignment will come into play and deal with the available space. this fallback alignment is specified individually for each layout method and detailed on the page for that method. types of alignment there are three different types of alignment that the specification details; these use keyword values. ...
...n alignment that cannot be fulfilled, then the fallback alignment will come into play and deal with the available space. this fallback alignment is specified individually for each layout method and detailed on the page for that method. types of alignment there are three different types of alignment that the specification details; these use keyword values. ...
...se use keyword values. positional alignment: specifying the position of an alignment subject with relation to its alignment container. baseline alignment: these keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context. distributed alignment: these keywords define alignment as a distribution of space among alignment subjects. positional alignment keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-self. center start end self-start self-end flex-start for flexbox only flex-end for flexbox only left right other than the physical values of left and right...
...g individual alignment properties as the css box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it: box alignment in flexbox box alignment in css grid layout box alignment in multiple-column layout box alignment for block, absolutely positioned and table layout reference css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis alignment container alignment subject fallback alignment guides css flexbox guide: basic concepts of flexbox css flexbox guide: aligning item...

Layout using named grid lines - CSS: Cascading Style Sheets
s="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> everything else about line-based placement still works in the same way and you can mix named lines and line numbers. naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions. giving lines multiple names you may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. to do this add the names inside the square brackets with whitespace between them [sidebar-end main-start]. you can then refer to...
... areas created using the grid-area property, then a layout created in grid-template-areas. the area names are: hd ft main sd this gives us column and row lines: hd-start hd-end sd-start sd-end main-start main-end ft-start ft-end you can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same column line. to position overlay using these implicit named lines is the same as positioning an item using lines that we have named. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; ...
...by selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily. multiple lines with the same name with repeat() if you want to give all of the lines in your grid a...
...ning the space to the 1fr column tracks. ...

Stacking context example 2 - CSS: Cascading Style Sheets
eate a stacking context are collapsed on their parent. ...
...//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> ...
...0000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /...
... <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /> position: absolute;<br /> z-index: 10; </div> </div> </body> </html> ...

CSS Properties Reference - CSS: Cascading Style Sheets
ncomplete. for more css properties see the main css reference and mozilla css extensions. the reference articles also include examples on how to use all the properties. ...
...s properties see the main css reference and mozilla css extensions. the reference articles also include examples on how to use all the properties. ...
... float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop overflow overflow padding padding padding-bottom paddingbottom padding-left paddingleft padding-right padd...
...n-left marginleft margin-right marginright margin-top margintop overflow overflow padding padding padding-bottom paddingbottom padding-left paddingleft padding-right paddingright padding-top paddingtop page-break-after pagebreakafter page-break-before pagebreakbefore position position stroke-dasharray strokedasharray stroke-dashoffset strokedashoffset stroke-width strokewidth text-align textalign text-decoration textdecoration text-indent textindent text-transform texttransform top top vertical-align verticalalign visibility visibility wi...

Basic Shapes - CSS: Cascading Style Sheets
e reference box. for circles, this is the closest side in any dimension. for ellipses, this is the closest side in the radius dimension. the keyword farthest-side uses the length from the center of the shape to the farthest side of the reference box. for circles, this is the farthest side in any dimension. for ellipses, this is the farthest side in the radius dimension. the second argument is a position. if omitted this will be set to center. however you can use any valid position here to indicate the position of the centre of the circle. our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value. in the below example i have created a circle on an item with a width o...
...entage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the position value to 30%. in the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset(). as an additional example, if you use the keywords top left for position, you can make a quarter circle shape in the top left corner of the page. the example be...
...osition, you can make a quarter circle shape in the top left corner of the page. the example below uses generated content to create a quarter circle shape for text to flow around. the shape will be clipped by the margin box when describing reference boxes i explained that the margin-box will clip the shape. you can see this by moving the centre of our circle towards the content by setting the position to 60%. the centre of the circle is now nearer the content and the circle extends past the margin-box. this means that the extension becomes clipped and squared off. img { float: left; shape-outside: circle(50% at 60%); } ellipse() an ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y in that ...
...ow nearer the content and the circle extends past the margin-box. this means that the extension becomes clipped and squared off. img { float: left; shape-outside: circle(50% at 60%); } ellipse() an ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y in that order. these may then be followed by position values as with circle() to move the centre of the ellipse around. in the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. this means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. you can change these values to see how the ellipse changes. the keyword values of closest...

border-image-slice - CSS: Cascading Style Sheets
when ...
... */ border-image-slice: 10% fill 7 12; /* global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. ...
...nitial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right. ...
...ch image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right. when three positions are specified, the first value creates a slice measured from the top, the second creates slices measured from the left and right, the third creates a slice measured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values ...

mask-border-slice - CSS: Cascading Style Sheets
when ...
...yword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. ...
... initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right. ...
...ch image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right. when three positions are specified, the first value creates a slice measured from the top, the second creates slices measured from the left and right, the third creates a slice measured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values ...

offset-anchor - CSS: Cascading Style Sheets
anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position. <position> a <position> defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). formal definition initial valueautoappli...
... for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
...ition> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
...round-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...

offset - CSS: Cascading Style Sheets
the offset css shorthand property sets all the properties required for animating an element along a defined path. note: early versions of the spec called this property motion. ...
... the offset css shorthand property sets all the properties required for animating an element along a defined path. note: early versions of the spec called this property motion. ...
... with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the ab...
...idthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> | <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]? examples animating an element along a path html ...

perspective - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied. ...
...ch 3d element with z>0 becomes larger; each 3d-element with z<0 becomes smaller. the strength of the effect is determined by the value of this property. the parts of the 3d elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective css property — are not drawn. the vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property. using this property with a value different than 0 and none creates a new stacking context. also, in that case, the object will act as a containing block for position: fixed elements that it contains. formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valuethe absolute length or noneanimation typea lengthc...
...how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...x; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .ri...

place-self - CSS: Cascading Style Sheets
ctive 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. ...
...ght normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-items value. normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or...
...reased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis. formal definition initial valueas each of the properties of the shorthand:align-self: autojustify-self: autoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocomputed valueas each of the properties of the shorthand:align-self: auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. its behavior depends on the layout model, as described for justify-self. otherwise the specified va...
...stify-items and align-items values of stretch — the defaults — which causes the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of place-self, to show how these override the default placements. these values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions. html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px...

scroll-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis. /* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap point. <p...
...ap coordinates from the start edge of the element’s border box. for each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate. ...
...e of the element’s border box. for each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate. ...
......

will-change - CSS: Cascading Style Sheets
ly changed. these kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required. important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...
... visual appearance of elements, when used with property values, that create a stacking context (e.g. will-change: opacity), as the stacking context is created up front. syntax values auto this keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does. the <animateable-feature> can be one of the following values: scroll-position indicates that the author expects to animate or change the scroll position of the element in the near future. contents indicates that the author expects to animate or change something about the element’s contents in the near future. <custom-ident> indicates that the author expects to animate or change the property with the given name on the element in the near future. if the property given...
... about the element’s contents in the near future. <custom-ident> indicates that the author expects to animate or change the property with the given name on the element in the near future. if the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. it cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents. the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint. chrome currently takes two actions, given particular css property idents: establish a new compositing layer or a new stacking context. via stylesheet it may be appropriate to include will-change in your style sheet for an application that does page flips on key...
...se caution with the will-change property directly in stylesheets. it may cause the browser to keep the optimization in memory for much longer than it is needed. .slide { will-change: transform; } formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <animateable-feature>#where <animateable-feature> = scroll-position | contents | <custom-ident> examples via script this is an example showing how to apply the will-change property through scripting, which is probably what you should be doing in most cases. var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintb...

<input type="tel"> - HTML: Hypertext Markup Language
use this html: <form> <div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict enter...
...e same css as before, but our html is changed to look like this: <form> <div> <label for="telno">enter a telephone number (in the form xxx-xxx-xxxx): </label> <input id="telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx i...
...rk, and there would still be no foolproof guarantee that the users would enter their numbers correctly. it makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. but this choice is yours to make. ...
...orth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. but this choice is yours to make. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } specifications specification status comment html living standardthe definition of '<input type="tel">' in that specification. living standard initial definition html 5.1the defin...

<video>: The Video Embed element - HTML: Hypertext Markup Language
t, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. if the media has not started playing yet, the time offset at which it will begin is returned. setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. if the media is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if th...
...r own custom controls using javascript and the htmlmediaelement api. see creating a cross-browser video player for more details. to allow precise control over your video (and audio) content, htmlmediaelements fire many different events. in addition to providing controllability, these events let you monitor the progress of both download and playback of the media, as well as the playback state and position. you can use the object-position property to adjust the positioning of the video within the element's frame, and the object-fit property to control how the video's size is adjusted to fit within the frame. to show subtitles/captions along with your video, you can use some javascript along with the <track> element and the webvtt format. see adding captions and subtitles to html5 video for more i...
...sing html <video> is the video and audio content beginner's tutorial. styling with css the <video> element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded. there are no special considerations for styling <video>; a common strategy is to give it a display value of block to make it easier to position, size, etc., and then provide styling and layout information as required. video player styling basics provides some useful styling techniques. detecting track addition and removal you can detect when tracks are added to and removed from a <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the <video> element itself. instead, they're sent to ...
...ify music and sound effects that communicate important information. this includes emotion and tone: 14 00:03:14 --> 00:03:18 [dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] what's that off in the distance? 16 00:03:22 --> 00:03:24 it's… it's a… 16 00:03:25 --> 00:03:32 [loud thumping] [dishes clattering] captions should not obstruct the main subject of the video. they can be positioned using the align vtt cue setting. mdn adding captions and subtitles to html5 video web video text tracks format (webvtt) webaim: captions, transcripts, and audio descriptions mdn understanding wcag, guideline 1.2 explanations understanding success criterion 1.2.1 | w3c understanding wcag 2.0 understanding success criterion 1.2.2 | w3c understanding wcag 2.0 technical summary ...

Array - JavaScript
but will set or access a variable associated with that array's object property collection. the array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties. ...
... beginning of an array let first = fruits.shift() // remove apple from the front // ["banana"] add an item to the beginning of an array let newlength = fruits.unshift('strawberry') // add to the front // ["strawberry", "banana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vegetables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = vegetables.splice(pos, n) // this is how to remove items, n defines the number of items ...
...) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vegetables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = vegetables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array. console.log(vegetables) // ["cabbage", "carrot"] (the original array is changed) console.log(removeditems) // ["turnip", "radish"] copy an array let shallowcopy = fruits.slice() // this is how to make a copy // ["strawberry", "mango"] accessing array elements javascript arrays are zero-indexed. the first element of an array is at i...
... to msgarray[0] and msgarray[99], changing the length of the array to 100. let msgarray = [] msgarray[0] = 'hello' msgarray[99] = 'world' if (msgarray.length === 100) { console.log('the length is 100.') } creating a two-dimensional array the following creates a chessboard as a two-dimensional array of strings. the first move is made by copying the 'p' in board[6][4] to board[4][4]. the old position at [6][4] is made blank. let board = [ ['r','n','b','q','k','b','n','r'], ['p','p','p','p','p','p','p','p'], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], ['p','p','p','p','p','p','p','p'], ['r','n','b','q','k','b','n','r'] ] console.log(board.join('\n') + '\n\n') // move king's pawn f...

MathML attribute reference - MathML
in typography. maxsize <mo> the maximum size of the operator. unimplemented minlabelspacing <mtable> a length value specifing the minimum space between a label and the adjacent cell in the row. minsize <mo> the minimum size of the operator. movablelimits <mo> specifies whether attached under- and overscripts move to sub- and superscript positions. notation <menclose> a list of notations, separated by white space, to apply to the child elements. numalign <mfrac> the alignment of the numerator over the fraction. open <mfenced> a string for the opening delimiter. unimplemented overflow <math> if an expression is too long to fit in the allowed width, this attribute sets the prefer...
... a list of notations, separated by white space, to apply to the child elements. numalign <mfrac> the alignment of the numerator over the fraction. open <mfenced> a string for the opening delimiter. unimplemented overflow <math> if an expression is too long to fit in the allowed width, this attribute sets the preferred handling. unimplemented position <msgroup>, <msrow>, <mscarries>, <msline> rowalign <mtable>, <mtd>, <mtr> specifies the vertical alignment of table cells. rowlines <mtable> specifies table row borders. rowspacing <mtable> specifies the space between table rows. rowspan <mtd> a non-negative integer value that indicates on how many rows does the cell extend. ...
...ment which is addressed by the action. separator <mo> there is no visual effect for this attribute, but it specifies whether the operator is a separator (such as commas). separators <mfenced> a sequence of zero or more characters to be used for different separators. unimplemented shift <msgroup> unimplemented side <mtable> specifies the position where <mlabeledtr> label elements should be placed. unimplemented src <mglyph> the location of the image resource. unimplemented stackalign <mstack> stretchy <mo> specifies whether the operator stretches to the size of the adjacent element. subscriptshift <mmultiscripts>, <msub>, <msubsup> the minimum space by which to shift the subsc...
...ssion. supscriptshift <mmultiscripts>, <msup>, <msubsup> the minimum space by which to shift the superscript above the baseline of the expression. symmetric <mo> if stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (centered fraction line). voffset <mpadded> sets the vertical position of the child content. width <mglyph>, <mpadded>, <mspace>, <mtable> specifies the desired width. see lengths for possible values. xlink:href all can be used to set a hyperlink to a specfied uri. however, authors are encouraged to use the href attribute instead. xmlns <math> specifies the uri for the mathml namespace (http://www.w3.org/1998/math/mathm...

The "codecs" parameter in common media types - Web media technologies
, the video data is entirely in the y plane and is therefore monochromatic. see yuv in digital video concepts for details on how the yuv color system works. the default value is 0 (not monochrome). ccc ccc indicates the chroma subsampling as three digits. the first digit is subsampling_x, the second is subsampling_y. if both of those are 1, the third is the value of chroma_sample_position; otherwise, the third digit is always 0. this, combined with the m component, can be used to construct the chroma subsampling format: determining the chroma subsampling format subsampling_x subsampling_y monochrome flag chroma subsampling format 0 0 0 yuv 4:4:4 1 0...
... the default value is 110 (4:2:0 chroma subsampling). cp the two-digit color_primar...
... the default value is 110 (4:2:0 chroma subsampling). cp the two-digit color_primaries value indicates the color system used by the...
... 1 0 0 yuv 4:2:2 1 1 0 yuv 4:2:0 1 1 1 yuv 4:0:0 (monochrome) the third digit in ccc indicates the chroma sample position, with a value of 0 indicating that the position is unknown and must be separately provided during decoding; a value of 1 indicating that the sample position is horizontally colocated with the (0, 0) luma sample; and a value of 2 indicating that the sample position is colocated with (0, 0) luma. the default value is 110 (4:2:0 chroma subsampling). cp the two-digit color_primaries value indicates the color system used by the media. for example, bt.2020/bt.2100 color, as used for hdr video, is 09. the information for this—and for ...

stroke-linecap - SVG: Scalable Vector Graphics
on a zero length subpath, the path will not be rendered...
...at all. ...
...nt. ...
...if you'd like to contribute to the data, please check out...

viewBox - SVG: Scalable Vector Graphics
the value of the viewbox attribute is a list of four numbers: min-x, min-y, width and height. the numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated svg element (not the browser viewport). ...
... corner of the viewport. --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> the exact effect of this attribute is influenced by the preserveaspectratio attribute. note: values for width or height lower or equal to 0 disable rendering of the element. five elements are using this attribute: <marker>, <pattern>, <svg>, <symbol>, and <view>. marker for <marker>, viewbox defines the position and dimension for the content of the <marker> element. value <number>?, <number>?, <number>?, <number> default value none animatable yes pattern for <pattern>, viewbox defines the position and dimension for the content of the pattern tile. value <number>?, <number>?, <number>?, <number> default value none animatable ...
...lement. value <number>?, <number>?, <number>?, <number> default value none animatable yes pattern for <pattern>, viewbox defines the position and dimension for the content of the pattern tile. value <number>?, <number>?, <number>?, <number> default value none animatable yes svg for <svg>, viewbox defines the position and dimension for the content of the <svg> element. value <number>?, <number>?, <number>?, <number> default value none animatable yes symbol for <symbol>, viewbox defines the position and dimension for the content of the <symbol> element. value <number>?, <number>?, <number>?, <number> default value none animatable ...
...nt. value <number>?, <number>?, <number>?, <number> default value none animatable yes symbol for <symbol>, viewbox defines the position and dimension for the content of the <symbol> element. value <number>?, <number>?, <number>?, <number> default value none animatable yes view for <view>, viewbox defines the position and dimension for the content of the <view> element. value <number>?, <number>?, <number>?, <number> default value none animatable yes specification specification status comment scalable vector graphics (svg) 2the definition of 'viewbox' in that specification. candidate recommendation scalable vector graphics...

Basic shapes - SVG: Scalable Vector Graphics
« previousnext » there are several basic shapes used for most svg drawing. the purpose of these shapes is fairly obvious from their names. some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. however, since they're used in most svg documents, it's necessary to give them some sort of introduction. basic shapes to insert a shape, you create an element in the document. different elements correspond to different shapes and take different parameters to describe the size and position of those shapes. some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and t...
...0 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial. rectangle the <rect> element draws a rectangle on the screen. there are 6 basic attributes that control the position and shape of the rectangles on screen. the one on the right has its rx and ry parameters set, giving it rounded corners. if they're not set, they default to 0. <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> x the x position of the top left corner of the rectangle. y the y position of the top left corner of the rectangle. width th...
...he rectangle. width the width of the rectangle height the height of the rectangle rx the x radius of the corners of the rectangle ry the y radius of the corners of the rectangle circle the <circle> element draws a circle on the screen. it takes 3 basic parameters to determine the shape and size of the element. <circle cx="25" cy="75" r="20"/> r the radius of the circle. cx the x position of the center of the circle. cy the y position of the center of the circle. ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately. <ellipse cx="75" cy="75" rx="20" ry="5"/> rx the x radius of the ellipse. ry the y radius of the ellipse. c...
...enter of the circle. cy the y position of the center of the circle. ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately. <ellipse cx="75" cy="75" rx="20" ry="5"/> rx the x radius of the ellipse. ry the y radius of the ellipse. cx the x position of the center of the ellipse. cy the y position of the center of the ellipse. line the <line> element takes the positions of two points as parameters and draws a straight line between them. <line x1="10" x2="50" y1="110" y2="150"/> x1 the x position of point 1. y1 the y position of point 1. x2 the x position of point 2. y2 the y position of point 2. polyline a <polyline> is a g...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ervers.ldapint"); lockpref("ldap_2.prefs_migrated", true); lockpref("ldap_2.servers.history.filename", "history.mab"); lockpref("ldap_2.servers.history.replication.lastchangenumber", 0); lockpref("ldap_2.servers.ldapint.auth.savepassword", true); lockpref("ldap_2.servers.ldapint.description", "ldap-int"); lockpref("ldap_2.servers.ldapint.filename", "abook-1.mab"); lockpref("ldap_2.servers.ldapint.position", 3); lockpref("ldap_2.servers.ldapint.uri", "ldap://ldap1.int-evry.fr:389/ou=people,dc=int-evry,dc=fr??sub"); lockpref("ldap_2.servers.pab.filename", "abook.mab"); lockpref("ldap_2.servers.pab.replication.lastchangenumber", 0); //news config lockpref("mail.server.server3.hostname", "news.int-evry.fr"); lockpref("mail.server.server3.max_cached_connections", 2); lockpref("mail.server.server3.name...
...ervers.ldapint"); lockpref("ldap_2.prefs_migrated", true); lockpref("ldap_2.servers.history.filename", "history.mab"); lockpref("ldap_2.servers.history.replication.lastchangenumber", 0); lockpref("ldap_2.servers.ldapint.auth.savepassword", true); lockpref("ldap_2.servers.ldapint.description", "ldap-int"); lockpref("ldap_2.servers.ldapint.filename", "abook-1.mab"); lockpref("ldap_2.servers.ldapint.position", 3); lockpref("ldap_2.servers.ldapint.uri", "ldap://ldap1.int-evry.fr:389/ou=people,dc=int-evry,dc=fr??sub"); lockpref("ldap_2.servers.pab.filename", "abook.mab"); lockpref("ldap_2.servers.pab.replication.lastchangenumber", 0); //news config lockpref("mail.server.server3.hostname", "news.int-evry.fr"); lockpref("mail.server.server3.max_cached_connections", 2); lockpref("mail.server.server3.name...
... "author" : " jeha...

Layout System Overview - Archive of obsolete content
t kind of frame to create (block, inline, table, etc.). the style context is associated with the frame via a reference because it is needed for many other computations during the formatting of the frames. once a frame is created for a content element, it must be formatted. we refer to this as 'laying out' the frame, or as 'reflowing' the frame. ...
...the in-flow case is considered the 'normal' case, and corresponds to normal html formatting. ...
... geometry of an element is not influenced by the geometry of the elements that precede it, or in any case, is influenced more locally. the in-flow case is considered the 'normal' case, and corresponds to normal html formatting. the later case, called 'out of flow' puts the document author in control of the layout, and the author must specify the locations and sizes of all of the elements that are positioned. there is, of course, some complexity involved with managing these two models simultaneously... so far the general flow of layout looks like this: obtain a document's content model utilize the style system to resolve the style of each element in the content model construct the frames that correspond to the content model, according to the resolved style data. perform the initial layout, or init...

Introducing the Audio API extension - Archive of obsolete content
var currentsampleoffset = audiooutput.mozcurrentsampleoffset(); audio data written using the mozwriteaudio() method needs to be written at a regular interval in equal portions, in order to keep a little ahead of the current sample offset (the ...
... < samples.length ; i++) { samples[i] = math.sin( i / 20 ); } output.mozwriteaudio(samples); } </script> </head> <body> <p>this demo plays a one second tone when you click the button below.</p> <button onclick="playtone();">play</button> </body> </html> the mozcurrentsampleoffset() method gives the audible position of the audio stream, meaning the position of the last heard sample. // get current audible position of the underlying audio stream, measured in samples. var currentsampleoffset = audiooutput.mozcurrentsampleoffset(); audio data written using the mozwriteaudio() method needs to be written at a regular interval in equal portions, in order to keep a little ahead of the current sample offset (the sample offset that is currently being play...
...all portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. var prebuffersize = samplerate * 0.020; // initial buffer is 20 ms var autolatency = true, started = new date().valueof(); ... // auto latency detection if (autolatency) { prebuffersize = math.floor(samplerate * (new date().valueof() - started) / 1000); if (audio.mozcurrentsampleoffset()) { // play position moved? autolatency = false; } processing an audio stream since the mozaudioavailable event and the mozwriteaudio() method both use float32array values, it is possible to take the output of one audio stream and pass it directly (or process first and then pass) to a second. the first audio stream needs to be muted so that only the second audio element is heard. <audio id="a1" src="so...

textbox (Toolkit autocomplete) - Archive of obsolete content
ets and sets the value of the autocompletesearchparam attribute. selectionend type: integer get or set the end of the selected portion of the field's text. use in conjuction with the selectionstart property. the value specifies the index of the character after the selection. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. showcommentcolumn type: boolean gets and sets the value of the showcommentcolumn (or showcommentcolumn) attribute. showimagecolu...
...value autocomplete to have an autocomplete textbox. 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. ...
...urn value selects all the text in the textbox. setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection. set both arguments to the same value to move the cursor to the corresponding position without selecting text. related interfaces nsiaccessibleprovider, nsiautocompleteinput, nsidomxulmenulistelement articles how to implement custom autocomplete search component ...

Textbox (XPFE autocomplete) - Archive of obsolete content
f session names gets the value of the searchsessions attribute. selectionend type: integer get or set the end of the selected portion of the field's text. use in conjuction with the selectionstart property. the value specifies the index of the character after the selection. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. sessioncount type: integer holds the number of sessions. showcommentcolumn type: boolean gets and sets the value of the show...
... gets and sets the value of the useraction 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. ...
...urn value selects all the text in the textbox. setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection. set both arguments to the same value to move the cursor to the corresponding position without selecting text. syncsessions( autocompleteelement ) obsolete since gecko 26 return type: void copy the sessions from another autocomplete element. related interfaces nsiaccessibleprovider, nsidomxulmenulistelement ...

Manipulating Lists - Archive of obsolete content
s used only as an extra optional value associated with an item which you might wish to use in a script. similarly, there is also an insertitemat() and a removeitemat() function which inserts a new item and removes an existing item respectively. the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitemat(3); the insertitemat() function takes an additional argument, the position to insert the new item. the new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position 4. remember that the first item is 0. the removeitemat() function will remove the item at a specific index. these three methods are also available for several other xul elements and work in the same manner.
...r modifying the selected items. for instance, the additemtoselection() function adds a new item to the set of selected items, without clearing the existing selection. the removeitemfromselection() function removes a single item from the selection. list scrolling if there are more rows in the listbox than can be displayed, a scroll bar will appear to allow the user to scroll the list. the scroll position may be adjusted using a couple of listbox methods. the scrolltoindex() method scrolls to a given row. this listbox will scroll such that the row will be the top row visible, unless the row is near the end of the list of items. the ensureindexisvisible() method is similar in that it also scrolls to show a row, but this method does not scroll if the item is already visible. thus, the former functi...
...ethod is similar in that it also scrolls to show a row, but this method does not scroll if the item is already visible. thus, the former function is used to scroll to a specific row while the latter is used just to make sure that a row is visible. there is also an ensureindexisvisible() that takes an item as an argument instead of an index. ...

More Button Features - Archive of obsolete content
will look at some additional features of buttons. adding an image you can add an image to a button by specifying a url in the image attribute. the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button. the button below will have both a label and the image 'happy.png'. the image will appear to the left of the label. you can change this position by using two other attributes. this will be explained in a moment. example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property on the button. this is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the xul file. an example is show...
...file. an example is shown below. example 2 : source view <button id="find-button" label="find" style="list-style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button. the style attribute functions similar to its html counterpart. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entirely, the im...
...he appearance will be different. the image to the right shows the difference. the left one is a 'menu' and the second one is a 'menu-button'. it has an arrow indicating the presence of a menu. for the 'menu', the user may click anywhere on the button to show the menu. for the 'menu-button', the user must click the arrow to show the menu. next, we will learn more details about how xul elements are positioned in a window. « previousnext » ...

More Event Handlers - Archive of obsolete content
use the dblclick event instead. the click event will be fired once for the first click, again for the second click, and again for the third click, but the dblclick event will only be fired once for a double click. the button and detail properties only apply to the mouse button related events, not mouse movement events. for the mousemove event, for example, both properties will be set to 0. mouse position event properties however, all mouse events will be supplied with properties that hold the coordinates of the mouse position where the event occurred. there are two sets of coordinates. the first is the screenx and screeny properties and are relative to the top left corner of the screen. the second set, clientx and clienty, are relative to the top left corner of the document. here is an example wh...
...use is usually moved some distance past the border by the time the next event fires. obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved. element relative coordinates you will often want to get the coordinates of an event relative to the element where the event occurred rather than the entire window. you can do this by subtracting the element's position from the event position, as in the following code. var element = event.target; var elementx = event.clientx - element.boxobject.x; var elementy = event.clienty - element.boxobject.y; xul elements have a box object that can be retrieved using the boxobject property. we'll learn more about the box object in a later section, but it holds information pertaining to how the element is displayed, inclu...
...osition, as in the following code. var element = event.target; var elementx = event.clientx - element.boxobject.x; var elementy = event.clienty - element.boxobject.y; xul elements have a box object that can be retrieved using the boxobject property. we'll learn more about the box object in a later section, but it holds information pertaining to how the element is displayed, including the x and y position of the element. in this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element. load events the load event is sent to the document (the window tag) once the xul file has finished loading and just before the content is displayed. this event is commonly used to initialize fields and perform other tasks that need to be done before ...

arrowscrollbox - Archive of obsolete content
if false, the mouse must be hovered over the arrows to scroll automatically. disabled type...
... observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled type: boolean gets and sets the value of the disabled attribute. scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box. scrollincrement type: integer a read only property that lets you retrieve the number of pixels by which scrolling will occur when the arrowscrollbox is clicked. smoothscroll type: boolean can be set to enable or disable smooth scrolling for the corresponding arrowscrollbox. if not set explicitly, it will fall back to the smoothscroll attribute and ...
... many lines. scrollbypixels( pixels ) return type: no return value scrolls the contents of the arrowscrollbox by a certain number of pixels. use a positive value as the pixels argument to scroll forward that many pixels, or a negative value to scroll backward that many pixels. ...

columns - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] defines the columns of a grid. child column elements define the individual columns 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. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, max...
...n example. ...
..., 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 addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefault...

dialog - Archive of obsolete content
esskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <captio...
...ormally 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. ...
...oses it, similar to pressing the ok button. canceldialog() return type: no return value cancels the dialog and closes it, similar to pressing the cancel button. centerwindowonscreen() return type: no return value centers the dialog on the screen. getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type. movetoalertposition() return type: no return value moves and resizes the dialog to a position and size suitable for an alert box. related elements dialogheader ...

listbox - Archive of obsolete content
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. ...
...if the item is already visible, no scrolling occurs. getindexoffirstvisiblerow() return type: integer returns the index of the first displayed row. note that this is not the same as the first row -- if the displayed items have been scrolled down, this function will retrieve the index of the first row that the user can see. getindexofitem( item ) return type: integer returns the zero-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. getnumberofvisiblerows() return type: integer returns the number of rows that are currently visible to the user. getrowcount() return type: integer returns the total number of rows...
...retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected item: getselecteditem(0). insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. invertselection() return type: no return value reverses the selected state of all items. selected items become deselected, and deselected items become selected. movebyoffset( offset , isselecting, isselectingrange) return type: no return value if offset is positive, adjusts the focused item forward by that many items. if o...

menulist - Archive of obsolete content
o the value field. this is rendered as a textbox with a drop-down arrow beside it. the user may enter text into the textbox or select one of the choices by clicking from the drop-down. focused type: boolean this attribute is true if the element is focused. image type: uri the uri of the image to appear on the element. if this attribute is empty 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 a...
... 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. ...
...abel, value, description ) return type: element creates a new menuitem element and adds it to the end of the menulist. you may optionally set a value and description. the function returns the new item. contains( item ) return type: boolean returns true if the menulist contains the specified menuitem as one of its items. getindexofitem( item ) return type: integer returns the zero-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element i...

rows - Archive of obsolete content
ws element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a 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. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxw...
...n example. ...
..., 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 addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefault...

stack - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that renders its children on top of each other. the first element is placed on the bottom and each successive child is placed above the previous. all elements are displayed at once. child elements may also be placed at absolute positions within the stack. the top, right, bottom, and left attributes on a child of the stack specify the position of that element. the bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack. note that bottom and right attributes, unlike rect, are relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the given a...
... </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , ma...
..., 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 addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefault...

stringbundle - Archive of obsolete content
localized strings. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1 type: nsilocale returns the xpcom object which holds information about the user's locale. this is an object which implements nsilocale. s...
...propertyelement objects. methods getformattedstring( key, strarray ) return type: string looks up the format string for the given key name in the string bundle and returns a formatted copy where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array. alternatively, numbered indices of the format %n$s (e.g. ...
...$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. ...

textbox - Archive of obsolete content
: boolean gets and sets the value of the searchbutton attribute. selectionend type: integer get or set the end of the selected portion of the field's text. use in conjuction with the selectionstart property. the value specifies the index of the character after the selection. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. size type: integer gets and sets the value of the size attribute. spinbuttons type: element the read-only prop...
...turn value selects all the text in the textbox. setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection. ...
... sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection. set both arguments to the same value to move the cursor to the corresponding position without selecting text. ...

Table Reflow Internals - Archive of obsolete content
er posts a dirty reflow command with itself as the target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts when the pres shell processes its queue of reflow commands. ...
..., browser change font (ctrl+/-), a preference changes, etc. review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts when the pres shell processes its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various computed values, resolved style structs possible request for preferred size and more. review of reflow the reflow metrics contains: m...
...cept it can reoccur. incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command types are: dirty - something changed inside a target (e.g. it gains, loses children) style changed - a target changed stylisticly (recall, size is a style property) content changed - a target's content changed (e.g. ...

Browser Detection and Cross Browser Support - Archive of obsolete content
ve 7 and opera width = windowref.innerwidth; } example 2 - object based feature detection cross browser support this example also illustrates the use of feature detection and shows the complications that can arise from the non standard implementations in other browsers. ...
...lm.style.left = x + 'px'; elm.style.top = y + 'px'; } } else if (typeof(elm.left) == 'number') { // navigator 4 elm.left = x; elm.top = y; } } standards only consider how simple this function is if you code it according to the w3c standards. function moveelement(id, x, y) { // move the element with id to x,y // where x,y are the horizontal // and vertical position in pixels var elm = document.getelementbyid(id); if (elm) { elm.style.left = x + 'px'; elm.style.top = y + 'px'; } } ask yourself this: "is supporting non-standard browsers worth the development and maintenance costs?" example 3 - detecting specific gecko branches // return the rv value of a gecko user agent // as a floating point number. // returns -1 for non-gecko browser...
...ator.vendor == 'cs 2000 7.0') { found = true; } } } } example 4 - the international herald-tribune this site illustrates many of the techniques described in this article. they use downlevel pages for less capable browsers combined with object based feature detection to produce a compelling and interesting site. examples from devedge * xbdom * xbmarquee * xbpositionableelement * xbanimatedelement conclusion as we have seen in this article, the browser detection story is still quite complicated due to differences between the modern browsers such as gecko/internet explorer 6 and the older or non-standard browsers such as netscape navigator 4. you may say to yourself "if only all browsers were as good as gecko and internet explorer 6, then my job would be...

-ms-filter - Archive of obsolete content
=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function. ...
...e. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function. ...
... <div id="filterfrom" style="position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfro...

azimuth - Archive of obsolete content
in combination with elevation, the azimuth css property enables different audio sources to be positioned spatially for aural presentation. this is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. ...
...tage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360deg to 360deg. the value 0deg means directly ahead in the center of the sound stage (this is the default value). 90deg is to the right, 180deg is behind, and 270deg or -90deg is to the left. positional keywords left-side: same as 270deg. left-side behind: same as 270deg. far-left: same as 300deg. far-left behind: same as 240deg. left: same ...
.... center-left behind: same as 200deg. center: same as 0deg. center behind: same as 180deg. center-right: same as 20deg. center-right behind: same as 160deg. right: same as 40deg. right behind: same as 140deg. far-right: same as 60deg. far-right behind: same as 120deg. right-side: same as 90deg. right-side behind: same as 90deg. behind: same as 180deg. also used as a modifier for other positional keyword values, as above. leftwards: moves the sound counter-clockwise by 20 degrees, relative to the current angle. rightwards: moves the sound clockwise by 20 degrees, relative to the current angle. examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ speci...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
fish created three problems: the double border was completely covered up by the image. the text of the h3 was basically touching the right side of the floated image... ...or it would have been, except in some browsers the heading was drawn over the floated image, in contradiction to the css specification. ...
...age back on top of the heading turned out to be a matter of relatively positioning the floated image, and then giving it a z-index value. in order to create visual appeal, i decided to offset the top let corners of the fish image and fish name. with just a few simple margin and padding changes, this was possible. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels. at the same time, the heading'...
... added a half-em margins on card paragraphs, and then changed the left margin to be 160px, which makes sure the text in the paragraphs won't wrap under the floated images. this is desirable for the cases where only one word would wrap under an image. it's better to keep the text as if it's in a column of its own. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila! the cards are done. conclusion redesigning a classic is something li...

Building up a basic demo with PlayCanvas editor - Game development
now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene. so, at this point we've created a blue box. click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale. try applying the rotation values x: 10 and y: 20. now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab. this looks great! let's add more shapes to the scene to make it look more interesting. adding more shapes to make way for more shapes, move the box to the left to make some...
...0 and y: 20. now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab. this looks great! let's add more shapes to the scene to make it look more interesting. adding more shapes to make way for more shapes, move the box to the left to make some room for the next shape. you can do this by giving it an x position value of -2. adding other shapes involves a very similar process to adding the box. click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene. now follow the same steps as we did bef...
...s a nice scaling effect as a result. remember to add the cylinderanimation.js file to the cylinder object to apply the given animations. the cone time to play with the last object — the cone. create a coneanimation.js file and double click it to open it in the editor. next, add the following line to the initialize() function: this.timer = 0; to move the cone up and down we will use the setposition() method — add the code below to the update() function: this.timer += dt; this.entity.setposition(2, math.sin(this.timer*2), 0); the position of the cone will be animated on each frame by being passed the math.sin() value of the timer at each point in time — we have doubled the this.timer value to make it move higher. add the coneanimation.js script to the cone object, as before. test the...

Mobile touch controls - Game development
e touch events reference article provides more examples and information. pure javascript demo let's implement the mobile support in a little demo available on github, so we can move the player's ship by touching the screen on a mobile device. we will use two events: touchstart and,touchmove both handled by one function. ...
...nvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + playery; e.preventdefault(); } } if the touch occurs (touches object is not empty), then we will have all the info we need in that object. we can get the first touch (e.touches[0], our example is not multitouch-enabled), extract the pagex and pagey variables and set the player's ship position on the screen by subtracting the canvas offset (distance from the canvas and the edge of the screen) and half the player's width and height. to see if it's working correctly we can output the x and y positions using the output element. the preventdefault() function is needed to prevent the browser from moving — without it you'd have the default behaviour, and the canvas would be dragged arou...
...bled = true; player.input.enabledrag(); player.events.ondragstart.add(ondragstart, this); player.events.ondragstop.add(ondragstop, this); function ondragstart(sprite, pointer) { // do something when dragging } we can pull the ship around and do something in the meantime, and react when the drag is stopped. hauling in phaser, if enabled, will work out of the box — you don't have to set the position of the sprite yourself manually, so you could leave the ondragstart() function empty, or place some debug output to see if it's working correctly. the pointer element contains the x and y variables storing the current position of the dragged element. dedicated plugins you could go even further and use dedicated plugins like virtual joystick — this is a paid, official phaser plugin, but you ca...

Square tilemaps implementation: Scrolling maps - Game development
not done so already. the camera the camera is an object that holds information about which section of the game world or level is currently being shown. ...
...y being shown. cameras can either be free-form, controlled by the player (such as in strategy games) or follow an object (such as the main character in platform games.) regardless of the type of camera, we would always need information regarding its current position, viewport size, etc. in the demo provided along with this article, these are the parameters the camera has: x and y: the current position of the camera. in this implementation, we are assuming that (x,y) points to the top left corner of visible portion of the map. width and height: the size of the camera's viewport. maxx and maxy: the limit for the camera's position — the lower limit will nearly always be (0,0), and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport. renderi...
...ol * map.tsize; var offsety = -this.camera.y + startrow * map.tsize; with these values in place, the loop that renders the map is quite similar to the one used for rendering static tilemaps. the main difference is that we are adding the offsetx and offsety values to the target x and y coordinates, and these values are rounded, to avoid artifacts that would result from the camera pointing at positions with floating point numbers. for (var c = startcol; c <= endcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + offsety; if (tile !== 0) { // 0 => empty tile this.ctx.drawimage( this.tileat...

Tiles and tilemaps overview - Game development
ucture or object. these data objects (map object example) should include: tile size: the size of each tile in pixels across / pixels down. image atlas: the image atlas that will be used (one or many.) map dimensions: the dimensions of the map, either in tiles across / tiles down, or pixels across / pixels down. visual grid: includes indices showing what type of tile should be placed on each position in the grid. logic grid: this can be a collision grid, a path-finding grid, etc., depending on the type of game. note: for the visual grid, a special value (usually a negative number, 0 or null) is needed to represent empty tiles. square tiles square-based tilemaps are the most simple implementation. a more generic case would be rectangular-based tilemaps — instead of square — but they...
...* map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. scrolling tilemaps scrolling tilemaps only show a small portion of the world at a time. they can follow a character — like in platformers or rpgs — or allow the player to control the camera — like in strategy or simulation games. ...
...lementation in square tilemaps implementation: static maps. scrolling tilemaps scrolling tilemaps only show a small portion of the world at a time. they can follow a character — like in platformers or rpgs — or allow the player to control the camera — like in strategy or simulation games. positioning and camera in all scrolling games, we need a translation between world coordinates (the position where sprites or other elements are located in the level or game world) and screen coordinates (the actual position where those elements are rendered on the screen). the world coordinates can be expressed in terms of tile position (row and column of the map) or in pixels across the map, depending on the game. to be able to transform world coordinates into screen coordinates, we need the coordinat...

Example 2 - Learn web development
<option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-h...
...,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; paddi...
... <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } result for no js ...

Advanced text formatting - Learn web development
<dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textare...
...king.com">the need to eliminate negative self talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>affirmations for positive thinking</cite></a>.)</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textare...
...ution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p><abbr title="national aeronautics and space administration">nasa</abbr> sure does some exciting work.</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textare...

Getting started with HTML - Learn web development
solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...ue = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...">rush</a>.\ my favourite rush album is currently <a href="http://www.deezer.com/album/942295">moving pictures</a>.</p>\ <img src="https://udn.realityripple.com/samples/4b/9bb5edda5d.jpg">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...

Images in HTML - Learn web development
\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.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...f 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.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.select...
...embed images into webpages (and javascript, but that's another story entirely). the css background-image property, and the other background-* properties, are used to control background image placement. for example, to place a background image on every paragraph on a page, you could do this: p { background-image: url("images/dinosaur.jpg"); } the resulting embedded image, is arguably easier to position and control than html images. so why bother with html images? as hinted to above, css background images are for decoration only. if you just want to add something pretty to your page to enhance the visuals, this is fine. though, such images have no semantic meaning at all. they can't have any text equivalents, are invisible to screen readers, and so on. this is where html images shine! summing u...

Third-party APIs - Learn web development
of different controls available; by default it just shows a zoom control. you can expand the controls available using the map.addcontrol() method; add this to your code, inside the window.onload handler: map.addcontrol(l.mapquest.control()); the mapquest.control() method just creates a simple full-featured control set, and it is placed in the top-right hand corner by default. ...
...and the controls available using the map.addcontrol() method; add this to your code, inside the window.onload handler: map.addcontrol(l.mapquest.control()); the mapquest.control() method just creates a simple full-featured control set, and it is placed in the top-right hand corner by default. you can adjust the position by specifying an options object as a parameter for the control containing a position property, the value of which is a string specifying a position for the control. try this, for example: map.addcontrol(l.mapquest.control({ position: 'bottomright' })); there are other types of control available, for example mapquest.searchcontrol() and mapquest.satellitecontrol(), and some are quite complex and powerful. have a play around and see what you can come up with. adding a custom m...
...you to use some kind of developer key, for reasons of security and accountability. to sign up for an nytimes api key, following the instructions at https://developer.nytimes.com/get-started. let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then click "create"). get the api key from the resulting page. now, to start the example off, make copies of nytimes_start.html and nytimes.css in a new directory on your computer. if you've already cloned the examples repository, you'll already have a copy of these files, which you can find in the javascript/apis/third-party-apis/nytimes directory. initially the <script> element...

Adding features to our bouncing balls demo - Learn web development
his method will do the same thing as the first part of ball()'s update() function — look to see whether the evil circle is going to go off the edge of the screen, and stop it from doing so. again, you can mostly just copy the ball.prototype.update definition, but there are a few changes you should make: get rid of the last two lines — we don't want to automatically update the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. setcontrols() this method wil...
... _this.y -= _this.vely; } else if (e.key === 's') { _this.y += _this.vely; } } so when a key is pressed, the event object's keycode property is consulted to see which key is pressed. if it is one of the four represented by the specified keycodes, then the evil circle will move left/right/up/down. for a bonus point, can you tell us why we've had to set let _this = this; in the position it is in? it is something to do with function scope. collisiondetect() this method will act in a very similar way to ball()'s collisiondetect() method, so you can use a copy of that as the basis of this new method. but there are a couple of differences: in the outer if statement, you no longer need to check whether the current ball in the iteration is the same as the ball that is doing the c...
...current ball exists. call the evil ball instance's draw(), checkbounds(), and collisiondetect() methods on every iteration of the loop. implementing the score counter to implement the score counter, follow the following steps: in your html file, add a <p> element just below the <h1> element containing the text "ball count: ". in your css file, add the following rule at the bottom: p { position: absolute; margin: 0; top: 35px; right: 5px; color: #aaa; } in your javascript, make the following updates: create a variable that stores a reference to the paragraph. keep a count of the number of balls on screen in some way. increment the count and display the updated number of balls each time a ball is added to the scene. decrement the count and display the updated nu...

Handling common accessibility problems - Learn web development
note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. hiding content there are many instances where a visual design will require that not all content is shown at once. ...
... on the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screenreaders. ...
... the basic ones you'll need for web page testing are in the following table. in the keyboard shortcuts, "nvda" means "the nvda modifier". most common nvda keyboard shortcuts keyboard shortcut description nvda + q turn nvda off again after you've started it. nvda + up cursor read the current line. nvda + down cursor start reading at the current position. up cursor and down cursor, or shift + tab and tab move to previous/next item on page and read it. left cursor and right cursor move to previous/next character in current item and read it. shift + h and h move to previous/next heading and read it. shift + k and k move to previous/next link and read it. shift + d and d move to previous/ne...

The Firefox codebase: CSS Guidelines
fox front-end engineers. basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment). the overriding css section contains more information about this. avoid magic numbers; prefer automatic sizing or alignment methods. some examples to avoid: absolutely positioned elements hardcoded values such as: vertical-align: -2px; . the reason you should avoid such "hardcoded" values is that, they don't necessarily work for all font-size configurations. avoid setting styles in javascript. it's generally better to set a class and then specify the styles in css. classlist is generally better than classname. there's less chance of overwriting an existing cla...
...his: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right. example: use margin-inline-start: 3px; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|r...
...iving hints as to how something should act, however -moz-appearance: none; is probably saying 'ignore browser preconceptions - i want a blank sheet', so that's more visual. however -moz-appearance values aren't implemented and don't behave consistently across platforms, so idealism aside -moz-appearance should always be in theme css. [2] however there is probably a better way than using absolute positioning. colors for common areas of the firefox interface (panels, toolbar buttons, etc.), mozilla-central often comes with some useful css variables that are adjusted with the correct values for different platform configurations, so using those css variables can definitively save some testing time, as you can assume they already work correctly. using the currentcolor keyword or inheriting is als...

mozbrowserasyncscroll
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 object a custom object. details the details property returns an anonymous javascript object with the following properties: top the scroll top position in css pixels of the document within the browser <iframe>. left the scroll left position in css pixels of the document within the browser <iframe>. width the width in css pixels of the visible part of the document within the browser <iframe>. height the height in css pixels of the visible part of the document within the browser <iframe>. scrollwidth the total content width in css pixels o...
.... this indicates that the content is over-scrolled, which occurs when the page "rubber-bands" after being scrolled all the way to the bottom. similarly, left + width may be greater than scrollwidth, and both left and top may be negative. note: for performance reasons, this event is asynchronous. ...
...and top may be negative. note: for performance reasons, this event is asynchronous. that means that the value retrieved through the event object can be different than the real current position of the scroll when the event is processed. ...

mozbrowserscroll
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 object a custom object. ...
...hether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport. left a number representing the new horizontal scroll position of the <iframe> viewport — in css pixels — from the left of the viewport. ...
... vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport. left a number representing the new horizontal scroll position of the <iframe> viewport — in css pixels — from the left of the viewport. ...

MozBeforePaint
nd hardware won't let the browser display more frames than that anyway. limiting the frame rate avoids wasting work, thereby saving cpu usage and power and improving overall system performance. example this example performs a simple animation, moving a box a short distance after a short period of time. ...
...when the animation sequence completes, removes the event listener. you may take a look at this example live if you like. ...
...window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </html> as you can see, each time the mozbeforepaint event fires, our step() method is called. this computes the current position for the animating box and updates the box's position on screen, and, if the animation sequence is not yet complete, calls window.requestanimationframe() to schedule the next animation frame to be drawn. when the animation sequence completes, removes the event listener. you may take a look at this example live if you like. ...

JNI.jsm
methods cdata .get(number aindex); cdata .getelements(number astart, number alength); void .set(number aindex, cdata avalue); void .setelements(number astart, [array, size_is(arr.length > number anynumber > 0)] in cdata avalsarray); .get() gets the value of the element in the array at given aindex. cdata get(number aindex); parameters aindex the position in the array to obtain. return value returns primitive cdata. .getelements() returns a new cdata object of the section of the array specified by astart and ending at position astart + alength. void setelements(number astart, number alength); parameters astart the position to start setting elements of the array in. alength the number of elements to copy from astart. if 0 is supplied,...
...ber alength); parameters astart the position to start setting elements of the array in. alength the number of elements to copy from astart. if 0 is supplied, an empty cdata array is returned. return value a new cdata array object based on the array. .set() sets an element in the array at given aindex to the given aval. void set(number aindex, cdata aval); parameters aindex the position in the array to change. aval a value to set it to. return value this function has no return value, if you try to store the return value in a variable, it will be undefined. .setelements() sets a section of a typed array to specified values. this function starts on the position of astart in the array and sets it to the values in avalsarray. this is done by calling .set for each element with...
... avalsarray a javascript array holding the values to set. return value this function has no return value, if you try to store the return value in a variable, it will be undefined. ...

Creating localizable web applications
that will be substituted by the date upon interpretation of the code (snippet 3). snippet 4. good: <h3> <?printf( /* l10n: %s is the author's username */ _("created by <a href=\"%s\">%s</a>"), $locale_conf->url('/gallery/designer/' . $persona['author']), $persona['display_username']);?> </h3> in this example the link is in the _() call so that localizers can adjust the position of the author's name, depending on the grammar of their language. use printf() for string substitution whenever there is content that will change, either upon interpretation of the code or as part of development, don't use concatenation. instead, use printf() and string formatting. for instance, don't put uris into msgid's. if you do, if the static uri changes, you'll have to regenerate the *.p...
...o to numbers. image 1. bad: image 2. bad: if you wish to use a non-standard font (as in the image above), take advantage of the css's on-line fonts feature available via @font-face. image 3. bad: the trouble with the above image is the "for firefox" part, which should be made localizable. keep in mind that you should allow to localize the whole "for firefox" part, not only the "for" preposition to which you'd concatenate the "firefox" part. that's because some languages might require changing the word order, and others might require putting the word firefox in the correct grammatical case. image 4. bad: image 5 & snippet 1. good: image file (/img/tignish/firefox/performance-chart.png): html: (in this case, no gettext was used and the localizers worked on pure html files) <div i...
...w you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>&raquo;</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> snippet 2. good: css: div.tut_didyouknow { background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64px; } html[dir='rtl'] div.tut_didyouknow { background-image: url(/static/img/question-64.png); background-position: 100% 0; padding-left: 0; padding-right: 64px; } html/php: <div class="tut_didyouknow"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>&raquo;</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> notice that the icon has been moved to css, so that it doesn't sit in a <img/> element. this is generally considere...

Research and prep
determining a user's choice of default search engines, content and protocol handlers (rss readers, web mail and web calendar), bookmarks, and links to recommended sites on the in-product pages as it relates to their locale. it is one of the most customizable and localizable parts of the product l10n process, as it goes beyond string translation. we believe that localization teams are in the best position to provide recommendations on what local providers we can use for web services because you're in the market, work in the language, and know your users. this is, therefore, meant to be a guideline for how you should be formulating your recommendations. here's the basic process: file a bug under mozilla localizations>[your_locale] to request updates to your locale's productization preferences. if...
...site provider to include it. ensure that your suggestions follow these parameters: search there are typically five search plug-ins listed for firefox desktop (only four for firefox mobile): generic search the default option should expose the quickest path to the best result on the world wide web for the user (indexing a large portion of the global www). ...
... e-commerce search these search engines should allow users to get connected to new and used products they want to buy as quickly and painlessly as possible in a "trusted" site -- for example, choosing the most popular auction, general shopping, or classified type sites that have the desired user experience are good choices. ...

Mozilla internal string guide
ring classes) in the string. .isempty() - the fastest way of determining if the string has any value. use this instead of testing string.length == 0 .equals(string) - true if the given string has the same value as the current string. common methods that modify the string: .assign(string) - assigns a new value to the string. .append(string) - appends a value to the string. .insert(string, position) - inserts the given string before the code unit at position. .truncate(length) - shortens the string to the given length. complete documentation can be found in the appendix. read-only strings the const attribute on a string determines if the string is writable. if a string is defined as a const nsastring then the data in the string cannot be manipulated. if one tries to call a non-const me...
... } you may change the length of a string via setlength(). note that iterators become invalid after changing the length of a string: /** * replace every tab character in `data` with four spaces. */ void replacetabs2(nsastring& data) { int len = data.length(); char16_t *cur = data.beginwriting(); char16_t *end = data.endwriting(); // because `cur` may change during the loop, track the position // within the string. int pos = 0; while (cur < end) { if (char16_t('\t') != *cur) { ++pos; ++cur; } else { len += 3; data.setlength(len); // after setlength, read `cur` and `end` again cur = data.beginwriting() + pos; end = data.endwriting(); // move the remaining data over if (pos < len - 1) memmove(cur + 4, cur + 1,...
... nsliteralcstring similar to nsdependent[c]string, but pre-calculates length at build time. appendix b - nsastring reference read-only methods. length() isempty() isvoid() - xpconnect will convert void nsastrings to javascript null. beginreading(iterator) endreading(iterator) equals(string[, comparator]) first() last() countchar() left(outstring, length) mid(outstring, position, length) right(outstring, length) findchar(character) methods that modify the string. assign(string) append(string) insert(string) cut(start, length) replace(start, length, string) truncate(length) setisvoid(true) - make it null. xpconnect will convert void nsastrings to javascript null. beginwriting(iterator) endwriting(iterator) setcapacity() - inform the string about buffer siz...

IAccessible2
rits from: iaccessible last changed in gecko 1.9 (firefox 3) method overview [propget] hresult attributes([out] bstr attributes ); [propget] hresult extendedrole([out] bstr extendedrole ); [propget] hresult extendedstates([in] long maxextendedstates, [out, size_is(,maxextendedstates), length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); [propget] hresult groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [propget] hresult indexinparent([out] long indexinparent ); [propget] hresult locale([out] ia2locale locale ); [propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstat...
...dedstates this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. extendedstates this array is allocated by the server. free it with cotaskmemfree. nextendedstates the number of extended states returned; the size of the returned array. return value s_false if there are no states, [out] values are null and 0 respectively. s_ok. groupposition() returns grouping information. used for tree items, list items, tab panel labels, radio buttons, and so on. also used for collections of non-text objects. [propget] hresult groupposition( [out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); parameters grouplevel 1 based, 0 indicates that this value is not applicable. similaritemsingroup 1 based, 0 indicate...
...this is an index into the objects in the current group, not an index into all the objects at the same group level. return value s_false if no values are valid. ...

nsIAccessible
e tree by the following methods and attributes. nsiaccessible.parent to get the parent accessible nsiaccessible.nextsibling, nsiaccessible.previoussibling to get sibling accessibles nsiaccessible.firstchild, nsiaccessible.lastchild to get first and last child nsiaccessible.children, nsiaccessible.getchildat(), nsiaccessible.childcount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent. use nsiaccessible.groupposition() to get information about this accessible in its group. relations many accessibles are linked with each other, for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are related, please refer to r...
...fit into existing api methods, please refer to attributes documentation for more information. you can use nsiaccessible.attributes to get a map of attributes. keyboard shortcuts some actions on accessibles can be performed by keyboard shortcuts. following methods are used to get them nsiaccessible.defaultkeybinding(), nsiaccessible.getkeybindings(), nsiaccessible.keyboardshortcut. size and screen position you can use nsiaccessible.getbounds() to get size and coordinates of the accessible. layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods ge...
....getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods getkeybindings provides array of localized string of global keyboard accelerator for the given action index supported by accessible. getstate provides a bit fields of accessible states which describe boolean properties of accessible. groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. getchildatpoint this method returns an accessible child which contains the coordinate at (x, y) in screen pixels. getchildat this method returns nth accessible child using zero-based index or last chil...

nsIAccessibleImage
accessible/public/nsiaccessibleimage.idlscriptable this interface allows in-process accessibility clients to retrieve information about an image. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getimageposition(in unsigned long coordtype, out long x, out long y); void getimagesize(out long width, out long height); methods getimageposition() returns the coordinates of the image accessible. this method is the same as nsiaccessible.getbounds() excepting coordinate origin parameter. void getimageposition( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype). x the x coordinat...
... exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. getimagesize() returns the size of the image accessible. this method is the same as nsiaccessible.getbounds(). void getimagesize( out long width, out long height ); parameters width the width of the image accessible. ...
... exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. getimagesize() returns the size of the image accessible. this method is the same as nsiaccessible.getbounds(). ...

nsIDOMWindow
me domstring get or set the name of this window. this attribute is "replaceable" in javascript. parent nsidomwindow the window's parent window. if there is no parent window, or if the parent is of a different type, this is the current window. the window hierarchy does not cross chrome-content boundaries. read only. scrollx long the current horizontal (x) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrolly long the current vertical (y) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrollbars nsidombarprop the object that controls whether or not scrollbars are shown in the window. this attribute is "replaceable" in javascript. read only. session...
...g pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window. nsiselection getselection(); parameters none. return value the nsiselection object for the window. scrollby() scrolls the window by a given number of pixels relative to the current scroll position. void scrollby( in long xscrolldif, in long yscrolldif ); parameters xscrolldif the number of pixels by which to scroll horizontally. yscrolldif the number of pixels by which to scroll vertically. scrollbylines() scrolls the window by the specified number of lines. void scrollbylines( in long numlines ); parameters numlines the number of lines by which to scroll. scroll...
...ameters numlines the number of lines by which to scroll. scrollbypages() scrolls the window by the specified number of pages. void scrollbypages( in long numpages ); parameters numpages the number of pages by which to scroll. scrollto() scrolls the window to an absolute pixel offset. void scrollto( in long xscroll, in long yscroll ); parameters xscroll the horizontal position to which to scroll, in pixels. yscroll the vertical position to which to scroll, in pixels. sizetocontent() makes the window's size fit the contents of the window. void sizetocontent(); parameters none. see also dom ...

nsIDragService
1 the drag and drop operation should copy the object. dragdrop_action_move 2 the drag and drop operation should move the object. dragdrop_action_link 4 the drag and drop operation should link the object. dragdrop_action_uninitialized 64 the action is not initialized. methods native code only!dragmoved programmatically changes the drag position of the drag session. this is used on mac and windows to update the position of a popup being used as a drag image during the drag operation. it's not used on gtk, which handles the drag popup itself. [noscript] void dragmoved( in long ax, in long ay ); parameters ax the x coordinate to which to move the popup being dragged. ay the y coordinate to which to move the popup being dragged...
... aregion a region containing rectangles for cursor feedback, in window coordinates. aactiontype specified which of copy/move/link are allowed. invokedragsessionwithimage() starts a modal drag session using an image. a custom image may be specified using the aimage argument. if this is supplied, the aimagex and aimagey arguments specify the offset within the image where the cursor would be positioned. that is, when the image is drawn, it is offset up and left the amount so that the cursor appears at that location within the image. if aimage is null, aimagex and aimagey are not used and the image is instead determined from the source node adomnode, and the offset calculated so that the initial location for the image appears in the same screen position as where the element is located. the nod...
...agey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer ); parameters adomnode the source node on which the drag gesture was started. atransferables an array of transferables to be dragged. aregion a region containing rectangles for cursor feedback, in window coordinates. aactiontype specified which of copy/move/link are allowed. aimage image object. aimagex x position of image. aimagey y position of image. adragevent the drag gesture event that initiated the drag. adatatransfer a data transfer object that is available on the current drag session. invokedragsessionwithselection() start a modal drag session using the selection as the drag image. the adragevent must be supplied as the current screen coordinates of the event are needed to calculate the i...

nsIMessenger
ifferent protocols such as imap, pop3, or local mail sources. nsimsgmessageservice messageservicefromuri(in acstring auri); parameters auri the url of the message or attachment to get the service for. return value the nsimsgmessageservice responsible for the url. msghdrfromuri() nsimsgdbhdr msghdrfromuri(in acstring auri); getmsguriatnavigatepos() gets the message a particular position in the navigation history. for example, back-forward history needs a list of visited messages, and where it is in the list. unfortunately, you must call this before navigating to a position, because calling this has the side effect of making us adjust our current history position, and not adding the loaded message to the history queue. acstring getmsguriatnavigatepos(in long apos); parameters...
...tion history. for example, back-forward history needs a list of visited messages, and where it is in the list. unfortunately, you must call this before navigating to a position, because calling this has the side effect of making us adjust our current history position, and not adding the loaded message to the history queue. acstring getmsguriatnavigatepos(in long apos); parameters apos the position to get the url from relative to the current history cursor. +1 is forward, -1 is back. return value the url at that point in the history. getfolderuriatnavigatepos() gets the folder url at a particular position in the navigation history. acstring getfolderuriatnavigatepos(in long apos); parameters apos the position to get the url from relative to the current history cursor. +1 is ...
... acount the number of items in the history. ahistory an array of strings containing information about each entry in the history. ...

nsIMsgFolder
stsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generatemessageuri(in nsmsgkey msgkey); void addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markmessagesread(in nsisupportsarray messages, in boolean markread); void markallmessagesread(); void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); void markthreadread(in nsimsgthread thread); void setlabelformessages(in nsisupportsarray messages,...
... cancompact boolean readonly: rootfolder nsimsgfolder readonly: the phantom server folder. constants constant value description nsmsgbiffstate_newmail 0 user has new mail waiting. nsmsgbiffstate_nomail 1 no new mail is waiting. nsmsgbiffstate_unknown 2 we dunno whether there is new mail. nsmsgdispositionstate_none -1 nsmsgdispositionstate_replied 0 nsmsgdispositionstate_forwarded 1 allmessagecountnotifications 0 turn notifications on/off for various notification types. currently only supporting allmessagecountnotifications which refers to both total and unread message counts. methods startfolderloading() void startfolderloading(); ...
...ea.dat) void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); getnumnewmessages() the number of new messages since this folder was last visited long getnumnewmessages(in boolean deep); setnumnewmessages() void setnumnewmessages(in long numnewmessages); generatemessageuri() acstring generatemessageuri(in nsmsgkey msgkey); addmessagedispositionstate() void addmessagedispositionstate(in nsimsgdbhdr amessage, in nsmsgdispositionstate adispositionflag); markmessagesread() void markmessagesread(in nsisupportsarray messages, in boolean markread); markallmessagesread() void markallmessagesread(); markmessagesflagged() void markmessagesflagged(in nsisupportsarray messages, ...

nsIPromptService
string atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to form the abuttonflags parameter passed to confirmex. all flags are defined as unsigned long constants and can be accessed as components.interfaces.nsipromptservice.flagname from javascript and as nsipromptservice::flagname from c++. button position flags on linux and mac, button 2 is on the left of the prompt, while buttons 1 and 0 are on the right. on windows and os/2, the buttons are centred in the order 0, 2, 1. constant value description button_pos_0 1 this is usually the button used to confirm the prompt. it typically has the label "ok", "yes", or "save". button_pos_1 256 this is the button ...
...label "cancel" or "no". it is equivalent to pressing the escape key (or cmd+. on the mac), or closing the window through the os controls. button_pos_2 65536 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt. for instance, it might have the label "don't save". button title flags these flags are used along with button position flags to set the labels of buttons in the prompt. constant value description button_title_ok 1 these flags are used to select standard labels from the user's current locale. button_title_cancel 2 button_title_yes 3 button_title_no 4 button_title_save 5 button_title_dont_save 6 button_title_revert ...
...ation can decide what order the buttons appear in, and it may not be simply right-to-left (2, 1, 0) or left-to-right (0, 1, 2). see bug 624043 for more on this. button 0 is the default button unless one of the button default flags is specified (see button default flags). a button may use a predefined title, specified by one of the button title flags values. each title value can be multiplied by a position value to assign the title to a particular button. if button_title_is_string is used for a button, the string parameter for that button will be used. if the value for a button position is zero, the button will not be shown. the following example creates a dialog with an ok button and a custom button description. abuttonflags = (button_pos_0) * (button_title_ok) + (button_pos_1) * (button_title_is...

nsITreeView
the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false when the orientation is not drop_on. note: drop_on will only be passed to candrop() if the item is a container; see iscontainer(). boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data being dragged, so that it can be examined to determine if a drop is possible. return value true if a drop is allowed at the current location; otherwise false. candropbeforeafter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) ...
...he view when a header is clicked. void cycleheader( in nsitreecolumn col ); parameters col the column to cycle. drop() called when the user drops something on this view. the orientation paramater specifies before/on/after the given row. void drop( in long row, in long orientation, in nsidomdatatransfer datatransfer ); parameters row the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data that has been dropped. getcellproperties() an atomized list of properties for a given cell. each property, x, that the view gives back will cause the css ::moz-tree-cell-*(x) pseudoelement to be matched on the treechildren element. see getrowproperties() for an example. astring...
...stbox. for tree views with multi-level data, it's advisable to distinguish between a row which is an empty container (i.e., a row with the potential to hold children but that currently has none), and a non-empty container (i.e., a row that positively does currently have children). the tree frame code that handles drag and drop, for example, uses this method to determine how to interpret the drop position. note: nsitreeview implementations must be prepared to handle a call to toggleopenstate for any row index which returns true for a call to iscontainer, even if iscontainerempty returns true. boolean iscontainer( in long index ); parameters index the index of the row being asked about. return value true if the row is a container. otherwise false. iscontainerempty() one of the method...

Drawing and Event Handling - Plugins
not supported on the x window system platform prior to gecko 1.9 alpha 7 (bug 137189). the npwindow structure when a plug-in is loaded, it is drawn into a target area. this target is either the windowed plug-in's native window, or the drawable of a windowless plug-in. the npwindow structure represents either the native window or a drawable. this structure contains information about coordinate position, size, the state of the plug-in (windowed or windowless), and some platform-specific information. note: when a plug-in is drawn to a window, the plug-in is responsible for preserving state information and ensuring that the original state is restored. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. for windowed plug-ins...
...twindow method with an npwindow structure that represents a drawable. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a window. ...
...wever, the browser can create invisible instances for which npp_setwindow is never called and a window is never created. this happens when plug-ins are invoked with an html object element that has been hidden with css rules (see plug-in display modes in the introduction) or with an embed element whose hidden attribute has been set. the browser should call npp_setwindow again whenever the size or position of the instance changes, passing it the same npwindow object each time, but with different values. the browser can also call npp_setwindow multiple times with different values for the window, including null. for example, if a user removes an instance from the page, the browser should call npp_setwindow with a window value of null. this value prevents the instance from drawing further until it is...

Debugger.Script - Firefox Developer Tools
debugger.script instances, without worrying about interfering with other debuggers.) a debugger.script instance is a strong reference to a jsscript object; it protects the script it refers to from being garbage collected. note that spidermonkey may use the same debugger.script instances for equivalent functions or evaluated code—that is, scripts representing the same source code, at the same position in the same source file, evaluated in the same lexical environment. debugger.script for webassembly for debugger.script instances referring to a block of webassembly code, they are distinguished by their format property being "wasm". currently only entire modules evaluated via new webassembly.module are represented. debugger.script objects for webassembly are uncovered via onnewscript when a ...
..., "wasm". function properties of the debugger.script prototype object the functions described below may only be called with a this value referring to a debugger.script instance; they may not be used as methods of other kinds of objects. getalloffsets() if the instance refers to a jsscript, return an arrayl describing the relationship between bytecode instruction offsets and source code positions in this script.l is sparse, and indexed by source line number. if a source line numberline has no code, thenl has noline property. if there is code forline, then l[line] is an array of offsets of byte code instructions that are entry points to that line. for example, suppose we have a script for the following source code: a=[] for (i=1; i < 10; i++) // it's hip to be square. a[i] = i...
...y once, and the loop test, which is performed at the start of each iteration); the third line has no code; and the fourth line begins at offset 10. if the instance refers to webassembly code, throw a typeerror. getallcolumnoffsets(): if the instance refers to a jsscript, return an array describing the relationship between bytecode instruction offsets and source code positions in this script. unlike getalloffsets(), which returns all offsets that are entry points for each line, getallcolumnoffsets() returns all offsets that are entry points for each (line, column) pair. the elements of the array are objects, each of which describes a single entry point, and contains the following properties: linenumber: the line number for which offset is an entry point ...

Animating CSS properties - Firefox Developer Tools
gles to hit a smooth frame rate. the css rendering waterfall the process the browser uses to update the page when a css property has changed can be described as a waterfall consisting of the following steps: recalculate style: every time a css property for an element changes, the browser must recalculate computed styles. layout: next, the browser uses the computed styles to figure out the position and geometry for the elements. this operation is labeled "layout" but is also sometimes called "reflow". paint: finally, the browser needs to repaint the elements to the screen. one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition". this sequence needs to fit into a single frame, since...
...hat 60 frames per second is the rate at which animations will appear smooth. for a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow. css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint. left max-width border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because th...
... transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine. ...

CanvasRenderingContext2D - Web APIs
ing drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. canvasrenderingcontext2d.clearrect() sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content. canvasrenderingcontext2d.fillrect() draws a filled rectangle at (x, y) position whose size is determined by width and height. canvasrenderingcontext2d.strokerect() paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. drawing text the following methods draw text. see also the textmetrics object for text properties. canvasrenderingcontext2d.filltext() draws (fills) a given text at th...
...determined by width and height. canvasrenderingcontext2d.strokerect() paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. drawing text the following methods draw text. see also the textmetrics object for text properties. canvasrenderingcontext2d.filltext() draws (fills) a given text at the given (x, y) position. canvasrenderingcontext2d.stroketext() draws (strokes) a given text at the given (x, y) position. canvasrenderingcontext2d.measuretext() returns a textmetrics object. line styles the following methods and properties control how lines are drawn. canvasrenderingcontext2d.linewidth width of lines. default 1.0. canvasrenderingcontext2d.linecap type of endings on the end of lines. possibl...
...e current path. canvasrenderingcontext2d.arc() adds a circular arc to the current path. canvasrenderingcontext2d.arcto() adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line. canvasrenderingcontext2d.ellipse() adds an elliptical arc to the current path. canvasrenderingcontext2d.rect() creates a path for a rectangle at position (x, y) with a size that is determined by width and height. drawing paths canvasrenderingcontext2d.fill() fills the current sub-paths with the current fill style. canvasrenderingcontext2d.stroke() strokes the current sub-paths with the current stroke style. canvasrenderingcontext2d.drawfocusifneeded() if a given element is focused, this method draws a focus ring around the current path. ...

Basic animations - Web APIs
closepath(); } } function anim() { requestanimationframe(anim); c.fillstyle = "rgba(0,0,0,0.05)"; c.fillrect(0, 0, cn.width, cn.height); a.foreach(function(e, i) { e.dr(); }); } </script> <style> #cw { position: fixed; z-index: -1; } body { margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"...
... score :<span id="score">0</span> </div> <div class="touch off" onclick="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { opacity: 0 ...
... border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .hide { opacity...

Transformations - Web APIs
« previousnext » earlier in this tutorial we've learned about the canvas grid and the coordinate space. until now, we only used the default grid and changed the size of the overall canvas for our needs. with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists of ...
...ion to return to the original state. also if you're translating inside a loop and don't save and restore the canvas state, you might end up missing part of your drawing, because it was drawn outside the canvas edge. a translate example this example demonstrates some of the benefits of translating the canvas origin. without the translate() method, all of the rectangles would be drawn at the same position (0,0). the translate() method also gives us the freedom to place the rectangle anywhere on the canvas without having to manually adjust coordinates in the fillrect() function. this makes it a little easier to understand and use. in the draw() function, we call the fillrect() function nine times using two for loops. in each loop, the canvas is translated, the rectangle is drawn, and the canvas is...
...the fillrect() function. this makes it a little easier to understand and use. in the draw() function, we call the fillrect() function nine times using two for loops. in each loop, the canvas is translated, the rectangle is drawn, and the canvas is returned back to its original state. note how the call to fillrect() uses the same coordinates each time, relying on translate() to adjust the drawing position. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height...

Document.caretRangeFromPoint() - Web APIs
the caretrangefrompoint() method of the document interface returns a range object for the document fragment under the specified coordinates. syntax var range = document.caretrangefrompoint(float x, float y); parameters x a horizontal position within the current viewport. y a vertical position within the current viewport. returns one of the following: a range. null, if x or y are negative, outside viewport, or there is no text entry node. example basic demo: when clicking in a paragraph insert a line break at the caret position: html <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gube...
...m dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. ...
...sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. ...

Document.createNodeIterator() - Web APIs
constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root. in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_docu...
... shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means tha...
...t of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. filter optional an object implementing the nodefilter interface. its acceptnode() method will be call...

Document.createTreeWalker() - Web APIs
onstant. constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_...
... shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means tha...
...t of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. filter optional a nodefilter, that is an object with a method acceptnode, which is called by the tree...

Document.execCommand() - Web APIs
the compatibility table for usage details. decreasefontsize adds a <small> tag around the selection or at the insertion point. (not supported by internet explorer.) defaultparagraphseparator changes the paragraph separator used when new paragraphs are created in editable text regions. see differences in markup generation for more details. delete deletes the current selection. enableabsolutepositioneditor enables or disables the grabber that allows absolutely-positioned elements to be moved around. the grabber is disabled by default since firefox 64 (bug 1490641). enableinlinetableediting enables or disables the table row/column insertion and deletion controls. the controls are disabled by default since firefox 64 (bug 1490641). enableobjectresizing enables or disables the resize handle...
...the handles are disabled by default since firefox 64 (bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like "arial") as a value argument. fontsize changes the font size for the selection or at the insertion point. ...
...if one exists (in firefox, <blockquote> is the exception — it will wrap any containing block element). requires a tag-name string as a value argument. virtually all block-level elements can be used. (internet explorer and edge support only heading tags h1–h6, address, and pre, which must be wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete key on a windows keyboard. heading adds a heading element around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a color value string as a value argument. usecss...

Document: keydown event - Web APIs
event handler property onkeydown 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. ...
...ndicates 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. 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). ...
...as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. 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 keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key. <p>focus ...

Document: keyup event - Web APIs
ported 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. ...
... 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). ...
... 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.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key. addeventlistener keyup example <p>focus the ifr...

Document - Web APIs
rface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree. the dom tree includes elements such as <body> and <table>, among many others. it provides functionality globally to the document, like how to obtain the page's url and create new elements in the document. ...
...cludes elements such as <body> and <table>, among many others. it provides functionality globally to the document, like how to obtain the page's url and create new elements in the document. ...
...t. methods included from documentorshadowroot the document interface includes the following methods defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret. documentorshadowroot.elementfrompoint() returns the topmost element at the specified coordinates. documentorshadowroot.elementsfrompoint() returns an array of all elements at the specified coordinates. documentorshadowroot.caretpositionfrompoint() returns a caretposition object containing the dom node containing the caret, and caret's character offset within that node. event...

EffectTiming.fill - Web APIs
imingproperties = { fill: "none" | "forwards" | "backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating). the default is "auto". "none" the animation's effects are only visible while the animation is iterating or its playhead is positioned over an iteration. the animation's effects are not visible when its playstate is pending with a delay, when its playstate is finished, or during its enddelay or delay. in other words, if the animation isn't in its active interval, the affected element is not visible. "forwards" the affected element will continue to be rendered in the state of the final animation framecontinue to be applied t...
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border:...
... align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating. that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that des...

Element.insertAdjacentElement() - Web APIs
'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. ...
... 'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. ...
... 'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. return value the element that was inserted, or null, if the insertion failed. exceptions exception explanation syntaxerror the position specified is not a recognised value. typeerror the element specified is not a valid element. visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and has an element parent. example beforebtn.addeventlistener('click', fun...

Element: keydown event - Web APIs
ypress 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. keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". ...
...ss. an uppercase "a" is reported as 65 by all events. keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". 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). ...
...rated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". 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). ...

Element: keyup event - Web APIs
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. ...
...ndicates 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. since firefox 65, the keyup and keydown 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 as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the keyup and keydown 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). ...

GlobalEventHandlers.onanimationend - Web APIs
note that there's nothing there about animation...
..., "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. ...
...first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. ...

GlobalEventHandlers.onanimationiteration - Web APIs
note that there's nothing there about animation. ...
...s", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. ...
...that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { ...

GlobalEventHandlers.onanimationstart - Web APIs
note that there's nothing there about animation...
..., "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. ...
...first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. ...

HTMLAnchorElement - Web APIs
ce represents hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. ...
...ce that they inherit from) for manipulating the layout and presentation of such elements. ...
...ibute, specifying the relationship of the target object to the linked object. htmlanchorelement.rellist read only returns a domtokenlist that reflects the rel html attribute, as a list of tokens. htmlhyperlinkelementutils.search is a usvstring representing the search element, including leading question mark ('?'), if any, of the referenced url. htmlelement.tabindex is a long containing the position of the element in the tabbing navigation order for the current document. htmlanchorelement.target is a domstring that reflects the target html attribute, indicating where to display the linked resource. htmlanchorelement.text is a domstring being a synonym for the node.textcontent property. htmlanchorelement.type is a domstring that reflects the type html attribute, indicating the mime type...

HTMLAreaElement - Web APIs
the htmlareaelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements. ...
...rovides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements. ...
...ment to the linked resource, as a list of tokens. htmlhyperlinkelementutils.search is a usvstring containing the search element (including leading question mark '?'), if any, of the referenced url. htmlareaelement.shape is a domstring that reflects the shape html attribute, indicating the shape of the hot-spot, limited to known values. htmlelement.tabindex is a long containing the element's position in the tabbing order. htmlareaelement.target is a domstring that reflects the target html attribute, indicating the browsing context in which to open the linked resource. htmlareaelement.type is a domstring that reflects the type html attribute, indicating the mime type of the linked resource. htmlhyperlinkelementutils.username is a usvstring containing the username specified before the dom...

HTMLButtonElement - Web APIs
the htmlbuttonelement interface provides properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <button> elements. ...
... the htmlbuttonelement interface provides properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <button> elements. ...
...at are labels for this button. htmlbuttonelement.menu is a htmlmenuelement representing the menu element to be displayed if the button is clicked and is of type="menu". htmlbuttonelement.name is a domstring representing the name of the object when submitted with a form. html5 if specified, it must not be the empty string. htmlbuttonelement.tabindex is a long that represents this element's position in the tabbing order. htmlbuttonelement.type is a domstring indicating the behavior of the button. this is an enumerated attribute with the following possible values: submit: the button submits the form. this is the default value if the attribute is not specified, html5 or if it is dynamically changed to an empty or invalid value. reset: the button resets the form. button: the button do...

HTMLElement.offsetLeft - Web APIs
pixels that the upper left corner of the current element is offset to the left within the htmlelement.offsetparent node. for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element relative to the offsetparent. however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and offsetheight will not be a bounding box for a span with wrapped text. sy...
...e the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and offsetheight will not be a bounding box for a span with wrapped text. syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element. example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue; border-style:s...
...offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span. ...

HTMLElement.offsetParent - Web APIs
the element is <body> or <html>. ...
... the element is <body> or <html>. ...
... the element is <body> or <html>. offsetparent is useful because offsettop and offsetleft are relative to its padding edge. syntax parentobj = element.offsetparent; parentobj is an object reference to the element in which the current element is offset. ...

HTMLElement.offsetTop - Web APIs
the htmlelement.offsettop read-only property returns the distance of the current element relative to the top of the offsetparent node. syntax toppos = element.offsettop; parameters toppos is the number of pixels from the top of the closest relatively positioned parent element. example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status comment css object model (cssom) view modulethe definition of 'offsettop' in that specification. working draft 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 http...
...(having display:none does not affect this browser.) ...
...(having display:none does not affect this browser.) ...

HTMLElement - Web APIs
the htmlelement interface represents any html element. some elements directly implement this interface, while others implement it via an interface that inherits it. ...
... the htmlelement interface represents any html element. some elements directly implement this interface, while others implement it via an interface that inherits it. ...
...ement.properties read only returns a htmlpropertiescollection… htmlelement.spellcheck is a boolean that controls spell-checking. it is present on all html elements, though it doesn't have an effect on all of them. htmlelement.style is a cssstyledeclaration, an object representing the declarations of an element's style attributes. htmlorforeignelement.tabindex is a long representing the position of the element in the tabbing order. htmlelement.title is a domstring containing the text that appears in a popup box when mouse is over the element. htmlelement.translate is a boolean representing the translation. event handlers most event handler properties, of the form onxyz, are defined on the documentandelementeventhandlers, globaleventhandlers or toucheventhandlers interfaces and i...

HTMLInputElement - Web APIs
the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
... the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
...adonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. html5this is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type. selectionstart unsigned long: returns / sets the beginning index of the selected text. when nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. selectionend unsigned long: returns / sets the end index of the selected text. when there's no selection, this returns the offset of the character immediately following the current text input cursor position. selectiondirection string: returns / sets the direction in which selection occurred. possible values a...

HTMLLIElement - Web APIs
the htmllielement interface exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating list elements. ...
... the htmllielement interface exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating list elements. ...
...ill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmllielement.type is a domstring representing the type of the bullets, "disc", "square" or "circle". as the standard way of defining the list type is via the css list-style-type property, use the cssom methods to set it via a script. htmllielement.value is a long indicating the ordinal position of the list element inside a given <ol>. it reflects the value attribute of the html <li> element, and can be smaller than 0. if the <li> element is not a child of an <ol> element, the property has no meaning. methods no specific method; inherits properties from its parent, htmlelement. specifications specification status comment html living standardthe definition of ...

HTMLMarqueeElement - Web APIs
the htmlmarqueeelement interface provides methods to manipulate <marquee> elements. it inherits properties and methods from the htmlelement interface. ...
... the htmlmarqueeelement interface provides methods to manipulate <marquee> elements. it inherits properties and methods from the htmlelement interface. ...
...s truespeed is true. htmlmarqueeelement.truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is true, then those values are not ignored. htmlmarqueeelement.vspace sets the vertical margin. htmlmarqueeelement.width sets the width in pixels or percentage value. event handlers htmlmarqueeelement.onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. htmlmarqueeelement.onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. htmlmarqueeelement.onstart fires when the marquee starts scrolling. methods inherits methods from its parent, htmle...

HTMLObjectElement - Web APIs
the htmlobjectelement interface provides special properties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources. ...
...perties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources. ...
... a long representing the horizontal space in pixels around the control. htmlobjectelement.name returns a domstring that reflects the name html attribute, specifying the name of the browsing context. htmlobjectelement.standby is a domstring that reflects the standby html attribute, specifying a message to display while the object loads. htmlobjectelement.tabindex is a long representing the position of the element in the tabbing navigation order for the current document. htmlobjectelement.type is a domstring that reflects the type html attribute, specifying the mime type of the resource. htmlobjectelement.typemustmatch is a boolean that reflects the typemustmatch html attribute, indicating if the resource specified by data must only be played if it matches the type attribute. htmlobject...

HTMLOptionElement - Web APIs
the htmloptionelement interface represents <option> elements and inherits all classes and methods of the htmlelement interface. ...
... the htmloptionelement interface represents <option> elements and inherits all classes and methods of the htmlelement interface. ...
...navailable to be selected. an option can also be disabled if it is a child of an <optgroup> element that is disabled. htmloptionelement.form read only is a htmlformelement representing the same value as the form of the corresponding <select> element, if the option is a descendant of a <select> element, or null if none is found. htmloptionelement.index read only is a long representing the position of the option within the list of options it belongs to, in tree-order. if the option is not part of a list of options, like when it is part of the <datalist> element, the value is 0. htmloptionelement.label read only is a domstring that reflects the value of the label html attribute, which provides a label for the option. if this attribute isn't specifically set, reading it returns the elemen...

HTMLOutputElement - Web APIs
the htmloutputelement interface provides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <output> elements. ...
... the htmloutputelement interface provides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <output> elements. ...
...lement 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 element is not rendered, then the user agent may report the error for the running script instead of notifying the user. htmloutputelement.setcustomvalidity() sets a custom validity m...

HTMLProgressElement - Web APIs
the htmlprogresselement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements. ...
... interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements. ...
..." text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlprogresselement.max is a double value reflecting the content attribute of the same name, limited to numbers greater than zero. its default value is 1.0. htmlprogresselement.positionread only returns a double value returning the result of dividing the current value (value) by the maximum value (max); if the progress bar is an indeterminate progress bar, it returns -1. htmlprogresselement.value is a double value that reflects the current value; if the progress bar is an indeterminate progress bar, it returns 0. htmlprogresselement.labelsread only returns nodelist contai...

HTMLTableCellElement - Web APIs
the htmltablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document. ...
... methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document. ...
... be used in other contexts, such as when describing the headers that apply to a data cell. this is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool. usually the value of abbr is an abbreviation or acronym, but can be any text that's appropriate contextually. htmltablecellelement.cellindex read only a long integer representing the cell's position in the cells collection of the <tr> the cell is contained within. if the cell doesn't belong to a <tr>, it returns -1. htmltablecellelement.colspan an unsigned long integer indicating the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. it reflects the colspan attribute. htmltablecellelement.headers read only is a domsettabletokenli...

HTMLTableElement - Web APIs
the htmltableelement interface provides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document. ...
...vides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document. ...
...ement. if none is found, a new one is created and inserted in the tree as the first child of the <table> element. htmltableelement.deletecaption() removes the first <caption> that is a child of the element. htmltableelement.insertrow() returns an htmltablerowelement representing a new row of the table. it inserts it in the rows collection immediately before the <tr> element at the given index position. if necessary a <tbody> is created. if the index is -1, the new row is appended to the collection. if the index is smaller than -1 or greater than the number of rows in the collection, a domexception with the value indexsizeerror is raised. htmltableelement.deleterow() removes the row corresponding to the index given in parameter. if the index value is -1 the last row is removed; if it smaller ...

HTMLTextAreaElement - Web APIs
the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements. ...
... the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements. ...
... argument. selectionstart unsigned long: returns / sets the index of the beginning of selected text. if no text is selected, contains the index of the character that follows the input cursor. on being set, the control behaves as if setselectionrange() had been called with this as the first argument, and selectionend as the second argument. tabindex long: returns / sets the position of the element in the tabbing navigation order for the current document. textlength read only long: returns the codepoint length of the control's value. same as reading value.length type read only string: returns the string textarea. validationmessage read only string: returns a localized message that describes the validation constraints that the control doe...

IDBCursorWithValue - Web APIs
the idbcursorwithvalue interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. it is the same as the idbcursor, except that it includes the value property. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. <div id="interfac...
... an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. ...
...always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. ...

InputEvent - Web APIs
the inputevent interface represents an event notifying of editable content change. ...
... the inputevent interface represents an event notifying of editable content change. ...
...ng information about richtext or plaintext data being added to or removed from editable content. inputevent.inputtyperead only returns the type of change for editable content such as, for example, inserting, deleting, or formatting text. see the property page for a complete list of input types. inputevent.iscomposingread only returns a boolean value indicating if the event is fired after compositionstart and before compositionend. methods this interface inherits methods from its parents, uievent and event. inputevent.gettargetranges() returns an array of static ranges that will be affected by a change to the dom if the input event is not canceled. specifications specification status comment input events level 2the definition of 'inputevent' in that speci...

Intersection Observer API - Web APIs
. the last box has thresholds each 25%. ...
...te id="boxtemplate"> <div class="samplebox"> <div class="label topleft"></div> <div class="label topright"></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolu...
...ox" + (i+1); template.queryselector(".samplebox").id = boxid; wrapper.appendchild(document.importnode(template, true)); // set up the observer for this box observeroptions.threshold = thresholdsets[i]; observers[i] = new intersectionobserver(intersectioncallback, observeroptions); observers[i].observe(document.queryselector("#" + boxid)); } // scroll to the starting position document.scrollingelement.scrolltop = wrapper.firstelementchild.getboundingclientrect().top + window.scrolly; document.scrollingelement.scrollleft = 750; } intersectioncallback = (entries) => { entries.foreach((entry) => { let box = entry.target; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").innerhtml = visiblepct; box.q...

MediaSessionActionDetails - Web APIs
skipping through it. this property can be used to indicate that you should use the shortest possible method to seek the media. fastseek is not included on the final action in the seek sequence in this situation. ...
...this property is not present for other action types. media action types a media session action's type is specified using a string from the mediasessionaction enumerated type. values each of the actions is a common media session control request. ...
...ese in order to allow that type of action to be performed. the following strings identify the currently available types of media session action: nexttrack advances playback to the next track. pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. the mediasessionactiondetails property seekoffset specifies the amount of time to seek backward. seekforward seeks forward from the current position through the media. the mediasessionactiondetails property seekoffset specifies the amount of time to seek forward. seekto moves the playback position to the specified time within the media. the time to which to seek is specified in the mediasess...

MouseEvent() - Web APIs
the mouseevent() constructor creates a new mouseevent. syntax event = new mouseevent(typearg, mouseeventinit); values typearg is a domstring representing the name of the event. ...
...a domstring representing the name of the event. mouseeventinit optional is a mouseeventinit dictionary, having the following fields: "screenx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "screeny", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. ...
...0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "screeny", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "clientx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer. "clienty", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client window of the user's screen; setting this value doesn't move the mouse pointer. "ctrlkey", optional and defaulting to false, of type boolean, that indicates if the ctrl...

NodeIterator.whatToShow - Web APIs
sk are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a nodeiterator or treewalker with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 ...
... shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a nodeiterator or treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a nodeiterator or treewalker with a notation node as its root; in this case, it mea...
...he document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a nodeiterator or treewalker with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element + nodefilter.

NodeIterator - Web APIs
constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a nodeiterator with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_...
...shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a nodeiterator with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a nodeiterator with a notation node as its root; in this case, it means t...
...of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a nodeiterator with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. nodeiterator.filter read only returns a nodefilter used to select the relevant nodes. nodeiterator.

PannerNode.PannerNode() - Web APIs
. ...
...neroptions dictionary object defining the properties you want the pannernode to have (it also inherits the options defined in the audionodeoptions dictionary.): panningmodel: the pannernode.panningmodel you want the pannernode to have (the default is equalpower.) distancemodel: the pannernode.distancemodel you want the pannernode to have (the default is inverse.) positionx: the pannernode.positionx you want the pannernode to have (the default is 0.) positiony: the pannernode.positiony you want the pannernode to have (the default is 0.) positionz: the pannernode.positionz you want the pannernode to have (the default is 0.) orientationx: the pannernode.orientationx you want the pannernode to have (the default is 1.) orientationy: the pannernode.orientationy you want the pannernode to...
...s value can be in the range 0–1. return value a new pannernode object instance. exceptions rangeerror the refdistance, maxdistance, or rollofffactor properties have been given a value that is outside the accepted range. invalidstateerror the coneoutergain property has been given a value outside the accepted range (0–1). example var ctx = new audiocontext(); var options = { positionx : 1, maxdistance: 5000 } var mypanner = new pannernode(ctx, options); specifications specification status comment web audio apithe definition of 'pannernode()' in that specification. working draft ...

Selection - Web APIs
a selection object represents the range of text selected by the user or the current position of the caret. to obtain a selection object for examination or manipulation, call window.getselection(). a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection and the focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button. anchor and focus should not be confused with the start and end positions of a selection. the anchor can be placed before the focus or vice-versa, depending on the direction you made your selection. properties selec...
...ber representing the offset of the selection's anchor within the focusnode. if focusnode is a text node, this is the number of characters within focusnode preceding the focus. if focusnode is an element, this is the number of child nodes of the focusnode preceding the focus. selection.iscollapsedread only returns a boolean indicating whether the selection's start and end points are at the same position. selection.rangecountread only returns the number of ranges in the selection. selection.typeread only returns a domstring describing the type of the current selection. methods selection.addrange() a range object that will be added to the selection. selection.collapse() collapses the current selection to a single point. selection.collapsetoend() collapses the selection to the end o...
...ection. selection.removerange() removes a range from the selection. selection.removeallranges() removes all ranges from the selection. selection.selectallchildren() adds all the children of the specified node to the selection. selection.setbaseandextent() sets the selection to be a range including all or parts of two specified dom nodes, and any content located between them. selection.setposition() collapses the current selection to a single point. this is an alias for collapse() — see selection.collapse() for more details. selection.tostring() returns a string currently being represented by the selection object, i.e. the currently selected text. notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g...

StaticRange - Web APIs
the dom staticrange interface extends abstractrange to provide a method to specify a range of content in the dom whose contents don't update to reflect changes which occur within the dom tree. it offers the same set of properties and methods as abstractrange. abstractrange and staticrange are not available from web workers. ...
...ate to reflect changes which occur within the dom tree. it offers the same set of properties and methods as abstractrange. abstractrange and staticrange are not available from web workers. ...
...over text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties. properties the properties below are inherited from its parent interface, abstractrange. staticrange.collapsed read only returns a boolean value which is true if the range's start and end positions are the same, resulting in a range of length 0. staticrange.endcontainer read only returns the dom node which contains the ending point of the range. the offset into the node at which the end position is located is indicated by endoffset. staticrange.endoffset read only returns an integer value indicating the offset into the node given by endcontainer at which the last character of the ran...

TouchEvent - Web APIs
nts an uievent which is sent when the state of contacts with a touch-sensitive surface changes. this surface can be a touch screen or trackpad, for example. the event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth. ...
... or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth. touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and target element. lists of touches are represented by touchlist objects. ...
...es 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. ...

Touch events - Web APIs
teraction, 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 touchevent 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-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 touchevent represents an event that occurs when the state of touches on the surface changes. touch...
...awing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly. drawing as the touches move each time one or more fingers move, a touchmove event is delivered, resulting in our handlemove() function being called. its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch. function handlemove(evt) { evt.preventdefault(); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { var color = colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { console.log("cont...
...n array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. this is done by looking at each touch's touch.identifier property. this property is a unique integer for each touch and remains consistent for each event during the duration of each finger's contact with the surface. this lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together. after drawing the line, we call array.splice() to replace the previous information about the touchpoint with the current information in the ongoingtouches array. handling the end of a touch when the user lifts a finger off the surface, a touchend event is sent. we handle this by cal...

TreeWalker.whatToShow - Web APIs
he possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 ...
...gment 1024 shows documentfragment nodes. nodefilter.show_document_type 512 shows documenttype nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means that the nota...
...re not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_entity_reference 16 shows entityreference nodes. nodefilter.show_notation 2048 shows notation nodes. this is meaningful only when creating a treewalker with a notation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. syntax nodetypes = treewalker.whattoshow; example var treewalker = document.createtreewalker( document.body, ...

UIEvent - Web APIs
the uievent interface represents simple user interface events. uievent derives from event. although the uievent.inituievent() method is kept for backward compatibility, you should create a uievent object using the uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...
...ievent derives from event. although the uievent.inituievent() method is kept for backward compatibility, you should create a uievent object using the uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...
...e uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...

VTTCue - Web APIs
its properties from texttrackcue. vttcue.region a vttregion object describing the video's sub-region that the cue will be drawn onto, or null if none is assigned. vttcue.vertical returns an enum representing the cue writing direction. vttcue.snaptolines returns true if the vttcue.line attribute is an integer number of lines or a percentage of the video size. vttcue.line returns the line positioning of the cue. this can be the string auto or a number whose interpretation depends on the value of vttcue.snaptolines. vttcue.linealign returns an enum representing the alignment of the vttcue.line. vttcue.position returns the indentation of the cue within the line. this can be the string auto or a number representing the percentage of the vttcue.region, or the video size if vttcue.region is...
...the default is auto. ...
...the default is auto. vttcue.size returns a double representing the size of the cue, as a percentage of the video size. vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box. vttcue.text returns a domstring with the contents of the cue. ...

VisualViewport - Web APIs
ve 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.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function viewporthandler() { var layoutviewport = document.getelementbyid('layoutviewport')...
...ple, 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 layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the visual // viewport's offset from the layout viewport origin. var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform...
... specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...

WebGLRenderingContext - Web APIs
ed webglprogram object. webglrenderingcontext.shadersource() sets the source code in a webglshader. webglrenderingcontext.useprogram() uses the specified webglprogram as part the current rendering state. webglrenderingcontext.validateprogram() validates a webglprogram. uniforms and attributes webglrenderingcontext.disablevertexattribarray() disables a vertex attribute array at a given position. webglrenderingcontext.enablevertexattribarray() enables a vertex attribute array at a given position. webglrenderingcontext.getactiveattrib() returns information about an active attribute variable. webglrenderingcontext.getactiveuniform() returns information about an active uniform variable. webglrenderingcontext.getattriblocation() returns the location of an attribute variable. webglre...
...ctive uniform variable. webglrenderingcontext.getattriblocation() returns the location of an attribute variable. webglrenderingcontext.getuniform() returns the value of a uniform variable at a given location. webglrenderingcontext.getuniformlocation() returns the location of a uniform variable. webglrenderingcontext.getvertexattrib() returns information about a vertex attribute at a given position. webglrenderingcontext.getvertexattriboffset() returns the address of a given vertex attribute. webglrenderingcontext.uniform[1234][fi][v]() specifies a value for a uniform variable. webglrenderingcontext.uniformmatrix[234]fv() specifies a matrix value for a uniform variable. webglrenderingcontext.vertexattrib[1234]f[v]() specifies a value for a generic vertex attribute. webglrenderingco...
...d clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px...

WebGLShader - Web APIs
gl.getshaderinfolog( shader ); throw 'could not compile webgl program. \n\n' + info; } return shader; } see webglprogram for information on attaching the shaders. examples creating a vertex shader note that there are many other strategies for writing and accessing shader source code strings. these example are for illustration purposes only. ...
...ld not compile webgl program. \n\n' + info; } return shader; } see webglprogram for information on attaching the shaders. examples creating a vertex shader note that there are many other strategies for writing and accessing shader source code strings. these example are for illustration purposes only. ...
...ile webgl program. \n\n' + info; } return shader; } see webglprogram for information on attaching the shaders. examples creating a vertex shader note that there are many other strategies for writing and accessing shader source code strings. these example are for illustration purposes only. ...

Basic concepts behind Web Audio API - Web APIs
oat32array array passed into it. analysernode.getbytetimedomaindata() copies the current waveform, or time-domain, data into a uint8array (unsigned byte array) passed into it. note: for more information, see our visualizations with web audio api article. ...
... into a uint8array (unsigned byte array) passed into it. note: for more information, see our visualizations with web audio api article. spatialisations an audio spatialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio. ...
...these respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another. ...

Example and tutorial: Simple synth keyboard - Web APIs
erating notes. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. <div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist> element which is con...
...rflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; 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: #...
... 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%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input {...

Window.pageYOffset - Web APIs
cilisis risus. duis condimentum sapien non felis cursus blandit. integer euismod lectus a ipsum pellentesque lacinia.</p> `; document.getelementbyid("frame").contentdocument .body.innerhtml = contenthtml; in this example, an <iframe> is created and filled with content, then a specific element within the document is scrolled into view in the frame. once that's done, the vertical scroll position is checked by looking at the value of pageyoffset in the frame's contentwindow. html the html is extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll. <iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementby...
...ar target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check. it then gets a reference to the element we want to scroll into view calling getelementbyid() on the frame's htmliframeelement.contentdocument. with the target element in hand, we set the scrolltop of the frame's scrollingelement to the offsettop of the target element. by doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the t...
... scroll into view calling getelementbyid() on the frame's htmliframeelement.contentdocument. with the target element in hand, we set the scrolltop of the frame's scrollingelement to the offsettop of the target element. by doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element. this will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. this prevents us from falling off the edge of the document. nobody wants to know what's out there. there might be dragons. css iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "open sans", "helvetica", "arial"; } result the result follows. note that...

Window - Web APIs
code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. ...
...thods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. ...
...n event handler property for hashchange events on the window; called when the part of the url after the hash mark ("#") changes. globaleventhandlers.oninput called when the value of an <input> element changes globaleventhandlers.onkeydown called when you begin pressing any key. see keydown event. globaleventhandlers.onkeypress called when a key (except shift, fn, and capslock) is in pressed position. see keypress event. globaleventhandlers.onkeyup called when you finish releasing any key. see keyup event. windoweventhandlers.onlanguagechange an event handler property for languagechange events on the window. globaleventhandlers.onload called after all resources and the dom are fully loaded. will not get called when the page is loaded from cache, such as with back button. windoweventhan...

Using XMLHttpRequest - Web APIs
ww-form-urlencoded foo=bar&baz=the+first+line.%0d%0athe+second+line.%0d%0a method: post; encoding type: text/plain: content-type: text/plain foo=bar baz=the first line. the second line. method: post; encoding type: multipart/form-data: content-type: multipart/form-data; boundary=---------------------------314911788813839 -----------------------------314911788813839 content-disposition: form-data; name="foo" bar -----------------------------314911788813839 content-disposition: form-data; name="baz" the first line. the second line. -----------------------------314911788813839-- however, if you are using the get method, a string like the following will be simply added to the url: ?foo=bar&baz=the%20first%20line.%0athe%20second%20line. a little vanilla framework all thes...
...*/ fo...
...e++].name))); } } else if ((sfieldtype !== "radio" && sfieldtype !== "checkbox") || ofield.checked) { /* note: this will submit _all_ submit buttons. detecting the correct one is non-trivial. ...